added more slots to UI

This commit is contained in:
Henry Jameson 2020-01-12 23:41:11 +02:00
parent 21d9c87b34
commit 40ba3e2252
4 changed files with 51 additions and 9 deletions

View file

@ -104,8 +104,10 @@
.result-fill { .result-fill {
height: 100%; height: 100%;
position: absolute; position: absolute;
color: $fallback--text;
color: var(--pollText, $fallback--text);
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--linkBg, $fallback--lightBg); background-color: var(--poll, $fallback--lightBg);
border-radius: $fallback--panelRadius; border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius); border-radius: var(--panelRadius, $fallback--panelRadius);
top: 0; top: 0;

View file

@ -215,20 +215,20 @@
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.alertErrorText" :fallback="previewTheme.colors.alertErrorText"
/> />
<ContrastRatio :contrast="previewContrast.alertError" /> <ContrastRatio :contrast="previewContrast.alertErrorText" large="1"/>
<ColorInput <ColorInput
v-model="alertWarningColorLocal" v-model="alertWarningColorLocal"
name="alertWarning" name="alertWarning"
:label="$t('settings.style.advanced_colors.alert_warning')" :label="$t('settings.style.advanced_colors.alert_warning')"
:fallback="previewTheme.colors.alertWarning" :fallback="previewTheme.colors.alertWarning"
/> />
<ContrastRatio :contrast="previewContrast.alertWarning" />
<ColorInput <ColorInput
v-model="alertWarningTextColorLocal" v-model="alertWarningTextColorLocal"
name="alertWarningText" name="alertWarningText"
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.alertWarningText" :fallback="previewTheme.colors.alertWarningText"
/> />
<ContrastRatio :contrast="previewContrast.alertWarningText" large="1"/>
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4> <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
@ -238,6 +238,13 @@
:label="$t('settings.style.advanced_colors.badge_notification')" :label="$t('settings.style.advanced_colors.badge_notification')"
:fallback="previewTheme.colors.badgeNotification" :fallback="previewTheme.colors.badgeNotification"
/> />
<ColorInput
v-model="badgeNotificationTextColorLocal"
name="badgeNotificationText"
:label="$t('settings.text')"
:fallback="previewTheme.colors.badgeNotificationText"
/>
<ContrastRatio :contrast="previewContrast.badgeNotificationText" large="1" />
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4> <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
@ -388,7 +395,7 @@
v-model="underlayColorLocal" v-model="underlayColorLocal"
name="underlay" name="underlay"
:label="$t('settings.style.advanced_colors.underlay')" :label="$t('settings.style.advanced_colors.underlay')"
fallback="#000000" :fallback="previewTheme.colors.underlay"
/> />
<OpacityInput <OpacityInput
v-model="underlayOpacityLocal" v-model="underlayOpacityLocal"
@ -397,6 +404,30 @@
:disabled="underlayOpacityLocal === 'transparent'" :disabled="underlayOpacityLocal === 'transparent'"
/> />
</div> </div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
<ColorInput
v-model="pollColorLocal"
name="poll"
:label="$t('settings.background')"
:fallback="previewTheme.colors.poll"
/>
<ColorInput
v-model="pollTextColorLocal"
name="poll"
:label="$t('settings.text')"
:fallback="previewTheme.colors.pollText"
/>
</div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
<ColorInput
v-model="iconColorLocal"
name="poll"
:label="$t('settings.style.advanced_colors.icons')"
:fallback="previewTheme.colors.icon"
/>
</div>
</div> </div>
<div <div

View file

@ -431,7 +431,9 @@
"buttons": "Buttons", "buttons": "Buttons",
"inputs": "Input fields", "inputs": "Input fields",
"faint_text": "Faded text", "faint_text": "Faded text",
"underlay": "Underlay" "underlay": "Underlay",
"poll": "Poll graph",
"icons": "Icons"
}, },
"radii": { "radii": {
"_tab_label": "Roundness" "_tab_label": "Roundness"

View file

@ -20,7 +20,8 @@ export const LAYERS = {
inputPanel: 'panel', inputPanel: 'panel',
inputTopBar: 'topBar', inputTopBar: 'topBar',
alert: 'bg', alert: 'bg',
alertPanel: 'panel' alertPanel: 'panel',
poll: 'bg'
} }
export const DEFAULT_OPACITY = { export const DEFAULT_OPACITY = {
@ -33,7 +34,8 @@ export const DEFAULT_OPACITY = {
alert: 0.5, alert: 0.5,
input: 0.5, input: 0.5,
faint: 0.5, faint: 0.5,
underlay: 0.15 underlay: 0.15,
poll: 1
} }
export const SLOT_INHERITANCE = { export const SLOT_INHERITANCE = {
@ -65,9 +67,14 @@ export const SLOT_INHERITANCE = {
color: (mod, fg) => brightness(2 * mod, fg).rgb color: (mod, fg) => brightness(2 * mod, fg).rgb
}, },
linkBg: { poll: {
depends: ['accent', 'bg'], depends: ['accent', 'bg'],
color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg).rgb color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg)
},
pollText: {
depends: ['text'],
layer: 'poll',
textColor: true
}, },
icon: { icon: {