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

palettes that actually work

Browse source
This commit is contained in:
Henry Jameson 2024-10-01 00:42:33 +03:00
commit f0957bdb4f
12 changed files with 393 additions and 170 deletions
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,