Page MenuHomePhorge
Files F85807122

No OneTemporary
Actions

Size
17 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js
deleted file mode 100644
index cf3ee9b853..0000000000
--- a/src/components/list/list_item.style.js
+++ /dev/null
@@ -1,48 +0,0 @@
-export default {
- name: 'ListItem',
- selector: '.list-item',
- states: {
- active: '.-active',
- hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.-non-interactive)'
- },
- validInnerComponents: [
- 'Text',
- 'Link',
- 'Icon',
- 'Border',
- // Optimization: don't put heavy components unless needed
- // 'Button',
- // 'ButtonUnstyled',
- // 'Input',
- 'Avatar'
- ],
- defaultRules: [
- {
- directives: {
- background: '--bg',
- opacity: 0
- }
- },
- {
- state: ['active'],
- directives: {
- background: '--inheritedBackground, 10',
- opacity: 1
- }
- },
- {
- state: ['hover'],
- directives: {
- background: '--inheritedBackground, 10',
- opacity: 1
- }
- },
- {
- state: ['hover', 'active'],
- directives: {
- background: '--inheritedBackground, 20',
- opacity: 1
- }
- }
- ]
-}
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 883355efa9..8599320621 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -1,113 +1,109 @@
export default {
name: 'MenuItem',
selector: '.menu-item',
validInnerComponents: [
'Text',
'Icon',
- 'Input',
- 'Border',
- 'ButtonUnstyled',
- 'Badge',
- 'Avatar'
+ 'Border'
],
states: {
hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)',
active: '.-active',
disabled: '.disabled'
},
defaultRules: [
{
directives: {
background: '--bg',
opacity: 0
}
},
{
state: ['hover'],
directives: {
background: '$mod(--bg 5)',
opacity: 1
}
},
{
state: ['active'],
directives: {
background: '$mod(--bg 10)',
opacity: 1
}
},
{
state: ['active', 'hover'],
directives: {
background: '$mod(--bg 15)',
opacity: 1
}
},
{
component: 'Text',
parent: {
component: 'MenuItem',
state: ['hover']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Text',
parent: {
component: 'MenuItem',
state: ['active']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Icon',
parent: {
component: 'MenuItem',
state: ['active']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Icon',
parent: {
component: 'MenuItem',
state: ['hover']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Text',
parent: {
component: 'MenuItem',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
},
{
component: 'Icon',
parent: {
component: 'MenuItem',
state: ['disabled']
},
directives: {
textOpacity: 0.25,
textOpacityMode: 'blend'
}
}
]
}
diff --git a/src/components/mobile_drawer.style.js b/src/components/mobile_drawer.style.js
index a17befb632..da3923fc96 100644
--- a/src/components/mobile_drawer.style.js
+++ b/src/components/mobile_drawer.style.js
@@ -1,42 +1,40 @@
export default {
name: 'MobileDrawer',
selector: '.mobile-drawer',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
// Optimization: don't put heavy components unless needed
// 'Button',
// 'ButtonUnstyled',
// 'Input',
- 'PanelHeader',
'MenuItem',
'Notification',
- 'Alert',
- 'UserCard'
+ 'Alert'
],
defaultRules: [
{
directives: {
background: '--bg',
backgroundNoCssColor: 'yes'
}
},
{
component: 'PanelHeader',
parent: { component: 'MobileDrawer' },
directives: {
background: '--fg',
shadow: [{
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}]
}
}
]
}
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index bf28356a0b..88dcf4382f 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -1,60 +1,46 @@
export default {
name: 'Panel',
selector: '.panel',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
- // Optimization: don't put heavy components unless needed
- // 'Button',
- // 'ButtonUnstyled',
- // 'Input',
'PanelHeader',
- 'MenuItem',
'Post',
- 'Notification',
- 'Alert',
- 'UserCard',
- 'Chat',
- 'Tab',
- 'ListItem'
+ 'Notification'
],
validInnerComponentsLite: [
'Text',
'Link',
'Icon',
'Border',
- // Optimization: don't put heavy components unless needed
- // 'Button',
- // 'Input',
- 'PanelHeader',
- 'Alert'
+ 'PanelHeader'
],
defaultRules: [
{
directives: {
backgroundNoCssColor: 'yes',
background: '--bg',
roundness: 3,
blur: '5px',
shadow: [{
x: 0,
y: 0,
blur: 3,
spread: 0,
color: '#000000',
alpha: 0.5
},
{
x: 0,
y: 4,
blur: 6,
spread: 3,
color: '#000000',
alpha: 0.3
}]
}
}
]
}
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index 02ab6d0d3b..9c87a3c954 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -1,37 +1,35 @@
export default {
name: 'Popover',
selector: '.popover',
lazy: true,
variants: {
modal: '.modal'
},
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
// Optimization: don't put heavy components unless needed
// 'Button',
// 'ButtonUnstyled',
// 'Input',
- 'MenuItem',
- 'Post',
- 'UserCard'
+ 'MenuItem'
],
defaultRules: [
{
directives: {
background: '--bg',
blur: '10px',
shadow: [{
x: 2,
y: 2,
blur: 3,
spread: 0,
color: '#000000',
alpha: 0.5
}]
}
}
]
}
diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js
deleted file mode 100644
index ad13128809..0000000000
--- a/src/components/user_card/user_card.style.js
+++ /dev/null
@@ -1,42 +0,0 @@
-export default {
- name: 'UserCard',
- selector: '.user-card',
- notEditable: true,
- validInnerComponents: [
- 'Text',
- 'Link',
- 'Icon',
- // Optimization: don't put heavy components unless needed
- // 'Button',
- // 'ButtonUnstyled',
- // 'Input',
- 'Alert'
- ],
- defaultRules: [
- {
- directives: {
- background: '--bg',
- opacity: 0,
- roundness: 3,
- shadow: [{
- x: 1,
- y: 1,
- blur: 4,
- spread: 0,
- color: '#000000',
- alpha: 0.6
- }],
- '--profileTint': 'color | $alpha(--background 0.5)'
- }
- },
- {
- parent: {
- component: 'UserCard'
- },
- component: 'RichContent',
- directives: {
- opacity: 0
- }
- }
- ]
-}
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 2a001007d8..2c10238edd 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,322 +1,322 @@
import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js'
import { getCssRules } from '../theme_data/css_utils.js'
import { defaultState } from 'src/modules/default_config_state.js'
import { chunk, throttle } from 'lodash'
import localforage from 'localforage'
// On platforms where this is not supported, it will return undefined
// Otherwise it will return an array
const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
const stylesheets = {}
export const createStyleSheet = (id, priority = 1000) => {
if (stylesheets[id]) return stylesheets[id]
const newStyleSheet = {
rules: [],
ready: false,
priority,
clear () {
this.rules = []
},
addRule (rule) {
let newRule = rule
if (!CSS.supports?.('backdrop-filter', 'blur()')) {
newRule = newRule.replace(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter
}
// firefox doesn't like invalid selectors
if (!CSS.supports?.('selector(::-webkit-scrollbar)') && newRule.startsWith('::-webkit')) {
return
}
this.rules.push(
newRule
.replace(/var\(--shadowFilter\)[^;]*;/g, '') // Remove shadowFilter references
)
}
}
stylesheets[id] = newStyleSheet
return newStyleSheet
}
export const adoptStyleSheets = throttle(() => {
if (supportsAdoptedStyleSheets) {
document.adoptedStyleSheets = Object
.values(stylesheets)
.filter(x => x.ready)
.sort((a, b) => a.priority - b.priority)
.map(sheet => {
const css = new CSSStyleSheet()
sheet.rules.forEach(r => css.insertRule(r))
return css
})
} else {
const holder = document.getElementById('custom-styles-holder')
for (let i = holder.sheet.cssRules.length - 1; i >= 0; --i) {
holder.sheet.deleteRule(i)
}
Object
.values(stylesheets)
.filter(x => x.ready)
.sort((a, b) => a.priority - b.priority)
.forEach(sheet => {
sheet.rules.forEach(r => holder.sheet.insertRule(r))
})
}
// 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.
}, 500)
const EAGER_STYLE_ID = 'pleroma-eager-styles'
const LAZY_STYLE_ID = 'pleroma-lazy-styles'
export const generateTheme = (inputRuleset, callbacks, debug) => {
const {
onNewRule = () => {},
onLazyFinished = () => {},
onEagerFinished = () => {}
} = callbacks
const themes3 = init({
inputRuleset,
- debug
+ debug: true
})
getCssRules(themes3.eager, debug).forEach(rule => {
// Hacks to support multiple selectors on same component
onNewRule(rule, false)
})
onEagerFinished()
// Optimization - instead of processing all lazy rules in one go, process them in small chunks
// so that UI can do other things and be somewhat responsive while less important rules are being
// processed
let counter = 0
const chunks = chunk(themes3.lazy, 200)
// let t0 = performance.now()
const processChunk = () => {
const chunk = chunks[counter]
Promise.all(chunk.map(x => x())).then(result => {
getCssRules(result.filter(x => x), debug).forEach(rule => {
onNewRule(rule, true)
})
// const t1 = performance.now()
// console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms')
// t0 = t1
counter += 1
if (counter < chunks.length) {
setTimeout(processChunk, 0)
} else {
onLazyFinished()
}
})
}
return { lazyProcessFunc: processChunk }
}
export const tryLoadCache = async () => {
console.info('Trying to load compiled theme data from cache')
const cache = await localforage.getItem('pleromafe-theme-cache')
if (!cache) return null
try {
if (cache.engineChecksum === getEngineChecksum()) {
const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)
cache.data[0].forEach(rule => eagerStyles.addRule(rule))
cache.data[1].forEach(rule => lazyStyles.addRule(rule))
eagerStyles.ready = true
lazyStyles.ready = true
// Don't do this, we need to wait until config adopts its styles first
//adoptStyleSheets()
console.info(`Loaded theme from cache`)
return true
} else {
console.warn('Engine checksum doesn\'t match, cache not usable, clearing')
localStorage.removeItem('pleroma-fe-theme-cache')
}
} catch (e) {
console.error('Failed to load theme cache:', e)
return false
}
}
export const applyTheme = (
input,
onEagerFinish = () => {},
onFinish = () => {},
debug
) => {
const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)
eagerStyles.clear()
lazyStyles.clear()
const { lazyProcessFunc } = generateTheme(
input,
{
onNewRule (rule, isLazy) {
if (isLazy) {
lazyStyles.addRule(rule)
} else {
eagerStyles.addRule(rule)
}
},
onEagerFinished () {
eagerStyles.ready = true
adoptStyleSheets()
onEagerFinish()
console.info('Eager part of theme finished, waiting for lazy part to finish to store cache')
},
onLazyFinished () {
lazyStyles.ready = true
adoptStyleSheets()
const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
onFinish(cache)
localforage.setItem('pleromafe-theme-cache', cache)
console.info('Theme cache stored')
}
},
debug
)
setTimeout(lazyProcessFunc, 0)
}
const extractStyleConfig = ({
sidebarColumnWidth,
contentColumnWidth,
notifsColumnWidth,
themeEditorMinWidth,
emojiReactionsScale,
emojiSize,
navbarSize,
panelHeaderSize,
textSize,
forcedRoundness
}) => {
const result = {
sidebarColumnWidth,
contentColumnWidth,
notifsColumnWidth,
themeEditorMinWidth: parseInt(themeEditorMinWidth) === 0 ? 'fit-content' : themeEditorMinWidth,
emojiReactionsScale,
emojiSize,
navbarSize,
panelHeaderSize,
textSize
}
switch (forcedRoundness) {
case 'disable':
break
case '0':
result.forcedRoundness = '0'
break
case '1':
result.forcedRoundness = '1px'
break
case '2':
result.forcedRoundness = '0.4rem'
break
default:
}
return result
}
const defaultStyleConfig = extractStyleConfig(defaultState)
export const applyConfig = (input) => {
const config = extractStyleConfig(input)
if (config === defaultStyleConfig) {
return
}
const rules = Object
.entries(config)
.filter(([, v]) => v)
.map(([k, v]) => `--${k}: ${v}`).join(';')
const styleSheet = createStyleSheet('theme-holder', 30)
styleSheet.addRule(`:root { ${rules} }`)
// TODO find a way to make this not apply to theme previews
if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
styleSheet.addRule(` *:not(.preview-block) {
--roundness: var(--forcedRoundness) !important;
}`)
}
styleSheet.ready = true
adoptStyleSheets()
}
export const getResourcesIndex = async (url, parser = JSON.parse) => {
const cache = 'no-store'
const customUrl = url.replace(/\.(\w+)$/, '.custom.$1')
let builtin
let custom
const resourceTransform = (resources) => {
return Object
.entries(resources)
.map(([k, v]) => {
if (typeof v === 'object') {
return [k, () => Promise.resolve(v)]
} else if (typeof v === 'string') {
return [
k,
() => window
.fetch(v, { cache })
.then(data => data.text())
.then(text => parser(text))
.catch(e => {
console.error(e)
return null
})
]
} else {
console.error(`Unknown resource format - ${k} is a ${typeof v}`)
return [k, null]
}
})
}
try {
const builtinData = await window.fetch(url, { cache })
const builtinResources = await builtinData.json()
builtin = resourceTransform(builtinResources)
} catch {
builtin = []
console.warn(`Builtin resources at ${url} unavailable`)
}
try {
const customData = await window.fetch(customUrl, { cache })
const customResources = await customData.json()
custom = resourceTransform(customResources)
} catch {
custom = []
console.warn(`Custom resources at ${customUrl} unavailable`)
}
const total = [...custom, ...builtin]
if (total.length === 0) {
return Promise.reject(new Error(`Resource at ${url} and ${customUrl} completely unavailable. Panicking`))
}
return Promise.resolve(Object.fromEntries(total))
}

File Metadata

Mime Type
text/x-diff
Expires
Tue, Oct 13, 11:40 PM (1 d, 22 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1786942
Default Alt Text
(17 KB)

Event Timeline