From 4b8e0f0afa2c7f1d0f4f0c2f39f289b75b3cae08 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Jan 2020 21:30:55 +0200 Subject: [PATCH] buttonPressed & buttonDisabled slots --- src/App.scss | 44 +++++++++++++++++- .../style_switcher/style_switcher.vue | 16 ++++++- src/services/theme_data/theme_data.service.js | 46 +++++++++++++++++-- 3 files changed, 100 insertions(+), 6 deletions(-) diff --git a/src/App.scss b/src/App.scss index ef139e88..7f404bc6 100644 --- a/src/App.scss +++ b/src/App.scss @@ -107,7 +107,10 @@ button { &:disabled { cursor: not-allowed; - opacity: 0.5; + color: $fallback--text; + color: var(--btnDisabledText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--btnDisabled, $fallback--fg) } &.pressed { @@ -365,6 +368,26 @@ i[class*=icon-] { height: 50px; box-sizing: border-box; + button { + &, i[class*=icon-] { + color: $fallback--text; + color: var(--btnTopBarText, $fallback--text); + } + + &:active { + background-color: $fallback--fg; + background-color: var(--btnTopBarPressed, $fallback--fg); + color: $fallback--text; + color: var(--btnTopBarPressedText, $fallback--text); + } + + &:disabled { + color: $fallback--text; + color: var(--btnTopBarDisabledText, $fallback--text); + } + } + + .logo { display: flex; position: absolute; @@ -525,6 +548,25 @@ main-router { align-self: stretch; } + button { + &, i[class*=icon-] { + color: $fallback--text; + color: var(--btnPanelText, $fallback--text); + } + + &:active { + background-color: $fallback--fg; + background-color: var(--btnPanelPressed, $fallback--fg); + color: $fallback--text; + color: var(--btnPanelPressedText, $fallback--text); + } + + &:disabled { + color: $fallback--text; + color: var(--btnPanelDisabledText, $fallback--text); + } + } + a { color: $fallback--link; color: var(--panelLink, $fallback--link) diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 613abd1f..3921c953 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -360,7 +360,21 @@ :fallback="previewTheme.colors.btnPressedText" :label="$t('settings.text')" /> - + +

{{ $t('settings.style.advanced_colors.disabled') }}

+ + +

{{ $t('settings.style.advanced_colors.borders') }}

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index dd5f8fd0..c5dd8047 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -36,7 +36,8 @@ export const DEFAULT_OPACITY = { input: 0.5, faint: 0.5, underlay: 0.15, - poll: 1 + poll: 1, + topBar: 1 } export const SLOT_INHERITANCE = { @@ -222,7 +223,8 @@ export const SLOT_INHERITANCE = { btn: '--fg', btnText: { depends: ['fgText'], - layer: 'btn' + layer: 'btn', + textColor: true }, btnPanelText: { depends: ['panelText'], @@ -257,6 +259,32 @@ export const SLOT_INHERITANCE = { textColor: true }, + btnDisabled: { + depends: ['btn', 'bg'], + color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg) + }, + btnDisabledText: { + depends: ['btnText'], + layer: 'btn', + variant: 'btnDisabled', + textColor: true, + color: (mod, text) => brightness(mod * -60, text).rgb + }, + btnDisabledPanelText: { + depends: ['btnPanelText'], + layer: 'btnPanel', + variant: 'btnDisabled', + textColor: true, + color: (mod, text) => brightness(mod * -60, text).rgb + }, + btnDisabledTopBarText: { + depends: ['btnTopBarText'], + layer: 'btnTopBar', + variant: 'btnDisabled', + textColor: true, + color: (mod, text) => brightness(mod * -60, text).rgb + }, + // Input fields input: '--fg', inputText: { @@ -329,7 +357,10 @@ export const getLayers = (layer, variant = layer, colors, opacity) => { currentLayer === layer ? colors[variant] : colors[currentLayer], - opacity[currentLayer] + // TODO: Remove this hack when opacities/layers system is improved + currentLayer.startsWith('btn') + ? opacity.btn + : opacity[currentLayer] ])) } @@ -443,11 +474,18 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu [key]: contrastRatio(bg).rgb } } else { + let color = { ...acc[deps[0]] } + if (value.color) { + const isLightOnDark = convert(bg).hsl.l < convert(color).hsl.l + const mod = isLightOnDark ? 1 : -1 + color = value.color(mod, ...deps.map((dep) => ({ ...acc[dep] }))) + } + return { ...acc, [key]: getTextColor( bg, - { ...acc[deps[0]] }, + { ...color }, value.textColor === 'preserve' ) }