forked from AkkomaGang/akkoma-fe
Accent works
This commit is contained in:
parent
b8f4b18ae5
commit
e5a34870f0
9 changed files with 68 additions and 12 deletions
|
@ -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 {
|
||||
&,
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -50,7 +50,7 @@
|
|||
"y": "0",
|
||||
"blur": 0,
|
||||
"spread": "1",
|
||||
"color": "--link",
|
||||
"color": "--accent",
|
||||
"alpha": "0.3",
|
||||
"inset": true
|
||||
},
|
||||
|
|
|
@ -50,7 +50,7 @@
|
|||
"y": "0",
|
||||
"blur": 0,
|
||||
"spread": "1",
|
||||
"color": "--link",
|
||||
"color": "--accent",
|
||||
"alpha": "0.3",
|
||||
"inset": true
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue