From 53576df72aff5405ab30764e5cfcf2162bde37bc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 24 Jan 2020 00:02:16 +0200
Subject: [PATCH] popover/selected menu improvements
---
src/components/emoji_input/emoji_input.vue | 11 +++--
src/components/popper/popper.scss | 7 ++-
src/components/side_drawer/side_drawer.vue | 7 ++-
.../style_switcher/style_switcher.vue | 29 ++++++++++++
src/services/theme_data/pleromafe.js | 44 ++++++++++++++++---
5 files changed, 87 insertions(+), 11 deletions(-)
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 46ed6f257..9c2501a99 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -109,10 +109,13 @@
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
box-shadow: var(--popupShadow);
min-width: 75%;
- background: $fallback--bg;
- background: var(--bg, $fallback--bg);
- color: $fallback--lightText;
- color: var(--lightText, $fallback--lightText);
+ background-color: $fallback--bg;
+ background-color: var(--popover, $fallback--bg);
+ color: $fallback--link;
+ color: var(--popoverText, $fallback--link);
+ --faint: var(--popoverFaintText, $fallback--faint);
+ --faintLink: var(--popoverFaintLink, $fallback--faint);
+ --icon: var(--popoverIcon, $fallback--icon);
}
}
diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 9c2ce25f9..e70b277df 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -9,7 +9,12 @@
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
background-color: $fallback--bg;
- background-color: var(--bg, $fallback--bg);
+ background-color: var(--popover, $fallback--bg);
+ color: $fallback--text;
+ color: var(--popoverText, $fallback--text);
+ --faint: var(--popoverFaintText, $fallback--faint);
+ --faintLink: var(--popoverFaintLink, $fallback--faint);
+ --icon: var(--popoverIcon, $fallback--icon);
}
.popover-arrow {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 3188fd59a..a5b754d7c 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -223,7 +223,12 @@
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: var(--panelShadow);
background-color: $fallback--bg;
- background-color: var(--bg, $fallback--bg);
+ background-color: var(--popover, $fallback--bg);
+ color: $fallback--link;
+ color: var(--popoverText, $fallback--link);
+ --faint: var(--popoverFaintText, $fallback--faint);
+ --faintLink: var(--popoverFaintLink, $fallback--faint);
+ --icon: var(--popoverIcon, $fallback--icon);
.button-icon:before {
width: 1.1em;
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index ff7f47102..1c39a806f 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -554,6 +554,35 @@
/>
<ContrastRatio :contrast="previewContrast.highlightLink" />
</div>
+ <div class="color-item">
+ <h4>{{ $t('settings.style.advanced_colors.popover') }}</h4>
+ <ColorInput
+ v-model="popoverColorLocal"
+ name="popover"
+ :label="$t('settings.background')"
+ :fallback="previewTheme.colors.popover"
+ />
+ <OpacityInput
+ v-model="popoverOpacityLocal"
+ name="popoverOpacity"
+ :fallback="previewTheme.opacity.popover"
+ :disabled="popoverOpacityLocal === 'transparent'"
+ />
+ <ColorInput
+ v-model="popoverTextColorLocal"
+ name="popoverText"
+ :label="$t('settings.text')"
+ :fallback="previewTheme.colors.popoverText"
+ />
+ <ContrastRatio :contrast="previewContrast.popoverText" />
+ <ColorInput
+ v-model="popoverLinkColorLocal"
+ name="popoverLink"
+ :label="$t('settings.links')"
+ :fallback="previewTheme.colors.popoverLink"
+ />
+ <ContrastRatio :contrast="previewContrast.popoverLink" />
+ </div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
<ColorInput
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 0deb829ff..484874d77 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -12,6 +12,8 @@ export const LAYERS = {
bg: 'underlay',
highlight: 'bg',
panel: 'bg',
+ popover: 'bg',
+ selectedMenu: 'popover',
btn: 'bg',
btnPanel: 'panel',
btnTopBar: 'topBar',
@@ -140,6 +142,35 @@ export const SLOT_INHERITANCE = {
color: (mod, bg, text) => mixrgb(bg, text)
},
+ popover: {
+ depends: ['bg'],
+ opacity: 'popover'
+ },
+ popoverFaintText: {
+ depends: ['faint'],
+ layer: 'popover',
+ textColor: true
+ },
+ popoverFaintLink: {
+ depends: ['faintLink'],
+ layer: 'popover',
+ textColor: 'preserve'
+ },
+ popoverText: {
+ depends: ['text'],
+ layer: 'popover',
+ textColor: true
+ },
+ popoverLink: {
+ depends: ['link'],
+ layer: 'popover',
+ textColor: 'preserve'
+ },
+ popoverIcon: {
+ depends: ['popover', 'popoverText'],
+ color: (mod, bg, text) => mixrgb(bg, text)
+ },
+
selectedPost: '--highlight',
selectedPostFaintText: {
depends: ['highlightFaintText'],
@@ -170,28 +201,31 @@ export const SLOT_INHERITANCE = {
color: (mod, bg, text) => mixrgb(bg, text)
},
- selectedMenu: '--highlight',
+ selectedMenu: {
+ depends: ['popover'],
+ color: (mod, bg) => brightness(5 * mod, bg).rgb
+ },
selectedMenuFaintText: {
depends: ['highlightFaintText'],
- layer: 'highlight',
+ layer: 'selectedMenu',
variant: 'selectedMenu',
textColor: true
},
selectedMenuFaintLink: {
depends: ['highlightFaintLink'],
- layer: 'highlight',
+ layer: 'selectedMenu',
variant: 'selectedMenu',
textColor: 'preserve'
},
selectedMenuText: {
depends: ['highlightText'],
- layer: 'highlight',
+ layer: 'selectedMenu',
variant: 'selectedMenu',
textColor: true
},
selectedMenuLink: {
depends: ['highlightLink'],
- layer: 'highlight',
+ layer: 'selectedMenu',
variant: 'selectedMenu',
textColor: 'preserve'
},
--
GitLab