moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Transparency works without exploding now. All nice.

This commit is contained in:
Henry Jameson 2018-10-07 22:03:34 +03:00
parent 96804d42f0
commit 4d77b0c86b
5 changed files with 87 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/opacity_input/opacity_input.vue
View File

@ -22,6 +22,16 @@
max="1"
min="0"
step=".05">
<input
:id="name"
class="input-number"
type="number"
:value="value || fallback"
:disabled="!present"
@input="$emit('input', $event.target.value)"
max="1"
min="0"
step=".05">
</div>
</template>
@ -64,12 +74,17 @@ export default {
align-self: center;
background: none;
border: none;
padding: 0;
margin: 0;
height: auto;
box-shadow: none;
min-width: 9em;
min-width: 7em;
flex: 1;
}
.input-number {
align-self: center;
margin: 0;
min-width: 4em;
flex: 0;
}
}
</style>

28
src/components/style_switcher/style_switcher.js
View File

@ -17,7 +17,6 @@ export default {
bgOpacityLocal: undefined,
fgColorLocal: '',
fgOpacityLocal: undefined,
fgTextColorLocal: undefined,
fgLinkColorLocal: undefined,
@ -37,7 +36,6 @@ export default {
topBarColorLocal: undefined,
topBarTextColorLocal: undefined,
topBarLinkColorLocal: undefined,
topBarOpacityLocal: undefined,
alertOpacityLocal: undefined,
@ -112,6 +110,15 @@ export default {
cGreen: this.cGreenColorLocal,
cOrange: this.cOrangeColorLocal
},
opacity: {
bg: this.bgOpacityLocal,
btn: this.btnOpacityLocal,
input: this.inputOpacityLocal,
panel: this.panelOpacityLocal,
topBar: this.topBarOpacityLocal,
border: this.borderOpacityLocal,
faint: this.faintOpacityLocal
},
radii: {
btnRadius: this.btnRadiusLocal,
inputRadius: this.inputRadiusLocal,
@ -136,8 +143,7 @@ export default {
}
},
previewTheme () {
if (!this.preview.theme) return { colors: {}, radii: {} }
console.log(this.preview.theme)
if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {} }
return this.preview.theme
},
previewRules () {
@ -226,7 +232,6 @@ export default {
clearV1 () {
this.bgOpacityLocal = undefined
this.fgOpacityLocal = undefined
this.fgTextColorLocal = undefined
this.fgLinkColorLocal = undefined
this.btnColorLocal = undefined
@ -239,6 +244,7 @@ export default {
this.panelColorLocal = undefined
this.panelTextColorLocal = undefined
this.panelFaintColorLocal = undefined
this.panelOpacityLocal = undefined
this.topBarColorLocal = undefined
@ -246,8 +252,6 @@ export default {
this.topBarLinkColorLocal = undefined
this.topBarOpacityLocal = undefined
this.alertOpacityLocal = undefined
this.borderColorLocal = undefined
this.borderOpacityLocal = undefined
@ -264,6 +268,7 @@ export default {
normalizeLocalState (input, version = 0) {
const colors = input.colors || input
const radii = input.radii || input
const opacity = input.opacity || input
if (version === 0) {
if (input.version) version = input.version
@ -277,11 +282,8 @@ export default {
}
}
console.log('BENIS')
console.log(version)
// Stuff that differs between V1 and V2
if (version === 1) {
console.log(colors)
this.fgColorLocal = rgb2hex(colors.btn)
this.textColorLocal = rgb2hex(colors.fg)
}
@ -302,6 +304,7 @@ export default {
this[key + 'ColorLocal'] = rgb2hex(colors[key])
})
// TODO optimize this
this.btnRadiusLocal = radii.btnRadius || 4
this.inputRadiusLocal = radii.inputRadius || 4
this.panelRadiusLocal = radii.panelRadius || 10
@ -309,6 +312,11 @@ export default {
this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
this.tooltipRadiusLocal = radii.tooltipRadius || 2
this.attachmentRadiusLocal = radii.attachmentRadius || 5
Object.entries(opacity).forEach(([k, v]) => {
if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
this[k + 'OpacityLocal'] = v
})
}
},
watch: {

24
src/components/style_switcher/style_switcher.vue
View File

@ -51,13 +51,12 @@
<div>
<div class="color-item">
<ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="bgOpacity" v-model="bgOpacityLocal" fallback="1"/>
<OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/>
<ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
<ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
</div>
<div class="color-item">
<ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
<OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/>
<ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
<ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
</div>
@ -71,7 +70,7 @@
</div>
<div class="color-item wide">
<h4>Alert opacity</h4>
<OpacityInput name="alertOpacity" v-model="alertOpacityLocal" fallback="1"/>
<OpacityInput name="alertOpacity" v-model="alertOpacityLocal" fallback="previewTheme.opacity.alert || 1"/>
</div>
</div>
@ -80,39 +79,38 @@
<div class="color-item">
<h4>Panel header</h4>
<ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
<ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
<ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
</div>
<div class="color-item">
<h4>Top bar</h4>
<ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
<ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
<ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
</div>
<div class="color-item">
<h4>Inputs</h4>
<ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="inputOpacity" v-model="inputOpacityLocal" fallback="0.5"/>
<OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/>
<ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
</div>
<div class="color-item">
<h4>Buttons</h4>
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" :fallback="previewTheme.opacity.btn || 1"/>
<ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
</div>
<div class="color-item">
<h4>Borders</h4>
<ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/>
<OpacityInput name="borderOpacity" v-model="borderOpacityLocal" fallback="0.5"/>
<OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/>
</div>
<div class="color-item">
<h4>Faint text</h4>
<ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint" :label="$t('settings.text')"/>
<OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="0.5"/>
<ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.link')"/>
<ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint || 1" :label="$t('settings.text')"/>
<ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.links')"/>
<OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="previewTheme.opacity.faint"/>
</div>
</div>
</div>
@ -255,10 +253,6 @@
label {
color: var(--faint, $fallback--faint);
}
.opacity-control {
margin-top: 5px;
margin-bottom: 5px;
}
}
.radius-item {

8
src/components/tab_switcher/tab_switcher.scss
View File

@ -17,8 +17,8 @@
.tab, &::after, &::before {
border-bottom: 1px solid;
border-bottom-color: $fallback--fg;
border-bottom-color: var(--fg, $fallback--fg);
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
}
.tab {
@ -28,8 +28,8 @@
&:not(.active) {
border-bottom: 1px solid;
border-bottom-color: $fallback--fg;
border-bottom-color: var(--fg, $fallback--fg);
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
z-index: 4;
}

54
src/services/style_setter/style_setter.js
View File

@ -90,7 +90,6 @@ const setColors = (input, commit) => {
}
const generatePreset = (input) => {
console.log(input)
const radii = input.radii || {
btnRadius: input.btnRadius,
inputRadius: input.inputRadius,
@ -101,6 +100,12 @@ const generatePreset = (input) => {
attachmentRadius: input.attachmentRadius
}
const colors = {}
const opacity = Object.assign({
alert: 0.5,
input: 0.5,
faint: 0.5
}, input.opacity)
const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
if (typeof v === 'object') {
acc[k] = v
@ -110,11 +115,13 @@ const generatePreset = (input) => {
return acc
}, {})
const isLightOnDark = convert(col.bg).hsl.l < convert(col.text).hsl.l
const mod = isLightOnDark ? 1 : -1
colors.text = col.text
colors.lightText = colors.text
colors.lightText = brightness(20 * mod, colors.text).rgb
colors.link = col.link
colors.border = col.border || col.fg
colors.faint = col.faint || col.text
colors.faint = col.faint || Object.assign({}, col.text)
colors.bg = col.bg
colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb
@ -123,21 +130,23 @@ const generatePreset = (input) => {
colors.fgText = col.fgText || getTextColor(colors.fg, colors.text)
colors.fgLink = col.fgLink || getTextColor(colors.fg, colors.link)
colors.btn = col.btn || col.fg
colors.border = col.border || brightness(20 * mod, colors.fg).rgb
colors.btn = col.btn || Object.assign({}, col.fg)
colors.btnText = col.btnText || getTextColor(colors.btn, colors.fgText)
colors.input = col.input || col.fg
colors.inputText = col.inputText || getTextColor(colors.input, colors.fgText)
colors.input = col.input || Object.assign({}, col.fg)
colors.inputText = col.inputText || getTextColor(colors.input, colors.lightText)
colors.panel = col.panel || col.fg
colors.panel = col.panel || Object.assign({}, col.fg)
colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText)
colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint)
colors.topBar = col.topBar || col.fg
colors.topBar = col.topBar || Object.assign({}, col.fg)
colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText)
colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink)
colors.faintLink = col.faintLink || col.link
colors.faintLink = col.faintLink || Object.assign({}, col.link)
colors.icon = mixrgb(colors.bg, colors.text)
@ -146,20 +155,35 @@ const generatePreset = (input) => {
colors.cGreen = col.cGreen
colors.cOrange = col.cOrange
colors.cAlertRed = col.cAlertRed || Object.assign({ a: 0.5 }, col.cRed)
colors.cAlertRed = col.cAlertRed || Object.assign({}, col.cRed)
Object.entries(opacity).forEach(([ k, v ]) => {
if (typeof v === 'undefined') return
if (k === 'alert') {
colors.cAlertRed.a = v
return
}
if (k === 'faint') {
colors[k + 'Link'].a = v
colors['panelFaint'].a = v
}
colors[k].a = v
})
const htmlColors = Object.entries(colors)
.reduce((acc, [k, v]) => {
if (!v) return acc
acc[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
acc.solid[k] = rgb2hex(v)
acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
return acc
}, {})
}, { complete: {}, solid: {} })
return {
colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
colorRules: Object.entries(htmlColors.complete).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
theme: {
colors: htmlColors,
colors: htmlColors.solid,
opacity,
radii
}
}