From c34590c43983711152a843a2e36b991a5fe3bcdf Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 7 Feb 2024 15:53:34 +0200 Subject: update, should inherit stuff properly now. --- src/components/input.style.js | 60 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/components/input.style.js (limited to 'src/components/input.style.js') diff --git a/src/components/input.style.js b/src/components/input.style.js new file mode 100644 index 00000000..48d74bfa --- /dev/null +++ b/src/components/input.style.js @@ -0,0 +1,60 @@ +const border = (top, shadow) => ({ + x: 0, + y: top ? 1 : -1, + blur: 0, + spread: 0, + color: shadow ? '#000000' : '#FFFFFF', + alpha: 0.2, + inset: true +}) + +const inputInsetFakeBorders = [border(true, true), border(false, false)] + +const hoverGlow = { + x: 0, + y: 0, + blur: 4, + spread: 0, + color: '--text', + alpha: 1 +} + +export default { + name: 'Input', + selector: '.input', + states: { + disabled: ':disabled', + pressed: ':active', + hover: ':hover', + focused: ':focus-within' + }, + variants: { + danger: '.danger', + unstyled: '.unstyled', + sublime: '.sublime' + }, + validInnerComponents: [ + 'Text' + ], + defaultRules: [ + { + directives: { + background: '--fg', + shadow: [{ + x: 0, + y: 0, + blur: 2, + spread: 0, + color: '#000000', + alpha: 1 + }, ...inputInsetFakeBorders] + } + }, + { + state: ['hover'], + directives: { + shadow: [hoverGlow, ...inputInsetFakeBorders] + } + } + ] +} -- cgit v1.2.3-70-g09d2 From 6df28cde9d8ded05417845f507a353a87269afa9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 8 Feb 2024 18:18:01 +0200 Subject: improvements & performance testing --- src/components/button.style.js | 14 ++++- src/components/input.style.js | 7 +-- src/components/underlay.style.js | 2 - src/services/style_setter/style_setter.js | 6 +- src/services/theme_data/theme_data_3.service.js | 81 ++++++++++++++++--------- 5 files changed, 71 insertions(+), 39 deletions(-) (limited to 'src/components/input.style.js') diff --git a/src/components/button.style.js b/src/components/button.style.js index 2f74d127..f24e8ccc 100644 --- a/src/components/button.style.js +++ b/src/components/button.style.js @@ -22,7 +22,7 @@ const hoverGlow = { export default { name: 'Button', - selector: '.button-default', + selector: '.button', states: { disabled: ':disabled', toggled: '.toggled', @@ -31,9 +31,9 @@ export default { focused: ':focus-within' }, variants: { + normal: '-default', danger: '.danger', - unstyled: '.unstyled', - sublime: '.sublime' + unstyled: '-unstyled' }, validInnerComponents: [ 'Text', @@ -54,6 +54,14 @@ export default { }, ...buttonInsetFakeBorders] } }, + { + component: 'Button', + variant: 'unstyled', + directives: { + background: '--fg', + opacity: 0 + } + }, { component: 'Button', state: ['hover'], diff --git a/src/components/input.style.js b/src/components/input.style.js index 48d74bfa..4d0690cf 100644 --- a/src/components/input.style.js +++ b/src/components/input.style.js @@ -28,11 +28,8 @@ export default { hover: ':hover', focused: ':focus-within' }, - variants: { - danger: '.danger', - unstyled: '.unstyled', - sublime: '.sublime' - }, + // variants: { + // }, validInnerComponents: [ 'Text' ], diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js index 48965f20..f879c530 100644 --- a/src/components/underlay.style.js +++ b/src/components/underlay.style.js @@ -8,8 +8,6 @@ export default { defaultRules: [ { component: 'Underlay', - // variant: 'normal', - // state: 'normal' directives: { background: '#000000', opacity: 0.2 diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index c09b3790..7429f323 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -8,8 +8,13 @@ import { import { defaultState } from '../../modules/config.js' export const applyTheme = (input) => { + const t0 = performance.now() const { rules, t3b } = generatePreset(input) + const t1 = performance.now() const themes3 = init(sampleRules, t3b) + const t2 = performance.now() + console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms') + console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms') const head = document.head const body = document.body body.classList.add('hidden') @@ -24,7 +29,6 @@ export const applyTheme = (input) => { // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max') styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max') themes3.css.forEach(rule => { - console.log(rule) styleSheet.insertRule(rule, 'index-max') }) body.classList.remove('hidden') diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index c5695d67..84e5cf82 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -77,7 +77,7 @@ const components = { // into an array [item2, item3] for iterating const unroll = (item) => { const out = [] - let currentParent = item.parent + let currentParent = item while (currentParent) { const { parent: newParent, ...rest } = currentParent out.push(rest) @@ -115,6 +115,8 @@ export const ruleToSelector = (rule, ignoreOutOfTreeSelector, isParent) => { let applicableVariant = '' if (applicableVariantName !== 'normal') { applicableVariant = variants[applicableVariantName] + } else { + applicableVariant = variants?.normal ?? '' } let realSelector @@ -130,7 +132,7 @@ export const ruleToSelector = (rule, ignoreOutOfTreeSelector, isParent) => { const selectors = [realSelector, applicableVariant, ...applicableStates] .toSorted((a, b) => { if (a.startsWith(':')) return 1 - if (!a.startsWith('.')) return -1 + if (/^[a-z]/.exec(a)) return -1 else return 0 }) .join('') @@ -189,7 +191,7 @@ const findRules = (criteria, strict) => subject => { } export const init = (extraRuleset, palette) => { - const cache = {} + const stacked = {} const computed = {} const rules = [] @@ -213,19 +215,20 @@ export const init = (extraRuleset, palette) => { const variableSlot = variable.substring(2) if (variableSlot.startsWith('parent')) { if (variableSlot === 'parent') { - targetColor = dynamicVars.lowerLevelBackground + const { r, g, b } = dynamicVars.lowerLevelBackground + targetColor = { r, g, b } } else { const virtualSlot = variableSlot.replace(/^parent/, '') - targetColor = dynamicVars.lowerLevelVirtualDirectives[virtualSlot] + targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb } } else { - // TODO add support for --current prefix + // TODO add support for --current prefix switch (variableSlot) { case 'background': - targetColor = dynamicVars.inheritedBackground + targetColor = convert(dynamicVars.inheritedBackground).rgb break default: - targetColor = palette[variableSlot] + targetColor = convert(palette[variableSlot]).rgb } } @@ -249,7 +252,6 @@ export const init = (extraRuleset, palette) => { const backgroundArg = convert(findColor(args[2], dynamicVars)).rgb const foregroundArg = convert(findColor(args[0], dynamicVars)).rgb const amount = Number(args[1]) - console.log('ASS', backgroundArg, foregroundArg, amount) targetColor = alphaBlend(backgroundArg, amount, foregroundArg) break } @@ -325,6 +327,12 @@ export const init = (extraRuleset, palette) => { } const processInnerComponent = (component, parent) => { + const parentList = parent ? unroll(parent).reverse().map(c => c.component) : [] + if (!component.virtual) { + const path = [...parentList, component.name].join(' > ') + console.log('Component ' + path + ' process starting') + } + const t0 = performance.now() const { validInnerComponents = [], states: originalStates = {}, @@ -338,6 +346,7 @@ export const init = (extraRuleset, palette) => { const innerComponents = validInnerComponents.map(name => components[name]) const stateCombinations = getAllPossibleCombinations(Object.keys(states)) + const stateVariantCombination = Object.keys(variants).map(variant => { return stateCombinations.map(state => ({ variant, state })) }).reduce((acc, x) => [...acc, ...x], []) @@ -347,13 +356,14 @@ export const init = (extraRuleset, palette) => { const selector = ruleToSelector({ component: component.name, ...combination, parent }, true) const lowerLevelSelector = selector.split(/ /g).slice(0, -1).join(' ') - const lowerLevelBackground = cache[lowerLevelSelector]?.background - const lowerLevelVirtualDirectives = cache[lowerLevelSelector]?.virtualDirectives - // console.log('ASS', lowerLevelVirtualDirectives) + const lowerLevelBackground = computed[lowerLevelSelector]?.background + const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives + const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw const dynamicVars = { lowerLevelBackground, - lowerLevelVirtualDirectives + lowerLevelVirtualDirectives, + lowerLevelVirtualDirectivesRaw } // Inheriting all of the applicable rules @@ -411,7 +421,7 @@ export const init = (extraRuleset, palette) => { const textColor = newTextRule.directives.textAuto === 'no-auto' ? intendedTextColor : getTextColor( - convert(lowerLevelBackground).rgb, + convert(stacked[lowerLevelSelector]).rgb, intendedTextColor, newTextRule.directives.textAuto === 'preserve' ) @@ -421,17 +431,21 @@ export const init = (extraRuleset, palette) => { const earlyLowerLevelRule = earlyLowerLevelRules.slice(-1)[0] const virtualDirectives = earlyLowerLevelRule.virtualDirectives || {} + const virtualDirectivesRaw = earlyLowerLevelRule.virtualDirectivesRaw || {} // Storing color data in lower layer to use as custom css properties virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars) + virtualDirectivesRaw[virtualName] = textColor earlyLowerLevelRule.virtualDirectives = virtualDirectives - cache[lowerLevelSelector].virtualDirectives = virtualDirectives + earlyLowerLevelRule.virtualDirectivesRaw = virtualDirectivesRaw + computed[lowerLevelSelector].virtualDirectives = virtualDirectives + computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw // Debug: lets you see what it think background color should be const directives = { textColor, - background: convert(cache[lowerLevelSelector].background).hex, + background: convert(computed[lowerLevelSelector].background).hex, ...inheritedTextOpacity } @@ -441,10 +455,10 @@ export const init = (extraRuleset, palette) => { component: component.name, ...combination, directives, - virtualDirectives + virtualDirectives, + virtualDirectivesRaw }) } else { - cache[selector] = cache[selector] || {} computed[selector] = computed[selector] || {} if (computedDirectives.background) { @@ -460,7 +474,7 @@ export const init = (extraRuleset, palette) => { } const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true) - const inheritedBackground = cache[inheritSelector].background + const inheritedBackground = computed[inheritSelector].background // TODO: DEFAULT TEXT COLOR const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb @@ -469,10 +483,18 @@ export const init = (extraRuleset, palette) => { const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb - if (!cache[selector].background) { - const blend = computedDirectives.opacity < 1 ? alphaBlend(rgb, computedDirectives.opacity, lowerLevelComputedBackground) : rgb - cache[selector].background = blend - computed[selector].background = rgb + if (!stacked[selector]) { + let blend + const alpha = computedDirectives.opacity + if (alpha >= 1) { + blend = rgb + } else if (alpha <= 0) { + blend = lowerLevelComputedBackground + } else { + blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelComputedBackground) + } + stacked[selector] = blend + computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 } addRule({ component: component.name, @@ -482,16 +504,19 @@ export const init = (extraRuleset, palette) => { }) } } - - if (existingRules.length !== 0) { - console.warn('MORE EXISTING RULES', existingRules) - } } + innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination })) }) + + const t1 = performance.now() + if (!component.virtual) { + const path = [...parentList, component.name].join(' > ') + console.log('Component ' + path + ' procession time: ' + (t1 - t0) + 'ms') + } } - processInnerComponent(components.Root, { component: 'Root' }) + processInnerComponent(components.Root) return { raw: rules, -- cgit v1.2.3-70-g09d2 From ae345d2c458bd0952d9b85c2e03060b2d286d320 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 12 Feb 2024 17:26:08 +0200 Subject: buttons look great now, including unstyled ones menu items work too --- src/App.scss | 19 +++-- src/components/account_actions/account_actions.vue | 5 -- src/components/button.style.js | 52 ++++++++----- src/components/button_unstyled.style.js | 88 ++++++++++++++++++++++ src/components/chat_message/chat_message.vue | 2 +- src/components/emoji_input/emoji_input.vue | 1 - src/components/emoji_picker/emoji_picker.scss | 16 +--- src/components/emoji_picker/emoji_picker.vue | 8 +- src/components/extra_buttons/extra_buttons.vue | 24 +++--- src/components/input.style.js | 5 +- src/components/menu_item.style.js | 10 ++- .../mobile_post_status_button.vue | 2 - .../moderation_tools/moderation_tools.vue | 22 +++--- src/components/nav_panel/nav_panel.vue | 16 ++-- src/components/navigation/navigation_entry.vue | 7 +- src/components/navigation/navigation_pins.vue | 12 +-- .../notifications/notification_filters.vue | 14 ++-- src/components/panel.style.js | 1 + src/components/panel_header.style.js | 3 +- src/components/popover.style.js | 1 + src/components/popover/popover.vue | 62 +-------------- .../post_status_form/post_status_form.vue | 25 ------ .../quick_filter_settings.vue | 14 ++-- .../quick_view_settings/quick_view_settings.vue | 12 +-- src/components/scope_selector/scope_selector.js | 8 +- src/components/scope_selector/scope_selector.vue | 5 -- .../settings_modal/admin_tabs/frontends_tab.vue | 4 +- src/components/settings_modal/settings_modal.vue | 6 +- src/components/status/status.scss | 5 -- src/components/top_bar.style.js | 1 + src/components/user_card/user_card.scss | 13 ---- src/components/user_list_menu/user_list_menu.vue | 2 +- src/services/theme_data/theme_data_3.service.js | 8 +- 33 files changed, 224 insertions(+), 249 deletions(-) create mode 100644 src/components/button_unstyled.style.js (limited to 'src/components/input.style.js') diff --git a/src/App.scss b/src/App.scss index 1f9bab40..27fee4b4 100644 --- a/src/App.scss +++ b/src/App.scss @@ -372,14 +372,24 @@ nav { } } +.menu-item { + border: none; + outline: none; + text-align: initial; + font-size: inherit; + font-family: inherit; + cursor: pointer; + color: inherit; +} + .button-unstyled { - background: none; border: none; outline: none; display: inline; text-align: initial; font-size: 100%; font-family: inherit; + box-shadow: var(--shadow); padding: 0; line-height: unset; cursor: pointer; @@ -393,13 +403,6 @@ nav { &.-fullwidth { width: 100%; } - - &.-hover-highlight { - &:hover svg { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - } - } } input, diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index ce19291a..1c3c1419 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -130,11 +130,6 @@ margin: -0.5em 0; padding: 0.5em 0; text-align: center; - - &:not(:hover) .icon { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - } } } diff --git a/src/components/button.style.js b/src/components/button.style.js index 5a5e4271..8d19516f 100644 --- a/src/components/button.style.js +++ b/src/components/button.style.js @@ -10,6 +10,14 @@ const border = (top, shadow) => ({ const buttonInsetFakeBorders = [border(true, false), border(false, true)] const inputInsetFakeBorders = [border(true, true), border(false, false)] +const buttonOuterShadow = { + x: 0, + y: 0, + blur: 2, + spread: 0, + color: '#000000', + alpha: 1 +} const hoverGlow = { x: 0, @@ -22,7 +30,7 @@ const hoverGlow = { export default { name: 'Button', // Name of the component - selector: '.button', // CSS selector/prefix + selector: '.button-default', // CSS selector/prefix // outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component // States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state states: { @@ -39,8 +47,8 @@ export default { // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it. variants: { // Variants save on computation time since adding new variant just adds one more "set". - normal: '-default', // you can override normal variant, it will be appenended to the main class - danger: '-default.danger' + // normal: '', // you can override normal variant, it will be appenended to the main class + danger: '.danger' // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants. // This (currently) is further multipled by number of places where component can exist. }, @@ -56,21 +64,7 @@ export default { // like within it directives: { background: '--fg', - shadow: [{ - x: 0, - y: 0, - blur: 2, - spread: 0, - color: '#000000', - alpha: 1 - }, ...buttonInsetFakeBorders] - } - }, - { - variant: 'unstyled', - directives: { - background: '--fg', - opacity: 0 + shadow: [buttonOuterShadow, ...buttonInsetFakeBorders] } }, { @@ -82,7 +76,7 @@ export default { { state: ['pressed'], directives: { - shadow: [...inputInsetFakeBorders] + shadow: [buttonOuterShadow, ...inputInsetFakeBorders] } }, { @@ -95,7 +89,7 @@ export default { state: ['toggled'], directives: { background: '--accent,-24.2', - shadow: [...inputInsetFakeBorders] + shadow: [buttonOuterShadow, ...inputInsetFakeBorders] } }, { @@ -112,6 +106,13 @@ export default { shadow: [...buttonInsetFakeBorders] } }, + { + state: ['disabled', 'hover'], + directives: { + background: '$blend(--background, 0.25, --parent)', + shadow: [...buttonInsetFakeBorders] + } + }, { component: 'Text', parent: { @@ -122,6 +123,17 @@ export default { textOpacity: 0.25, textOpacityMode: 'blend' } + }, + { + component: 'Text', + parent: { + component: 'Button', + state: ['disabled', 'hover'] + }, + directives: { + textOpacity: 0.25, + textOpacityMode: 'blend' + } } ] } diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js new file mode 100644 index 00000000..d0ca03a5 --- /dev/null +++ b/src/components/button_unstyled.style.js @@ -0,0 +1,88 @@ +export default { + name: 'ButtonUnstyled', + selector: '.button-unstyled', + states: { + disabled: ':disabled', + toggled: '.toggled', + pressed: ':active', + hover: ':hover', + focused: ':focus-within' + }, + validInnerComponents: [ + 'Text', + 'Icon' + ], + defaultRules: [ + { + directives: { + background: '--fg', + shadow: [], + opacity: 0 + } + }, + { + component: 'Icon', + parent: { + component: 'ButtonUnstyled', + state: ['hover'] + }, + directives: { + textColor: '--parent--text' + } + }, + { + component: 'Icon', + parent: { + component: 'ButtonUnstyled', + state: ['toggled'] + }, + directives: { + textColor: '--parent--text' + } + }, + { + component: 'Text', + parent: { + component: 'ButtonUnstyled', + state: ['disabled'] + }, + directives: { + textOpacity: 0.25, + textOpacityMode: 'blend' + } + }, + { + component: 'Text', + parent: { + component: 'ButtonUnstyled', + state: ['disabled', 'hover'] + }, + directives: { + textOpacity: 0.25, + textOpacityMode: 'blend' + } + }, + { + component: 'Icon', + parent: { + component: 'ButtonUnstyled', + state: ['disabled'] + }, + directives: { + textOpacity: 0.25, + textOpacityMode: 'blend' + } + }, + { + component: 'Icon', + parent: { + component: 'ButtonUnstyled', + state: ['disabled', 'hover'] + }, + directives: { + textOpacity: 0.25, + textOpacityMode: 'blend' + } + } + ] +} diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue index 381574c3..166889d7 100644 --- a/src/components/chat_message/chat_message.vue +++ b/src/components/chat_message/chat_message.vue @@ -53,7 +53,7 @@