Merge remote-tracking branch 'origin/develop' into appearance-tab

appearance-tab
Henry Jameson 3 months ago
commit 6846b4fe8a

@ -43,6 +43,8 @@ lint:
test: test:
stage: test stage: test
tags:
- amd64
variables: variables:
APT_CACHE_DIR: apt-cache APT_CACHE_DIR: apt-cache
script: script:
@ -54,6 +56,8 @@ test:
build: build:
stage: build stage: build
tags:
- amd64
script: script:
- yarn - yarn
- npm run build - npm run build

@ -0,0 +1 @@
stop using that one runner for intensive tasks

@ -0,0 +1 @@
Ensure selection text color has enough contrast

@ -0,0 +1 @@
Fix profile mentions causing a 422 error

@ -0,0 +1 @@
Fix Themes v3 on Safari not working

@ -4,6 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
<style id="pleroma-eager-styles" type="text/css"></style>
<style id="pleroma-lazy-styles" type="text/css"></style>
<!--server-generated-meta--> <!--server-generated-meta-->
</head> </head>
<body class="hidden"> <body class="hidden">

@ -87,7 +87,8 @@ const PostStatusForm = {
'fileLimit', 'fileLimit',
'submitOnEnter', 'submitOnEnter',
'emojiPickerPlacement', 'emojiPickerPlacement',
'optimisticPosting' 'optimisticPosting',
'profileMention'
], ],
emits: [ emits: [
'posted', 'posted',
@ -125,7 +126,7 @@ const PostStatusForm = {
const { scopeCopy } = this.$store.getters.mergedConfig const { scopeCopy } = this.$store.getters.mergedConfig
if (this.replyTo) { if (this.replyTo || this.profileMention) {
const currentUser = this.$store.state.users.currentUser const currentUser = this.$store.state.users.currentUser
statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser) statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
} }

@ -37,7 +37,7 @@ export default {
// Selection colors // Selection colors
'--selectionBackground': 'color | --accent', '--selectionBackground': 'color | --accent',
'--selectionText': 'color | $textColor(--accent, --text)' '--selectionText': 'color | $textColor(--accent, --text, no-preserve)'
} }
} }
] ]

@ -225,7 +225,7 @@ export default {
this.$store.dispatch('setCurrentMedia', attachment) this.$store.dispatch('setCurrentMedia', attachment)
}, },
mentionUser () { mentionUser () {
this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user }) this.$store.dispatch('openPostStatusModal', { profileMention: true, repliedUser: this.user })
}, },
onAvatarClickHandler (e) { onAvatarClickHandler (e) {
if (this.onAvatarClick) { if (this.onAvatarClick) {

@ -6,6 +6,45 @@ import { getCssRules } from '../theme_data/css_utils.js'
import { defaultState } from '../../modules/config.js' import { defaultState } from '../../modules/config.js'
import { chunk } from 'lodash' import { chunk } from 'lodash'
// On platforms where this is not supported, it will return undefined
// Otherwise it will return an array
const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
const createStyleSheet = (id) => {
if (supportsAdoptedStyleSheets) {
return {
el: null,
sheet: new CSSStyleSheet(),
rules: []
}
}
const el = document.getElementById(id)
// Clear all rules in it
for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
el.sheet.deleteRule(i)
}
return {
el,
sheet: el.sheet,
rules: []
}
}
const EAGER_STYLE_ID = 'pleroma-eager-styles'
const LAZY_STYLE_ID = 'pleroma-lazy-styles'
const adoptStyleSheets = (styles) => {
if (supportsAdoptedStyleSheets) {
document.adoptedStyleSheets = styles.map(s => s.sheet)
}
// Some older browsers do not support document.adoptedStyleSheets.
// In this case, we use the <style> elements.
// Since the <style> elements we need are already in the DOM, there
// is nothing to do here.
}
export const generateTheme = async (input, callbacks, debug) => { export const generateTheme = async (input, callbacks, debug) => {
const { const {
onNewRule = (rule, isLazy) => {}, onNewRule = (rule, isLazy) => {},
@ -100,13 +139,13 @@ export const tryLoadCache = () => {
return false return false
} }
if (cache.engineChecksum === getEngineChecksum()) { if (cache.engineChecksum === getEngineChecksum()) {
const styleSheet = new CSSStyleSheet() const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
const lazyStyleSheet = new CSSStyleSheet() const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
cache.data[0].forEach(rule => styleSheet.insertRule(rule, 'index-max')) cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max'))
cache.data[1].forEach(rule => lazyStyleSheet.insertRule(rule, 'index-max')) cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(rule, 'index-max'))
document.adoptedStyleSheets = [styleSheet, lazyStyleSheet] adoptStyleSheets([eagerStyles, lazyStyles])
return true return true
} else { } else {
@ -116,10 +155,8 @@ export const tryLoadCache = () => {
} }
export const applyTheme = async (input, onFinish = (data) => {}, debug) => { export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
const styleSheet = new CSSStyleSheet() const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
const styleArray = [] const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
const lazyStyleSheet = new CSSStyleSheet()
const lazyStyleArray = []
console.log('DEBUG IS', debug) console.log('DEBUG IS', debug)
@ -128,19 +165,19 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
{ {
onNewRule (rule, isLazy) { onNewRule (rule, isLazy) {
if (isLazy) { if (isLazy) {
lazyStyleSheet.insertRule(rule, 'index-max') lazyStyles.sheet.insertRule(rule, 'index-max')
lazyStyleArray.push(rule) lazyStyles.rules.push(rule)
} else { } else {
styleSheet.insertRule(rule, 'index-max') eagerStyles.sheet.insertRule(rule, 'index-max')
styleArray.push(rule) eagerStyles.rules.push(rule)
} }
}, },
onEagerFinished () { onEagerFinished () {
document.adoptedStyleSheets = [styleSheet] adoptStyleSheets([eagerStyles])
}, },
onLazyFinished () { onLazyFinished () {
document.adoptedStyleSheets = [styleSheet, lazyStyleSheet] adoptStyleSheets([eagerStyles, lazyStyles])
const cache = { engineChecksum: getEngineChecksum(), data: [styleArray, lazyStyleArray] } const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
onFinish(cache) onFinish(cache)
localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache)) localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
} }

@ -1,3 +1,5 @@
import { sortBy } from 'lodash'
// "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }} // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
// into an array [item2, item3] for iterating // into an array [item2, item3] for iterating
export const unroll = (item) => { export const unroll = (item) => {
@ -24,7 +26,7 @@ export const getAllPossibleCombinations = (array) => {
}) })
const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], []) const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], [])
const uniqueComboStrings = new Set() const uniqueComboStrings = new Set()
const uniqueCombos = flatCombos.map(x => x.toSorted()).filter(x => { const uniqueCombos = flatCombos.map(sortBy).filter(x => {
if (uniqueComboStrings.has(x.join())) { if (uniqueComboStrings.has(x.join())) {
return false return false
} else { } else {
@ -64,7 +66,7 @@ export const genericRuleToSelector = components => (rule, ignoreOutOfTreeSelecto
} }
const selectors = [realSelector, applicableVariant, ...applicableStates] const selectors = [realSelector, applicableVariant, ...applicableStates]
.toSorted((a, b) => { .sort((a, b) => {
if (a.startsWith(':')) return 1 if (a.startsWith(':')) return 1
if (/^[a-z]/.exec(a)) return -1 if (/^[a-z]/.exec(a)) return -1
else return 0 else return 0

@ -1,6 +1,6 @@
import { convert, brightness } from 'chromatism' import { convert, brightness } from 'chromatism'
import sum from 'hash-sum' import sum from 'hash-sum'
import { flattenDeep } from 'lodash' import { flattenDeep, sortBy } from 'lodash'
import { import {
alphaBlend, alphaBlend,
getTextColor, getTextColor,
@ -226,7 +226,7 @@ export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
combination.variant === 'normal' combination.variant === 'normal'
? '' ? ''
: combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(), : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.slice(1).toLowerCase()) ...sortBy(combination.state.filter(x => x !== 'normal')).map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
].join('') ].join('')
let inheritedTextColor = computedDirectives.textColor let inheritedTextColor = computedDirectives.textColor

Loading…
Cancel
Save