aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/chat_panel/chat_panel.vue4
-rw-r--r--src/components/color_input/color_input.vue84
-rw-r--r--src/components/notifications/notifications.scss7
-rw-r--r--src/components/opacity_input/opacity_input.vue75
-rw-r--r--src/components/post_status_form/post_status_form.vue12
-rw-r--r--src/components/settings/settings.vue2
-rw-r--r--src/components/status/status.vue4
-rw-r--r--src/components/style_switcher/style_switcher.js107
-rw-r--r--src/components/style_switcher/style_switcher.vue40
-rw-r--r--src/components/tab_switcher/tab_switcher.scss8
-rw-r--r--src/components/timeline/timeline.vue10
-rw-r--r--src/components/user_card_content/user_card_content.vue16
12 files changed, 295 insertions, 74 deletions
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 30070d3e..f174319a 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -55,8 +55,8 @@
.chat-heading {
cursor: pointer;
.icon-comment-empty {
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
}
}
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
new file mode 100644
index 00000000..49d9bed7
--- /dev/null
+++ b/src/components/color_input/color_input.vue
@@ -0,0 +1,84 @@
+<template>
+<div class="color-control" :class="{ disabled: !present }">
+ <label :for="name" class="label">
+ {{label}}
+ </label>
+ <input
+ v-if="typeof fallback !== 'undefined'"
+ class="opt"
+ :id="name + '-o'"
+ type="checkbox"
+ :checked="present"
+ @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+ >
+ <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+ <input
+ :id="name"
+ class="color-input"
+ type="color"
+ :value="value || fallback"
+ :disabled="!present"
+ @input="$emit('input', $event.target.value)"
+ >
+ <input
+ :id="name + '-t'"
+ class="text-input"
+ type="text"
+ :value="value || fallback"
+ :disabled="!present"
+ @input="$emit('input', $event.target.value)"
+ >
+</div>
+</template>
+
+<script>
+export default {
+ props: [
+ 'name', 'label', 'value', 'fallback'
+ ],
+ computed: {
+ present () {
+ return typeof this.value !== 'undefined'
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+.color-control {
+ display: flex;
+
+ &.disabled *:not(.opt-l){
+ opacity: .5
+ }
+
+ .label {
+ flex: 2;
+ min-width: 7em;
+ }
+
+ .opt-l {
+ align-self: center;
+ flex: 0;
+ &::before {
+ width: 14px;
+ height: 14px;
+ }
+ }
+
+ .text-input {
+ max-width: 7em;
+ flex: 1;
+ }
+
+ .color-input {
+ flex: 0;
+ padding: 1px;
+ cursor: pointer;
+ height: 100%;
+ max-height: 29px;
+ min-width: 2em;
+ border: none;
+ }
+}
+</style>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index a137ccd5..a98c2549 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -22,8 +22,8 @@
}
.loadmore-error {
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
}
.unseen {
@@ -90,6 +90,9 @@
padding: 0.25em 0;
color: $fallback--faint;
color: var(--faint, $fallback--faint);
+ a {
+ color: var(--faintLink);
+ }
}
padding: 0;
.media-body {
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
new file mode 100644
index 00000000..cfe6de21
--- /dev/null
+++ b/src/components/opacity_input/opacity_input.vue
@@ -0,0 +1,75 @@
+<template>
+<div class="opacity-control" :class="{ disabled: !present }">
+ <label :for="name" class="label">
+ {{$t('settings.opacity')}}
+ </label>
+ <input
+ v-if="typeof fallback !== 'undefined'"
+ class="opt"
+ :id="name + '-o'"
+ type="checkbox"
+ :checked="present"
+ @input="$emit('input', !present ? fallback : undefined)"
+ >
+ <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+ <input
+ :id="name"
+ class="input-range"
+ type="range"
+ :value="value || fallback"
+ :disabled="!present"
+ @input="$emit('input', $event.target.value)"
+ max="1"
+ min="0"
+ step=".05">
+</div>
+</template>
+
+<script>
+export default {
+ props: [
+ 'name', 'value', 'fallback'
+ ],
+ computed: {
+ present () {
+ return typeof this.value !== 'undefined'
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+.opacity-control {
+ display: flex;
+
+ &.disabled *:not(.opt-l) {
+ opacity: .5
+ }
+
+ .opt-l {
+ align-self: center;
+ line-height: 0;
+ &::before {
+ width: 14px;
+ height: 14px;
+ }
+ }
+
+ .label {
+ flex: 2;
+ min-width: 7em;
+ }
+
+ .input-range {
+ align-self: center;
+ background: none;
+ border: none;
+ padding: 0;
+ margin: 0;
+ height: auto;
+ box-shadow: none;
+ min-width: 9em;
+ flex: 1;
+ }
+}
+</style>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 42e9c65c..4514e79f 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -153,8 +153,8 @@
padding-bottom: 0;
margin-left: $fallback--attachmentRadius;
margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
- background-color: $fallback--btn;
- background-color: var(--btn, $fallback--btn);
+ background-color: $fallback--fg;
+ background-color: var(--fg, $fallback--fg);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@@ -261,8 +261,8 @@
min-width: 75%;
background: $fallback--bg;
background: var(--bg, $fallback--bg);
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
}
.autocomplete {
@@ -291,8 +291,8 @@
}
&.highlighted {
- background-color: $fallback--btn;
- background-color: var(--btn, $fallback--btn);
+ background-color: $fallback--fg;
+ background-color: var(--fg, $fallback--fg);
}
}
}
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index eebb2cb7..990d1f0d 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -159,7 +159,7 @@
@import '../../_variables.scss';
.setting-item {
- border-bottom: 2px solid var(--btn, $fallback--btn);
+ border-bottom: 2px solid var(--fg, $fallback--fg);
margin: 1em 1em 1.4em;
padding-bottom: 1.4em;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index eb521280..57a007d9 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -284,8 +284,8 @@
margin-left: 0.2em;
}
a:hover i {
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
}
}
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index a1c44be3..203ca18a 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -31,6 +31,7 @@ export default {
panelColorLocal: undefined,
panelTextColorLocal: undefined,
+ panelFaintColorLocal: undefined,
panelOpacityLocal: undefined,
topBarColorLocal: undefined,
@@ -40,10 +41,17 @@ export default {
alertOpacityLocal: undefined,
- redColorLocal: '',
- blueColorLocal: '',
- greenColorLocal: '',
- orangeColorLocal: '',
+ borderColorLocal: undefined,
+ borderOpacityLocal: undefined,
+
+ faintColorLocal: undefined,
+ faintOpacityLocal: undefined,
+ faintLinkColorLocal: undefined,
+
+ cRedColorLocal: '',
+ cBlueColorLocal: '',
+ cGreenColorLocal: '',
+ cOrangeColorLocal: '',
btnRadiusLocal: '',
inputRadiusLocal: '',
@@ -74,16 +82,35 @@ export default {
return {
colors: {
bg: this.bgColorLocal,
- fg: this.fgColorLocal,
text: this.textColorLocal,
+ link: this.linkColorLocal,
+
+ fg: this.fgColorLocal,
+ fgText: this.fgTextColorLocal,
+ fgLink: this.fgLinkColorLocal,
+
panel: this.panelColorLocal,
+ panelText: this.panelTextColorLocal,
+ panelFaint: this.panelFaintColorLocal,
+
+ input: this.inputColorLocal,
+ inputText: this.inputTextColorLocal,
+
topBar: this.topBarColorLocal,
+ topBarText: this.topBarTextColorLocal,
+ topBarLink: this.topBarLinkColorLocal,
+
btn: this.btnColorLocal,
- link: this.linkColorLocal,
- cRed: this.redColorLocal,
- cBlue: this.blueColorLocal,
- cGreen: this.greenColorLocal,
- cOrange: this.orangeColorLocal
+ btnText: this.btnTextColorLocal,
+
+ faint: this.faintColorLocal,
+ faintLink: this.faintLinkColorLocal,
+ border: this.borderColorLocal,
+
+ cRed: this.cRedColorLocal,
+ cBlue: this.cBlueColorLocal,
+ cGreen: this.cGreenColorLocal,
+ cOrange: this.cOrangeColorLocal
},
radii: {
btnRadius: this.btnRadiusLocal,
@@ -197,12 +224,12 @@ export default {
},
clearV1 () {
+ this.bgOpacityLocal = undefined
this.fgOpacityLocal = undefined
this.fgTextColorLocal = undefined
this.fgLinkColorLocal = undefined
- this.panelColorLocal = undefined
- this.topBarColorLocal = undefined
+ this.btnColorLocal = undefined
this.btnTextColorLocal = undefined
this.btnOpacityLocal = undefined
@@ -216,7 +243,17 @@ export default {
this.topBarColorLocal = undefined
this.topBarTextColorLocal = undefined
+ this.topBarLinkColorLocal = undefined
this.topBarOpacityLocal = undefined
+
+ this.alertOpacityLocal = undefined
+
+ this.borderColorLocal = undefined
+ this.borderOpacityLocal = undefined
+
+ this.faintColorLocal = undefined
+ this.faintOpacityLocal = undefined
+ this.faintLinkColorLocal = undefined
},
/**
@@ -228,22 +265,42 @@ export default {
const colors = input.colors || input
const radii = input.radii || input
- this.bgColorLocal = rgb2hex(colors.bg)
- this.fgColorLocal = rgb2hex(colors.fg)
- this.textColorLocal = rgb2hex(colors.text)
- this.linkColorLocal = rgb2hex(colors.link)
+ if (version === 0) {
+ if (input.version) version = input.version
+ // Old v1 naming: fg is text, btn is foreground
+ if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
+ version = 1
+ }
+ // New v2 naming: text is text, fg is foreground
+ if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
+ version = 2
+ }
+ }
+ console.log('BENIS')
+ console.log(version)
+ // Stuff that differs between V1 and V2
if (version === 1) {
- this.clearV1()
+ console.log(colors)
+ this.fgColorLocal = rgb2hex(colors.btn)
+ this.textColorLocal = rgb2hex(colors.fg)
}
- this.panelColorLocal = rgb2hex(colors.panel)
- this.topBarColorLocal = rgb2hex(colors.topBar)
-
- this.redColorLocal = rgb2hex(colors.cRed)
- this.blueColorLocal = rgb2hex(colors.cBlue)
- this.greenColorLocal = rgb2hex(colors.cGreen)
- this.orangeColorLocal = rgb2hex(colors.cOrange)
+ const keys = new Set(version !== 1 ? Object.keys(colors) : [])
+ if (version === 1) {
+ // V1 ignores the rest
+ this.clearV1()
+ keys
+ .add('bg')
+ .add('link')
+ .add('cRed')
+ .add('cBlue')
+ .add('cGreen')
+ .add('cOrange')
+ }
+ keys.forEach(key => {
+ this[key + 'ColorLocal'] = rgb2hex(colors[key])
+ })
this.btnRadiusLocal = radii.btnRadius || 4
this.inputRadiusLocal = radii.inputRadius || 4
@@ -259,7 +316,7 @@ export default {
if (this.selectedVersion === 1) {
this.clearV1()
this.bgColorLocal = this.selected[1]
- this.btnColorLocal = this.selected[2]
+ this.fgColorLocal = this.selected[2]
this.textColorLocal = this.selected[3]
this.linkColorLocal = this.selected[4]
this.redColorLocal = this.selected[5]
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index cf1fac92..7ddc2d1c 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -58,16 +58,16 @@
<div class="color-item">
<ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
<OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/>
- <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.btnText"/>
- <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/>
+ <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
+ <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
</div>
<div class="color-item">
- <ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
- <ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
+ <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
+ <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
</div>
<div class="color-item">
- <ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
- <ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
+ <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
+ <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
</div>
<div class="color-item wide">
<h4>Alert opacity</h4>
@@ -79,38 +79,40 @@
<div>
<div class="color-item">
<h4>Panel header</h4>
- <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+ <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
- <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="textColorLocal" :label="$t('settings.links')"/>
+ <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
+ <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
</div>
<div class="color-item">
<h4>Top bar</h4>
- <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+ <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
- <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
- <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="linkColorLocal" :label="$t('settings.links')"/>
+ <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
+ <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
</div>
<div class="color-item">
<h4>Inputs</h4>
- <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+ <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="inputOpacity" v-model="inputOpacityLocal" fallback="0.5"/>
- <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
+ <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
</div>
<div class="color-item">
<h4>Buttons</h4>
- <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+ <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
- <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
+ <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
</div>
<div class="color-item">
<h4>Borders</h4>
- <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" label="Color"/>
- <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
+ <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/>
+ <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" fallback="0.5"/>
</div>
<div class="color-item">
<h4>Faint text</h4>
- <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/>
- <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
+ <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint" :label="$t('settings.text')"/>
+ <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="0.5"/>
+ <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.link')"/>
</div>
</div>
</div>
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 374a19c5..578caec2 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -17,8 +17,8 @@
.tab, &::after, &::before {
border-bottom: 1px solid;
- border-bottom-color: $fallback--btn;
- border-bottom-color: var(--btn, $fallback--btn);
+ border-bottom-color: $fallback--fg;
+ border-bottom-color: var(--fg, $fallback--fg);
}
.tab {
@@ -28,8 +28,8 @@
&:not(.active) {
border-bottom: 1px solid;
- border-bottom-color: $fallback--btn;
- border-bottom-color: var(--btn, $fallback--btn);
+ border-bottom-color: $fallback--fg;
+ border-bottom-color: var(--fg, $fallback--fg);
z-index: 4;
}
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 2dd4376a..77a9a2af 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -61,12 +61,12 @@
opacity: 0.8;
background-color: transparent;
color: $fallback--faint;
- color: var(--faint, $fallback--faint);
+ color: var(--panelFaint, $fallback--faint);
}
.loadmore-error {
- color: $fallback--fg;
- color: var(--fg, $fallback--fg);
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
}
}
@@ -79,7 +79,7 @@
border-color: var(--border, $fallback--border);
padding: 10px;
z-index: 1;
- background-color: $fallback--btn;
- background-color: var(--btn, $fallback--btn);
+ background-color: $fallback--fg;
+ background-color: var(--fg, $fallback--fg);
}
</style>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 59358040..f1b54fad 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -138,8 +138,8 @@
}
.user-info {
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
padding: 0 16px;
.container {
@@ -173,8 +173,8 @@
}
.usersettings {
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
opacity: .8;
}
@@ -193,8 +193,8 @@
}
.user-screen-name {
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
display: inline-block;
font-weight: light;
font-size: 15px;
@@ -269,8 +269,8 @@
padding: .5em 1.5em 0em 1.5em;
text-align: center;
justify-content: space-between;
- color: $fallback--lightFg;
- color: var(--lightFg, $fallback--lightFg);
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
&.clickable {
.user-count {
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-19 03:40:31 +0000