therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Transparency works without exploding now. All nice.

Browse source
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
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;
}