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

updates

Browse source
This commit is contained in:
Henry Jameson 2018-11-13 16:30:01 +03:00
parent 7b657fcccd
commit 1723f427f5
21 changed files with 145 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/contrast_ratio/contrast_ratio.vue
View file

@ -1,41 +1,28 @@
<template>
<div class="contrast-ratio">
<span class="label">
Contrast:
</span>
<span>
<span>
{{contrast.text}}
<span class="contrast-ratio">
<span :title="`Contrast is ${contrast.text}`" class="rating">
<span v-if="contrast.aaa">
<i class="icon-thumbs-up-alt"/>
</span>
<span class="rating">
<span v-if="contrast.aaa">
AAA
</span>
<span v-if="!contrast.aaa && contrast.aa">
AA
</span>
<span v-if="!contrast.aaa && !contrast.aa">
bad
</span>
<span v-if="!contrast.aaa && contrast.aa">
<i class="icon-adjust"/>
</span>
<span v-if="!contrast.aaa && !contrast.aa">
<i class="icon-attention"/>
</span>
</span>
<span v-if="large">
<span>
18pt+:
<span class="rating" v-if="large" :title="`Contrast is ${contrast.text} (18pt+)`">
<span v-if="contrast.aaa">
<i class="icon-thumbs-up-alt"/>
</span>
<span class="rating">
<span v-if="contrast.aaa">
AAA
</span>
<span v-if="!contrast.aaa && contrast.aa">
AA
</span>
<span v-if="!contrast.aaa && !contrast.aa">
bad
</span>
<span v-if="!contrast.aaa && contrast.aa">
<i class="icon-adjust"/>
</span>
<span v-if="!contrast.aaa && !contrast.aa">
<i class="icon-attention"/>
</span>
</span>
</div>
</span>
</template>
<script>
@ -57,7 +44,6 @@ export default {
.rating {
display: inline-block;
min-width: 3em;
text-align: center;
}
}

8
src/components/notifications/notifications.scss
View file

@ -7,7 +7,7 @@
.unseen-count {
display: inline-block;
background-color: $fallback--cRed;
background-color: var(--cRed, $fallback--cRed);
background-color: var(--badgeNotification, $fallback--cRed);
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
border-radius: 99px;
min-width: 22px;
@ -27,7 +27,7 @@
}
.unseen {
box-shadow: inset 4px 0 0 var(--cRed, $fallback--cRed);
box-shadow: inset 4px 0 0 var(--badgeNotification, $fallback--cRed);
padding-left: 0;
}
}
@ -44,8 +44,8 @@
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
background-color: $fallback--cAlertRed;
background-color: var(--cAlertRed, $fallback--cAlertRed);
background-color: $fallback--alertError;
background-color: var(--alertError, $fallback--alertError);
padding: 2px .5em
}

10
src/components/opacity_input/opacity_input.vue
View file

@ -12,16 +12,6 @@
@input="$emit('input', !present ? fallback : undefined)"
>
<label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
<input
:id="name"
class="input-range"
type="range"
:value="value || fallback"
:disabled="!present"
@input="$emit('input', $event.target.value)"
max="1"
min="0"
step=".05">
<input
:id="name"
class="input-number"

24
src/components/style_switcher/style_switcher.js
View file

@ -39,6 +39,10 @@ export default {
topBarLinkColorLocal: undefined,
alertOpacityLocal: undefined,
alertErrorColorLocal: undefined,
badgeOpacityLocal: undefined,
badgeNotificationColorLocal: undefined,
borderColorLocal: undefined,
borderOpacityLocal: undefined,
@ -102,6 +106,9 @@ export default {
btn: this.btnColorLocal,
btnText: this.btnTextColorLocal,
alertError: this.alertErrorColorLocal,
badgeNotification: this.badgeNotificationColorLocal,
faint: this.faintColorLocal,
faintLink: this.faintLinkColorLocal,
border: this.borderColorLocal,
@ -116,6 +123,8 @@ export default {
btn: this.btnOpacityLocal,
input: this.inputOpacityLocal,
panel: this.panelOpacityLocal,
alert: this.alertOpacityLocal,
badge: this.badgeOpacityLocal,
topBar: this.topBarOpacityLocal,
border: this.borderOpacityLocal,
faint: this.faintOpacityLocal
@ -167,6 +176,7 @@ export default {
panelText: hex2rgb(colors.panelText),
btnText: hex2rgb(colors.btnText),
topBarText: hex2rgb(colors.topBarText),
inputText: hex2rgb(colors.inputText),
link: hex2rgb(colors.link),
topBarLink: hex2rgb(colors.topBarLink),
@ -181,7 +191,10 @@ export default {
bg: hex2rgb(colors.bg),
btn: hex2rgb(colors.btn),
panel: hex2rgb(colors.panel),
topBar: hex2rgb(colors.topBar)
topBar: hex2rgb(colors.topBar),
input: hex2rgb(colors.input),
alertError: hex2rgb(colors.alertError),
badgeNotification: hex2rgb(colors.badgeNotification)
}
const ratios = {
@ -198,6 +211,10 @@ export default {
btnText: getContrastRatio(worstCase(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText),
inputText: getContrastRatio(worstCase(bgs.input, opacity.input, fgs.inputText), fgs.inputText),
badgeNotification: getContrastRatio(worstCase(bgs.badgeNotification, opacity.badge, fgs.text), fgs.text),
topBarText: getContrastRatio(worstCase(bgs.topBar, opacity.topBar, fgs.topBarText), fgs.topBarText),
topBarLink: getContrastRatio(worstCase(bgs.topBar, opacity.topBar, fgs.topBarLink), fgs.topBarLink)
}
@ -317,6 +334,10 @@ export default {
this.faintColorLocal = undefined
this.faintOpacityLocal = undefined
this.faintLinkColorLocal = undefined
this.alertErrorColorLocal = undefined
this.badgeNotificationColorLocal = undefined
},
/**
@ -348,6 +369,7 @@ export default {
}
const keys = new Set(version !== 1 ? Object.keys(colors) : [])
console.log(keys)
if (version === 1) {
// V1 ignores the rest
this.clearV1()

26
src/components/style_switcher/style_switcher.vue
View file

@ -74,21 +74,27 @@
<ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
<ContrastRatio :contrast="previewContrast.bgOrange"/>
</div>
<div class="color-item wide">
<h4>Alert opacity</h4>
<OpacityInput name="alertOpacity" v-model="alertOpacityLocal" fallback="previewTheme.opacity.alert || 1"/>
</div>
</div>
<h3>More customs!</h3>
<div>
<div class="color-item">
<h4>Alerts</h4>
<ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.error')" :fallback="previewTheme.colors.alertError"/>
<OpacityInput name="alertOpacity" v-model="alertOpacityLocal" :fallback="previewTheme.opacity.alert || 1"/>
</div>
<div class="color-item">
<h4>Alerts</h4>
<ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.notification')" :fallback="previewTheme.colors.badgeNotification"/>
<ContrastRatio :contrast="previewContrast.badgeNotification"/>
<OpacityInput name="badgeOpacity" v-model="badgeOpacityLocal" :fallback="previewTheme.opacity.badge || 1"/>
</div>
<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="previewTheme.opacity.panel || 1"/>
<ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
<ContrastRatio :contrast="previewContrast.panelText" large="1"/>
<ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
</div>
<div class="color-item">
<h4>Top bar</h4>
@ -99,10 +105,11 @@
<ContrastRatio :contrast="previewContrast.topBarLink"/>
</div>
<div class="color-item">
<h4>Inputs</h4>
<h4>Text fields</h4>
<ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<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')"/>
<ContrastRatio :contrast="previewContrast.inputText"/>
</div>
<div class="color-item">
<h4>Buttons</h4>
@ -120,7 +127,8 @@
<h4>Faint text</h4>
<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"/>
<ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.panel')"/>
<OpacityInput name="faintOpacity" v-model="faintOpacityLocal" :fallback="previewTheme.opacity.faint || 0.5"/>
</div>
</div>
</div>
@ -259,10 +267,6 @@
h4 {
margin-top: 1em;
}
label {
color: var(--faint, $fallback--faint);
}
}
.radius-item {