Skip to content

Commit

Permalink
Remove grid element placement props (#6601)
Browse files Browse the repository at this point in the history
**Problem:**

There should be a cross button to the side of the Grid Placement
inspector subsection to clear those props when set.

**Fix:**

Add that button, shown unless all values are defaults.

![Kapture 2024-10-30 at 15 13
27](https://github.com/user-attachments/assets/0402ce1d-dc34-4cb0-9e7b-561d3fc18539)


Fixes #6600
  • Loading branch information
ruggi authored Oct 30, 2024
1 parent e2ab2ca commit 6ea2882
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export const rearrangeGridSwapStrategy: CanvasStrategyFactory = (
}
}

const GridPositioningProps: Array<keyof React.CSSProperties> = [
export const GridPositioningProps: Array<keyof React.CSSProperties> = [
'gridColumn',
'gridRow',
'gridColumnStart',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ import {
isEmptyInputValue,
} from '../../../common/css-utils'
import { UIGridRow } from '../../../widgets/ui-grid-row'
import { deleteProperties } from '../../../../canvas/commands/delete-properties-command'
import { GridPositioningProps } from '../../../../canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy'
import { styleP } from '../../../inspector-common'

type CellAdjustMode = 'dimensions' | 'boundaries'

Expand Down Expand Up @@ -100,6 +103,18 @@ export const GridPlacementSubsection = React.memo(() => {
dispatch([applyCommandsAction(commands)])
}, [dispatch, cell, gridTemplate])

const removePlacementProps = React.useCallback(() => {
if (cell == null) {
return
}

dispatch([
applyCommandsAction([
deleteProperties('always', cell.elementPath, GridPositioningProps.map(styleP)),
]),
])
}, [dispatch, cell])

if (cell == null || gridTemplate == null) {
return null
}
Expand All @@ -122,6 +137,12 @@ export const GridPlacementSubsection = React.memo(() => {
<Icons.SmallPlus />
</SquareButton>,
)}
{unless(
isAllDefaults,
<SquareButton highlight onClick={removePlacementProps}>
<Icons.SmallCross />
</SquareButton>,
)}
</InspectorSubsectionHeader>
{unless(
isAllDefaults,
Expand Down

0 comments on commit 6ea2882

Please sign in to comment.