realign pane tabs (#4276)

* realign pane tabs * Project title (no github repo) always 40px * stop project title from shrinking * show the circle buttons * change failed tests editor shard 2 * change expected test results * pls make the tests work * update tests for column and column-reverse --------- Co-authored-by: Berci Kormendy <[email protected]>
concrete-utopia · Oct 3, 2023 · e4cc037 · e4cc037
1 parent ef557ee
commit e4cc037
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 74 deletions.
diff --git a/...as/canvas-strategies/strategies/absolute-flex-reparent-strategy-helpers.spec.browser2.tsx b/...as/canvas-strategies/strategies/absolute-flex-reparent-strategy-helpers.spec.browser2.tsx
@@ -2271,7 +2271,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 388, 609, 2, 123)
+    await checkReparentIndicator(renderResult, 388, 610, 2, 123)
     expect(renderResult.getEditorState().editor.displayNoneInstances).toEqual([
       EP.fromString('storyboard/scene/parentsibling/seconddiv'),
     ])
@@ -2317,7 +2317,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 788, 609, 2, 123)
+    await checkReparentIndicator(renderResult, 788, 610, 2, 123)
   })
 
   it(`shows the reparent indicator between two elements in a 'row' container`, async () => {
@@ -2360,7 +2360,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 522, 609, 2, 123)
+    await checkReparentIndicator(renderResult, 522, 610, 2, 123)
   })
 
   it(`shows the reparent indicator between two elements in a 'row-reverse' container`, async () => {
@@ -2403,7 +2403,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 654, 609, 2, 123)
+    await checkReparentIndicator(renderResult, 654, 610, 2, 123)
   })
   it(`shows the reparent indicator between the parent and the first element in a 'row' container with absolute siblings`, async () => {
     const renderResult = await renderTestEditorWithCode(
@@ -2447,7 +2447,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 388, 109, 2, 40)
+    await checkReparentIndicator(renderResult, 388, 110, 2, 40)
   })
   it(`shows the reparent indicator between the parent and the last element in a 'row' container with absolute siblings`, async () => {
     const renderResult = await renderTestEditorWithCode(
@@ -2491,7 +2491,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 438, 109, 2, 40)
+    await checkReparentIndicator(renderResult, 438, 110, 2, 40)
   })
   it(`shows the reparent indicator between the parent and the first element in a 'row-reverse' container with absolute siblings`, async () => {
     const renderResult = await renderTestEditorWithCode(
@@ -2535,7 +2535,7 @@ describe('Reparent indicators', () => {
     await renderResult.getDispatchFollowUpActionsFinished()
 
     // Check the indicator presence and position.
-    await checkReparentIndicator(renderResult, 788, 109, 2, 40)
+    await checkReparentIndicator(renderResult, 788, 110, 2, 40)
   })
   it(`doesn't show the reparent indicator when there are no siblings`, async () => {
     const renderResult = await renderTestEditorWithCode(
@@ -2764,6 +2764,6 @@ describe('Reparent indicators', () => {
       ),
     ])
     expect(renderResult.getEditorState().editor.canvas.controls.parentOutlineHighlight).toBeNull()
-    await checkReparentIndicator(renderResult, 389, 226, 75, 2)
+    await checkReparentIndicator(renderResult, 389, 227, 75, 2)
   })
 })
diff --git a/...mponents/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.browser2.tsx b/...mponents/canvas/canvas-strategies/strategies/absolute-reparent-strategy.spec.browser2.tsx
@@ -1041,7 +1041,7 @@ export var ${BakedInStoryboardVariableName} = (props) => {
         const draggedElement = await renderResult.renderedDOM.findByTestId('ccc')
         const draggedElementBounds = draggedElement.getBoundingClientRect()
         expect(draggedElementBounds.x).toEqual(1014)
-        expect(draggedElementBounds.y).toEqual(534)
+        expect(draggedElementBounds.y).toEqual(535)
         expect(draggedElementBounds.width).toEqual(50)
         expect(draggedElementBounds.height).toEqual(50)
       })
@@ -1158,7 +1158,7 @@ export var ${BakedInStoryboardVariableName} = (props) => {
         const draggedElement = await renderResult.renderedDOM.findByTestId('ccc')
         const draggedElementBounds = draggedElement.getBoundingClientRect()
         expect(draggedElementBounds.x).toEqual(1014)
-        expect(draggedElementBounds.y).toEqual(534)
+        expect(draggedElementBounds.y).toEqual(535)
         expect(draggedElementBounds.width).toEqual(50)
         expect(draggedElementBounds.height).toEqual(50)
       })

diff --git a/...onents/canvas/canvas-strategies/strategies/draw-to-insert-text-strategy.spec.browser2.tsx b/...onents/canvas/canvas-strategies/strategies/draw-to-insert-text-strategy.spec.browser2.tsx
@@ -320,7 +320,7 @@ describe('draw-to-insert text', () => {
                     position: 'absolute',
                     wordBreak: 'break-word',
                     left: 112,
-                    top: 392,
+                    top: 391,
                     width: 50,
                     height: 50,
                   }}

diff --git a/editor/src/components/canvas/controls/insertion-plus-button.spec.browser2.tsx b/editor/src/components/canvas/controls/insertion-plus-button.spec.browser2.tsx
@@ -279,9 +279,9 @@ describe('Insertion Plus Button', () => {
       expect(bounds.top).toEqual(expectedTop)
     }
 
-    await checkInsertButtonPosition('blue-dot-control-0', 385.5, 595.5)
-    await checkInsertButtonPosition('blue-dot-control-1', 519.5, 595.5)
-    await checkInsertButtonPosition('blue-dot-control-2', 712.5, 595.5)
+    await checkInsertButtonPosition('blue-dot-control-0', 385.5, 596.5)
+    await checkInsertButtonPosition('blue-dot-control-1', 519.5, 596.5)
+    await checkInsertButtonPosition('blue-dot-control-2', 712.5, 596.5)
   })
 
   it(`shows the buttons in the correct places for a flex container with a direction of 'row-reverse' that already has children`, async () => {
@@ -305,9 +305,9 @@ describe('Insertion Plus Button', () => {
       expect(bounds.top).toEqual(expectedTop)
     }
 
-    await checkInsertButtonPosition('blue-dot-control-0', 785.5, 595.5)
-    await checkInsertButtonPosition('blue-dot-control-1', 651.5, 595.5)
-    await checkInsertButtonPosition('blue-dot-control-2', 458.5, 595.5)
+    await checkInsertButtonPosition('blue-dot-control-0', 785.5, 596.5)
+    await checkInsertButtonPosition('blue-dot-control-1', 651.5, 596.5)
+    await checkInsertButtonPosition('blue-dot-control-2', 458.5, 596.5)
   })
 
   it(`shows the buttons in the correct places for a flex container with a direction of 'column' that already has children`, async () => {
@@ -331,9 +331,9 @@ describe('Insertion Plus Button', () => {
       expect(bounds.top).toEqual(expectedTop)
     }
 
-    await checkInsertButtonPosition('blue-dot-control-0', 375.5, 605.5)
-    await checkInsertButtonPosition('blue-dot-control-1', 375.5, 705.5)
-    await checkInsertButtonPosition('blue-dot-control-2', 375.5, 805.5)
+    await checkInsertButtonPosition('blue-dot-control-0', 375.5, 606.5)
+    await checkInsertButtonPosition('blue-dot-control-1', 375.5, 706.5)
+    await checkInsertButtonPosition('blue-dot-control-2', 375.5, 806.5)
   })
 
   it(`shows the buttons in the correct places for a flex container with a direction of 'column-reverse' that already has children`, async () => {
@@ -357,9 +357,9 @@ describe('Insertion Plus Button', () => {
       expect(bounds.top).toEqual(expectedTop)
     }
 
-    await checkInsertButtonPosition('blue-dot-control-0', 375.5, 805.5)
-    await checkInsertButtonPosition('blue-dot-control-1', 375.5, 705.5)
-    await checkInsertButtonPosition('blue-dot-control-2', 375.5, 605.5)
+    await checkInsertButtonPosition('blue-dot-control-0', 375.5, 806.5)
+    await checkInsertButtonPosition('blue-dot-control-1', 375.5, 706.5)
+    await checkInsertButtonPosition('blue-dot-control-2', 375.5, 606.5)
   })
 
   it('shows the buttons in the correct places for a flex container that has no children', async () => {
@@ -383,6 +383,6 @@ describe('Insertion Plus Button', () => {
       expect(bounds.top).toEqual(expectedTop)
     }
 
-    await checkInsertButtonPosition('blue-dot-control-0', 385.5, 595.5)
+    await checkInsertButtonPosition('blue-dot-control-0', 385.5, 596.5)
   })
 })
diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
@@ -42,7 +42,7 @@ import { TitleBarCode, TitleBarUserProfile } from '../titlebar/title-bar'
 import type { EditorAction } from '../editor/action-types'
 import { SettingsPane } from '../navigator/left-pane/settings-pane'
 import { MenuTab } from '../../uuiui/menu-tab'
-import { UIGridRow } from '../inspector/widgets/ui-grid-row'
+import { FlexRow } from 'utopia-api'
 
 interface NumberSize {
   width: number
@@ -337,28 +337,23 @@ export const ResizableRightPane = React.memo<ResizableRightPaneProps>((props) =>
           flexShrink: 0,
         }}
       >
-        <UIGridRow
-          variant='|--67px--||--67px--||--67px--||--67px--|'
-          padded={false}
-          css={{ gridColumnGap: 0 }}
-          style={{ alignItems: 'stretch', marginBottom: 10 }}
-        >
-          <MenuTab
-            label={'Insert'}
-            selected={selectedTab === RightMenuTab.Insert}
-            onClick={onClickInsertTab}
-          />
+        <FlexRow style={{ marginBottom: 10, gap: 10 }} css={undefined}>
           <MenuTab
             label={'Inspector'}
             selected={selectedTab === RightMenuTab.Inspector}
             onClick={onClickInspectorTab}
           />
+          <MenuTab
+            label={'Insert'}
+            selected={selectedTab === RightMenuTab.Insert}
+            onClick={onClickInsertTab}
+          />
           <MenuTab
             label={'Settings'}
             selected={selectedTab === RightMenuTab.Settings}
             onClick={onClickSettingsTab}
           />
-        </UIGridRow>
+        </FlexRow>
         {when(selectedTab === RightMenuTab.Insert, <InsertMenuPane />)}
         {when(selectedTab === RightMenuTab.Inspector, <InspectorEntryPoint />)}
         {when(selectedTab === RightMenuTab.Settings, <SettingsPane />)}

diff --git a/editor/src/components/editor/actions/actions.spec.browser2.tsx b/editor/src/components/editor/actions/actions.spec.browser2.tsx
@@ -4429,7 +4429,7 @@ export var storyboard = (
         position: 'absolute',
         width: 44,
         height: 33,
-        top: 404,
+        top: 403,
         left: 698,
         backgroundColor: '#cee5ff',
       }}
@@ -4695,7 +4695,7 @@ export var storyboard = (
             position: 'absolute',
             width: 44,
             height: 33,
-            top: 404,
+            top: 403,
             left: 698,
             backgroundColor: '#cee5ff',
           }}
@@ -4844,7 +4844,7 @@ export var storyboard = (
             backgroundColor: '#aaaaaa33',
             position: 'absolute',
             left: 698,
-            top: 404,
+            top: 403,
             width: 44,
             height: 33,
           }}
@@ -5001,7 +5001,7 @@ export var storyboard = (
             backgroundColor: '#aaaaaa33',
             position: 'absolute',
             left: 698,
-            top: 404,
+            top: 403,
             width: 44,
             height: 33,
           }}

diff --git a/editor/src/components/navigator/left-pane/index.tsx b/editor/src/components/navigator/left-pane/index.tsx
@@ -3,7 +3,7 @@
 /** @jsxFrag React.Fragment */
 import { jsx } from '@emotion/react'
 import React from 'react'
-import { ResizableFlexColumn, UtopiaTheme, colorTheme } from '../../../uuiui'
+import { FlexRow, ResizableFlexColumn, UtopiaTheme, colorTheme } from '../../../uuiui'
 import type { ResizableProps } from '../../../uuiui-deps'
 import { User } from '../../../uuiui-deps'
 import { MenuTab } from '../../../uuiui/menu-tab'
@@ -19,7 +19,6 @@ import {
 } from '../../editor/store/editor-state'
 import { LowPriorityStoreProvider } from '../../editor/store/store-context-providers'
 import { Substores, useEditorState } from '../../editor/store/store-hook'
-import { UIGridRow } from '../../inspector/widgets/ui-grid-row'
 import { ContentsPane } from './contents-pane'
 import { ForksGiven } from './forks-given'
 import { GithubPane } from './github-pane'
@@ -142,12 +141,7 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
             overflowY: 'scroll',
           }}
         >
-          <UIGridRow
-            variant='|--67px--||--67px--||--67px--||--67px--|'
-            padded={false}
-            css={{ gridColumnGap: 0 }}
-            style={{ alignItems: 'stretch', marginBottom: 10 }}
-          >
+          <FlexRow style={{ marginBottom: 10, gap: 10 }} css={undefined}>
             <MenuTab
               label={'Navigator'}
               selected={selectedTab === LeftMenuTab.Navigator}
@@ -163,8 +157,7 @@ export const LeftPaneComponent = React.memo<LeftPaneComponentProps>((props) => {
               selected={selectedTab === LeftMenuTab.Github}
               onClick={onClickGithubTab}
             />
-          </UIGridRow>
-
+          </FlexRow>
           {selectedTab === LeftMenuTab.Navigator ? <NavigatorComponent /> : null}
           {selectedTab === LeftMenuTab.Project ? <ContentsPane /> : null}
           {selectedTab === LeftMenuTab.Github ? <GithubPane /> : null}

diff --git a/editor/src/components/titlebar/title-bar.tsx b/editor/src/components/titlebar/title-bar.tsx
@@ -31,6 +31,7 @@ import { Substores, useEditorState } from '../editor/store/store-hook'
 import { RoundButton } from './buttons'
 import { TestMenu } from './test-menu'
 import { useGridPanelDraggable } from '../canvas/grid-panels-dnd'
+import { FlexRow } from 'utopia-api'
 import {
   useUpdateGridPanelLayout,
   type StoredPanel,
@@ -39,21 +40,26 @@ import {
 
 interface ProjectTitleProps {}
 
+export const TitleHeight = 40
+
 const ProjectTitle: React.FC<React.PropsWithChildren<ProjectTitleProps>> = ({ children }) => {
   return (
-    <div
+    <FlexRow
       style={{
         fontWeight: 400,
         fontSize: 12,
         padding: '0 10px',
         color: colorTheme.fg0.value,
+        height: TitleHeight,
+        alignItems: 'center',
       }}
+      css={undefined}
     >
       {children}
-    </div>
+    </FlexRow>
   )
 }
-export const TitleHeight = 40
+
 export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel }) => {
   const { drag } = useGridPanelDraggable(props.panelData)
 
@@ -140,20 +146,28 @@ export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 6,
+        gap: 10,
+        flexShrink: 0,
       }}
     >
-      <div
-        style={{ width: 8, height: 8, borderRadius: 8, backgroundColor: theme.brandNeonPink.value }}
-      />
-      <div
-        style={{
-          width: 8,
-          height: 8,
-          borderRadius: 8,
-          backgroundColor: theme.brandNeonGreen.value,
-        }}
-      />
+      <FlexRow css={{ gap: 6 }}>
+        <div
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: 8,
+            backgroundColor: theme.unavailableGrey.value,
+          }}
+        />
+        <div
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: 8,
+            backgroundColor: theme.unavailableGrey.value,
+          }}
+        />
+      </FlexRow>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         {currentBranch != null ? (
           <SimpleFlexRow
@@ -179,7 +193,6 @@ export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel
               gap: 6,
               scale: '75%',
               transformOrigin: 'left',
-              paddingLeft: 10,
             }}
           >
             {when(
@@ -549,11 +562,10 @@ const TitleBar = React.memo(() => {
           paddingRight: 16,
           borderRadius: 16,
           background: colorTheme.bg1.value,
-          height: 27,
         }}
       >
         {currentBranch != null ? (
-          <SimpleFlexRow style={{ gap: 5 }}>
+          <SimpleFlexRow style={{ gap: 5, flexShrink: 0 }}>
             {repoName}
             {<Icons.Branch style={{ width: 19, height: 19 }} />}
             {currentBranch}

diff --git a/editor/src/utils/clipboard.spec.browser2.tsx b/editor/src/utils/clipboard.spec.browser2.tsx
@@ -58,7 +58,7 @@ describe('Pasting an image onto the canvas', () => {
           style={{
             position: 'absolute',
             left: 719,
-            top: 419.5,
+            top: 419,
             width: 1,
             height: 1,
           }}