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

Merge branch 'themes3-grand-finale-maybe' into shigusegubu-themes3

Browse source
This commit is contained in:
Henry Jameson 2024-11-12 23:24:54 +02:00
commit ca84e08247
16 changed files with 286 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/boot/after_store.js
View file

@ -390,6 +390,13 @@ const afterStoreSetup = async ({ store, i18n }) => {
app.use(store)
app.use(i18n)
// Little thing to get out of invalid theme state
window.resetThemes = () => {
store.dispatch('resetThemeV3')
store.dispatch('resetThemeV3Palette')
store.dispatch('resetThemeV2')
}
app.use(vClickOutside)
app.use(VBodyScrollLock)
app.use(VueVirtualScroller)

4
src/components/opacity_input/opacity_input.vue
View file

@ -8,7 +8,7 @@
class="label"
:class="{ faint: !present || disabled }"
>
{{ $t('settings.style.common.opacity') }}
{{ label }}
</label>
<Checkbox
v-if="typeof fallback !== 'undefined'"
@ -39,7 +39,7 @@ export default {
Checkbox
},
props: [
'name', 'modelValue', 'fallback', 'disabled'
'name', 'label', 'modelValue', 'fallback', 'disabled'
],
emits: ['update:modelValue'],
computed: {

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

@ -75,17 +75,7 @@ const paletteKeys = [
'cBlue',
'cGreen',
'cOrange',
'wallpaper',
'extra1',
'extra2',
'extra3',
'extra4',
'extra5',
'extra6',
'extra7',
'extra8',
'extra9',
'extra10'
'wallpaper'
]
const fallback = (key) => {

51
src/components/roundness_input/roundness_input.vue Normal file
View file

@ -0,0 +1,51 @@
<template>
<div
class="roundness-control style-control"
:class="{ disabled: !present || disabled }"
>
<label
:for="name"
class="label"
:class="{ faint: !present || disabled }"
>
{{ label }}
</label>
<Checkbox
v-if="typeof fallback !== 'undefined'"
:model-value="present"
:disabled="disabled"
class="opt"
@update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
/>
<input
:id="name"
class="input input-number"
type="number"
:value="modelValue || fallback"
:disabled="!present || disabled"
:class="{ disabled: !present || disabled }"
max="999"
min="0"
step="1"
@input="$emit('update:modelValue', $event.target.value)"
>
</div>
</template>
<script>
import Checkbox from '../checkbox/checkbox.vue'
export default {
components: {
Checkbox
},
props: [
'name', 'label', 'modelValue', 'fallback', 'disabled'
],
emits: ['update:modelValue'],
computed: {
present () {
return typeof this.modelValue !== 'undefined'
}
}
}
</script>

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

@ -33,7 +33,7 @@ const AppearanceTab = {
data () {
return {
availableStyles: [],
availablePalettes: [],
bundledPalettes: [],
fileImporter: newImporter({
accept: '.json, .piss',
validator: this.importValidator,
@ -41,8 +41,8 @@ const AppearanceTab = {
onImportFailure: this.onImportFailure
}),
palettesKeys: [
'background',
'foreground',
'bg',
'fg',
'link',
'text',
'cRed',
@ -103,13 +103,13 @@ const AppearanceTab = {
}))
})
updateIndex('palette').then(palettes => {
palettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
updateIndex('palette').then(bundledPalettes => {
bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
if (Array.isArray(v)) {
const [
name,
background,
foreground,
bg,
fg,
text,
link,
cRed = '#FF0000',
@ -117,9 +117,9 @@ const AppearanceTab = {
cBlue = '#0000FF',
cOrange = '#E3FF00'
] = v
this.availablePalettes.push({ key, name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange })
this.bundledPalettes.push({ key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange })
} else {
this.availablePalettes.push({ key, ...v })
this.bundledPalettes.push({ key, ...v })
}
}))
})
@ -147,6 +147,50 @@ const AppearanceTab = {
})
},
computed: {
availablePalettes () {
return [
...this.bundledPalettes,
...this.stylePalettes
]
},
stylePalettes () {
if (!this.mergedConfig.styleCustomData) return
const meta = this.mergedConfig.styleCustomData
.find(x => x.component === '@meta')
const result = this.mergedConfig.styleCustomData
.filter(x => x.component.startsWith('@palette'))
.map(x => {
const {
variant,
bg,
fg,
text,
link,
accent,
cRed,
cBlue,
cGreen,
cOrange,
wallpaper
} = x
const result = {
name: `${meta.name}: ${variant}`,
bg,
fg,
text,
link,
accent,
cRed,
cBlue,
cGreen,
cOrange,
wallpaper
}
return Object.fromEntries(Object.entries(result).filter(([k, v]) => v))
})
return result
},
noIntersectionObserver () {
return !window.IntersectionObserver
},
@ -253,6 +297,11 @@ const AppearanceTab = {
this.$store.dispatch('setPalette', name)
this.$store.dispatch('applyTheme')
},
setPaletteCustom (p) {
this.$store.dispatch('resetThemeV2')
this.$store.dispatch('setPaletteCustom', p)
this.$store.dispatch('applyTheme')
},
resetTheming (name) {
this.$store.dispatch('resetThemeV2')
this.$store.dispatch('resetThemeV3')

1
src/components/settings_modal/tabs/appearance_tab.scss
View file

@ -25,6 +25,7 @@
grid-template-columns: 1fr 1fr;
grid-gap: 0.5em;
h4,
.unsupported-theme-v2 {
grid-column: 1 / span 2;
}

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

@ -72,8 +72,9 @@
<h3>{{ $t('settings.style.themes3.palette.label') }}</h3>
<div class="palettes">
<template v-if="customThemeVersion === 'v3'">
<h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
<button
v-for="p in availablePalettes"
v-for="p in bundledPalettes"
:key="p.name"
class="btn button-default palette-entry"
:class="{ toggled: isPaletteActive(p.key) }"
@ -89,6 +90,26 @@
:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
/>
</button>
<h4 v-if="stylePalettes?.length > 0">
{{ $t('settings.style.themes3.palette.style') }}
</h4>
<button
v-for="p in stylePalettes || []"
:key="p.name"
class="btn button-default palette-entry"
:class="{ toggled: isPaletteActive(p.key) }"
@click="() => setPaletteCustom(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>
</template>
<template v-else-if="customThemeVersion === 'v2'">
<div class="alert neutral theme-notice unsupported-theme-v2">

106
src/components/settings_modal/tabs/style_tab/style_tab.js
View file

@ -1,6 +1,6 @@
import { ref, reactive, computed, watch, provide } from 'vue'
import { ref, reactive, computed, watch, watchEffect, provide } from 'vue'
import { useStore } from 'vuex'
import { get, set, unset } from 'lodash'
import { get, set, unset, throttle } from 'lodash'
import Select from 'src/components/select/select.vue'
import SelectMotion from 'src/components/select/select_motion.vue'
@ -11,6 +11,7 @@ import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
import ColorInput from 'src/components/color_input/color_input.vue'
import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
import RoundnessInput from 'src/components/roundness_input/roundness_input.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import Tooltip from 'src/components/tooltip/tooltip.vue'
import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
@ -72,6 +73,7 @@ export default {
ColorInput,
PaletteEditor,
OpacityInput,
RoundnessInput,
ContrastRatio,
Preview,
VirtualDirectivesTab
@ -99,6 +101,14 @@ export default {
].join('\n')
})
const metaRule = computed(() => ({
component: '@meta',
name: exports.name.value,
author: exports.author.value,
license: exports.license.value,
website: exports.website.value
}))
// ## Palette stuff
const palettes = reactive([
{
@ -167,6 +177,22 @@ export default {
cOrange: '#ffa500'
})
// Raw format
const palettesRule = computed(() => {
return palettes.map(palette => {
const { name, ...rest } = palette
return {
component: '@palette',
variant: name,
...Object
.entries(rest)
.filter(([k, v]) => v)
.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
}
})
})
// Text format
const palettesOut = computed(() => {
return palettes.map(({ name, ...palette }) => {
const entries = Object
@ -347,6 +373,8 @@ export default {
exports.isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
exports.editedOpacity = getEditedElement(null, 'opacity')
exports.isOpacityPresent = isElementPresent(null, 'opacity', 1)
exports.editedRoundness = getEditedElement(null, 'roundness')
exports.isRoundnessPresent = isElementPresent(null, 'roundness', 0)
exports.editedTextColor = getEditedElement('Text', 'textColor')
exports.isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')
exports.editedTextAuto = getEditedElement('Text', 'textAuto')
@ -515,6 +543,15 @@ export default {
virtualDirectives.value = value
}
// Raw format
const virtualDirectivesRule = computed(() => ({
component: 'Root',
directives: Object.fromEntries(
virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
)
}))
// Text format
const virtualDirectivesOut = computed(() => {
return [
'Root {',
@ -544,25 +581,6 @@ export default {
)
})
const paletteRule = computed(() => {
const { name, ...rest } = selectedPalette.value
return {
component: 'Root',
directives: Object
.entries(rest)
.filter(([k, v]) => v)
.map(([k, v]) => ['--' + k, v])
.reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
}
})
const virtualDirectivesRule = computed(() => ({
component: 'Root',
directives: Object.fromEntries(
virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
)
}))
// ## Export and Import
const styleExporter = newExporter({
filename: () => exports.name.value ?? 'pleroma_theme',
@ -609,6 +627,15 @@ export default {
}
})
// Raw format
const exportRules = computed(() => [
metaRule.value,
...palettesRule.value,
virtualDirectivesRule.value,
...editorFriendlyToOriginal.value
])
// Text format
const exportStyleData = computed(() => {
return [
metaOut.value,
@ -626,12 +653,6 @@ export default {
styleImporter.importData()
}
const exportRules = computed(() => [
paletteRule.value,
virtualDirectivesRule.value,
...editorFriendlyToOriginal.value
])
exports.applyStyle = () => {
store.dispatch('setStyleCustom', exportRules.value)
}
@ -639,13 +660,21 @@ export default {
const overallPreviewRules = ref([])
exports.overallPreviewRules = overallPreviewRules
const overallPreviewCssRules = computed(() => getScopedVersion(
getCssRules(overallPreviewRules.value),
'#edited-style-preview'
).join('\n'))
const overallPreviewCssRules = ref([])
watchEffect(throttle(() => {
try {
overallPreviewCssRules.value = getScopedVersion(
getCssRules(overallPreviewRules.value),
'#edited-style-preview'
).join('\n')
} catch (e) {
console.error(e)
}
}, 500))
exports.overallPreviewCssRules = overallPreviewCssRules
const updateOverallPreview = () => {
const updateOverallPreview = throttle(() => {
try {
overallPreviewRules.value = init({
inputRuleset: exportRules.value,
@ -657,7 +686,7 @@ export default {
console.error('Could not compile preview theme', e)
return null
}
}
}, 1000)
//
// Apart from "hover" we can't really show how component looks like in
// certain states, so we have to fake them.
@ -730,10 +759,13 @@ export default {
return r.component === 'Root'
})
const rootDirectivesEntries = Object.entries(rootComponent.directives)
const directives = Object.fromEntries(
rootDirectivesEntries
.filter(([k, v]) => k.startsWith('--') && v.startsWith('color | '))
.map(([k, v]) => [k.substring(2), v.substring('color | '.length)]))
const directives = {}
rootDirectivesEntries
.filter(([k, v]) => k.startsWith('--') && v.startsWith('color | '))
.map(([k, v]) => [k.substring(2), v.substring('color | '.length)])
.forEach(([k, v]) => {
directives[k] = findColor(v, { dynamicVars: {}, staticVars: directives })
})
return directives
})
provide('staticVars', staticVars)

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

@ -286,6 +286,14 @@
<Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
<Checkbox v-model="isOpacityPresent" />
</Tooltip>
<RoundnessInput
v-model="editedRoundness"
:disabled="!isRoundnessPresent"
:label="$t('settings.style.themes3.editor.roundness')"
/>
<Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
<Checkbox v-model="isRoundnessPresent" />
</Tooltip>
</div>
<div
key="shadow"

11
src/components/shadow_control/shadow_control.js
View file

@ -112,9 +112,14 @@ export default {
},
getColorFallback () {
if (this.staticVars && this.selected?.color) {
const computedColor = findColor(this.selected.color, { dynamicVars: {}, staticVars: this.staticVars }, true)
if (computedColor) return rgb2hex(computedColor)
return null
try {
const computedColor = findColor(this.selected.color, { dynamicVars: {}, staticVars: this.staticVars }, true)
if (computedColor) return rgb2hex(computedColor)
return null
} catch (e) {
console.warn(e)
return null
}
} else {
return this.currentFallback?.color
}

8
src/components/tab_switcher/tab_switcher.scss
View file

@ -119,7 +119,7 @@
.tab {
flex: 1;
box-sizing: content-box;
min-width: 10em;
max-width: 9em;
min-width: 1px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
@ -128,6 +128,11 @@
margin-right: -200px;
margin-left: 1em;
&:not(.active) {
margin-top: 0;
margin-left: 1.5em;
}
@media all and (max-width: 800px) {
padding-left: 0.25em;
padding-right: calc(0.25em + 200px);
@ -181,6 +186,7 @@
&:not(.active) {
z-index: 4;
margin-top: 0.25em;
&:hover {
z-index: 6;

16
src/i18n/en.json
View file

@ -771,17 +771,9 @@
"cGreen": "Green color",
"cOrange": "Orange color",
"wallpaper": "Wallpaper",
"extra1": "Extra 1",
"extra2": "Extra 2",
"extra3": "Extra 3",
"extra4": "Extra 4",
"extra5": "Extra 5",
"extra6": "Extra 6",
"extra7": "Extra 7",
"extra8": "Extra 8",
"extra9": "Extra 9",
"extra10": "Extra 10",
"v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes"
"v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
"bundled": "Bundled palettes",
"style": "Palettes provided by selected style"
},
"editor": {
"title": "Style",
@ -802,6 +794,8 @@
"icon_color": "Icon color",
"link_color": "Link color",
"contrast": "Text contrast",
"roundness": "Roundness",
"opacity": "Opacity",
"border_color": "Border color",
"include_in_rule": "Add to rule",
"test_string": "TEST",

8
src/modules/interface.js
View file

@ -460,8 +460,8 @@ const interfaceMod = {
if (Array.isArray(paletteDataUsed)) {
const [
name,
background,
foreground,
bg,
fg,
text,
link,
cRed = '#FF0000',
@ -469,10 +469,10 @@ const interfaceMod = {
cBlue = '#0000FF',
cOrange = '#E3FF00'
] = paletteDataUsed
paletteDataUsed = { name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange }
paletteDataUsed = { name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
}
console.log(paletteDataUsed)
console.log('USCD', userStyleCustomData)
const style = await getData(
'style',
stylesIndex,

37
src/services/theme_data/theme3_slot_functions.js
View file

@ -15,6 +15,11 @@ export const process = (text, functions, { findColor, findShadow }, { dynamicVar
export const colorFunctions = {
alpha: {
argsNeeded: 2,
documentation: 'Changes alpha value of the color only to be used for CSS variables',
args: [
'color: source color used',
'amount: alpha value'
],
exec: (args, { findColor }, { dynamicVars, staticVars }) => {
const [color, amountArg] = args
@ -25,6 +30,11 @@ export const colorFunctions = {
},
brightness: {
argsNeeded: 2,
document: 'Changes brightness/lightness of color in HSL colorspace',
args: [
'color: source color used',
'amount: lightness value'
],
exec: (args, { findColor }, { dynamicVars, staticVars }) => {
const [color, amountArg] = args
@ -35,6 +45,15 @@ export const colorFunctions = {
},
textColor: {
argsNeeded: 2,
documentation: 'Get text color with adequate contrast for given background and intended text color. Same function is used internally',
args: [
'background: color of backdrop where text will be shown',
'foreground: intended text color',
`[preserve]: (optional) intended color preservation:
'preserve' - try to preserve the color
'no-preserve' - if can't get adequate color - fall back to black or white
'no-auto' - don't do anything (useless as a color function)`
],
exec: (args, { findColor }, { dynamicVars, staticVars }) => {
const [backgroundArg, foregroundArg, preserve = 'preserve'] = args
@ -46,6 +65,12 @@ export const colorFunctions = {
},
blend: {
argsNeeded: 3,
documentation: 'Alpha blending between two colors',
args: [
'background: bottom layer color',
'amount: opacity of top layer',
'foreground: upper layer color'
],
exec: (args, { findColor }, { dynamicVars, staticVars }) => {
const [backgroundArg, amountArg, foregroundArg] = args
@ -58,6 +83,11 @@ export const colorFunctions = {
},
mod: {
argsNeeded: 2,
documentation: 'Old function that increases or decreases brightness depending if color is dark or light. Advised against using it as it might give unexpected results.',
args: [
'color: source color',
'amount: how much darken/brighten the color'
],
exec: (args, { findColor }, { dynamicVars, staticVars }) => {
const [colorArg, amountArg] = args
@ -75,6 +105,13 @@ export const colorFunctions = {
export const shadowFunctions = {
borderSide: {
argsNeeded: 3,
documentation: 'Simulate a border on a side with a shadow, best works on inset border',
args: [
'color: border color',
'side: string indicating on which side border should be, takes either one word or two words joined by dash (i.e. "left" or "bottom-right")',
'[alpha]: (Optional) border opacity, defaults to 1 (fully opaque)',
'[inset]: (Optional) whether border should be on the inside or outside, defaults to inside'
],
exec: (args, { findColor }) => {
const [color, side, alpha = '1', widthArg = '1', inset = 'inset'] = args

4
src/services/theme_data/theme_data_3.service.js
View file

@ -227,8 +227,8 @@ export const init = ({
bScore += b.component === 'Text' ? 1 : 0
// Debug
a.specifityScore = aScore
b.specifityScore = bScore
a._specificityScore = aScore
b._specificityScore = bScore
if (aScore === bScore) {
return ai - bi

8
static/palettes/index.json
View file

@ -5,8 +5,8 @@
"pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
"classic-dark": {
"name": "Classic Dark",
"background": "#161c20",
"foreground": "#282e32",
"bg": "#161c20",
"fg": "#282e32",
"text": "#b9b9b9",
"link": "#baaa9c",
"cRed": "#d31014",
@ -18,8 +18,8 @@
"pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
"tomorrow-night": {
"name": "Tomorrow Night",
"background": "#1d1f21",
"foreground": "#373b41",
"bg": "#1d1f21",
"fg": "#373b41",
"link": "#81a2be",
"text": "#c5c8c6",
"cRed": "#cc6666",