From e5a34870f0f7154712783fb6d9c20edf4c06ad35 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 28 Dec 2019 15:55:42 +0200
Subject: [PATCH] Accent works
---
src/App.scss | 2 +-
src/components/color_input/color_input.vue | 42 +++++++++++++++++--
.../sticker_picker/sticker_picker.vue | 2 +-
.../style_switcher/style_switcher.js | 5 ++-
.../style_switcher/style_switcher.vue | 11 ++++-
src/i18n/en.json | 1 +
src/services/style_setter/style_setter.js | 13 +++++-
static/themes/breezy-dark.json | 2 +-
static/themes/breezy-light.json | 2 +-
9 files changed, 68 insertions(+), 12 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index 754ca62e6..3b03a7619 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -198,7 +198,7 @@ input, textarea, .select {
&:checked + label::before {
box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset;
box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset;
- background-color: var(--link, $fallback--link);
+ background-color: var(--accent, $fallback--link);
}
&:disabled {
&,
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 9db62e818..fa26d0795 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -18,7 +18,7 @@
@input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
>
<label
- v-if="typeof fallback !== 'undefined'"
+ v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
class="opt-l"
:for="name + '-o'"
/>
@@ -43,9 +43,43 @@
<script>
export default {
- props: [
- 'name', 'label', 'value', 'fallback', 'disabled'
- ],
+ props: {
+ // Name of color, used for identifying
+ name: {
+ required: true,
+ type: String
+ },
+ // Readable label
+ label: {
+ required: true,
+ type: String
+ },
+ // Color value, should be required but vue cannot tell the difference
+ // between "property missing" and "property set to undefined"
+ value: {
+ required: false,
+ type: String,
+ default: undefined
+ },
+ // Color fallback to use when value is not defeind
+ fallback: {
+ required: false,
+ type: String,
+ default: undefined
+ },
+ // Disable the control
+ disabled: {
+ required: false,
+ type: Boolean,
+ default: false
+ },
+ // Show "optional" tickbox, for when value might become mandatory
+ showOptionalTickbox: {
+ required: false,
+ type: Boolean,
+ default: true
+ }
+ },
computed: {
present () {
return typeof this.value !== 'undefined'
diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index 3863908ab..dc449ccb4 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -51,7 +51,7 @@
img {
height: 100%;
&:hover {
- filter: drop-shadow(0 0 5px var(--link, $fallback--link));
+ filter: drop-shadow(0 0 5px var(--accent, $fallback--link));
}
}
}
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index ebde4475c..1e5124078 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -46,7 +46,8 @@ export default {
keepFonts: false,
textColorLocal: '',
- linkColorLocal: '',
+ accentColorLocal: undefined,
+ linkColorLocal: undefined,
bgColorLocal: '',
bgOpacityLocal: undefined,
@@ -132,6 +133,8 @@ export default {
fgText: this.fgTextColorLocal,
fgLink: this.fgLinkColorLocal,
+ accent: this.accentColorLocal,
+
panel: this.panelColorLocal,
panelText: this.panelTextColorLocal,
panelLink: this.panelLinkColorLocal,
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index ad0320412..8bbdc7b7e 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -114,9 +114,18 @@
:label="$t('settings.text')"
/>
<ContrastRatio :contrast="previewContrast.bgText" />
+ <ColorInput
+ v-model="accentColorLocal"
+ name="accentColor"
+ :fallback="previewTheme.colors.link"
+ :showOptionalTickbox="typeof linkColorLocal !== 'undefined'"
+ :label="$t('settings.accent')"
+ />
<ColorInput
v-model="linkColorLocal"
name="linkColor"
+ :fallback="previewTheme.colors.accent"
+ :showOptionalTickbox="typeof accentColorLocal !== 'undefined'"
:label="$t('settings.links')"
/>
<ContrastRatio :contrast="previewContrast.bgLink" />
@@ -336,7 +345,7 @@
<ColorInput
v-model="faintColorLocal"
name="faintColor"
- :fallback="previewTheme.colors.faint || 1"
+ :fallback="previewTheme.colors.faint"
:label="$t('settings.text')"
/>
<ColorInput
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 60fc792fe..323813f60 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -272,6 +272,7 @@
"follow_import": "Follow import",
"follow_import_error": "Error importing followers",
"follows_imported": "Follows imported! Processing them will take a while.",
+ "accent": "Accent",
"foreground": "Foreground",
"general": "General",
"hide_attachments_in_convo": "Hide attachments in conversations",
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index eaa495c4a..1e4bc59ed 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -160,7 +160,13 @@ const generateColors = (input) => {
}
return acc
}, {}))
- const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
+
+ const inputColors = input.colors || input
+
+ const compat = input.v3compat || {}
+ const compatColors = compat.colors || {}
+
+ const col = Object.entries({ ...inputColors, ...compatColors }).reduce((acc, [k, v]) => {
if (typeof v === 'object') {
acc[k] = v
} else {
@@ -174,7 +180,10 @@ const generateColors = (input) => {
colors.text = col.text
colors.lightText = brightness(20 * mod, colors.text).rgb
- colors.link = col.link
+
+ colors.accent = col.accent || col.link
+ colors.link = col.link || col.accent
+
colors.faint = col.faint || Object.assign({}, col.text)
colors.bg = col.bg
diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json
index 6119bf887..7ce41384e 100644
--- a/static/themes/breezy-dark.json
+++ b/static/themes/breezy-dark.json
@@ -50,7 +50,7 @@
"y": "0",
"blur": 0,
"spread": "1",
- "color": "--link",
+ "color": "--accent",
"alpha": "0.3",
"inset": true
},
diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json
index becf704fc..dc43f90ef 100644
--- a/static/themes/breezy-light.json
+++ b/static/themes/breezy-light.json
@@ -50,7 +50,7 @@
"y": "0",
"blur": 0,
"spread": "1",
- "color": "--link",
+ "color": "--accent",
"alpha": "0.3",
"inset": true
},
--
GitLab