qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

palettes that actually work

Browse source
This commit is contained in:
Henry Jameson 2024-10-01 00:42:33 +03:00
parent 07a48315a1
commit f0957bdb4f
12 changed files with 393 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/button.style.js
View file

@ -63,11 +63,17 @@ export default {
}
},
{
state: ['hover', 'pressed'],
state: ['pressed', 'hover'],
directives: {
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
}
},
{
state: ['pressed', 'hover', 'focused'],
directives: {
shadow: ['--pressedButtonBevel']
}
},
{
state: ['toggled'],
directives: {

88
src/components/palette_editor/palette_editor.vue
View file

@ -1,21 +1,73 @@
<template>
<div class="PaletteEditor">
<ColorInput
v-for="key in paletteKeys"
:key="key"
:model-value="props.modelValue[key]"
:fallback="fallback(key)"
:label="$t('settings.style.themes3.editor.palette.' + key)"
@update:modelValue="value => updatePalette(key, value)"
/>
<div class="colors">
<ColorInput
v-for="key in paletteKeys"
:key="key"
:model-value="props.modelValue[key]"
:fallback="fallback(key)"
:label="$t('settings.style.themes3.palette.' + key)"
@update:modelValue="value => updatePalette(key, value)"
/>
</div>
<div class="controls">
<button
class="btn button-default"
@click="importPalette"
>
<FAIcon icon="file-import"/>
{{ $t('settings.style.themes3.palette.import') }}
</button>
<button
class="btn button-default"
@click="exportPalette"
>
<FAIcon icon="file-export"/>
{{ $t('settings.style.themes3.palette.export') }}
</button>
</div>
</div>
</template>
<script setup>
import ColorInput from 'src/components/color_input/color_input.vue'
import {
// newImporter,
newExporter
} from 'src/services/export_import/export_import.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faFileImport,
faFileExport
} from '@fortawesome/free-solid-svg-icons'
library.add(
faFileImport,
faFileExport
)
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const paletteExporter = newExporter({
filename: 'pleroma.palette.json',
getExportedObject: () => props.modelValue
})
/*
const themeImporter = newImporter({
validator: importValidator,
onImport,
onImportFailure,
})
*/
const exportPalette = () => {
paletteExporter.exportData()
}
const importPalette = () => {
// TODO
}
const paletteKeys = [
'bg',
@ -40,7 +92,7 @@ const fallback = (key) => {
return props.modelValue.accent
}
if (key.startsWith('extra')) {
return '#000000'
return '#008080'
}
}
@ -54,10 +106,18 @@ const updatePalette = (paletteKey, value) => {
<style lang="scss">
.PaletteEditor {
display: grid;
justify-content: space-around;
grid-template-columns: repeat(4, min-content);
grid-template-rows: repeat(auto-fit, min-content);
grid-gap: 0.5em;
.colors {
display: grid;
justify-content: space-around;
grid-template-columns: repeat(4, min-content);
grid-template-rows: repeat(auto-fit, min-content);
grid-gap: 0.5em;
}
.controls {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.5em;
}
}
</style>

98
src/components/settings_modal/tabs/appearance_tab.js
View file

@ -9,7 +9,7 @@ import FontControl from 'src/components/font_control/font_control.vue'
import { normalizeThemeData } from 'src/modules/interface'
import {
getThemes
getThemeResources
} from 'src/services/style_setter/style_setter.js'
import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
import { init } from 'src/services/theme_data/theme_data_3.service.js'
@ -35,6 +35,17 @@ const AppearanceTab = {
data () {
return {
availableStyles: [],
availablePalettes: [],
palettesKeys: [
'background',
'foreground',
'link',
'text',
'cRed',
'cBlue',
'cGreen',
'cOrange'
],
intersectionObserver: null,
thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
key: mode,
@ -64,29 +75,36 @@ const AppearanceTab = {
Preview
},
mounted () {
getThemes()
.then((promises) => {
return Promise.all(
Object.entries(promises)
.map(([k, v]) => v.then(res => [k, res]))
)
getThemeResources('/static/styles.json')
.then((themes) => {
this.availableStyles = Object
.entries(themes)
.map(([key, data]) => ({ key, data, name: data.name || data[0], version: 'v2' }))
})
.then(themes => themes.reduce((acc, [k, v]) => {
if (v) {
return [
...acc,
{
name: v.name || v[0],
key: k,
data: v
}
]
} else {
return acc
}
}, []))
.then((themesComplete) => {
this.availableStyles = themesComplete
getThemeResources('/static/palettes/index.json')
.then((palettes) => {
const result = {}
console.log(palettes)
Object.entries(palettes).forEach(([k, v]) => {
if (Array.isArray(v)) {
const [
name,
background,
foreground,
text,
link,
cRed = '#FF0000',
cBlue = '#0000FF',
cGreen = '#00FF00',
cOrange = '#E3FF00'
] = v
result[k] = { name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange }
} else {
result[k] = v
}
})
this.availablePalettes = result
})
if (window.IntersectionObserver) {
@ -171,18 +189,30 @@ const AppearanceTab = {
setTheme (name) {
this.$store.dispatch('setTheme', { themeName: name, saveData: true, recompile: true })
},
setPalette (name) {
this.$store.dispatch('setPalette', { paletteData: name })
},
previewTheme (key, input) {
const style = normalizeThemeData(input)
const x = 2
if (x === 1) return
const theme2 = convertTheme2To3(style)
const theme3 = init({
inputRuleset: theme2,
ultimateBackgroundColor: '#000000',
liteMode: true,
debug: true,
onlyNormalState: true
})
let theme3
if (input) {
const style = normalizeThemeData(input)
const theme2 = convertTheme2To3(style)
theme3 = init({
inputRuleset: theme2,
ultimateBackgroundColor: '#000000',
liteMode: true,
debug: true,
onlyNormalState: true
})
} else {
theme3 = init({
inputRuleset: [],
ultimateBackgroundColor: '#000000',
liteMode: true,
debug: true,
onlyNormalState: true
})
}
return getScopedVersion(
getCssRules(theme3.eager),

76
src/components/settings_modal/tabs/appearance_tab.scss Normal file
View file

@ -0,0 +1,76 @@
.appearance-tab {
.palette,
.theme-notice {
padding: 0.5em;
margin: 1em;
}
.palettes {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.5em;
}
.palette-entry {
display: flex;
align-items: center;
> label {
flex: 1 0 auto;
}
.palette-square {
flex: 0 0 auto;
display: inline-block;
min-width: 1em;
min-height: 1em;
}
}
.column-settings {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.column-settings .size-label {
display: block;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.theme-list {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: -0.5em 0;
height: 25em;
overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: stable;
border-radius: var(--roundness);
border: 1px solid var(--border);
padding: 0;
.theme-preview {
font-size: 1rem; // fix for firefox
width: 19rem;
display: flex;
flex-direction: column;
align-items: center;
margin: 0.5em;
&.placeholder {
opacity: 0.2;
}
.theme-preview-container {
pointer-events: none;
zoom: 0.5;
border: none;
border-radius: var(--roundness);
text-align: left;
}
}
}
}

102
src/components/settings_modal/tabs/appearance_tab.vue
View file

@ -6,13 +6,33 @@
class="theme-list"
ref="themeList"
>
<button
class="button-default theme-preview"
data-theme-key="stock"
@click="setTheme(null)"
>
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<component
:is="'style'"
v-html="previewTheme('stock')"
/>
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
<preview />
<h4 class="theme-name">
{{ $t('settings.style.stock_theme_used') }}
<span class="alert neutral version">v3</span>
</h4>
</button>
<button
v-if="isCustomThemeUsed"
disabled
class="button-default theme-preview"
>
<preview />
<h4 class="theme-name">{{ $t('settings.style.custom_theme_used') }}</h4>
<h4 class="theme-name">
{{ $t('settings.style.custom_theme_used') }}
<span class="alert neutral version">v2</span>
</h4>
</button>
<button
v-for="style in availableStyles"
@ -30,9 +50,31 @@
/>
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
<preview :class="{ placeholder: ready }" :id="'theme-preview-' + style.key"/>
<h4 class="theme-name">{{ style.name }}</h4>
<h4 class="theme-name">
{{ style.name }}
<span class="alert neutral version">{{ style.version }}</span>
</h4>
</button>
</ul>
<h3>{{ $t('settings.style.themes3.palette.label') }}</h3>
<div class="palettes">
<button
v-for="p in availablePalettes"
class="btn button-default palette-entry"
:key="p.name"
@click="() => setPalette(p)"
>
<label>
{{ p.name }}
</label>
<span
v-for="c in palettesKeys"
:key="c"
class="palette-square"
:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
/>
</button>
</div>
</div>
<div class="alert neutral theme-notice">
{{ $t("settings.style.appearance_tab_note") }}
@ -256,58 +298,4 @@
<script src="./appearance_tab.js"></script>
<style lang="scss">
.appearance-tab {
.theme-notice {
padding: 0.5em;
margin: 1em;
}
.column-settings {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.column-settings .size-label {
display: block;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.theme-list {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: -0.5em 0;
height: 25em;
overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: stable;
border-radius: var(--roundness);
border: 1px solid var(--border);
padding: 0;
.theme-preview {
font-size: 1rem; // fix for firefox
width: 19rem;
display: flex;
flex-direction: column;
align-items: center;
margin: 0.5em;
&.placeholder {
opacity: 0.2;
}
.theme-preview-container {
pointer-events: none;
zoom: 0.5;
border: none;
border-radius: var(--roundness);
text-align: left;
}
}
}
}
</style>
<style lang="scss" src="./appearance_tab.scss"></style>

6
src/components/settings_modal/tabs/style_tab/style_tab.vue
View file

@ -54,7 +54,7 @@
<div class="setting-item palette-editor">
<div class="label">
<label for="palette-selector">
{{ $t('settings.style.themes3.editor.palette.label') }}
{{ $t('settings.style.themes3.palette.label') }}
{{ ' ' }}
</label>
<Select
@ -62,10 +62,10 @@
id="palette-selector"
>
<option key="dark" value="dark">
{{ $t('settings.style.themes3.editor.palette.dark') }}
{{ $t('settings.style.themes3.palette.dark') }}
</option>
<option key="light" value="light">
{{ $t('settings.style.themes3.editor.palette.light') }}
{{ $t('settings.style.themes3.palette.light') }}
</option>
</Select>
</div>

34
src/components/settings_modal/tabs/theme_tab/theme_tab.js
View file

@ -5,7 +5,7 @@ import {
relativeLuminance
} from 'src/services/color_convert/color_convert.js'
import {
getThemes
getThemeResources
} from 'src/services/style_setter/style_setter.js'
import {
newImporter,
@ -125,25 +125,9 @@ export default {
created () {
const self = this
getThemes()
.then((promises) => {
return Promise.all(
Object.entries(promises)
.map(([k, v]) => v.then(res => [k, res]))
)
})
.then(themes => themes.reduce((acc, [k, v]) => {
if (v) {
return {
...acc,
[k]: v
}
} else {
return acc
}
}, {}))
getThemeResources('/static/styles.json')
.then((themesComplete) => {
self.availableStyles = themesComplete
self.availableStyles = Object.values(themesComplete)
})
},
mounted () {
@ -412,9 +396,6 @@ export default {
forceUseSource = false
) {
this.dismissWarning()
if (!source && !theme) {
throw new Error('Can\'t load theme: empty')
}
const version = (origin === 'localStorage' && !theme.colors)
? 'l1'
: fileVersion
@ -494,14 +475,7 @@ export default {
customTheme: theme,
customThemeSource: source
} = this.$store.getters.mergedConfig
if (!theme && !source) {
// Anon user or never touched themes
this.loadTheme(
this.$store.state.instance.themeData,
'defaults',
confirmLoadSource
)
} else {
if (theme || source) {
this.loadTheme(
{
theme,

37
src/i18n/en.json
View file

@ -748,11 +748,31 @@
"more_settings": "More settings",
"style": {
"custom_theme_used": "(Custom theme)",
"stock_theme_used": "(Stock theme)",
"themes2_outdated": "Editor for Themes V2 is being phased out and will eventually be replaced with a new one that takes advantage of new Themes V3 engine. It should still work but experience might be degraded and inconsistent.",
"appearance_tab_note": "Changes on this tab do not affect the theme used, so exported theme will be different from what seen in the UI",
"update_preview": "Update preview",
"themes3": {
"define": "Override",
"palette": {
"label": "Palette",
"import": "Import",
"export": "Export",
"dark": "Dark mode",
"light": "Light mode",
"bg": "Panel background",
"fg": "Buttons etc.",
"text": "Text",
"link": "Links",
"accent": "Accent color",
"cRed": "Red color",
"cBlue": "Blue color",
"cGreen": "Green color",
"cOrange": "Orange color",
"extra1": "Extra 1",
"extra2": "Extra 2",
"extra3": "Extra 3"
},
"editor": {
"title": "Style",
"new_style": "New",
@ -778,23 +798,6 @@
"preserve": "Keep color",
"no-auto": "Disabled"
},
"palette": {
"label": "Palette",
"dark": "Dark mode",
"light": "Light mode",
"bg": "Panel background",
"fg": "Buttons etc.",
"text": "Text",
"link": "Links",
"accent": "Accent color",
"cRed": "Red color",
"cBlue": "Blue color",
"cGreen": "Green color",
"cOrange": "Orange color",
"extra1": "Extra 1",
"extra2": "Extra 2",
"extra3": "Extra 3"
},
"components": {
"normal": {
"state": "Normal",

50
src/modules/interface.js
View file

@ -212,6 +212,11 @@ const interfaceMod = {
setLastTimeline ({ commit }, value) {
commit('setLastTimeline', value)
},
setPalette ({ dispatch, commit }, { paletteData }) {
console.log('PAL', paletteData)
commit('setOption', { name: 'userPalette', value: paletteData })
dispatch('setTheme', { themeName: null, recompile: true })
},
setTheme ({ commit, rootState }, { themeName, themeData, recompile, saveData } = {}) {
const {
theme: instanceThemeName
@ -221,21 +226,52 @@ const interfaceMod = {
theme: userThemeName,
customTheme: userThemeSnapshot,
customThemeSource: userThemeSource,
userPalette,
forceThemeRecompilation,
themeDebug,
theme3hacks
} = rootState.config
const userPaletteIss = (() => {
if (!userPalette) return null
const result = {
component: 'Root',
directives: {}
}
Object
.entries(userPalette)
.filter(([k]) => k !== 'name')
.forEach(([k, v]) => {
let issRootDirectiveName
switch (k) {
case 'background':
issRootDirectiveName = 'bg'
break
case 'foreground':
issRootDirectiveName = 'fg'
break
default:
issRootDirectiveName = k
}
result.directives['--' + issRootDirectiveName] = 'color | ' + v
})
return result
})()
const actualThemeName = userThemeName || instanceThemeName
const forceRecompile = forceThemeRecompilation || recompile
let promise = null
console.log('TEST', actualThemeName, themeData)
if (themeData) {
promise = Promise.resolve(normalizeThemeData(themeData))
} else if (themeName) {
promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
} else if (themeName === null) {
promise = Promise.resolve(null)
} else if (userThemeSource || userThemeSnapshot) {
promise = Promise.resolve(normalizeThemeData({
_pleroma_theme_version: 2,
@ -264,13 +300,14 @@ const interfaceMod = {
promise
.then(realThemeData => {
const theme2ruleset = convertTheme2To3(realThemeData)
const theme2ruleset = realThemeData ? convertTheme2To3(realThemeData) : null
if (saveData) {
commit('setOption', { name: 'theme', value: themeName || actualThemeName })
commit('setOption', { name: 'customTheme', value: realThemeData })
commit('setOption', { name: 'customThemeSource', value: realThemeData })
}
const hacks = []
Object.entries(theme3hacks).forEach(([key, value]) => {
@ -336,9 +373,15 @@ const interfaceMod = {
})
const ruleset = [
...theme2ruleset,
...hacks
]
if (!theme2ruleset && userPaletteIss) {
ruleset.unshift(userPaletteIss)
}
if (theme2ruleset) {
ruleset.unshift(...theme2ruleset)
}
applyTheme(
ruleset,
@ -355,6 +398,7 @@ const interfaceMod = {
export default interfaceMod
export const normalizeThemeData = (input) => {
console.log(input)
if (Array.isArray(input)) {
const themeData = { colors: {} }
themeData.colors.bg = input[1]
@ -365,7 +409,7 @@ export const normalizeThemeData = (input) => {
themeData.colors.cGreen = input[6]
themeData.colors.cBlue = input[7]
themeData.colors.cOrange = input[8]
return generatePreset(themeData).theme
return generatePreset(themeData).source || generatePreset(themeData).theme
}
let themeData, themeSource

26
src/services/style_setter/style_setter.js
View file

@ -256,13 +256,13 @@ export const applyConfig = (input) => {
body.classList.remove('hidden')
}
export const getThemes = () => {
export const getThemeResources = (url) => {
const cache = 'no-store'
return window.fetch('/static/styles.json', { cache })
return window.fetch(url, { cache })
.then((data) => data.json())
.then((themes) => {
return Object.entries(themes).map(([k, v]) => {
.then((resources) => {
return Object.entries(resources).map(([k, v]) => {
let promise = null
if (typeof v === 'object') {
promise = Promise.resolve(v)
@ -284,10 +284,26 @@ export const getThemes = () => {
return acc
}, {})
})
.then((promises) => {
return Promise.all(
Object.entries(promises)
.map(([k, v]) => v.then(res => [k, res]))
)
})
.then(themes => themes.reduce((acc, [k, v]) => {
if (v) {
return {
...acc,
[k]: v
}
} else {
return acc
}
}, {}))
}
export const getPreset = (val) => {
return getThemes()
return getThemeResources('/static/styles.json')
.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
.then((theme) => {
const isV1 = Array.isArray(theme)

32
static/palettes/index.json Normal file
View file

@ -0,0 +1,32 @@
{
"pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
"pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
"classic-dark": {
"name": "Classic Dark",
"background": "#161c20",
"foreground": "#282e32",
"text": "#b9b9b9",
"link": "#baaa9c",
"cRed": "#d31014",
"cBlue": "#0fa00f",
"cGreen": "#0095ff",
"cOrange": "#ffa500"
},
"pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
"tomorrow-night": {
"name": "Tomorrow Night",
"background": "#1d1f21",
"foreground": "#373b41",
"link": "#81a2be",
"text": "#c5c8c6",
"cRed": "#cc6666",
"cBlue": "#8abeb7",
"cGreen": "#b5bd68",
"cOrange": "#de935f",
"_cYellow": "#f0c674",
"_cPurple": "#b294bb"
},
"bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"],
"ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ],
"monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ]
}

6
static/styles.json
View file

@ -1,12 +1,6 @@
{
"pleroma-dark": "/static/themes/pleroma-dark.json",
"pleroma-light": "/static/themes/pleroma-light.json",
"pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
"classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
"bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"],
"ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ],
"monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ],
"redmond-xx": "/static/themes/redmond-xx.json",
"redmond-xx-se": "/static/themes/redmond-xx-se.json",
"redmond-xxi": "/static/themes/redmond-xxi.json",