Advanced Grid Settings Popup

editor/src/components/inspector/add-remove-layout-system-control.tsx

@@ -15,10 +15,14 @@ import { executeFirstApplicableStrategy } from './inspector-strategies/inspector
 import { useDispatch } from '../editor/store/dispatch-context'
 import { NO_OP, assertNever } from '../../core/shared/utils'
 import type { DropdownMenuItem } from '../../uuiui/radix-components'
-import { DropdownMenu, regularDropdownMenuItem } from '../../uuiui/radix-components'
+import {
+  DropdownMenu,
+  regularDropdownMenuItem,
+  separatorDropdownMenuItem,
+} from '../../uuiui/radix-components'
 import { stripNulls } from '../../core/shared/array-utils'
 import { layoutSystemSelector } from './flex-section'
-import { optionalMap } from '../../core/shared/optional-utils'
+import { AdvancedGridModal } from './controls/advanced-grid-modal'
 
 export const AddRemoveLayoutSystemControlTestId = (): string => 'AddRemoveLayoutSystemControlTestId'
 export const AddFlexLayoutOptionId = 'add-flex-layout'
@@ -28,6 +32,14 @@ export const RemoveLayoutSystemOptionId = 'remove-layout-system'
 interface AddRemoveLayoutSystemControlProps {}
 
 export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemControlProps>(() => {
+  const [popupOpen, setPopupOpen] = React.useState(false)
+  const closePopup = React.useCallback(() => {
+    setPopupOpen(false)
+  }, [])
+  const openPopup = React.useCallback(() => {
+    setPopupOpen(true)
+  }, [])
+
   const layoutSystem = useEditorState(
     Substores.metadata,
     layoutSystemSelector,
@@ -96,32 +108,59 @@ export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemCont
     [layoutSystem],
   )
 
-  const addLayoutSystemMenuDropdownItems = React.useMemo(
-    (): DropdownMenuItem[] =>
-      stripNulls([
-        regularDropdownMenuItem({
-          id: AddFlexLayoutOptionId,
-          label: 'Convert to Flex',
-          onSelect: addFlexLayoutSystem,
-        }),
-        regularDropdownMenuItem({
-          id: AddGridLayoutOptionId,
-          label: 'Convert to Grid',
-          onSelect: addGridLayoutSystem,
-        }),
-        optionalMap(
-          () =>
-            regularDropdownMenuItem({
-              id: RemoveLayoutSystemOptionId,
-              label: 'Remove layout system',
-              onSelect: removeLayoutSystem,
-              danger: true,
-            }),
-          layoutSystem,
-        ),
-      ]),
-    [addFlexLayoutSystem, addGridLayoutSystem, layoutSystem, removeLayoutSystem],
-  )
+  const addLayoutSystemMenuDropdownItems = React.useMemo((): DropdownMenuItem[] => {
+    const gridItems: DropdownMenuItem[] = [
+      regularDropdownMenuItem({
+        id: 'more-settings',
+        label: 'Advanced',
+        onSelect: openPopup,
+      }),
+      regularDropdownMenuItem({
+        id: AddFlexLayoutOptionId,
+        label: 'Convert to Flex',
+        onSelect: addFlexLayoutSystem,
+      }),
+      separatorDropdownMenuItem('dropdown-separator'),
+      regularDropdownMenuItem({
+        id: RemoveLayoutSystemOptionId,
+        label: 'Remove Grid',
+        onSelect: removeLayoutSystem,
+        danger: true,
+      }),
+    ]
+
+    const flexItems: DropdownMenuItem[] = [
+      regularDropdownMenuItem({
+        id: AddGridLayoutOptionId,
+        label: 'Convert to Grid',
+        onSelect: addGridLayoutSystem,
+      }),
+      separatorDropdownMenuItem('dropdown-separator'),
+      regularDropdownMenuItem({
+        id: RemoveLayoutSystemOptionId,
+        label: 'Remove Flex',
+        onSelect: removeLayoutSystem,
+        danger: true,
+      }),
+    ]
+
+    const noLayoutItems: DropdownMenuItem[] = [
+      regularDropdownMenuItem({
+        id: AddFlexLayoutOptionId,
+        label: 'Flex',
+        onSelect: addFlexLayoutSystem,
+      }),
+      regularDropdownMenuItem({
+        id: AddGridLayoutOptionId,
+        label: 'Grid',
+        onSelect: addGridLayoutSystem,
+      }),
+    ]
+
+    return stripNulls(
+      layoutSystem === 'grid' ? gridItems : layoutSystem === 'flex' ? flexItems : noLayoutItems,
+    )
+  }, [addFlexLayoutSystem, addGridLayoutSystem, layoutSystem, removeLayoutSystem, openPopup])
 
   const label = () => {
     switch (layoutSystem) {
@@ -156,6 +195,13 @@ export const AddRemoveLayoutSystemControl = React.memo<AddRemoveLayoutSystemCont
         }}
       >
         <span style={{ textTransform: 'capitalize', fontSize: '11px' }}>{label()}</span>
+        <AdvancedGridModal
+          id='grid-advanced1'
+          testId='grid-advanced1'
+          key='grid-advanced1'
+          closePopup={closePopup}
+          popupOpen={popupOpen}
+        />
       </FlexRow>
       <div data-testid={AddRemoveLayoutSystemControlTestId()}>
         <DropdownMenu

editor/src/components/inspector/controls/advanced-grid-modal.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { InspectorModal } from '../widgets/inspector-modal'
+import { FlexColumn, Icons, SquareButton, UtopiaStyles } from '../../../uuiui'
+import { UIGridRow } from '../widgets/ui-grid-row'
+import { OptionChainControl } from './option-chain-control'
+
+export interface AdvancedGridModalProps {
+  id: string
+  testId: string
+  key: string
+  popupOpen?: boolean
+  openPopup?: (id: string) => void
+  closePopup?: () => void
+  style?: React.CSSProperties
+  pickerOffset?: {
+    x: number
+    y: number
+  }
+}
+
+export const AdvancedGridModal = React.memo((props: AdvancedGridModalProps) => {
+  const pickerOffset = props.pickerOffset != null ? props.pickerOffset : { x: -280, y: -20 }
+  const closePopup = props.closePopup ?? (() => {})
+
+  const picker = (
+    <InspectorModal
+      offsetX={pickerOffset.x}
+      offsetY={pickerOffset.y}
+      closePopup={closePopup}
+      closePopupOnUnmount={true}
+      outsideClickIgnoreClass={`ignore-react-onclickoutside-${props.id}`}
+      style={{
+        ...UtopiaStyles.popup,
+        zIndex: 3,
+        minWidth: 230,
+      }}
+    >
+      <FlexColumn>
+        <UIGridRow padded variant='<--------auto-------->||22px|'>
+          <span>Grid Settings</span>
+          <SquareButton highlight onMouseDown={props.closePopup}>
+            ×
+          </SquareButton>
+        </UIGridRow>
+        <UIGridRow padded variant='<-------------1fr------------->'>
+          <span style={{ fontWeight: 600 }}>Items</span>
+        </UIGridRow>
+        <UIGridRow padded variant='|--67px--|<--------1fr-------->'>
+          <span>Align</span>
+        </UIGridRow>
+        <UIGridRow padded variant='|--67px--|<--------1fr-------->'>
+          <span>Justify</span>
+        </UIGridRow>
+        <UIGridRow padded variant='<-------------1fr------------->'>
+          <span style={{ fontWeight: 600 }}>Entire Grid</span>
+        </UIGridRow>
+        <UIGridRow padded variant='|--67px--|<--------1fr-------->'>
+          <span>Align</span>
+        </UIGridRow>
+        <UIGridRow padded variant='|--67px--|<--------1fr-------->'>
+          <span>Justify</span>
+        </UIGridRow>
+      </FlexColumn>
+    </InspectorModal>
+  )
+
+  return (
+    <div
+      key={props.id}
+      id={`trigger-${props.id}`}
+      className={`ignore-react-onclickoutside-${props.id}`}
+      style={props.style}
+    >
+      {props.popupOpen ? picker : null}
+    </div>
+  )
+})

editor/src/uuiui/styles/theme/utopia-theme.ts

@@ -162,8 +162,7 @@ const fontStyles = {
 const popup: React.CSSProperties = {
   background: colorTheme.neutralBackground.value,
   boxShadow: shadowStyles.high.boxShadow,
-  paddingTop: 4,
-  paddingBottom: 4,
+  padding: '4px 0',
   borderRadius: 4,
 }