From 6737820cccff1741b2551e0c9347e9aa56ac5e7e Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Thu, 1 Aug 2024 11:46:14 +0300 Subject: [PATCH 01/12] Created component skeleton for ColorPickerPOC --- ColorPickerPOC/ColorPickerPOC.js | 151 ++++++++++++++++++ ColorPickerPOC/ColorPickerPOC.module.less | 32 ++++ ColorPickerPOC/package.json | 3 + .../sampler/stories/default/ColorPickerPOC.js | 22 +++ 4 files changed, 208 insertions(+) create mode 100644 ColorPickerPOC/ColorPickerPOC.js create mode 100644 ColorPickerPOC/ColorPickerPOC.module.less create mode 100644 ColorPickerPOC/package.json create mode 100644 samples/sampler/stories/default/ColorPickerPOC.js diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js new file mode 100644 index 0000000000..74dbb510e7 --- /dev/null +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -0,0 +1,151 @@ +import kind from '@enact/core/kind'; +import Spottable from '@enact/spotlight/Spottable'; +import {Cell, Row} from '@enact/ui/Layout'; +import Toggleable from '@enact/ui/Toggleable'; +import ri from '@enact/ui/resolution'; +import PropTypes from 'prop-types'; +import compose from 'ramda/src/compose'; +import {useCallback, useState} from 'react'; + +import {Button, ButtonBase} from '../Button'; +import Popup from '../Popup'; +import Skinnable from '../Skinnable'; +import TabLayout, {Tab} from '../TabLayout'; + +import componentsCss from './ColorPickerPOC.module.less'; + +const SpottableButton = Spottable(ButtonBase); + +const FavoriteColors = ({colorHandler, colors = [], css, selectedColor = '#3455eb'}) => { + const [currentColor, setCurrentColor] = useState(selectedColor); + const [favoriteColors, setFavoriteColors] = useState(colors); + + const onSelectFavoriteColor = useCallback((ev) => { + const color = ev.target.offsetParent.id; + setCurrentColor(color); + + colorHandler({currentColor: color, favoriteColors}); + }, [colorHandler, favoriteColors]); + + const addNewFavoriteColor = useCallback(() => { + if (favoriteColors.length > 6) favoriteColors.shift(); + + setFavoriteColors(prevState => { + const colorsState = [...prevState, selectedColor]; + colorHandler({currentColor, favoriteColors: colorsState}); + + return colorsState; + }); + }, [colorHandler, currentColor, favoriteColors, selectedColor]); + + const onAddNewFavoriteColor = useCallback(() => { + if (!document.startViewTransition) { + addNewFavoriteColor(); + return; + } + + document.startViewTransition(() => { + addNewFavoriteColor(); + }); + }, [addNewFavoriteColor]); + + return ( +
+ + + {favoriteColors.length >= 4 &&
+ ); +}; + +const ColorPickerPOCBase = kind({ + name: 'ColorPickerPOC', + + functional: true, + + propTypes: { + color: PropTypes.string, + colors: PropTypes.array, + css: PropTypes.object, + favoriteColors: PropTypes.array, + onChangeColor: PropTypes.func, + onToggleColorPicker: PropTypes.func, + open: PropTypes.bool + }, + + handlers: { + handleOpenPopup: (ev, {onToggleColorPicker}) => { + onToggleColorPicker(); + } + }, + + styles: { + css: componentsCss + }, + + render: ({color, open, colors, css, onChangeColor, ...rest}) => { + + return ( + + + + + +
+ Grid +
+ + +
+ Spectrum +
+ + +
+ Sliders +
+ + + + + + + + + ); + } +}); + +const ColorPickerPOCDecorator = compose( + Skinnable, + Toggleable({prop: 'colorPickerOpen', toggle: 'onToggleColorPicker'}) +); + +const ColorPickerPOC = ColorPickerPOCDecorator(ColorPickerPOCBase); + +export default ColorPickerPOC; +export { + ColorPickerPOC, + ColorPickerPOCBase, + ColorPickerPOCDecorator +}; diff --git a/ColorPickerPOC/ColorPickerPOC.module.less b/ColorPickerPOC/ColorPickerPOC.module.less new file mode 100644 index 0000000000..54907e6f68 --- /dev/null +++ b/ColorPickerPOC/ColorPickerPOC.module.less @@ -0,0 +1,32 @@ +@import '../styles/mixins.less'; + +.colorPicker { + height: 800px; + width: 800px; +} + +.content { + margin-inline: auto; +} + +.presetColorsRow { + text-align: end; + + .currentColor { + border: 2px solid rgba(204, 204, 204, 0.9); + border-radius: 24px; + height: 240px; + width: 93%; + } + + .presetColor { + border: 2px solid rgba(204, 204, 204, 0.9); + border-radius: 50%; + transition: transform .2s; + + .focus({ + box-shadow: 0 0 0 18px rgba(204, 204, 204, 0.6) inset; + transform: scale(1.1); + }); + } +} \ No newline at end of file diff --git a/ColorPickerPOC/package.json b/ColorPickerPOC/package.json new file mode 100644 index 0000000000..39b80f324f --- /dev/null +++ b/ColorPickerPOC/package.json @@ -0,0 +1,3 @@ +{ + "main": "ColorPickerPOC.js" +} diff --git a/samples/sampler/stories/default/ColorPickerPOC.js b/samples/sampler/stories/default/ColorPickerPOC.js new file mode 100644 index 0000000000..ce65778ae7 --- /dev/null +++ b/samples/sampler/stories/default/ColorPickerPOC.js @@ -0,0 +1,22 @@ +import {action} from '@enact/storybook-utils/addons/actions'; + +import ColorPicker from '../../../../ColorPickerPOC/ColorPickerPOC'; + +ColorPicker.displayName = 'ColorPicker'; + +const colors = ['#eb4034', '#32a852', '#3455eb']; + +export default { + title: 'Sandstone/ColorPicker', + component: 'ColorPicker', +} + +export const _ColorPicker = (args) => ( + +); + +_ColorPicker.displayName = 'ColorPicker'; \ No newline at end of file From cd09f1aced33b9abadb589a9a8f5e93459e44fa9 Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Thu, 1 Aug 2024 11:50:47 +0300 Subject: [PATCH 02/12] Added propTypes --- ColorPickerPOC/ColorPickerPOC.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index 74dbb510e7..183ad35337 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -78,6 +78,13 @@ const FavoriteColors = ({colorHandler, colors = [], css, selectedColor = '#3455e ); }; +FavoriteColors.propTypes = { + colorHandler: PropTypes.func, + colors: PropTypes.array, + css: PropTypes.object, + selectedColor: PropTypes.string +}; + const ColorPickerPOCBase = kind({ name: 'ColorPickerPOC', @@ -103,7 +110,7 @@ const ColorPickerPOCBase = kind({ css: componentsCss }, - render: ({color, open, colors, css, onChangeColor, ...rest}) => { + render: ({color, open, colors, css, onChangeColor}) => { return ( From 64ae888dd735615e8037ab3606e319cb98f86308 Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Thu, 1 Aug 2024 12:17:23 +0300 Subject: [PATCH 03/12] Fixed lint warnings --- ColorPickerPOC/ColorPickerPOC.module.less | 2 +- samples/sampler/stories/default/ColorPickerPOC.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/ColorPickerPOC/ColorPickerPOC.module.less b/ColorPickerPOC/ColorPickerPOC.module.less index 54907e6f68..2d3c2de9b4 100644 --- a/ColorPickerPOC/ColorPickerPOC.module.less +++ b/ColorPickerPOC/ColorPickerPOC.module.less @@ -29,4 +29,4 @@ transform: scale(1.1); }); } -} \ No newline at end of file +} diff --git a/samples/sampler/stories/default/ColorPickerPOC.js b/samples/sampler/stories/default/ColorPickerPOC.js index ce65778ae7..519cca94ec 100644 --- a/samples/sampler/stories/default/ColorPickerPOC.js +++ b/samples/sampler/stories/default/ColorPickerPOC.js @@ -8,15 +8,15 @@ const colors = ['#eb4034', '#32a852', '#3455eb']; export default { title: 'Sandstone/ColorPicker', - component: 'ColorPicker', -} + component: 'ColorPicker' +}; -export const _ColorPicker = (args) => ( +export const _ColorPicker = () => ( ); -_ColorPicker.displayName = 'ColorPicker'; \ No newline at end of file +_ColorPicker.displayName = 'ColorPicker'; From 5dd50d9faedd9cfbba5c005959239a3b14f3cf9c Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Fri, 2 Aug 2024 10:48:19 +0300 Subject: [PATCH 04/12] Added option to remove favorite color on long press --- ColorPickerPOC/ColorPickerPOC.js | 81 ++++++++++++++++++++--- ColorPickerPOC/ColorPickerPOC.module.less | 5 ++ 2 files changed, 77 insertions(+), 9 deletions(-) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index 183ad35337..8620f889f9 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -5,9 +5,10 @@ import Toggleable from '@enact/ui/Toggleable'; import ri from '@enact/ui/resolution'; import PropTypes from 'prop-types'; import compose from 'ramda/src/compose'; -import {useCallback, useState} from 'react'; +import {useCallback, useRef, useState} from 'react'; import {Button, ButtonBase} from '../Button'; +import Icon from '../Icon'; import Popup from '../Popup'; import Skinnable from '../Skinnable'; import TabLayout, {Tab} from '../TabLayout'; @@ -19,16 +20,26 @@ const SpottableButton = Spottable(ButtonBase); const FavoriteColors = ({colorHandler, colors = [], css, selectedColor = '#3455eb'}) => { const [currentColor, setCurrentColor] = useState(selectedColor); const [favoriteColors, setFavoriteColors] = useState(colors); + const [editMode, setEditMode] = useState(false); + const timerRef = useRef(null); const onSelectFavoriteColor = useCallback((ev) => { + if (editMode) { + const target = ev.target.offsetParent.id; + const [buttonColor, buttonIndex] = target.split('-'); + setFavoriteColors(prevState => + prevState.filter((stateColor, index) => + !(stateColor === buttonColor && index === Number(favoriteColors.length - buttonIndex - 1)))); + return; + } const color = ev.target.offsetParent.id; setCurrentColor(color); colorHandler({currentColor: color, favoriteColors}); - }, [colorHandler, favoriteColors]); + }, [colorHandler, favoriteColors, editMode]); const addNewFavoriteColor = useCallback(() => { - if (favoriteColors.length > 6) favoriteColors.shift(); + if (favoriteColors.length > 10) favoriteColors.shift(); setFavoriteColors(prevState => { const colorsState = [...prevState, selectedColor]; @@ -39,6 +50,10 @@ const FavoriteColors = ({colorHandler, colors = [], css, selectedColor = '#3455e }, [colorHandler, currentColor, favoriteColors, selectedColor]); const onAddNewFavoriteColor = useCallback(() => { + if (editMode) { + setEditMode(false); + return; + } if (!document.startViewTransition) { addNewFavoriteColor(); return; @@ -47,31 +62,79 @@ const FavoriteColors = ({colorHandler, colors = [], css, selectedColor = '#3455e document.startViewTransition(() => { addNewFavoriteColor(); }); - }, [addNewFavoriteColor]); + }, [addNewFavoriteColor, editMode]); + + const onMouseDown = useCallback(() => { + timerRef.current = setTimeout(() => { + setEditMode(true); + }, 1000); + + }, [timerRef]); + + const onMouseUp = useCallback(() => { + clearTimeout(timerRef.current); + }, []); return (
- {favoriteColors.length >= 4 &&
); }; @@ -145,7 +152,7 @@ FavoriteColors.propTypes = { }; -const ColorPickerPOCBase = ({color, colors = [], css, onChangeColor, open, ...rest}) => { +const ColorPickerPOCBase = ({color = '#eb4034', colors = [], css, onChangeColor, open, ...rest}) => { const [selectedColor, setSelectedColor] = useState(color); useEffect(() => { @@ -157,7 +164,7 @@ const ColorPickerPOCBase = ({color, colors = [], css, onChangeColor, open, ...re return ( - +
@@ -176,8 +183,16 @@ const ColorPickerPOCBase = ({color, colors = [], css, onChangeColor, open, ...re - - + + + + diff --git a/ColorPickerPOC/ColorPickerPOC.module.less b/ColorPickerPOC/ColorPickerPOC.module.less index d92fe89e2d..3c5d606f1f 100644 --- a/ColorPickerPOC/ColorPickerPOC.module.less +++ b/ColorPickerPOC/ColorPickerPOC.module.less @@ -1,26 +1,30 @@ @import '../styles/mixins.less'; .colorPicker { - height: 800px; - width: 800px; -} + display: flex; + justify-content: center; + min-width: 800px; -.content { - margin-inline: auto; } -.presetColorsRow { - text-align: end; +.currentColor { + border: 9px solid; + border-radius: 24px; + height: 240px; + transition: transform .3s; + width: 100%; - .currentColor { - border: 2px solid rgba(204, 204, 204, 0.9); - border-radius: 24px; - height: 240px; - width: 93%; - } + .focus({ + box-shadow: 0 0 12px 6px inset; + transform: scale(1.05); + }); +} + +.favoriteColorsRow { + text-align: center; - .presetColor { - border: 2px solid rgba(204, 204, 204, 0.9); + .favoriteColor { + border: 6px solid; border-radius: 50%; transition: transform .2s; @@ -30,7 +34,7 @@ } .focus({ - box-shadow: 0 0 0 18px rgba(204, 204, 204, 0.6) inset; + box-shadow: 0 0 12px 3px inset; transform: scale(1.1); }); } diff --git a/ColorPickerPOC/utils.js b/ColorPickerPOC/utils.js index d7d843a4ea..7fdc61af66 100644 --- a/ColorPickerPOC/utils.js +++ b/ColorPickerPOC/utils.js @@ -12,6 +12,20 @@ function rgbStringToHex (rgbString) { return ("#" + a[0] + a[1] + a[2]).toUpperCase(); } +const generateOppositeColor = (hexColor) => { + hexColor = hexColor.replace('#', ''); + + const bigint = parseInt(hexColor, 16) + const r = (bigint >> 16) & 255; + const g = (bigint >> 8) & 255; + const b = bigint & 255; + + const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b; + + return luminance > 128 ? '#101720CC' : '#FFFFFFCC'; +} + export { - rgbStringToHex + rgbStringToHex, + generateOppositeColor }; diff --git a/samples/sampler/stories/default/ColorPickerPOC.js b/samples/sampler/stories/default/ColorPickerPOC.js index 7be45636d1..9addacaec8 100644 --- a/samples/sampler/stories/default/ColorPickerPOC.js +++ b/samples/sampler/stories/default/ColorPickerPOC.js @@ -12,6 +12,7 @@ export default { export const _ColorPicker = () => ( Date: Mon, 5 Aug 2024 15:10:46 +0300 Subject: [PATCH 06/12] Added shake animation for delete action --- ColorPickerPOC/ColorPickerPOC.js | 47 +++++++++++++---------- ColorPickerPOC/ColorPickerPOC.module.less | 29 +++++++++++--- ColorPickerPOC/utils.js | 4 +- 3 files changed, 53 insertions(+), 27 deletions(-) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index 46881fd10e..e6f9151f75 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -20,9 +20,10 @@ const SpottableButton = Spottable(ButtonBase); const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', selectedColorHandler}) => { const [clickEnabled, setClickEnabled] = useState(true); - const [editMode, setEditMode] = useState(false); + const [editEnabled, setEditEnabled] = useState(false); const [favoriteColors, setFavoriteColors] = useState(colors); + const shakeEffectRef = useRef(null); const timerRef = useRef(null); const addNewFavoriteColor = useCallback(() => { @@ -37,36 +38,44 @@ const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', s }, [colorHandler, favoriteColors, selectedColor]); const onAddNewFavoriteColor = useCallback(() => { - if (editMode) { - setEditMode(false); + if (editEnabled) { + setEditEnabled(false); return; } addNewFavoriteColor(); - }, [addNewFavoriteColor, editMode]); + }, [addNewFavoriteColor, editEnabled]); const onSelectFavoriteColor = useCallback((ev) => { if (!clickEnabled) return; - const target = ev.target.offsetParent.id || ev.target.id; - const [buttonColor, buttonIndex] = target.split('-'); - if (editMode && clickEnabled) { + const targetId = ev.target.offsetParent.id || ev.target.id; + const [buttonColor, buttonIndex] = targetId.split('-'); + if (editEnabled && clickEnabled) { setFavoriteColors(prevState => prevState.filter((stateColor, index) => { - return !(stateColor === buttonColor && index === Number(buttonIndex)) - })) + return !(stateColor === buttonColor && index === Number(buttonIndex)); + })); return; } selectedColorHandler(buttonColor); colorHandler({currentColor: buttonColor, favoriteColors}); - }, [clickEnabled, colorHandler, editMode, favoriteColors, selectedColorHandler]); - - const onMouseDown = useCallback(() => { + }, [clickEnabled, colorHandler, editEnabled, favoriteColors, selectedColorHandler]); + + const onMouseDown = useCallback((ev) => { + if (editEnabled) return; + const target = ev.target.id ? ev.target : ev.target.offsetParent; + shakeEffectRef.current = setTimeout(() => { + target.classList.add(componentsCss.shakeFavoriteColor); + }, 300); timerRef.current = setTimeout(() => { - setEditMode(true); + setEditEnabled(true); setClickEnabled(false); }, 1000); - }, []); + }, [editEnabled]); - const onMouseUp = useCallback(() => { + const onMouseUp = useCallback((ev) => { + const target = ev.target.id ? ev.target : ev.target.offsetParent; + target.classList.remove(componentsCss.shakeFavoriteColor); + clearTimeout(shakeEffectRef.current); clearTimeout(timerRef.current); setTimeout(() => { setClickEnabled(true); @@ -87,7 +96,6 @@ const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', s onClick={onSelectFavoriteColor} onMouseDown={onMouseDown} onMouseUp={onMouseUp} - onSpotlightDown={onSelectFavoriteColor} size={'small'} style={{ backgroundColor: color, @@ -95,7 +103,7 @@ const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', s color: generateOppositeColor(color) }} > - {editMode && trash} + {editEnabled && trash} ); })} @@ -118,7 +126,7 @@ const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', s color: generateOppositeColor(color) }} > - {editMode && trash} + {editEnabled && trash} ); })} @@ -129,14 +137,13 @@ const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', s className={componentsCss.currentColor} minWidth={false} onClick={onAddNewFavoriteColor} - onSpotlightDown={onAddNewFavoriteColor} style={{ backgroundColor: selectedColor, borderColor: generateOppositeColor(selectedColor), color: generateOppositeColor(selectedColor) }} > - {editMode ? 'check' : 'plus'} + {editEnabled ? 'check' : 'plus'}
diff --git a/ColorPickerPOC/ColorPickerPOC.module.less b/ColorPickerPOC/ColorPickerPOC.module.less index 3c5d606f1f..52cc3514e0 100644 --- a/ColorPickerPOC/ColorPickerPOC.module.less +++ b/ColorPickerPOC/ColorPickerPOC.module.less @@ -4,19 +4,25 @@ display: flex; justify-content: center; min-width: 800px; - } .currentColor { - border: 9px solid; border-radius: 24px; + border: 9px solid; height: 240px; - transition: transform .3s; + transition: transform .2s; width: 100%; + .currentColorIcon { + transition: transform .2s; + } + .focus({ box-shadow: 0 0 12px 6px inset; - transform: scale(1.05); + + .currentColorIcon { + transform: scale(1.2); + } }); } @@ -24,8 +30,8 @@ text-align: center; .favoriteColor { - border: 6px solid; border-radius: 50%; + border: 6px solid; transition: transform .2s; .deleteButton { @@ -38,4 +44,17 @@ transform: scale(1.1); }); } + + .shakeFavoriteColor { + animation: shakeColor 0.2s; + animation-iteration-count: infinite; + } +} + +@keyframes shakeColor { + 0% { transform: translateX(0) } + 25% { transform: translateX(3px) } + 50% { transform: translateX(-3px) } + 75% { transform: translateX(3px) } + 100% { transform: translateX(0) } } diff --git a/ColorPickerPOC/utils.js b/ColorPickerPOC/utils.js index 7fdc61af66..34acb0acac 100644 --- a/ColorPickerPOC/utils.js +++ b/ColorPickerPOC/utils.js @@ -15,7 +15,7 @@ function rgbStringToHex (rgbString) { const generateOppositeColor = (hexColor) => { hexColor = hexColor.replace('#', ''); - const bigint = parseInt(hexColor, 16) + const bigint = parseInt(hexColor, 16); const r = (bigint >> 16) & 255; const g = (bigint >> 8) & 255; const b = bigint & 255; @@ -23,7 +23,7 @@ const generateOppositeColor = (hexColor) => { const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b; return luminance > 128 ? '#101720CC' : '#FFFFFFCC'; -} +}; export { rgbStringToHex, From d5d000c2f091fb8af2738ac43bb36f404b411239 Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Tue, 6 Aug 2024 10:16:51 +0300 Subject: [PATCH 07/12] Added shake animation for delete action --- ColorPickerPOC/ColorPickerPOC.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index e6f9151f75..a85862b767 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -49,6 +49,7 @@ const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', s if (!clickEnabled) return; const targetId = ev.target.offsetParent.id || ev.target.id; const [buttonColor, buttonIndex] = targetId.split('-'); + if (editEnabled && clickEnabled) { setFavoriteColors(prevState => prevState.filter((stateColor, index) => { @@ -56,6 +57,7 @@ const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', s })); return; } + selectedColorHandler(buttonColor); colorHandler({currentColor: buttonColor, favoriteColors}); }, [clickEnabled, colorHandler, editEnabled, favoriteColors, selectedColorHandler]); @@ -63,18 +65,22 @@ const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', s const onMouseDown = useCallback((ev) => { if (editEnabled) return; const target = ev.target.id ? ev.target : ev.target.offsetParent; + shakeEffectRef.current = setTimeout(() => { target.classList.add(componentsCss.shakeFavoriteColor); }, 300); + timerRef.current = setTimeout(() => { setEditEnabled(true); setClickEnabled(false); + target.classList.remove(componentsCss.shakeFavoriteColor); }, 1000); }, [editEnabled]); const onMouseUp = useCallback((ev) => { const target = ev.target.id ? ev.target : ev.target.offsetParent; target.classList.remove(componentsCss.shakeFavoriteColor); + clearTimeout(shakeEffectRef.current); clearTimeout(timerRef.current); setTimeout(() => { From 758d0ae22295ce07cca76745ad2192a94e3c8204 Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Thu, 8 Aug 2024 11:14:14 +0300 Subject: [PATCH 08/12] Added handler to display colors state in actions log when favorite color is removed --- ColorPickerPOC/ColorPickerPOC.js | 42 +++++++++++++---------- ColorPickerPOC/ColorPickerPOC.module.less | 35 +++++++++++-------- 2 files changed, 44 insertions(+), 33 deletions(-) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index 233764ea5a..50e37082ed 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -20,24 +20,22 @@ import componentsCss from './ColorPickerPOC.module.less'; const SpottableButton = Spottable(ButtonBase); -const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', selectedColorHandler}) => { +const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedColor = '#3455eb', selectedColorHandler}) => { const [clickEnabled, setClickEnabled] = useState(true); const [editEnabled, setEditEnabled] = useState(false); - const [favoriteColors, setFavoriteColors] = useState(colors); const shakeEffectRef = useRef(null); const timerRef = useRef(null); const addNewFavoriteColor = useCallback(() => { if (favoriteColors.includes(selectedColor)) return; - setFavoriteColors(prevState => { - const colorsState = [...prevState, selectedColor]; + favoriteColorsHandler(() => { + const colorsState = [...favoriteColors, selectedColor]; if (colorsState.length > 8) colorsState.shift(); - colorHandler({selectedColor, favoriteColors: colorsState}); return colorsState; }); - }, [colorHandler, favoriteColors, selectedColor]); + }, [favoriteColors, favoriteColorsHandler, selectedColor]); const onAddNewFavoriteColor = useCallback(() => { if (editEnabled) { @@ -53,16 +51,18 @@ const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', s const [buttonColor, buttonIndex] = targetId.split('-'); if (editEnabled && clickEnabled) { - setFavoriteColors(prevState => - prevState.filter((stateColor, index) => { - return !(stateColor === buttonColor && index === Number(buttonIndex)); - })); + const filteredColors = favoriteColors.filter((color, index) => { + return !(color === buttonColor && index === Number(buttonIndex)); + }); + + favoriteColorsHandler(filteredColors); + selectedColorHandler(selectedColor); return; } + favoriteColorsHandler(favoriteColors); selectedColorHandler(buttonColor); - colorHandler({currentColor: buttonColor, favoriteColors}); - }, [clickEnabled, colorHandler, editEnabled, favoriteColors, selectedColorHandler]); + }, [clickEnabled, editEnabled, favoriteColors, favoriteColorsHandler, selectedColorHandler]); const onMouseDown = useCallback((ev) => { if (editEnabled) return; @@ -127,6 +127,7 @@ const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', s onClick={onSelectFavoriteColor} onMouseDown={onMouseDown} onMouseUp={onMouseUp} + onPointerDown={onMouseDown} size={'small'} style={{ backgroundColor: color, @@ -140,9 +141,9 @@ const FavoriteColors = ({colorHandler, colors = [], selectedColor = '#3455eb', s })} - + - {editEnabled ? 'check' : 'plus'} + {editEnabled ? 'check' : 'plus'} @@ -162,19 +163,22 @@ FavoriteColors.propTypes = { colorHandler: PropTypes.func, colors: PropTypes.array, css: PropTypes.object, + favoriteColors: PropTypes.array, + favoriteColorsHandler: PropTypes.func, selectedColor: PropTypes.string, selectedColorHandler: PropTypes.func }; const ColorPickerPOCBase = ({color = '#eb4034', colors = [], css, onChangeColor, open, ...rest}) => { + const [favoriteColors, setFavoriteColors] = useState(colors); const [selectedColor, setSelectedColor] = useState(color); useEffect(() => { - if (selectedColor) { - onChangeColor({currentColor: selectedColor}); + if (selectedColor || favoriteColors) { + onChangeColor({selectedColor, favoriteColors}); } - }, [onChangeColor, selectedColor]); + }, [favoriteColors, onChangeColor, selectedColor]); return ( @@ -204,6 +208,8 @@ const ColorPickerPOCBase = ({color = '#eb4034', colors = [], css, onChangeColor, colorHandler={onChangeColor} colors={colors} css={css} + favoriteColors={favoriteColors} + favoriteColorsHandler={setFavoriteColors} selectedColor={selectedColor} selectedColorHandler={setSelectedColor} /> diff --git a/ColorPickerPOC/ColorPickerPOC.module.less b/ColorPickerPOC/ColorPickerPOC.module.less index 9a3923adcf..271b1e180b 100644 --- a/ColorPickerPOC/ColorPickerPOC.module.less +++ b/ColorPickerPOC/ColorPickerPOC.module.less @@ -7,26 +7,31 @@ min-width: 800px; } -.currentColor { - border-radius: 24px; - border: 9px solid; - height: 240px; - transition: transform .2s; - width: 100%; - - .currentColorIcon { - transition: transform .2s; - } +.selectedColorColumn { + margin-top: 15px; - .focus({ - box-shadow: 0 0 12px 6px inset; + .selectedColor { + border-radius: 24px; + border: 9px solid; + height: 240px; + transition: transform .2s; + width: 100%; - .currentColorIcon { - transform: scale(1.2); + .selectedColorIcon { + transition: transform .2s; } - }); + + .focus({ + box-shadow: 0 0 12px 6px inset; + + .selectedColorIcon { + transform: scale(1.2); + } + }); + } } + .favoriteColorsRow { text-align: center; From 7b3070edd92a76392908f45f51d269ad94d1ab39 Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Fri, 9 Aug 2024 10:38:01 +0300 Subject: [PATCH 09/12] Added pointer events --- ColorPickerPOC/ColorPickerPOC.js | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index 50e37082ed..7c8ec2ceb1 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -62,9 +62,9 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol favoriteColorsHandler(favoriteColors); selectedColorHandler(buttonColor); - }, [clickEnabled, editEnabled, favoriteColors, favoriteColorsHandler, selectedColorHandler]); + }, [clickEnabled, editEnabled, favoriteColors, favoriteColorsHandler, selectedColor, selectedColorHandler]); - const onMouseDown = useCallback((ev) => { + const onPressHandler = useCallback((ev) => { if (editEnabled) return; const target = ev.target.id ? ev.target : ev.target.offsetParent; @@ -79,7 +79,7 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol }, 1000); }, [editEnabled]); - const onMouseUp = useCallback((ev) => { + const onReleaseHandler = useCallback((ev) => { const target = ev.target.id ? ev.target : ev.target.offsetParent; target.classList.remove(componentsCss.shakeFavoriteColor); @@ -93,7 +93,7 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol return (
- + {favoriteColors.slice(4, 8).map((color, index) => { return ( - + {favoriteColors.slice(0, 4).map((color, index) => { return ( Date: Fri, 9 Aug 2024 14:37:37 +0300 Subject: [PATCH 10/12] Review fixes --- ColorPickerPOC/ColorPickerPOC.js | 8 ++++---- ColorPickerPOC/ColorPickerPOC.module.less | 1 - 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index 7c8ec2ceb1..ee188d6b49 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -106,7 +106,7 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol onMouseUp={onReleaseHandler} onPointerDown={onPressHandler} onPointerUp={onReleaseHandler} - size={'small'} + size="small" style={{ backgroundColor: color, borderColor: generateOppositeColor(color), @@ -131,7 +131,7 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol onMouseUp={onReleaseHandler} onPointerDown={onPressHandler} onPointerUp={onReleaseHandler} - size={'small'} + size="small" style={{ backgroundColor: color, borderColor: generateOppositeColor(color), @@ -144,7 +144,7 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol })} - + - {editEnabled ? 'check' : 'plus'} + {editEnabled ? 'check' : 'plus'}
diff --git a/ColorPickerPOC/ColorPickerPOC.module.less b/ColorPickerPOC/ColorPickerPOC.module.less index 271b1e180b..93de219455 100644 --- a/ColorPickerPOC/ColorPickerPOC.module.less +++ b/ColorPickerPOC/ColorPickerPOC.module.less @@ -31,7 +31,6 @@ } } - .favoriteColorsRow { text-align: center; From de9f557924f18d467fbec0f57dd46f48702845ea Mon Sep 17 00:00:00 2001 From: Ion Andrusciac Date: Fri, 9 Aug 2024 14:45:11 +0300 Subject: [PATCH 11/12] Changed alignment for favorite colors --- ColorPickerPOC/ColorPickerPOC.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ColorPickerPOC/ColorPickerPOC.js b/ColorPickerPOC/ColorPickerPOC.js index ee188d6b49..d8b6d5931c 100644 --- a/ColorPickerPOC/ColorPickerPOC.js +++ b/ColorPickerPOC/ColorPickerPOC.js @@ -93,7 +93,7 @@ const FavoriteColors = ({favoriteColors = [], favoriteColorsHandler, selectedCol return (
- + {favoriteColors.slice(4, 8).map((color, index) => { return ( - + {favoriteColors.slice(0, 4).map((color, index) => { return ( Date: Fri, 9 Aug 2024 15:50:23 +0300 Subject: [PATCH 12/12] Fixed spotlight navigation on favorite colors --- ColorPickerPOC/ColorPickerPOC.module.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ColorPickerPOC/ColorPickerPOC.module.less b/ColorPickerPOC/ColorPickerPOC.module.less index 93de219455..0dcb981d00 100644 --- a/ColorPickerPOC/ColorPickerPOC.module.less +++ b/ColorPickerPOC/ColorPickerPOC.module.less @@ -14,8 +14,9 @@ border-radius: 24px; border: 9px solid; height: 240px; + margin-inline: 0; transition: transform .2s; - width: 100%; + width: 95%; .selectedColorIcon { transition: transform .2s;