Transparency works without exploding now. All nice.
This commit is contained in:
Henry Jameson
parent
96804d42f0
commit
4d77b0c86b
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue