From 779b3dc1228030740ccfbd5192bcd368b526ce56 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 22 Feb 2024 15:15:08 +0200 Subject: [PATCH] blur support, fix toggled buttons not working right --- src/components/panel.style.js | 1 + src/components/popover.style.js | 1 + src/services/theme_data/css_utils.js | 19 +++++++++++++++---- src/services/theme_data/theme2_to_theme3.js | 5 ++--- 4 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/components/panel.style.js b/src/components/panel.style.js index 504ecbcb..d9b27667 100644 --- a/src/components/panel.style.js +++ b/src/components/panel.style.js @@ -24,6 +24,7 @@ export default { directives: { background: '--bg', roundness: 3, + blur: '5px', shadow: [{ x: 1, y: 1, diff --git a/src/components/popover.style.js b/src/components/popover.style.js index 1b51c9b3..0197271b 100644 --- a/src/components/popover.style.js +++ b/src/components/popover.style.js @@ -21,6 +21,7 @@ export default { { directives: { background: '--bg', + blur: '10px', shadow: [{ x: 2, y: 2, diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js index b98a78ed..b83b90bf 100644 --- a/src/services/theme_data/css_utils.js +++ b/src/services/theme_data/css_utils.js @@ -108,10 +108,21 @@ export const getCssRules = (rules) => rules.map(rule => { ].filter(x => x).join(';\n') } const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity) - return [ - rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '', - ' --background: ' + color - ].filter(x => x).join(';\n') + const cssDirectives = ['--background: ' + color] + if (rule.directives.backgroundNoCssColor !== 'yes') { + cssDirectives.push('background-color: ' + color) + } + return cssDirectives.filter(x => x).join(';\n') + } + case 'blur': { + const cssDirectives = [] + if (rule.directives.opacity < 1) { + cssDirectives.push(`--backdrop-filter: blur(${v}) `) + if (rule.directives.backgroundNoCssColor !== 'yes') { + cssDirectives.push(`backdrop-filter: blur(${v}) `) + } + } + return cssDirectives.join(';\n') } case 'textColor': { if (rule.directives.textNoCssColor === 'yes') { return '' } diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js index 32797c42..7adbbd42 100644 --- a/src/services/theme_data/theme2_to_theme3.js +++ b/src/services/theme_data/theme2_to_theme3.js @@ -193,7 +193,6 @@ export const convertTheme2To3 = (data) => { newRules.push({ ...rule, component: 'Tab' }) } }) - console.log(newRules) return newRules } @@ -424,12 +423,12 @@ export const convertTheme2To3 = (data) => { case 'alert': { const hasPanel = variantArray.find(x => x === 'Panel') if (hasPanel) { - rule.parent = { component: 'PanelHeader' } + newRule.parent = { component: 'PanelHeader' } variantArray = variantArray.filter(x => x !== 'Panel') } const hasTop = variantArray.find(x => x === 'Top') // TopBar if (hasTop) { - rule.parent = { component: 'TopBar' } + newRule.parent = { component: 'TopBar' } variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar') } break