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

Merge branch 'themes-updates' into 'develop'

Browse source 
Themes updates/fixes

See merge request pleroma/pleroma-fe!1962
This commit is contained in:
HJ 2024-12-31 11:59:54 +00:00
commit ace6068948
19 changed files with 244 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/button_unstyled.style.js
View file

@ -10,14 +10,13 @@ export default {
},
validInnerComponents: [
'Text',
'Link',
'Icon',
'Badge'
],
defaultRules: [
{
directives: {
background: '#ffffff',
opacity: 0,
shadow: []
}
},

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

@ -6,10 +6,6 @@
color: var(--inputTopbarText, var(--inputText));
}
a {
color: var(--link);
}
.inner-nav {
display: grid;
grid-template-rows: var(--navbar-height);
@ -91,10 +87,6 @@
width: 2em;
height: 100%;
text-align: center;
.svg-inline--fa {
color: var(--link);
}
}
.sitename {

5
src/components/emoji_reactions/emoji_reactions.js
View file

@ -87,7 +87,10 @@ const EmojiReactions = {
'btn',
'button-default',
'emoji-reaction-count-button',
{ '-picked-reaction': this.reactedWith(reaction.name) }
{
'-picked-reaction': this.reactedWith(reaction.name),
toggled: this.reactedWith(reaction.name)
}
],
'aria-label': this.$tc('status.reaction_count_label', reaction.count, { num: reaction.count })
}

2
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -10,7 +10,7 @@
v-bind="!loggedIn ? { href: remoteInteractionLink } : {}"
role="button"
class="emoji-reaction btn button-default"
:class="{ '-picked-reaction': reactedWith(reaction.name) }"
:class="{ '-picked-reaction': reactedWith(reaction.name), toggled: reactedWith(reaction.name) }"
:title="reaction.url ? reaction.name : undefined"
:aria-pressed="reactedWith(reaction.name)"
@click="emojiOnClick(reaction.name, $event)"

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

@ -30,6 +30,8 @@
v-if="apply"
class="btn button-default palette-apply-button"
@click="applyPalette"
:disabled="disabled"
:class="{ disabled }"
>
{{ $t('settings.style.themes3.palette.apply') }}
</button>
@ -67,7 +69,7 @@ const paletteKeys = [
'wallpaper'
]
const props = defineProps(['modelValue', 'compact', 'apply'])
const props = defineProps(['modelValue', 'compact', 'apply', 'disabled'])
const emit = defineEmits(['update:modelValue', 'applyPalette'])
const getExportedObject = () => paletteKeys.reduce((acc, key) => {
const value = props.modelValue[key]

5
src/components/root.style.js
View file

@ -3,6 +3,11 @@ export default {
selector: ':root',
notEditable: true,
validInnerComponents: [
// These are purely for --parent--text et such to work
'Text',
'Link',
'Border',
'Underlay',
'Modals',
'Popover',

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

@ -43,7 +43,7 @@ const AppearanceTab = {
bundledPalettes: [],
compilationCache: {},
fileImporter: newImporter({
accept: '.json, .piss',
accept: '.json, .iss',
validator: this.importValidator,
onImport: this.onImport,
parser: this.importParser,
@ -186,6 +186,9 @@ const AppearanceTab = {
}
},
computed: {
switchInProgress () {
return this.$store.state.interface.themeChangeInProgress
},
paletteDataUsed () {
return this.$store.state.interface.paletteDataUsed
},
@ -302,14 +305,14 @@ const AppearanceTab = {
importParser (file, filename) {
if (filename.endsWith('.json')) {
return JSON.parse(file)
} else if (filename.endsWith('.piss')) {
} else if (filename.endsWith('.iss')) {
return deserialize(file)
}
},
onImport (parsed, filename) {
if (filename.endsWith('.json')) {
this.$store.dispatch('setThemeCustom', parsed.source || parsed.theme)
} else if (filename.endsWith('.piss')) {
} else if (filename.endsWith('.iss')) {
this.$store.dispatch('setStyleCustom', parsed)
}
},
@ -321,7 +324,7 @@ const AppearanceTab = {
if (filename.endsWith('.json')) {
const version = parsed._pleroma_theme_version
return version >= 1 || version <= 2
} else if (filename.endsWith('.piss')) {
} else if (filename.endsWith('.iss')) {
if (!Array.isArray(parsed)) return false
if (parsed.length < 1) return false
if (parsed.find(x => x.component === '@meta') == null) return false

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

@ -20,26 +20,47 @@
}
}
h4 {
margin: 0.5em 0;
}
.palettes-container {
height: 15em;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
border-radius: var(--roundness);
border: 1px solid var(--border);
margin: -0.5em;
}
.palettes {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.5em;
padding: 0.5em;
width: 100%;
h4,
.unsupported-theme-v2,
.userPalette {
h4 {
margin: 0;
grid-column: 1 / span 2;
}
}
.palette-entry {
display: flex;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
justify-content: space-between;
padding: 0 0.5em;
height: max-content;
.palette-label label {
text-align: center;
.palette-label {
height: auto;
label {
text-align: center;
}
}
.palette-square {
@ -63,23 +84,26 @@
}
.modal-view.-mobile & {
.palettes {
grid-template-columns: 1fr;
}
.palette-entry {
flex-wrap: wrap;
grid-column: 1;
justify-content: center;
}
.palette-label {
line-height: 1.5em;
margin-top: 0.5em;
width: 100%;
}
}
.palette-preview {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1em 1em;
margin-bottom: 0.5em;
}
.palette-preview {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1em 1em;
margin: 0.5em 0;
}
.theme-list {

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

@ -12,8 +12,9 @@
<button
class="button-default theme-preview"
data-theme-key="stock"
:class="{ toggled: isStyleActive('stock') }"
@click="resetTheming"
:class="{ toggled: isStyleActive('stock'), disabled: switchInProgress }"
:disabled="switchInProgress"
>
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<!-- eslint-disable vue/no-v-html -->
@ -56,8 +57,9 @@
:key="style.key"
:data-theme-key="style.key"
class="button-default theme-preview"
:class="{ toggled: isStyleActive(style.key) }"
:class="{ toggled: isStyleActive(style.key), disabled: switchInProgress }"
@click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
:disabled="switchInProgress"
>
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<!-- eslint-disable vue/no-v-html -->
@ -80,6 +82,8 @@
<button
class="btn button-default"
@click="importFile"
:class="{ disabled: switchInProgress }"
:disabled="switchInProgress"
>
<FAIcon icon="folder-open" />
{{ $t('settings.style.themes3.editor.load_style') }}
@ -87,38 +91,20 @@
</div>
<div class="setting-item">
<h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
<div class="palettes">
<template v-if="customThemeVersion === 'v3'">
<h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
<button
v-for="p in bundledPalettes"
:key="p.name"
class="btn button-default palette-entry"
:class="{ toggled: isPaletteActive(p.key) }"
@click="() => setPalette(p.key, p)"
>
<div class="palette-label">
<label>
{{ p.name }}
</label>
</div>
<div class="palette-preview">
<span
v-for="c in palettesKeys"
:key="c"
class="palette-square"
:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
/>
</div>
</button>
<h4 v-if="stylePalettes?.length > 0">
{{ $t('settings.style.themes3.palette.style') }}
</h4>
<div
v-if="customThemeVersion === 'v3'"
class="palettes-container"
>
<h4 v-if="stylePalettes?.length > 0">
{{ $t('settings.style.themes3.palette.style') }}
</h4>
<div class="palettes">
<button
v-for="p in stylePalettes || []"
:key="p.name"
class="btn button-default palette-entry"
:class="{ toggled: isPaletteActive(p.key) }"
:class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
:disabled="switchInProgress"
@click="() => setPalette(p.key, p)"
>
<div class="palette-label">
@ -135,6 +121,33 @@
/>
</div>
</button>
<h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
<button
v-for="p in bundledPalettes"
:key="p.name"
class="btn button-default palette-entry"
:class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
:disabled="switchInProgress"
@click="() => setPalette(p.key, p)"
>
<div class="palette-label">
<label>
{{ p.name }}
</label>
</div>
<div class="palette-preview">
<span
v-for="c in palettesKeys"
:key="c"
class="palette-square"
:style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
/>
</div>
</button>
</div>
</div>
<div>
<template v-if="customThemeVersion === 'v3'">
<h4 v-if="expertLevel > 0">
{{ $t('settings.style.themes3.palette.user') }}
</h4>
@ -145,6 +158,7 @@
:compact="true"
:apply="true"
@applyPalette="data => setPaletteCustom(data)"
:disabled="switchInProgress"
/>
</template>
<template v-else-if="customThemeVersion === 'v2'">

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

@ -604,7 +604,7 @@ export default {
const styleExporter = newExporter({
filename: () => exports.name.value ?? 'pleroma_theme',
mime: 'text/plain',
extension: 'piss',
extension: 'iss',
getExportedObject: () => exportStyleData.value
})
@ -636,7 +636,7 @@ export default {
}
const styleImporter = newImporter({
accept: '.piss',
accept: '.iss',
parser (string) { return deserialize(string) },
onImportFailure (result) {
console.error('Failure importing style:', result)

21
src/components/top_bar.style.js
View file

@ -23,6 +23,27 @@ export default {
alpha: 0.6
}]
}
},
{
component: 'Link',
parent: {
component: 'TopBar'
},
directives: {
textColor: '--text'
}
},
{
component: 'Icon',
parent: {
component: 'ButtonUnstyled',
parent: {
component: 'TopBar'
}
},
directives: {
textColor: '--parent--text'
}
}
]
}

7
src/modules/interface.js
View file

@ -10,6 +10,7 @@ const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
const defaultState = {
localFonts: null,
themeApplied: false,
themeChangeInProgress: false,
themeVersion: 'v3',
styleNameUsed: null,
styleDataUsed: null,
@ -556,11 +557,13 @@ const interfaceMod = {
themeDebug,
theme3hacks
} = rootState.config
state.themeChangeInProgress = true
// If we're not not forced to recompile try using
// cache (tryLoadCache return true if load successful)
const forceRecompile = forceThemeRecompilation || recompile
if (!forceRecompile && !themeDebug && await tryLoadCache()) {
state.themeChangeInProgress = false
return commit('setThemeApplied')
}
window.splashUpdate('splash.theme')
@ -669,7 +672,9 @@ const interfaceMod = {
return applyTheme(
rulesetArray.flat(),
() => commit('setThemeApplied'),
() => {},
() => {
state.themeChangeInProgress = false
},
themeDebug
)
} catch (e) {

38
src/services/color_convert/color_convert.js
View file

@ -1,4 +1,4 @@
import { invertLightness, contrastRatio } from 'chromatism'
import { invertLightness, contrastRatio, convert } from 'chromatism'
// useful for visualizing color when debugging
export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
@ -215,19 +215,37 @@ export const rgba2css = function (rgba) {
* @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
*/
export const getTextColor = function (bg, text, preserve) {
const contrast = getContrastRatio(bg, text)
if (contrast < 4.5) {
const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
const result = Object.assign(base, invertLightness(text).rgb)
if (!preserve && getContrastRatio(bg, result) < 4.5) {
const originalContrast = getContrastRatio(bg, text)
if (!preserve) {
if (originalContrast < 4.5) {
// B&W
return contrastRatio(bg, text).rgb
}
// Inverted color
return result
}
return text
const originalColor = convert(text).hex
const invertedColor = invertLightness(originalColor).hex
const invertedContrast = getContrastRatio(bg, convert(invertedColor).rgb)
let workColor
if (invertedContrast > originalContrast) {
workColor = invertedColor
} else {
workColor = originalColor
}
let contrast = getContrastRatio(bg, text)
const result = convert(rgb2hex(workColor)).hsl
const delta = result.l > 50 ? 1 : -1
const multiplier = 10
while (contrast < 4.5 && result.l > 20 && result.l < 80) {
result.l += delta * multiplier
result.l = Math.min(100, Math.max(0, result.l))
contrast = getContrastRatio(bg, convert(result).rgb)
}
const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
return Object.assign(convert(result).rgb, base)
}
/**

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

@ -264,6 +264,7 @@ export const init = ({
const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
const dynamicVars = computed[selector] || {
lowerLevelSelector,
lowerLevelBackground,
lowerLevelVirtualDirectives,
lowerLevelVirtualDirectivesRaw
@ -284,6 +285,11 @@ export const init = ({
computed[selector].computedRule = computedRule
computed[selector].dynamicVars = dynamicVars
// avoid putting more stuff into actual CSS
computed[selector].virtualDirectives = {}
// but still be able to access it i.e. from --parent
computed[selector].virtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw || {}
if (virtualComponents.has(combination.component)) {
const virtualName = [
'--',
@ -330,8 +336,8 @@ export const init = ({
intendedTextColor,
newTextRule.directives.textAuto === 'preserve'
)
const virtualDirectives = computed[lowerLevelSelector].virtualDirectives || {}
const virtualDirectivesRaw = computed[lowerLevelSelector].virtualDirectivesRaw || {}
const virtualDirectives = { ...(computed[lowerLevelSelector].virtualDirectives || {}) }
const virtualDirectivesRaw = { ...(computed[lowerLevelSelector].virtualDirectivesRaw || {}) }
// Storing color data in lower layer to use as custom css properties
virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
@ -345,12 +351,8 @@ export const init = ({
selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
...combination,
directives: {},
virtualDirectives: {
[virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
},
virtualDirectivesRaw: {
[virtualName]: textColor
}
virtualDirectives,
virtualDirectivesRaw
}
} else {
computed[selector] = computed[selector] || {}