From 8a7f3fc16a511e6c5917c0e25cba1f6163659264 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Jan 2020 20:40:16 +0200 Subject: [PATCH] selectedPost and selectedMenu support --- src/components/emoji_input/emoji_input.vue | 10 ++-- src/components/nav_panel/nav_panel.vue | 20 +++---- .../selectable_list/selectable_list.vue | 10 ++-- src/components/side_drawer/side_drawer.vue | 10 ++-- src/components/status/status.vue | 10 ++-- .../style_switcher/style_switcher.vue | 46 ++++++++++++++++ src/services/theme_data/theme_data.service.js | 52 +++++++++++++++++++ 7 files changed, 128 insertions(+), 30 deletions(-) diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index dcf51ff9..46ed6f25 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -157,11 +157,11 @@ &.highlighted { background-color: $fallback--fg; - background-color: var(--lightBg, $fallback--fg); - color: var(--lightBgText, $fallback--text); - --faint: var(--lightBgFaintText, $fallback--faint); - --faintLink: var(--lightBgFaintLink, $fallback--faint); - --icon: var(--lightBgIcon, $fallback--icon); + background-color: var(--selectedMenu, $fallback--fg); + color: var(--selectedMenuText, $fallback--text); + --faint: var(--selectedMenuFaintText, $fallback--faint); + --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --icon: var(--selectedMenuIcon, $fallback--icon); } } } diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 0886bf8c..afc611ea 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -100,23 +100,23 @@ &:hover { background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: var(--selectedMenu, $fallback--lightBg); color: $fallback--link; - color: var(--lightBgText, $fallback--link); - --faint: var(--lightBgFaintText, $fallback--faint); - --faintLink: var(--lightBgFaintLink, $fallback--faint); - --icon: var(--lightBgIcon, $fallback--icon); + color: var(--selectedMenuText, $fallback--link); + --faint: var(--selectedMenuFaintText, $fallback--faint); + --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --icon: var(--selectedMenuIcon, $fallback--icon); } &.router-link-active { font-weight: bolder; background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: var(--selectedMenu, $fallback--lightBg); color: $fallback--text; - color: var(--lightBgText, $fallback--text); - --faint: var(--lightBgFaintText, $fallback--faint); - --faintLink: var(--lightBgFaintLink, $fallback--faint); - --icon: var(--lightBgIcon, $fallback--icon); + color: var(--selectedMenuText, $fallback--text); + --faint: var(--selectedMenuFaintText, $fallback--faint); + --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --icon: var(--selectedMenuIcon, $fallback--icon); &:hover { text-decoration: underline; diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue index 416c9b6a..2d1e44a3 100644 --- a/src/components/selectable_list/selectable_list.vue +++ b/src/components/selectable_list/selectable_list.vue @@ -68,11 +68,11 @@ &-item-selected-inner { background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); - color: var(--lightBgText, $fallback--text); - --faint: var(--lightBgFaintText, $fallback--faint); - --faintLink: var(--lightBgFaintLink, $fallback--faint); - --icon: var(--lightBgIcon, $fallback--icon); + background-color: var(--selectedMenu, $fallback--lightBg); + color: var(--selectedMenuText, $fallback--text); + --faint: var(--selectedMenuFaintText, $fallback--faint); + --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --icon: var(--selectedMenuIcon, $fallback--icon); } &-header { diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 6d75221f..3188fd59 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -289,12 +289,12 @@ &:hover { background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: var(--selectedMenu, $fallback--lightBg); color: $fallback--text; - color: var(--lightBgText, $fallback--text); - --faint: var(--lightBgFaintText, $fallback--faint); - --faintLink: var(--lightBgFaintLink, $fallback--faint); - --icon: var(--lightBgIcon, $fallback--icon); + color: var(--selectedMenuText, $fallback--text); + --faint: var(--selectedMenuFaintText, $fallback--faint); + --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --icon: var(--selectedMenuIcon, $fallback--icon); } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 72e9b25a..38d091ed 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -445,12 +445,12 @@ $status-margin: 0.75em; &_focused { background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: var(--selectedPost, $fallback--lightBg); color: $fallback--text; - color: var(--lightBgText, $fallback--text); - --faint: var(--lightBgFaintText, $fallback--faint); - --faintLink: var(--lightBgFaintLink, $fallback--faint); - --icon: var(--lightBgIcon, $fallback--icon); + color: var(--selectedPostText, $fallback--text); + --faint: var(--selectedPostFaintText, $fallback--faint); + --faintLink: var(--selectedPostFaintLink, $fallback--faint); + --icon: var(--selectedPostIcon, $fallback--icon); } .timeline & { diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index f2fdfea2..613abd1f 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -465,6 +465,52 @@ /> +
+

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

+ + + + + +
+
+

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

+ + + + + +
mixrgb(bg, text) }, + selectedPost: '--lightBg', + selectedPostFaintText: { + depends: ['lightBgFaintText'], + layer: 'lightBg', + textColor: true + }, + selectedPostFaintLink: { + depends: ['lightBgFaintLink'], + layer: 'lightBg', + textColor: 'preserve' + }, + selectedPostText: { + depends: ['lightBgText'], + layer: 'lightBg', + textColor: true + }, + selectedPostLink: { + depends: ['lightBgLink'], + layer: 'lightBg', + textColor: 'preserve' + }, + selectedPostIcon: { + depends: ['selectedPost', 'selectedPostText'], + color: (mod, bg, text) => mixrgb(bg, text) + }, + + selectedMenu: '--lightBg', + selectedMenuFaintText: { + depends: ['lightBgFaintText'], + layer: 'lightBg', + textColor: true + }, + selectedMenuFaintLink: { + depends: ['lightBgFaintLink'], + layer: 'lightBg', + textColor: 'preserve' + }, + selectedMenuText: { + depends: ['lightBgText'], + layer: 'lightBg', + textColor: true + }, + selectedMenuLink: { + depends: ['lightBgLink'], + layer: 'lightBg', + textColor: 'preserve' + }, + selectedMenuIcon: { + depends: ['selectedMenu', 'selectedMenuText'], + color: (mod, bg, text) => mixrgb(bg, text) + }, + lightText: { depends: ['text'], color: (mod, text) => brightness(20 * mod, text).rgb