From 4cdb407e2ef3928182253ac7b57c386e3827e00f Mon Sep 17 00:00:00 2001 From: McKayla Lankau Date: Wed, 9 Oct 2024 06:12:16 -0400 Subject: [PATCH] Grid controls design (#6489) Making some improvements to the visual design of canvas grid controls - grid gap handles and canvas labels, are orange to match the orange overlay pattern - grid row/column resize handles are now labels with their width (replacing the <-> arrows) - grid row/column area names are now inside the highlight overlay when being resized - grid/row highlight is now a blue pattern instead of pink ![image](https://github.com/user-attachments/assets/7dd6256c-bfa9-4da1-93d1-a454fbc52c8a) ![image](https://github.com/user-attachments/assets/09fe10ed-0af5-469a-9a20-f208403f7033) ![image](https://github.com/user-attachments/assets/918ecc27-6d16-453a-a87d-edb90ecd6c89) ![image](https://github.com/user-attachments/assets/88de5103-0f81-4025-aa85-6b1caa94b80a) --------- Co-authored-by: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com> --- .../strategies/set-flex-gap-strategy.tsx | 2 +- .../strategies/set-grid-gap-strategy.tsx | 2 +- .../canvas/controls/grid-controls.tsx | 78 ++++++++----------- .../controls/select-mode/controls-common.tsx | 2 +- .../controls/select-mode/flex-gap-control.tsx | 4 +- .../controls/select-mode/grid-gap-control.tsx | 4 +- editor/src/uuiui/styles/theme/dark.ts | 4 +- editor/src/uuiui/styles/theme/light.ts | 4 +- 8 files changed, 45 insertions(+), 55 deletions(-) diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx index 15b012d2b451..e247092ba7be 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.tsx @@ -143,7 +143,7 @@ export const setFlexGapStrategy: CanvasStrategyFactory = ( control: FloatingIndicator, props: { ...props, - color: colorTheme.brandNeonPink.value, + color: colorTheme.brandNeonOrange.value, }, key: 'padding-value-indicator-control', show: 'visible-except-when-other-strategy-is-active', diff --git a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx index e20678016012..484d19455ef5 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx +++ b/editor/src/components/canvas/canvas-strategies/strategies/set-grid-gap-strategy.tsx @@ -132,7 +132,7 @@ export const setGridGapStrategy: CanvasStrategyFactory = ( control: FloatingIndicator, props: { ...maybeIndicatorProps, - color: colorTheme.brandNeonPink.value, + color: colorTheme.brandNeonOrange.value, }, key: 'padding-value-indicator-control', show: 'visible-except-when-other-strategy-is-active', diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx index 176a10dd3eea..0a2ab0de5350 100644 --- a/editor/src/components/canvas/controls/grid-controls.tsx +++ b/editor/src/components/canvas/controls/grid-controls.tsx @@ -254,34 +254,22 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps) data-testid={labelId} style={{ zoom: 1 / scale, - width: GRID_RESIZE_HANDLE_SIZE, height: GRID_RESIZE_HANDLE_SIZE, - borderRadius: '100%', - border: `1px solid ${colorTheme.border0.value}`, - boxShadow: `${colorTheme.canvasControlsSizeBoxShadowColor50.value} 0px 0px - 1px, ${colorTheme.canvasControlsSizeBoxShadowColor20.value} 0px 1px 2px 2px`, - background: colorTheme.white.value, + borderRadius: 3, + padding: '0 4px', + border: `.1px solid ${colorTheme.white.value}`, + background: colorTheme.primary.value, + color: colorTheme.white.value, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start'), - fontSize: 8, pointerEvents: 'initial', }} - css={{ - opacity: props.resizing !== 'not-resizing' ? 1 : 0.5, - ':hover': { - opacity: 1, - }, - }} onMouseDown={mouseDownHandler} onMouseMove={onMouseMove} > - {props.axis === 'row' ? '↕' : '↔'} - {when( - props.dimension.areaName != null, - {props.dimension.areaName}, - )} + {getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)} {when( props.resizing !== 'not-resizing', @@ -305,37 +293,34 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps) justifyContent: 'center', border: `1px solid ${ props.resizeLocked - ? colorTheme.brandNeonPink10.value + ? colorTheme.primary10.value : props.resizing === 'resize-target' - ? colorTheme.brandNeonPink.value - : colorTheme.brandNeonPink60.value + ? colorTheme.primary.value + : colorTheme.primary50.value }`, ...(props.resizeLocked - ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.brandNeonPink10.value, scale) + ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.primary10.value, scale) : props.resizing === 'resize-target' - ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.brandNeonPink60.value, scale) - : UtopiaStyles.backgrounds.stripedBackground( - colorTheme.brandNeonPink10.value, - scale, - )), + ? UtopiaStyles.backgrounds.stripedBackground(colorTheme.primary50.value, scale) + : UtopiaStyles.backgrounds.stripedBackground(colorTheme.primary10.value, scale)), }} > - + {when( + props.dimension.areaName != null, +
+ {props.dimension.areaName} +
, + )} , )} @@ -948,7 +933,8 @@ export const GridControl = React.memo(({ grid }) => { const countedColumn = Math.floor(cell % grid.columns) + 1 const id = gridCellTargetId(grid.elementPath, countedRow, countedColumn) const borderID = `${id}-border` - const dotgridColor = activelyDraggingOrResizingCell != null ? `#00000033` : 'transparent' + const dotgridColor = + activelyDraggingOrResizingCell != null ? colorTheme.blackOpacity35.value : 'transparent' const isActiveCell = countedColumn === currentHoveredCell?.column && countedRow === currentHoveredCell?.row @@ -956,7 +942,7 @@ export const GridControl = React.memo(({ grid }) => { const borderColor = isActiveCell && targetsAreCellsWithPositioning ? colorTheme.brandNeonPink.value - : `#00000033` + : colorTheme.blackOpacity35.value return (
((props) => { , )} @@ -391,7 +391,7 @@ const GapControlSegment = React.memo((props) => {
diff --git a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx index 5cf6af9f6779..adca71944cc3 100644 --- a/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx +++ b/editor/src/components/canvas/controls/select-mode/grid-gap-control.tsx @@ -452,7 +452,7 @@ function GridGapHandle({ , )} @@ -460,7 +460,7 @@ function GridGapHandle({ diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts index 3081003c09c7..63c1564223f5 100644 --- a/editor/src/uuiui/styles/theme/dark.ts +++ b/editor/src/uuiui/styles/theme/dark.ts @@ -20,6 +20,7 @@ const darkBase = { brandNeonPink10: createUtopiColor('oklch(78.64% 0.237 327.81 / 10%)'), brandNeonPink60: createUtopiColor('oklch(78.64% 0.237 327.81 / 50%)'), brandNeonGreen: createUtopiColor('oklch(86.6% 0.27 158.6)'), + brandNeonOrange: createUtopiColor('oklch(79% 0.19 70)'), green: createUtopiColor('oklch(88% 0.2535 150)'), green10: createUtopiColor('oklch(88% 0.2535 150 / 10%)'), green20: createUtopiColor('oklch(88% 0.2535 150 / 20%)'), @@ -133,6 +134,7 @@ const colorsWithOpacity = { whiteOpacity20: createUtopiColor('oklch(100% 0 0 /20%)'), whiteOpacity30: createUtopiColor('oklch(100% 0 0 /30%)'), whiteOpacity35: createUtopiColor('oklch(100% 0 0 /35%)'), + blackOpacity35: createUtopiColor('oklch(0% 0 0 / 35%)'), canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(255,255,255,0.20)'), canvasControlsSizeBoxShadowColor50: createUtopiColor('rgba(255,255,255,0.5)'), neutralInvertedBackground10: createUtopiColor('rgba(217, 220, 227, 0.1)'), @@ -266,7 +268,7 @@ const darkTheme: typeof light = { codeEditorGrid: createUtopiColor('#6d705b'), // Gap controls - gapControlsBg: darkBase.brandNeonGreen, + gapControlsBg: darkBase.brandNeonOrange, } export const dark = enforceUtopiColorTheme(darkTheme) diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts index 2c14f9b169d5..0063da12508d 100644 --- a/editor/src/uuiui/styles/theme/light.ts +++ b/editor/src/uuiui/styles/theme/light.ts @@ -20,6 +20,7 @@ const lightBase = { brandNeonPink10: createUtopiColor('oklch(72.53% 0.353 331.69 / 10%)'), brandNeonPink60: createUtopiColor('oklch(72.53% 0.353 331.69 / 30%)'), brandNeonGreen: createUtopiColor('oklch(86.6% 0.27 158.6)'), + brandNeonOrange: createUtopiColor('oklch(79% 0.19 70)'), green: createUtopiColor('oklch(64.6% 0.17 150.6)'), green10: createUtopiColor('oklch(64.6% 0.17 150.6 / 10%)'), green20: createUtopiColor('oklch(64.6% 0.17 150.6 / 20%)'), @@ -134,6 +135,7 @@ const colorsWithOpacity = { whiteOpacity20: createUtopiColor('oklch(100% 0 0 /20%)'), whiteOpacity30: createUtopiColor('oklch(100% 0 0 /30%)'), whiteOpacity35: createUtopiColor('oklch(100% 0 0 /35%)'), + blackOpacity35: createUtopiColor('oklch(0% 0 0 / 35%)'), canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(0,0,0,0.20)'), canvasControlsSizeBoxShadowColor50: createUtopiColor('rgba(0,0,0,0.5)'), neutralInvertedBackground10: createUtopiColor('hsla(0,0%,0%,0.1)'), @@ -266,7 +268,7 @@ const lightTheme = { codeEditorGrid: createUtopiColor('#6d705b'), // Gap controls - gapControlsBg: createUtopiColor('#FFA500'), + gapControlsBg: lightBase.brandNeonOrange, } // all values in light must be of the type UtopiColor! This will break if you made a mistake.