From 8f0e790ad0a476bfef4916ceb6d6f4d93e48fa1e Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Sat, 4 Feb 2023 12:47:20 +0530 Subject: [PATCH 01/10] Added a Reset Button for Custom Colors --- .../Drawer/DrawerPanel/DesignColors.js | 22 ++++++++++++++----- .../components/Drawer/stylesheet.scss | 9 ++++---- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index ecc6d11ba..b29eeae2c 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -247,7 +247,7 @@ const DesignColors = () => { }; async function resetColors() { - const globalStyles = await getGlobalStyles(); + const globalStyles = await getGlobalStyles(true); let selectedGlobalStyle; if ( currentData?.data?.theme?.variation ) { selectedGlobalStyle = globalStyles.body.filter( @@ -315,6 +315,14 @@ const DesignColors = () => { return paletteRenderedList; } + function isCustomColorActive() { + for (const custom in customColors) + if(customColors[custom] != '') + return true; + + return false; + } + function buildCustomPalette() { const primaryColorTemp = customColors && customColors?.primary != '' @@ -436,6 +444,13 @@ const DesignColors = () => { + { isCustomColorActive() && ( + +
+
Reset
+
+ + ) } { showColorPicker && (
{

{ __( 'Color Palettes', 'wp-module-onboarding' ) }

- { /* {selectedColors?.slug && -
-
Reset Button
-
- } */ } { colorPalettes && buildPalettes() } { colorPalettes && buildCustomPalette() }
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index 9802393c3..f92a70e57 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -343,19 +343,20 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb); padding: 0 4px; &--reset { - width: 40%; + width: 30%; height: 30px; display: flex; - color: black; cursor: pointer; - margin-left: 4px; + margin-top: 12px; text-align: center; align-items: center; justify-content: center; background-color: white; + color: var(--nfd-onboarding-primary); &:hover { - background-color: var(--nfd-onboarding-drawer-icon-fill); + color: $black; + background-color: #ededed; } } } From 76999df58e38c8d1f89e5fa209c22d73e85551c6 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Sat, 4 Feb 2023 14:01:08 +0530 Subject: [PATCH 02/10] Update DesignColors.js -> More Support for yith-wonder -> Minor Refactoring to a more dynamic code --- .../Drawer/DrawerPanel/DesignColors.js | 77 +++++++++++-------- 1 file changed, 45 insertions(+), 32 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index b29eeae2c..df8e1a39b 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -132,6 +132,16 @@ const DesignColors = () => { } } + function findInCustomColors(slugName, colorPickerCalledBy) { + const selectedGlobalStyle = storedPreviewSettings; + const selectedThemeColorPalette = + selectedGlobalStyle?.settings?.color?.palette; + const res = selectedThemeColorPalette.findIndex(({ slug }) => slug === slugName ); + if(res === -1) + return selectedThemeColorPalette.findIndex(({ slug }) => slug === colorPickerCalledBy); + return res; + } + async function saveCustomColors() { const selectedGlobalStyle = storedPreviewSettings; const selectedThemeColorPalette = @@ -139,38 +149,40 @@ const DesignColors = () => { if ( selectedThemeColorPalette ) { for ( let idx = 0; idx < selectedThemeColorPalette.length; idx++ ) { - switch ( selectedThemeColorPalette[ idx ]?.slug ) { - case 'base': - if ( - colorPickerCalledBy == 'base' && - customColors?.base - ) - selectedThemeColorPalette[ idx ].color = - customColors?.base; - break; - case 'primary': - if ( - colorPickerCalledBy == 'primary' && - customColors?.primary - ) - selectedThemeColorPalette[ idx ].color = - customColors?.primary; - break; - case 'secondary': + const slug = selectedThemeColorPalette[idx]?.slug; + if ( + colorPickerCalledBy === slug && customColors && + customColors[slug] !== undefined + ) + selectedThemeColorPalette[idx].color = + customColors[slug]; + } + if(true) + { + switch (colorPickerCalledBy) { + case 'base': if ( - colorPickerCalledBy == 'secondary' && - customColors?.secondary - ) - selectedThemeColorPalette[ idx ].color = - customColors?.secondary; + customColors && + customColors[colorPickerCalledBy] !== undefined + ) { + selectedThemeColorPalette[findInCustomColors("header-foreground", colorPickerCalledBy)].color = + customColors[colorPickerCalledBy]; + selectedThemeColorPalette[findInCustomColors("header-titles", colorPickerCalledBy)].color = + customColors[colorPickerCalledBy]; + selectedThemeColorPalette[findInCustomColors("secondary-foreground", colorPickerCalledBy)].color = + customColors[colorPickerCalledBy]; + } break; case 'tertiary': if ( - colorPickerCalledBy == 'tertiary' && - customColors?.tertiary - ) - selectedThemeColorPalette[ idx ].color = - customColors?.tertiary; + customColors && + customColors[colorPickerCalledBy] !== undefined + ) { + selectedThemeColorPalette[findInCustomColors("header-background", colorPickerCalledBy)].color = + customColors[colorPickerCalledBy]; + selectedThemeColorPalette[findInCustomColors("secondary-background", colorPickerCalledBy)].color = + customColors[colorPickerCalledBy]; + } break; } } @@ -324,18 +336,19 @@ const DesignColors = () => { } function buildCustomPalette() { + const defaultColor = '#fff'; const primaryColorTemp = customColors && customColors?.primary != '' ? customColors?.primary - : selectedColorsLocal?.primary ?? '#fff'; + : selectedColorsLocal?.primary ?? defaultColor; const secondaryColorTemp = customColors && customColors?.secondary != '' ? customColors?.secondary - : selectedColorsLocal?.secondary ?? '#fff'; + : selectedColorsLocal?.secondary ?? defaultColor; const tertiaryColorTemp = customColors && customColors?.tertiary != '' ? customColors?.tertiary - : selectedColorsLocal?.tertiary ?? '#fff'; + : selectedColorsLocal?.tertiary ?? defaultColor; return (
@@ -376,7 +389,7 @@ const DesignColors = () => { }` } style={ { backgroundColor: `${ - customColors?.base ?? '#FFF' + customColors?.base ?? defaultColor }`, } } > From 7e011bde7b085cd9cd3dbff4dcef6151f64e5e2c Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 7 Feb 2023 14:44:07 +0530 Subject: [PATCH 03/10] Added backend support --- includes/Data/Themes/Colors.php | 255 +++++++++--------- .../Drawer/DrawerPanel/DesignColors.js | 30 +-- 2 files changed, 143 insertions(+), 142 deletions(-) diff --git a/includes/Data/Themes/Colors.php b/includes/Data/Themes/Colors.php index 2e36e94cf..b5d7e6868 100644 --- a/includes/Data/Themes/Colors.php +++ b/includes/Data/Themes/Colors.php @@ -14,128 +14,141 @@ final class Colors { */ protected static $theme_colors = array( 'yith-wonder' => array( - 'calm' => array( - 'header-background' => '#1A4733', - 'header-foreground' => '#FFFFFF', - 'header-title' => '#FFFFFF', - 'secondary-background' => '#1A4733', - 'secondary-foreground' => '#FFF', - 'tertiary' => '#C7DBFF', - 'secondary' => '#344A77', - 'primary' => '#1A4733', - 'base' => '#FFFFFF', + 'color-palettes' => array( + 'calm' => array( + 'header-background' => '#1A4733', + 'header-foreground' => '#FFFFFF', + 'header-title' => '#FFFFFF', + 'secondary-background' => '#1A4733', + 'secondary-foreground' => '#FFF', + 'tertiary' => '#C7DBFF', + 'secondary' => '#344A77', + 'primary' => '#1A4733', + 'base' => '#FFFFFF', + ), + 'cool' => array( + 'header-background' => '#C7DBFF', + 'header-foreground' => '#21447B', + 'header-titles' => '#21447B', + 'secondary-background' => '#C7DBFF', + 'secondary-foreground' => '#21447B', + 'tertiary' => '#C7DBFF', + 'secondary' => '#3764B4', + 'primary' => '#21447B', + 'base' => '#FFFFFF', + ), + 'warm' => array( + 'header-background' => '#FDE5D0', + 'header-foreground' => '#7A3921', + 'header-titles' => '#7A3921', + 'secondary-background' => '#FDE5D0', + 'secondary-foreground' => '#7A3921', + 'tertiary' => '#FFEDED', + 'secondary' => '#B97040', + 'primary' => '#7A3921', + 'base' => '#FFFFFF', + ), + 'radiant' => array( + 'header-background' => '#63156A', + 'header-foreground' => '#E3F7FF', + 'header-titles' => '#E3F7FF', + 'secondary-background' => '#781980', + 'secondary-foreground' => '#E3F7FF', + 'tertiary' => '#C7F0FF', + 'secondary' => '#64288C', + 'primary' => '#63156A', + 'base' => '#FFFFFF', + ), + 'bold' => array( + 'header-background' => '#FFD7F1', + 'header-foreground' => '#09857C', + 'header-titles' => '#09857C', + 'secondary-background' => '#ffddf3', + 'secondary-foreground' => '#09857C', + 'tertiary' => '#F2A3D6', + 'secondary' => '#076D66', + 'primary' => '#09857C', + 'base' => '#FFFFFF', + ), + 'retro' => array( + 'header-background' => '#096385', + 'header-foreground' => '#F2E6A2', + 'header-titles' => '#F2E6A2', + 'secondary-background' => '#096385', + 'secondary-foreground' => '#F2E6A2', + 'tertiary' => '#F2E6A2', + 'secondary' => '#BE9E00', + 'primary' => '#096385', + 'base' => '#FFFFFF', + ), + 'professional' => array( + 'header-background' => '#6D8258', + 'header-foreground' => '#F5FAFF', + 'header-titles' => '#D2E0F5', + 'secondary-background' => '#6D8258', + 'secondary-foreground' => '#F5FAFF', + 'tertiary' => '#d6e4f9', + 'secondary' => '#405F1C', + 'primary' => '#558320', + 'base' => '#FFFFFF', + ), + 'crisp' => array( + 'header-background' => '#ccc', + 'header-foreground' => '#333', + 'header-titles' => '#234', + 'secondary-background' => '#ccc', + 'secondary-foreground' => '#333', + 'tertiary' => '#777', + 'secondary' => '#17222E', + 'primary' => '#223344', + 'base' => '#FFFFFF', + ), + 'polished' => array( + 'header-background' => '#313131', + 'header-foreground' => '#fff', + 'header-titles' => '#6B69EA', + 'secondary-background' => '#444', + 'secondary-foreground' => '#ddd', + 'tertiary' => '#313131', + 'secondary' => '#6B69EA', + 'primary' => '#5100FA', + 'base' => '#FFFFFF', + ), + 'nightowl' => array( + 'header-background' => '#06080A', + 'header-foreground' => '#fff', + 'header-titles' => '#FAAA14', + 'secondary-background' => '#0A0C0E', + 'secondary-foreground' => '#fff', + 'tertiary' => '#FFDFA3', + 'secondary' => '#06080A', + 'primary' => '#B97900', + 'base' => '#FFFFFF', + ), + 'subtle' => array( + 'header-background' => '#C7ADBB', + 'header-foreground' => '#5A3C4B', + 'header-titles' => '#5A3C4B', + 'secondary-background' => '#C7ADBB', + 'secondary-foreground' => '#5A3C4B', + 'tertiary' => '#D4C9CF', + 'secondary' => '#57203c', + 'primary' => '#5A3C4B', + 'base' => '#FFFFFF', + ), ), - 'cool' => array( - 'header-background' => '#C7DBFF', - 'header-foreground' => '#21447B', - 'header-titles' => '#21447B', - 'secondary-background' => '#C7DBFF', - 'secondary-foreground' => '#21447B', - 'tertiary' => '#C7DBFF', - 'secondary' => '#3764B4', - 'primary' => '#21447B', - 'base' => '#FFFFFF', - ), - 'warm' => array( - 'header-background' => '#FDE5D0', - 'header-foreground' => '#7A3921', - 'header-titles' => '#7A3921', - 'secondary-background' => '#FDE5D0', - 'secondary-foreground' => '#7A3921', - 'tertiary' => '#FFEDED', - 'secondary' => '#B97040', - 'primary' => '#7A3921', - 'base' => '#FFFFFF', - ), - 'radiant' => array( - 'header-background' => '#63156A', - 'header-foreground' => '#E3F7FF', - 'header-titles' => '#E3F7FF', - 'secondary-background' => '#781980', - 'secondary-foreground' => '#E3F7FF', - 'tertiary' => '#C7F0FF', - 'secondary' => '#64288C', - 'primary' => '#63156A', - 'base' => '#FFFFFF', - ), - 'bold' => array( - 'header-background' => '#FFD7F1', - 'header-foreground' => '#09857C', - 'header-titles' => '#09857C', - 'secondary-background' => '#ffddf3', - 'secondary-foreground' => '#09857C', - 'tertiary' => '#F2A3D6', - 'secondary' => '#076D66', - 'primary' => '#09857C', - 'base' => '#FFFFFF', - ), - 'retro' => array( - 'header-background' => '#096385', - 'header-foreground' => '#F2E6A2', - 'header-titles' => '#F2E6A2', - 'secondary-background' => '#096385', - 'secondary-foreground' => '#F2E6A2', - 'tertiary' => '#F2E6A2', - 'secondary' => '#BE9E00', - 'primary' => '#096385', - 'base' => '#FFFFFF', - ), - 'professional' => array( - 'header-background' => '#6D8258', - 'header-foreground' => '#F5FAFF', - 'header-titles' => '#D2E0F5', - 'secondary-background' => '#6D8258', - 'secondary-foreground' => '#F5FAFF', - 'tertiary' => '#d6e4f9', - 'secondary' => '#405F1C', - 'primary' => '#558320', - 'base' => '#FFFFFF', - ), - 'crisp' => array( - 'header-background' => '#ccc', - 'header-foreground' => '#333', - 'header-titles' => '#234', - 'secondary-background' => '#ccc', - 'secondary-foreground' => '#333', - 'tertiary' => '#777', - 'secondary' => '#17222E', - 'primary' => '#223344', - 'base' => '#FFFFFF', - ), - 'polished' => array( - 'header-background' => '#313131', - 'header-foreground' => '#fff', - 'header-titles' => '#6B69EA', - 'secondary-background' => '#444', - 'secondary-foreground' => '#ddd', - 'tertiary' => '#313131', - 'secondary' => '#6B69EA', - 'primary' => '#5100FA', - 'base' => '#FFFFFF', - ), - 'nightowl' => array( - 'header-background' => '#06080A', - 'header-foreground' => '#fff', - 'header-titles' => '#FAAA14', - 'secondary-background' => '#0A0C0E', - 'secondary-foreground' => '#fff', - 'tertiary' => '#FFDFA3', - 'secondary' => '#06080A', - 'primary' => '#B97900', - 'base' => '#FFFFFF', - ), - 'subtle' => array( - 'header-background' => '#C7ADBB', - 'header-foreground' => '#5A3C4B', - 'header-titles' => '#5A3C4B', - 'secondary-background' => '#C7ADBB', - 'secondary-foreground' => '#5A3C4B', - 'tertiary' => '#D4C9CF', - 'secondary' => '#57203c', - 'primary' => '#5A3C4B', - 'base' => '#FFFFFF', - ), - ), + 'custom-colors' => array( + 'base' => array( + 'header-foreground', + 'header-titles', + 'secondary-foreground' + ), + 'tertiary' => array( + 'header-background', + 'secondary-background' + ), + ) + ) ); /** diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index df8e1a39b..17694d71e 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -11,6 +11,7 @@ import Animate from '../../Animate'; const DesignColors = () => { const [ isLoaded, setIsLoaded ] = useState( false ); + const [ customColorsMap, setCustomColorsMap ] = useState(); const [ selectedColors, setSelectedColors ] = useState(); const [ showColorPicker, setShowColorPicker ] = useState( false ); const [ isAccordionClosed, setIsAccordionClosed ] = useState( true ); @@ -157,33 +158,19 @@ const DesignColors = () => { selectedThemeColorPalette[idx].color = customColors[slug]; } - if(true) + if(customColorsMap) { - switch (colorPickerCalledBy) { - case 'base': + const colorVariant = customColorsMap[colorPickerCalledBy]; + if ( colorVariant ) { + colorVariant.forEach(( variant ) => { if ( customColors && customColors[colorPickerCalledBy] !== undefined ) { - selectedThemeColorPalette[findInCustomColors("header-foreground", colorPickerCalledBy)].color = - customColors[colorPickerCalledBy]; - selectedThemeColorPalette[findInCustomColors("header-titles", colorPickerCalledBy)].color = - customColors[colorPickerCalledBy]; - selectedThemeColorPalette[findInCustomColors("secondary-foreground", colorPickerCalledBy)].color = - customColors[colorPickerCalledBy]; - } - break; - case 'tertiary': - if ( - customColors && - customColors[colorPickerCalledBy] !== undefined - ) { - selectedThemeColorPalette[findInCustomColors("header-background", colorPickerCalledBy)].color = - customColors[colorPickerCalledBy]; - selectedThemeColorPalette[findInCustomColors("secondary-background", colorPickerCalledBy)].color = + selectedThemeColorPalette[findInCustomColors(variant, colorPickerCalledBy)].color = customColors[colorPickerCalledBy]; } - break; + }) } } @@ -200,7 +187,8 @@ const DesignColors = () => { const getColorStylesAndPatterns = async () => { const colorPalettes = await getThemeColors(); - setColorPalettes( colorPalettes?.body ); + setColorPalettes(colorPalettes?.body['color-palettes'] ); + setCustomColorsMap(colorPalettes?.body['custom-colors'] ); let selectedColors; let selectedColorsLocal; if ( ! currentData?.data?.palette?.slug === '' ) { From 16029b62171e2ca4498bce19dd9999e428c5d818 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 7 Feb 2023 14:48:32 +0530 Subject: [PATCH 04/10] Fixed Lint --- includes/Data/Themes/Colors.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/includes/Data/Themes/Colors.php b/includes/Data/Themes/Colors.php index b5d7e6868..eae152cbc 100644 --- a/includes/Data/Themes/Colors.php +++ b/includes/Data/Themes/Colors.php @@ -137,18 +137,18 @@ final class Colors { 'base' => '#FFFFFF', ), ), - 'custom-colors' => array( - 'base' => array( + 'custom-colors' => array( + 'base' => array( 'header-foreground', 'header-titles', - 'secondary-foreground' + 'secondary-foreground', ), 'tertiary' => array( 'header-background', - 'secondary-background' + 'secondary-background', ), - ) - ) + ), + ), ); /** From c3b80756243f2036891bc8fc3cba1e0bfa1ffb66 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Thu, 9 Feb 2023 16:55:33 +0530 Subject: [PATCH 05/10] Renamed Color Palette API Responses --- includes/Data/Themes/Colors.php | 4 ++-- .../components/Drawer/DrawerPanel/DesignColors.js | 7 +++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/includes/Data/Themes/Colors.php b/includes/Data/Themes/Colors.php index eae152cbc..2ebbc48be 100644 --- a/includes/Data/Themes/Colors.php +++ b/includes/Data/Themes/Colors.php @@ -14,7 +14,7 @@ final class Colors { */ protected static $theme_colors = array( 'yith-wonder' => array( - 'color-palettes' => array( + 'tailored' => array( 'calm' => array( 'header-background' => '#1A4733', 'header-foreground' => '#FFFFFF', @@ -137,7 +137,7 @@ final class Colors { 'base' => '#FFFFFF', ), ), - 'custom-colors' => array( + 'custom-picker-grouping' => array( 'base' => array( 'header-foreground', 'header-titles', diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index 937d165f8..6916dd89e 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -145,9 +145,8 @@ const DesignColors = () => { } function findInCustomColors(slugName, colorPickerCalledBy) { - const selectedGlobalStyle = storedPreviewSettings; const selectedThemeColorPalette = - selectedGlobalStyle?.settings?.color?.palette; + storedPreviewSettings?.settings?.color?.palette; const res = selectedThemeColorPalette.findIndex(({ slug }) => slug === slugName ); if(res === -1) return selectedThemeColorPalette.findIndex(({ slug }) => slug === colorPickerCalledBy); @@ -201,8 +200,8 @@ const DesignColors = () => { if ( colorPalettes?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } - setColorPalettes(colorPalettes?.body['color-palettes']); - setCustomColorsMap(colorPalettes?.body['custom-colors']); + setColorPalettes(colorPalettes?.body['tailored']); + setCustomColorsMap(colorPalettes?.body['custom-picker-grouping']); let selectedColors; let selectedColorsLocal; if ( ! currentData?.data?.palette?.slug === '' ) { From 5852497648856dac71e373744dc82a165c0fb925 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 14 Feb 2023 14:32:15 +0530 Subject: [PATCH 06/10] Fixed a Bug --- .../components/Drawer/DrawerPanel/DesignColors.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index 6916dd89e..7944d58a3 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -108,7 +108,8 @@ const DesignColors = () => { const slug = selectedThemeColorPalette[ idx ]?.slug; if ( isCustomStyle && - selectedColorsLocalTemp?.[ slug ] != '' + selectedColorsLocalTemp?.[ slug ] != '' && + selectedColorsLocalTemp?.[slug] != undefined ) selectedThemeColorPalette[ idx ].color = selectedColorsLocalTemp[ slug ]; From 993efbbbebc800ad3ede538b830148f57bbf92be Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 14 Feb 2023 18:26:21 +0530 Subject: [PATCH 07/10] Fixed Bug 2.0 --- includes/Data/Themes/Colors.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/Data/Themes/Colors.php b/includes/Data/Themes/Colors.php index 2ebbc48be..a00054c74 100644 --- a/includes/Data/Themes/Colors.php +++ b/includes/Data/Themes/Colors.php @@ -18,7 +18,7 @@ final class Colors { 'calm' => array( 'header-background' => '#1A4733', 'header-foreground' => '#FFFFFF', - 'header-title' => '#FFFFFF', + 'header-titles' => '#FFFFFF', 'secondary-background' => '#1A4733', 'secondary-foreground' => '#FFF', 'tertiary' => '#C7DBFF', From 7c61b1bfeb8dcf7de9169933714951485b8eb192 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 15 Feb 2023 10:57:08 +0530 Subject: [PATCH 08/10] Keep Accordion Open if Custom Colors Active --- .../components/Drawer/DrawerPanel/DesignColors.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index 7944d58a3..cfeb0a56b 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -1,7 +1,7 @@ import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; -import { useState, useEffect } from '@wordpress/element'; import { Popover, ColorPicker } from '@wordpress/components'; +import { useState, useEffect, useRef } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../../store'; import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes'; @@ -14,6 +14,7 @@ import { import Animate from '../../Animate'; const DesignColors = () => { + const customColorsResetRef = useRef( null ); const [ isLoaded, setIsLoaded ] = useState( false ); const [ customColorsMap, setCustomColorsMap ] = useState(); const [ selectedColors, setSelectedColors ] = useState(); @@ -231,6 +232,10 @@ const DesignColors = () => { useEffect( () => { if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus ) getColorStylesAndPatterns(); + if ( isCustomColorActive() ) { + setIsAccordionClosed( false ); + customColorsResetRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' }); + } }, [ isLoaded, themeStatus ] ); const handleClick = ( colorStyle ) => { @@ -462,7 +467,7 @@ const DesignColors = () => { { isCustomColorActive() && ( -
+
Reset
From 73f696e140f457cea0b2612bccad15cbca64fe45 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 15 Feb 2023 11:13:26 +0530 Subject: [PATCH 09/10] Update DesignColors.js --- .../Drawer/DrawerPanel/DesignColors.js | 92 ++++++++++++------- 1 file changed, 60 insertions(+), 32 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index cfeb0a56b..402651162 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -7,10 +7,7 @@ import { store as nfdOnboardingStore } from '../../../store'; import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; import { GlobalStylesProvider } from '../../LivePreview'; -import { - THEME_STATUS_ACTIVE, - THEME_STATUS_INIT, -} from '../../../../constants'; +import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT } from '../../../../constants'; import Animate from '../../Animate'; const DesignColors = () => { @@ -109,8 +106,8 @@ const DesignColors = () => { const slug = selectedThemeColorPalette[ idx ]?.slug; if ( isCustomStyle && - selectedColorsLocalTemp?.[ slug ] != '' && - selectedColorsLocalTemp?.[slug] != undefined + selectedColorsLocalTemp?.[ slug ] != '' && + selectedColorsLocalTemp?.[ slug ] != undefined ) selectedThemeColorPalette[ idx ].color = selectedColorsLocalTemp[ slug ]; @@ -129,6 +126,23 @@ const DesignColors = () => { selectedThemeColorPalette[ idx ].color = colorPalettesTemp[ colorStyle ][ slug ]; } + + if ( customColorsMap ) { + const colorVariant = customColorsMap[ slug ]; + if ( colorVariant ) { + colorVariant.forEach( ( variant ) => { + if ( + customColors && + customColors[ slug ] !== undefined + ) { + selectedThemeColorPalette[ + findInCustomColors( variant, slug ) + ].color = customColors[ slug ]; + } + } ); + } + } + break; } } @@ -146,12 +160,16 @@ const DesignColors = () => { } } - function findInCustomColors(slugName, colorPickerCalledBy) { + function findInCustomColors( slugName, colorPickerCalledBy ) { const selectedThemeColorPalette = storedPreviewSettings?.settings?.color?.palette; - const res = selectedThemeColorPalette.findIndex(({ slug }) => slug === slugName ); - if(res === -1) - return selectedThemeColorPalette.findIndex(({ slug }) => slug === colorPickerCalledBy); + const res = selectedThemeColorPalette.findIndex( + ( { slug } ) => slug === slugName + ); + if ( res === -1 ) + return selectedThemeColorPalette.findIndex( + ( { slug } ) => slug === colorPickerCalledBy + ); return res; } @@ -162,27 +180,31 @@ const DesignColors = () => { if ( selectedThemeColorPalette ) { for ( let idx = 0; idx < selectedThemeColorPalette.length; idx++ ) { - const slug = selectedThemeColorPalette[idx]?.slug; + const slug = selectedThemeColorPalette[ idx ]?.slug; if ( - colorPickerCalledBy === slug && customColors && - customColors[slug] !== undefined + colorPickerCalledBy === slug && + customColors && + customColors[ slug ] !== undefined ) - selectedThemeColorPalette[idx].color = - customColors[slug]; + selectedThemeColorPalette[ idx ].color = + customColors[ slug ]; } - if(customColorsMap) - { - const colorVariant = customColorsMap[colorPickerCalledBy]; + if ( customColorsMap ) { + const colorVariant = customColorsMap[ colorPickerCalledBy ]; if ( colorVariant ) { - colorVariant.forEach(( variant ) => { + colorVariant.forEach( ( variant ) => { if ( customColors && - customColors[colorPickerCalledBy] !== undefined + customColors[ colorPickerCalledBy ] !== undefined ) { - selectedThemeColorPalette[findInCustomColors(variant, colorPickerCalledBy)].color = - customColors[colorPickerCalledBy]; + selectedThemeColorPalette[ + findInCustomColors( + variant, + colorPickerCalledBy + ) + ].color = customColors[ colorPickerCalledBy ]; } - }) + } ); } } @@ -202,8 +224,8 @@ const DesignColors = () => { if ( colorPalettes?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } - setColorPalettes(colorPalettes?.body['tailored']); - setCustomColorsMap(colorPalettes?.body['custom-picker-grouping']); + setColorPalettes( colorPalettes?.body.tailored ); + setCustomColorsMap( colorPalettes?.body[ 'custom-picker-grouping' ] ); let selectedColors; let selectedColorsLocal; if ( ! currentData?.data?.palette?.slug === '' ) { @@ -234,7 +256,10 @@ const DesignColors = () => { getColorStylesAndPatterns(); if ( isCustomColorActive() ) { setIsAccordionClosed( false ); - customColorsResetRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' }); + customColorsResetRef.current.scrollIntoView( { + behavior: 'smooth', + block: 'end', + } ); } }, [ isLoaded, themeStatus ] ); @@ -267,7 +292,7 @@ const DesignColors = () => { }; async function resetColors() { - const globalStyles = await getGlobalStyles(true); + const globalStyles = await getGlobalStyles( true ); let selectedGlobalStyle; if ( currentData?.data?.theme?.variation ) { selectedGlobalStyle = globalStyles.body.filter( @@ -336,9 +361,8 @@ const DesignColors = () => { } function isCustomColorActive() { - for (const custom in customColors) - if(customColors[custom] != '') - return true; + for ( const custom in customColors ) + if ( customColors[ custom ] != '' ) return true; return false; } @@ -466,8 +490,12 @@ const DesignColors = () => {
{ isCustomColorActive() && ( - -
+ +
Reset
 From 9a92b124936a8bc4a9602207bb4a44898a64f9e3 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Wed, 15 Feb 2023 18:43:21 +0530 Subject: [PATCH 10/10] Removed Redundant Computation --- .../components/Drawer/DrawerPanel/DesignColors.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index 402651162..a82074a31 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -242,12 +242,6 @@ const DesignColors = () => { } } setSelectedColors( selectedColors ); - saveThemeColorPalette( - currentData?.data?.palette.slug, - colorPalettes?.body, - selectedColorsLocal, - storedPreviewSettings - ); setIsLoaded( true ); };