From 9f7af191e8a77a0c5620c8698cc7b26dde02868b Mon Sep 17 00:00:00 2001 From: Henry Jameson <me@hjkos.com> Date: Mon, 13 Jan 2020 22:19:19 +0200 Subject: [PATCH] tabs & toggled (ex pressed) buttons --- src/App.scss | 22 ++++++++--- .../follow_button/follow_button.vue | 2 +- .../moderation_tools/moderation_tools.vue | 2 +- .../style_switcher/style_switcher.vue | 23 +++++++++++ src/components/tab_switcher/tab_switcher.scss | 7 ++++ src/components/user_card/user_card.vue | 10 +---- src/services/theme_data/theme_data.service.js | 39 +++++++++++++++++++ 7 files changed, 90 insertions(+), 15 deletions(-) diff --git a/src/App.scss b/src/App.scss index 7f404bc6..70983fe2 100644 --- a/src/App.scss +++ b/src/App.scss @@ -113,11 +113,11 @@ button { background-color: var(--btnDisabled, $fallback--fg) } - &.pressed { - color: $fallback--faint; - color: var(--faint, $fallback--faint); - background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg) + &.toggled { + color: $fallback--text; + color: var(--btnToggledText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--btnToggled, $fallback--fg) } &.danger { @@ -385,6 +385,13 @@ i[class*=icon-] { color: $fallback--text; color: var(--btnTopBarDisabledText, $fallback--text); } + + &.toggled { + color: $fallback--text; + color: var(--btnTopBarToggledText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--btnTopBarToggled, $fallback--fg) + } } @@ -565,6 +572,11 @@ main-router { color: $fallback--text; color: var(--btnPanelDisabledText, $fallback--text); } + + &.toggled { + color: $fallback--text; + color: var(--btnPanelToggledText, $fallback--text); + } } a { diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue index f0cbb94b..bfdc137b 100644 --- a/src/components/follow_button/follow_button.vue +++ b/src/components/follow_button/follow_button.vue @@ -1,7 +1,7 @@ <template> <button class="btn btn-default follow-button" - :class="{ pressed: isPressed }" + :class="{ toggled: isPressed }" :disabled="inProgress" :title="title" @click="onClick" diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue index 006d6373..e78e05f1 100644 --- a/src/components/moderation_tools/moderation_tools.vue +++ b/src/components/moderation_tools/moderation_tools.vue @@ -123,7 +123,7 @@ </div> <button class="btn btn-default btn-block" - :class="{ pressed: showDropDown }" + :class="{ toggled: showDropDown }" > {{ $t('user_card.admin_menu.moderation') }} </button> diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 3921c953..2fca5570 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -376,6 +376,29 @@ /> <ContrastRatio :contrast="previewContrast.btnDisabledText" /> </div> + <div class="color-item"> + <h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4> + <ColorInput + v-model="tabColorLocal" + name="tabColor" + :fallback="previewTheme.colors.tab" + :label="$t('settings.background')" + /> + <ColorInput + v-model="tabTextColorLocal" + name="tabTextColor" + :fallback="previewTheme.colors.tabText" + :label="$t('settings.text')" + /> + <ContrastRatio :contrast="previewContrast.tabText" /> + <ColorInput + v-model="tabActiveTextColorLocal" + name="tabActiveTextColor" + :fallback="previewTheme.colors.tabActiveText" + :label="$t('settings.text')" + /> + <ContrastRatio :contrast="previewContrast.tabActiveText" /> + </div> <div class="color-item"> <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4> <ColorInput diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index 3e5eacd5..df585faa 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -52,6 +52,11 @@ margin-bottom: 6px - 99px; white-space: nowrap; + color: $fallback--text; + color: var(--tabText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--tab, $fallback--fg); + &:not(.active) { z-index: 4; @@ -63,6 +68,8 @@ &.active { background: transparent; z-index: 5; + color: $fallback--text; + color: var(--tabActiveText, $fallback--text); } img { diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 93d55fff..e286ceea 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -151,7 +151,7 @@ </ProgressButton> <ProgressButton v-else - class="btn btn-default pressed" + class="btn btn-default toggled" :click="unsubscribeUser" :title="$t('user_card.unsubscribe')" > @@ -162,7 +162,7 @@ <div> <button v-if="user.muted" - class="btn btn-default btn-block pressed" + class="btn btn-default btn-block toggled" @click="unmuteUser" > {{ $t('user_card.muted') }} @@ -538,12 +538,6 @@ button { margin: 0; - - &.pressed { - // TODO: This should be themed. - border-bottom-color: rgba(255, 255, 255, 0.2); - border-top-color: rgba(0, 0, 0, 0.2); - } } } } diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index c5dd8047..a345d996 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -219,6 +219,19 @@ export const SLOT_INHERITANCE = { textColor: 'preserve' }, + // Tabs + tab: '--btn', + tabText: { + depends: ['btnText'], + layer: 'btn', + textColor: true + }, + tabActiveText: { + depends: ['text'], + layer: 'bg', + textColor: true + }, + // Buttons btn: '--fg', btnText: { @@ -239,6 +252,7 @@ export const SLOT_INHERITANCE = { textColor: true }, + // Buttons: pressed btnPressed: '--btn', btnPressedText: { depends: ['btnText'], @@ -259,6 +273,31 @@ export const SLOT_INHERITANCE = { textColor: true }, + // Buttons: toggled + btnToggled: { + depends: ['btn'], + color: (mod, btn) => brightness(mod * 20, btn).rgb + }, + btnToggledText: { + depends: ['btnText'], + layer: 'btn', + variant: 'btnToggled', + textColor: true + }, + btnToggledPanelText: { + depends: ['btnPanelText'], + layer: 'btnPanel', + variant: 'btnToggled', + textColor: true + }, + btnToggledTopBarText: { + depends: ['btnTopBarText'], + layer: 'btnTopBar', + variant: 'btnToggled', + textColor: true + }, + + // Buttons: disabled btnDisabled: { depends: ['btn', 'bg'], color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)