From 19bab1a2ce057953bf1913dc905406a71827f99e Mon Sep 17 00:00:00 2001 From: himon Date: Tue, 22 Apr 2025 16:51:38 +0200 Subject: [PATCH 1/2] Minor UI/UX improvement, preset colors added in color-picker, strokeField is shown in pen/line/arrow, pin color icon in modal is more aligned. --- .../common/AnnotationOptions/StrokeFields.jsx | 5 +++ .../common/AnnotationOptions/index.jsx | 34 +++++++++----- .../components/common/ColorInput/index.jsx | 45 +++++++++++-------- .../ColorPickerModal.styled.js | 3 -- .../tools/Ellipse/EllipseOptions.jsx | 1 + .../components/tools/Image/ImageControls.jsx | 1 + .../tools/Polygon/PolygonOptions.jsx | 1 + .../src/components/tools/Rect/RectOptions.jsx | 1 + .../tools/Text/TextOptions/TextControls.jsx | 1 + 9 files changed, 61 insertions(+), 31 deletions(-) diff --git a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx index 030ed92b..561c40de 100644 --- a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx +++ b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx @@ -7,6 +7,7 @@ import restrictNumber from 'utils/restrictNumber'; import ColorInput from 'components/common/ColorInput'; import { StyledSpacedOptionFields } from './AnnotationOptions.styled'; import Slider from '../Slider'; +import { StyledSliderInput } from 'components/tools/tools.styled'; const MIN_PERCENTANGE = 0; const MAX_PERCENTANGE = 100; @@ -30,6 +31,10 @@ const StrokeFields = ({ annotation, updateAnnotation }) => { return ( + changeStrokeWidth(value)} + /> { - updateAnnotation({ fill: newFill }); + if (!hideStrokeField) { + updateAnnotation({ stroke: newFill }); + } else { + updateAnnotation({ fill: newFill }); + } }, [updateAnnotation], ); @@ -115,7 +126,8 @@ const AnnotationOptions = ({ className={`FIE_annotations-options${className ? ` ${className}` : ''}`} isPhoneScreen={isPhoneScreen} > - {!hideFillOption && ( + { !hideStrokeField && } + { !hideFillOption && ( { const { @@ -23,27 +32,27 @@ const ColorInput = ({ onChange, color, colorFor }) => { const [currentColor, setCurrentColor] = useState( () => latestColor || color || annotationsCommon.fill, ); - const [pinnedColors, setPinnedColors] = useState( - window?.localStorage - ? JSON.parse(localStorage.getItem(pinnedColorsKey) || '[]') - : [], - ); + const [pinnedColors, setPinnedColors] = useState(() => { + if (window?.localStorage) { + const savedColors = localStorage.getItem(pinnedColorsKey); + return savedColors ? JSON.parse(savedColors) : presetPinnedColors; + } + return presetPinnedColors; + }); const initialColor = useRef(currentColor); const changePinnedColors = (newPinnedColors) => { - if (!window?.localStorage) { - return; - } - const localStoragePinnedColors = - window.localStorage.getItem(pinnedColorsKey); - if (JSON.stringify(newPinnedColors) !== localStoragePinnedColors) { - const maxOfSavedColors = 9; - const pinnedColorsToSave = newPinnedColors.slice(-maxOfSavedColors); - window.localStorage.setItem( - pinnedColorsKey, - JSON.stringify(pinnedColorsToSave), - ); - setPinnedColors(pinnedColorsToSave); + if (!window?.localStorage) return; + + const localStoragePinnedColors = localStorage.getItem(pinnedColorsKey); + const currentPinnedColors = localStoragePinnedColors + ? JSON.parse(localStoragePinnedColors) + : presetPinnedColors; + + + if (JSON.stringify(newPinnedColors) !== JSON.stringify(currentPinnedColors)) { + localStorage.setItem(pinnedColorsKey, JSON.stringify(newPinnedColors)); + setPinnedColors(newPinnedColors); } }; diff --git a/packages/react-filerobot-image-editor/src/components/common/ColorPickerModal/ColorPickerModal.styled.js b/packages/react-filerobot-image-editor/src/components/common/ColorPickerModal/ColorPickerModal.styled.js index d323dc6b..27e84bc3 100644 --- a/packages/react-filerobot-image-editor/src/components/common/ColorPickerModal/ColorPickerModal.styled.js +++ b/packages/react-filerobot-image-editor/src/components/common/ColorPickerModal/ColorPickerModal.styled.js @@ -22,9 +22,6 @@ const ColorPickerWrap = styled.div` .SfxColorPicker-select { width: 100px; } - .SfxInput-root { - width: 190px !important; - } } .SfxColorPicker-icon { diff --git a/packages/react-filerobot-image-editor/src/components/tools/Ellipse/EllipseOptions.jsx b/packages/react-filerobot-image-editor/src/components/tools/Ellipse/EllipseOptions.jsx index f2021863..8e1f84a4 100644 --- a/packages/react-filerobot-image-editor/src/components/tools/Ellipse/EllipseOptions.jsx +++ b/packages/react-filerobot-image-editor/src/components/tools/Ellipse/EllipseOptions.jsx @@ -17,6 +17,7 @@ const EllipseOptions = ({ t }) => { className="FIE_ellipse-tool-options" annotation={ellipse} updateAnnotation={saveEllipse} + hideStrokeField t={t} /> ); diff --git a/packages/react-filerobot-image-editor/src/components/tools/Image/ImageControls.jsx b/packages/react-filerobot-image-editor/src/components/tools/Image/ImageControls.jsx index 175d4eb9..c78339dc 100644 --- a/packages/react-filerobot-image-editor/src/components/tools/Image/ImageControls.jsx +++ b/packages/react-filerobot-image-editor/src/components/tools/Image/ImageControls.jsx @@ -12,6 +12,7 @@ const ImageControls = ({ image, saveImage, children, t }) => ( updateAnnotation={saveImage} t={t} hideFillOption + hideStrokeField > {children} diff --git a/packages/react-filerobot-image-editor/src/components/tools/Polygon/PolygonOptions.jsx b/packages/react-filerobot-image-editor/src/components/tools/Polygon/PolygonOptions.jsx index 3621333c..4a30891c 100644 --- a/packages/react-filerobot-image-editor/src/components/tools/Polygon/PolygonOptions.jsx +++ b/packages/react-filerobot-image-editor/src/components/tools/Polygon/PolygonOptions.jsx @@ -25,6 +25,7 @@ const PolygonOptions = ({ t }) => { updateAnnotation={savePolygon} t={t} hidePositionField + hideStrokeField /> ); }; diff --git a/packages/react-filerobot-image-editor/src/components/tools/Rect/RectOptions.jsx b/packages/react-filerobot-image-editor/src/components/tools/Rect/RectOptions.jsx index ee0a3955..a9678368 100644 --- a/packages/react-filerobot-image-editor/src/components/tools/Rect/RectOptions.jsx +++ b/packages/react-filerobot-image-editor/src/components/tools/Rect/RectOptions.jsx @@ -23,6 +23,7 @@ const RectOptions = ({ t }) => { morePoppableOptionsPrepended={RECT_POPPABLE_OPTIONS} annotation={rect} updateAnnotation={saveRect} + hideStrokeField t={t} /> ); diff --git a/packages/react-filerobot-image-editor/src/components/tools/Text/TextOptions/TextControls.jsx b/packages/react-filerobot-image-editor/src/components/tools/Text/TextOptions/TextControls.jsx index d865e57e..14410ff6 100644 --- a/packages/react-filerobot-image-editor/src/components/tools/Text/TextOptions/TextControls.jsx +++ b/packages/react-filerobot-image-editor/src/components/tools/Text/TextOptions/TextControls.jsx @@ -125,6 +125,7 @@ const TextControls = ({ text, saveText, children }) => { moreOptionsPopupComponentsObj={ !useCloudimage ? textOptionsPopupComponents : {} } + hideStrokeField t={t} > {Array.isArray(fonts) && fonts.length > 1 && ( From 6da5be79433a35a129f5d934fbd67f2c13646517 Mon Sep 17 00:00:00 2001 From: himon Date: Thu, 24 Apr 2025 10:32:14 +0200 Subject: [PATCH 2/2] Minor refactoring for readability --- .../common/AnnotationOptions/StrokeFields.jsx | 2 +- .../components/common/AnnotationOptions/index.jsx | 15 ++++++++------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx index 561c40de..eabf2646 100644 --- a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx +++ b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx @@ -5,9 +5,9 @@ import PropTypes from 'prop-types'; /** Internal Dependencies */ import restrictNumber from 'utils/restrictNumber'; import ColorInput from 'components/common/ColorInput'; +import { StyledSliderInput } from 'components/tools/tools.styled'; import { StyledSpacedOptionFields } from './AnnotationOptions.styled'; import Slider from '../Slider'; -import { StyledSliderInput } from 'components/tools/tools.styled'; const MIN_PERCENTANGE = 0; const MAX_PERCENTANGE = 100; diff --git a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx index ff0d3298..596f925d 100644 --- a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx +++ b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx @@ -53,13 +53,9 @@ const AnnotationOptions = ({ name: POPPABLE_OPTIONS.OPACITY, Icon: Transparency, }, - ...(!useCloudimage && hideStrokeField - ? [ - { titleKey: 'stroke', name: POPPABLE_OPTIONS.STROKE, Icon: Stroke }, - { titleKey: 'shadow', name: POPPABLE_OPTIONS.SHADOW, Icon: Shadow }, - ] - : !useCloudimage + ...(!useCloudimage ? [ + ...(hideStrokeField ? [{ titleKey: 'stroke', name: POPPABLE_OPTIONS.STROKE, Icon: Stroke }] : []), { titleKey: 'shadow', name: POPPABLE_OPTIONS.SHADOW, Icon: Shadow }, ] : []), @@ -126,7 +122,12 @@ const AnnotationOptions = ({ className={`FIE_annotations-options${className ? ` ${className}` : ''}`} isPhoneScreen={isPhoneScreen} > - { !hideStrokeField && } + { !hideStrokeField && ( + + )} { !hideFillOption && (