diff options
Diffstat (limited to 'src/components')
| -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 |
4 files changed, 53 insertions, 7 deletions
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 |