diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.scss | 2 | ||||
| -rw-r--r-- | src/components/color_input/color_input.vue | 42 | ||||
| -rw-r--r-- | src/components/sticker_picker/sticker_picker.vue | 2 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 5 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 11 | ||||
| -rw-r--r-- | src/i18n/en.json | 1 | ||||
| -rw-r--r-- | src/services/style_setter/style_setter.js | 13 |
7 files changed, 66 insertions, 10 deletions
diff --git a/src/App.scss b/src/App.scss index 754ca62e..3b03a761 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 9db62e81..fa26d079 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 3863908a..dc449ccb 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 ebde4475..1e512407 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 ad032041..8bbdc7b7 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -115,8 +115,17 @@ /> <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 60fc792f..323813f6 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 eaa495c4..1e4bc59e 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 |