diff options
Diffstat (limited to 'src/services')
| -rw-r--r-- | src/services/style_setter/style_setter.js | 78 | ||||
| -rw-r--r-- | src/services/theme_data/css_utils.js | 12 | ||||
| -rw-r--r-- | src/services/theme_data/theme2_to_theme3.js | 20 | ||||
| -rw-r--r-- | src/services/theme_data/theme_data_3.service.js | 4 |
4 files changed, 82 insertions, 32 deletions
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 83faa0b3..9e068a1e 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -45,7 +45,7 @@ const adoptStyleSheets = (styles) => { // is nothing to do here. } -export const generateTheme = async (input, callbacks) => { +export const generateTheme = async (input, callbacks, debug) => { const { onNewRule = (rule, isLazy) => {}, onLazyFinished = () => {}, @@ -61,9 +61,11 @@ export const generateTheme = async (input, callbacks) => { } // Assuming that "worst case scenario background" is panel background since it's the most likely one - const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim()) + const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim(), debug) - getCssRules(themes3.eager, themes3.staticVars).forEach(rule => { + console.log('DEBUG 2 IS', debug) + + getCssRules(themes3.eager, debug).forEach(rule => { // Hacks to support multiple selectors on same component if (rule.match(/::-webkit-scrollbar-button/)) { const parts = rule.split(/[{}]/g) @@ -93,7 +95,7 @@ export const generateTheme = async (input, callbacks) => { const processChunk = () => { const chunk = chunks[counter] Promise.all(chunk.map(x => x())).then(result => { - getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => { + getCssRules(result.filter(x => x), debug).forEach(rule => { if (rule.match(/\.modal-view/)) { const parts = rule.split(/[{}]/g) const newRule = [ @@ -152,10 +154,12 @@ export const tryLoadCache = () => { } } -export const applyTheme = async (input, onFinish = (data) => {}) => { +export const applyTheme = async (input, onFinish = (data) => {}, debug) => { const eagerStyles = createStyleSheet(EAGER_STYLE_ID) const lazyStyles = createStyleSheet(LAZY_STYLE_ID) + console.log('DEBUG IS', debug) + const { lazyProcessFunc } = await generateTheme( input, { @@ -177,7 +181,8 @@ export const applyTheme = async (input, onFinish = (data) => {}) => { onFinish(cache) localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache)) } - } + }, + debug ) setTimeout(lazyProcessFunc, 0) @@ -185,15 +190,53 @@ export const applyTheme = async (input, onFinish = (data) => {}) => { return Promise.resolve() } -const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) => - ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) +const extractStyleConfig = ({ + sidebarColumnWidth, + contentColumnWidth, + notifsColumnWidth, + emojiReactionsScale, + emojiSize, + navbarSize, + panelHeaderSize, + textSize, + forcedRoundness +}) => { + const result = { + sidebarColumnWidth, + contentColumnWidth, + notifsColumnWidth, + emojiReactionsScale, + emojiSize, + navbarSize, + panelHeaderSize, + textSize + } -const defaultConfigColumns = configColumns(defaultState) + console.log(forcedRoundness) + 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: + } -export const applyConfig = (config) => { - const columns = configColumns(config) + return result +} - if (columns === defaultConfigColumns) { +const defaultStyleConfig = extractStyleConfig(defaultState) + +export const applyConfig = (input) => { + const config = extractStyleConfig(input) + + if (config === defaultStyleConfig) { return } @@ -202,16 +245,25 @@ export const applyConfig = (config) => { body.classList.add('hidden') const rules = Object - .entries(columns) + .entries(config) .filter(([k, v]) => v) .map(([k, v]) => `--${k}: ${v}`).join(';') + document.getElementById('style-config')?.remove() const styleEl = document.createElement('style') + styleEl.id = 'style-config' head.appendChild(styleEl) const styleSheet = styleEl.sheet styleSheet.toString() styleSheet.insertRule(`:root { ${rules} }`, 'index-max') + + if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) { + styleSheet.insertRule(` * { + --roundness: var(--forcedRoundness) !important; + }`, 'index-max') + } + body.classList.remove('hidden') } diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js index a89eac3b..8423e8ac 100644 --- a/src/services/theme_data/css_utils.js +++ b/src/services/theme_data/css_utils.js @@ -2,11 +2,6 @@ import { convert } from 'chromatism' import { hex2rgb, rgba2css } from '../color_convert/color_convert.js' -// This changes what backgrounds are used to "stacked" solid colors so you can see -// what theme engine "thinks" is actual background color is for purposes of text color -// generation and for when --stacked variable is used -const DEBUG = false - export const parseCssShadow = (text) => { const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0] const inset = /inset/.exec(text)?.[0] @@ -66,7 +61,10 @@ export const getCssShadowFilter = (input) => { .join(' ') } -export const getCssRules = (rules) => rules.map(rule => { +// `debug` changes what backgrounds are used to "stacked" solid colors so you can see +// what theme engine "thinks" is actual background color is for purposes of text color +// generation and for when --stacked variable is used +export const getCssRules = (rules, debug) => rules.map(rule => { let selector = rule.selector if (!selector) { selector = 'html' @@ -93,7 +91,7 @@ export const getCssRules = (rules) => rules.map(rule => { ].join(';\n ') } case 'background': { - if (DEBUG) { + if (debug) { return ` --background: ${getCssColorString(rule.dynamicVars.stacked)}; background-color: ${getCssColorString(rule.dynamicVars.stacked)}; diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js index 6ea12836..2c97d18b 100644 --- a/src/services/theme_data/theme2_to_theme3.js +++ b/src/services/theme_data/theme2_to_theme3.js @@ -138,7 +138,7 @@ export const convertTheme2To3 = (data) => { Object.keys(data.opacity || {}).forEach(key => { if (!opacityKeys.has(key) || data.opacity[key] === undefined) return null const originalOpacity = data.opacity[key] - const rule = {} + const rule = { source: '2to3' } switch (key) { case 'alert': @@ -213,7 +213,7 @@ export const convertTheme2To3 = (data) => { Object.keys(data.radii || {}).forEach(key => { if (!radiiKeys.has(key) || data.radii[key] === undefined) return null const originalRadius = data.radii[key] - const rule = {} + const rule = { source: '2to3' } switch (key) { case 'btn': @@ -266,7 +266,7 @@ export const convertTheme2To3 = (data) => { Object.keys(data.fonts || {}).forEach(key => { if (!fontsKeys.has(key)) return const originalFont = data.fonts[key].family - const rule = {} + const rule = { source: '2to3' } switch (key) { case 'interface': @@ -300,7 +300,7 @@ export const convertTheme2To3 = (data) => { Object.keys(data.shadows || {}).forEach(key => { if (!shadowsKeys.has(key)) return const originalShadow = data.shadows[key] - const rule = {} + const rule = { source: '2to3' } switch (key) { case 'panel': @@ -369,7 +369,7 @@ export const convertTheme2To3 = (data) => { const extendedRules = Object.entries(extendedBaseKeys).map(([prefix, keys]) => { if (nonComponentPrefixes.has(prefix)) return null - const rule = {} + const rule = { source: '2to3' } if (prefix === 'alertPopup') { rule.component = 'Alert' rule.parent = { component: 'Popover' } @@ -402,7 +402,7 @@ export const convertTheme2To3 = (data) => { const leftoverKey = key.replace(prefix, '') const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g) const last = parts.slice(-1)[0] - let newRule = { directives: {} } + let newRule = { source: '2to3', directives: {} } let variantArray = [] switch (last) { @@ -462,12 +462,12 @@ export const convertTheme2To3 = (data) => { if (prefix === 'popover' && variantArray[0] === 'Post') { newRule.component = 'Post' - newRule.parent = { component: 'Popover' } + newRule.parent = { source: '2to3hack', component: 'Popover' } variantArray = variantArray.filter(x => x !== 'Post') } if (prefix === 'selectedMenu' && variantArray[0] === 'Popover') { - newRule.parent = { component: 'Popover' } + newRule.parent = { source: '2to3hack', component: 'Popover' } variantArray = variantArray.filter(x => x !== 'Popover') } @@ -477,12 +477,12 @@ export const convertTheme2To3 = (data) => { case 'alert': { const hasPanel = variantArray.find(x => x === 'Panel') if (hasPanel) { - newRule.parent = { component: 'PanelHeader' } + newRule.parent = { source: '2to3hack', component: 'PanelHeader', parent: newRule.parent } variantArray = variantArray.filter(x => x !== 'Panel') } const hasTop = variantArray.find(x => x === 'Top') // TopBar if (hasTop) { - newRule.parent = { component: 'TopBar' } + newRule.parent = { source: '2to3hack', component: 'TopBar', parent: newRule.parent } variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar') } break diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index 047ba8a2..d1043c52 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -149,14 +149,14 @@ const ruleToSelector = genericRuleToSelector(components) export const getEngineChecksum = () => engineChecksum -export const init = (extraRuleset, ultimateBackgroundColor) => { +export const init = (extraRuleset, ultimateBackgroundColor, debug) => { const staticVars = {} const stacked = {} const computed = {} const rulesetUnsorted = [ ...Object.values(components) - .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r }))) + .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' }))) .reduce((acc, arr) => [...acc, ...arr], []), ...extraRuleset ].map(rule => { |