Accent works

This commit is contained in:
Henry Jameson 2019-12-28 15:55:42 +02:00
parent b8f4b18ae5
commit e5a34870f0
9 changed files with 68 additions and 12 deletions

View file

@ -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 {
&,

View file

@ -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'

View file

@ -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));
}
}
}

View file

@ -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,

View file

@ -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

View file

@ -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",

View file

@ -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

View file

@ -50,7 +50,7 @@
"y": "0",
"blur": 0,
"spread": "1",
"color": "--link",
"color": "--accent",
"alpha": "0.3",
"inset": true
},

View file

@ -50,7 +50,7 @@
"y": "0",
"blur": 0,
"spread": "1",
"color": "--link",
"color": "--accent",
"alpha": "0.3",
"inset": true
},