aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/style_switcher/style_switcher.js110
-rw-r--r--src/components/style_switcher/style_switcher.vue60
-rw-r--r--src/i18n/en.json1
-rw-r--r--src/services/color_convert/color_convert.js7
-rw-r--r--src/services/style_setter/style_setter.js18
5 files changed, 122 insertions, 74 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 5f76c038..f74337fd 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -9,17 +9,27 @@ export default {
availableStyles: [],
selected: this.$store.state.config.theme,
invalidThemeImported: false,
- bgColorLocal: '',
- bgOpacityLocal: 0,
- btnColorLocal: '',
- btnOpacityLocal: '',
textColorLocal: '',
linkColorLocal: '',
+ bgColorLocal: '',
+ bgOpacityLocal: undefined,
+
+ btnColorLocal: '',
+ btnTextColorLocal: undefined,
+ btnOpacityLocal: undefined,
+
+ inputColorLocal: undefined,
+ inputTextColorLocal: undefined,
+ inputOpacityLocal: undefined,
+
panelColorLocal: undefined,
+ panelTextColorLocal: undefined,
panelOpacityLocal: undefined,
+
topBarColorLocal: undefined,
+ topBarTextColorLocal: undefined,
topBarOpacityLocal: undefined,
redColorLocal: '',
@@ -49,6 +59,9 @@ export default {
this.normalizeLocalState(this.$store.state.config.customTheme)
},
computed: {
+ selectedVersion () {
+ return Array.isArray(this.selected) ? 1 : 2
+ },
currentTheme () {
return {
colors: {
@@ -76,8 +89,11 @@ export default {
},
previewRules () {
try {
- const generated = StyleSetter.generatePreset(this.currentTheme.colors)
- return [generated.colorRules, generated.radiiRules].join(';')
+ if (!this.currentTheme.colors.bg) {
+ return ''
+ }
+ const generated = StyleSetter.generatePreset(this.currentTheme)
+ return [generated.colorRules, generated.radiiRules, 'color: var(--text)'].join(';')
} catch (e) {
console.error('CATCH')
console.error(e)
@@ -93,9 +109,8 @@ export default {
exportCurrentTheme () {
const stringified = JSON.stringify({
// To separate from other random JSON files and possible future theme formats
- _pleroma_theme_version: 1,
- colors: this.$store.state.config.colors,
- radii: this.$store.state.config.radii
+ _pleroma_theme_version: 2,
+ theme: this.currentTheme
}, null, 2) // Pretty-print and indent with 2 spaces
// Create an invisible link with a data url and simulate a click
@@ -123,7 +138,9 @@ export default {
try {
const parsed = JSON.parse(target.result)
if (parsed._pleroma_theme_version === 1) {
- this.normalizeLocalState(parsed.colors, parsed.radii)
+ this.normalizeLocalState(parsed, 1)
+ } else if (parsed._pleroma_theme_version === 2) {
+ this.normalizeLocalState(parsed.theme)
} else {
// A theme from the future, spooky
this.invalidThemeImported = true
@@ -162,67 +179,68 @@ export default {
})
},
- normalizeLocalState (input) {
+ clearV1 () {
+ this.panelColorLocal = undefined
+ this.topBarColorLocal = undefined
+ this.btnTextColorLocal = undefined
+ this.btnOpacityLocal = undefined
+
+ this.inputColorLocal = undefined
+ this.inputTextColorLocal = undefined
+ this.inputOpacityLocal = undefined
+
+ this.panelColorLocal = undefined
+ this.panelTextColorLocal = undefined
+ this.panelOpacityLocal = undefined
+
+ this.topBarColorLocal = undefined
+ this.topBarTextColorLocal = undefined
+ this.topBarOpacityLocal = undefined
+ },
+
+ normalizeLocalState (input, version = 2) {
const colors = input.colors || input
const radii = input.radii || input
- let i = 0
- console.log('BENIS')
- console.log(colors)
- console.log(i++)
this.bgColorLocal = rgb2hex(colors.bg)
- console.log(i++)
this.btnColorLocal = rgb2hex(colors.btn)
- console.log(i++)
this.textColorLocal = rgb2hex(colors.text || colors.fg)
- console.log(i++)
this.linkColorLocal = rgb2hex(colors.link)
- console.log(i++)
- this.panelColorLocal = colors.panel ? rgb2hex(colors.panel) : undefined
- console.log(i++)
- this.topBarColorLocal = colors.topBad ? rgb2hex(colors.topBar) : undefined
- console.log(i++)
+ if (version === 1) {
+ this.clearV1()
+ }
+
+ this.panelColorLocal = rgb2hex(colors.panel)
+ this.topBarColorLocal = rgb2hex(colors.topBar)
this.redColorLocal = rgb2hex(colors.cRed)
- console.log(i++)
- console.log('red')
- console.log(colors.cRed)
- console.log(this.redColorLocal)
this.blueColorLocal = rgb2hex(colors.cBlue)
- console.log(i++)
- console.log('blue', this.blueColorLocal, colors.cBlue)
this.greenColorLocal = rgb2hex(colors.cGreen)
- console.log(i++)
this.orangeColorLocal = rgb2hex(colors.cOrange)
- console.log(i++)
this.btnRadiusLocal = radii.btnRadius || 4
- console.log(i++)
this.inputRadiusLocal = radii.inputRadius || 4
- console.log(i++)
this.panelRadiusLocal = radii.panelRadius || 10
- console.log(i++)
this.avatarRadiusLocal = radii.avatarRadius || 5
- console.log(i++)
this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
- console.log(i++)
this.tooltipRadiusLocal = radii.tooltipRadius || 2
- console.log(i++)
this.attachmentRadiusLocal = radii.attachmentRadius || 5
- console.log(i++)
}
},
watch: {
selected () {
- this.bgColorLocal = this.selected[1]
- this.btnColorLocal = this.selected[2]
- this.textColorLocal = this.selected[3]
- this.linkColorLocal = this.selected[4]
- this.redColorLocal = this.selected[5]
- this.greenColorLocal = this.selected[6]
- this.blueColorLocal = this.selected[7]
- this.orangeColorLocal = this.selected[8]
+ if (this.selectedVersion === 1) {
+ this.clearV1();
+ this.bgColorLocal = this.selected[1]
+ this.btnColorLocal = this.selected[2]
+ this.textColorLocal = this.selected[3]
+ this.linkColorLocal = this.selected[4]
+ this.redColorLocal = this.selected[5]
+ this.greenColorLocal = this.selected[6]
+ this.blueColorLocal = this.selected[7]
+ this.orangeColorLocal = this.selected[8]
+ }
}
}
}
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 339d7c3d..521683be 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -52,44 +52,65 @@
<div class="color-item">
<ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="bgOpacity" v-model="bgOpacityLocal" fallback="1"/>
+ <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
+ <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
</div>
<div class="color-item">
<ColorInput name="fgColor" v-model="btnColorLocal" :label="$t('settings.foreground')"/>
- <OpacityInput name="fgOpacity" v-model="btnOpacityLocal" fallback="1"/>
+ <OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/>
+ <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="textColorLocal"/>
+ <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/>
</div>
<div class="color-item">
- <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
+ <ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
+ <ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
</div>
<div class="color-item">
- <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
+ <ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
+ <ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
+ </div>
+ <div class="color-item wide">
+ <h4>Alert opacity</h4>
+ <OpacityInput name="alertOpacity" v-model="alertOpacityLocal" fallback="1"/>
</div>
</div>
<h3>More customs!</h3>
<div>
<div class="color-item">
- <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" label="Panel header"/>
+ <h4>Panel header</h4>
+ <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
+ <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="textColorLocal" :label="$t('settings.links')"/>
</div>
<div class="color-item">
- <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" label="Top bar"/>
+ <h4>Top bar</h4>
+ <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" :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')"/>
</div>
- </div>
-
- <h3>Rainbows!!!</h3>
- <div>
<div class="color-item">
- <ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
+ <h4>Inputs</h4>
+ <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="btnColorLocal" :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')"/>
</div>
<div class="color-item">
- <ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
+ <h4>Buttons</h4>
+ <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+ <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/>
+ <ColorInput name="buttonTextColor" v-model="buttonTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
</div>
<div class="color-item">
- <ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
+ <h4>Borders</h4>
+ <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" label="Color"/>
+ <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/>
</div>
<div class="color-item">
- <ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
+ <h4>Faint text</h4>
+ <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/>
+ <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/>
</div>
</div>
</div>
@@ -212,7 +233,10 @@
flex-direction: column;
flex: 1 1 0;
- &:nth-child(2n+1) {
+ &.wide {
+ min-width: 60%
+ }
+ &:not(.wide):nth-child(2n+1) {
margin-right: 7px;
}
@@ -222,14 +246,16 @@
align-items: baseline;
}
+ h4 {
+ margin-top: 1em;
+ }
+
label {
color: var(--faint, $fallback--faint);
}
.opacity-control {
margin-top: 5px;
- height: 12px;
- line-height: 12px;
- font-size: 12px;
+ margin-bottom: 5px;
}
}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8c7360e9..d825dcc1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -108,6 +108,7 @@
"follow_import_error": "Error importing followers",
"follows_imported": "Follows imported! Processing them will take a while.",
"foreground": "Foreground",
+ "opacity": "Opacity",
"general": "General",
"hide_attachments_in_convo": "Hide attachments in conversations",
"hide_attachments_in_tl": "Hide attachments in timeline",
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index efb43327..ae5d5a31 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -1,7 +1,12 @@
import { map } from 'lodash'
const rgb2hex = (r, g, b) => {
- console.log(r)
+ if (r === null || typeof r === 'undefined') {
+ return undefined
+ }
+ if (r[0] === '#') {
+ return r
+ }
if (typeof r === 'object') {
({ r, g, b } = r)
}
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 72782594..2a803a4f 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -70,7 +70,7 @@ const getTextColor = function (bg, text) {
}
const setColors = (input, commit) => {
- const { colorRules, radiiRules, col } = generatePreset(input)
+ const { colorRules, radiiRules } = generatePreset(input)
const head = document.head
const body = document.body
body.style.display = 'none'
@@ -86,10 +86,11 @@ const setColors = (input, commit) => {
// commit('setOption', { name: 'colors', value: htmlColors })
// commit('setOption', { name: 'radii', value: radii })
- commit('setOption', { name: 'customTheme', value: col })
+ commit('setOption', { name: 'customTheme', value: input })
}
const generatePreset = (input) => {
+ console.log(input)
const radii = input.radii || {
btnRadius: input.btnRadius,
inputRadius: input.inputRadius,
@@ -116,8 +117,6 @@ const generatePreset = (input) => {
colors.bg = col.bg // background
colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb // hilighted bg
- console.log(colors.bg)
- console.log(colors.lightBg)
colors.btn = col.btn || { r: 0, g: 0, b: 0 }
colors.btnText = getTextColor(colors.btn, colors.text)
@@ -151,8 +150,7 @@ const generatePreset = (input) => {
return {
colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
- radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
- col
+ radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';')
}
}
@@ -162,7 +160,7 @@ const setPreset = (val, commit) => {
.then((themes) => {
const theme = themes[val] ? themes[val] : themes['pleroma-dark']
const bgRgb = hex2rgb(theme[1])
- const fgRgb = hex2rgb(theme[2])
+ const btnRgb = hex2rgb(theme[2])
const textRgb = hex2rgb(theme[3])
const linkRgb = hex2rgb(theme[4])
@@ -171,9 +169,9 @@ const setPreset = (val, commit) => {
const cBlueRgb = hex2rgb(theme[7] || '#0000FF')
const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00')
- const col = {
+ const colors = {
bg: bgRgb,
- fg: fgRgb,
+ btn: btnRgb,
text: textRgb,
link: linkRgb,
cRed: cRedRgb,
@@ -189,7 +187,7 @@ const setPreset = (val, commit) => {
// load config -> set preset -> wait for styles.json to load ->
// load persisted state -> set colors -> styles.json loaded -> set colors
if (!window.themeLoaded) {
- setColors(col, commit)
+ setColors({ colors }, commit)
}
})
}
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 19:23:27 +0000