fix border bottom for single line selection (#5713)

This small PR adds rounded border bottom for single line navigator selections (single elements or collapsed): <img width="254" alt="image" src="https://github.com/concrete-utopia/utopia/assets/7003853/b987bb4f-d44a-4b91-a1f4-80ef091fe13c">
concrete-utopia · May 22, 2024 · 403e73d · 403e73d
1 parent 4741f97
commit 403e73d
Showing 1 changed file with 35 additions and 27 deletions.
diff --git a/editor/src/components/navigator/navigator-item/navigator-item.tsx b/editor/src/components/navigator/navigator-item/navigator-item.tsx
@@ -282,6 +282,7 @@ const computeResultingStyle = (
   isDescendantOfSelected: boolean,
   isErroredGroup: boolean,
   colorTheme: ThemeObject,
+  isSingleItem: boolean,
 ) => {
   let styleType: StyleType = 'default'
   let selectedType: SelectedType = 'unselected'
@@ -323,11 +324,15 @@ const computeResultingStyle = (
 
   let result = getColors(styleType, selectedType, colorTheme)
 
+  const borderRadiusTop = selected ? '5px 5px' : '0 0'
+  // TODO: add the case of a last descendant of a selected component
+  const borderRadiusBottom = selected && isSingleItem ? '5px 5px' : '0 0'
+  const borderRadius = `${borderRadiusTop} ${borderRadiusBottom}`
+
   result.style = {
     ...result.style,
     fontWeight: isProbablyParentOfSelected || isProbablyScene ? 600 : 'inherit',
-    // TODO compute bottom borderRadius style by if it has children or siblings
-    borderRadius: selected ? '5px 5px 0 0' : undefined,
+    borderRadius: borderRadius,
   }
 
   return result
@@ -802,22 +807,6 @@ export const NavigatorItem: React.FunctionComponent<
     return elementWarnings.invalidGroup != null || elementWarnings.invalidGroupChild != null
   }, [elementWarnings])
 
-  const resultingStyle = computeResultingStyle(
-    elementIsData ? false : selected,
-    emphasis,
-    isInsideComponent,
-    isDynamic,
-    isProbablyScene,
-    fullyVisible,
-    isFocusedComponent,
-    isInFocusedComponentSubtree,
-    isManuallyFocusableComponent,
-    isHighlightedForInteraction,
-    elementIsData && selected ? false : isDescendantOfSelected,
-    isErroredGroup,
-    colorTheme,
-  )
-
   const collapse = React.useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       collapseItem(dispatch, navigatorEntry.elementPath, event)
@@ -900,21 +889,40 @@ export const NavigatorItem: React.FunctionComponent<
 
   const cursorStyle = isConditionalClauseNavigatorEntry(navigatorEntry) ? { cursor: 'pointer' } : {}
 
-  const rowStyle = useKeepReferenceEqualityIfPossible({
-    paddingLeft: getElementPadding(entryNavigatorDepth),
-    height: getItemHeight(navigatorEntry),
-    ...resultingStyle.style,
-    ...cursorStyle,
-  })
-
-  const showExpandableIndicator = React.useMemo(() => {
+  const canBeExpanded = React.useMemo(() => {
     return (
       isConditional || // if it is a conditional, so it could have no children if both branches are null
       childComponentCount > 0 ||
       isFocusedComponent
     )
   }, [childComponentCount, isFocusedComponent, isConditional])
 
+  const isSingleItem = (canBeExpanded && collapsed) || childComponentCount === 0
+
+  const resultingStyle = computeResultingStyle(
+    elementIsData ? false : selected,
+    emphasis,
+    isInsideComponent,
+    isDynamic,
+    isProbablyScene,
+    fullyVisible,
+    isFocusedComponent,
+    isInFocusedComponentSubtree,
+    isManuallyFocusableComponent,
+    isHighlightedForInteraction,
+    elementIsData && selected ? false : isDescendantOfSelected,
+    isErroredGroup,
+    colorTheme,
+    isSingleItem,
+  )
+
+  const rowStyle = useKeepReferenceEqualityIfPossible({
+    paddingLeft: getElementPadding(entryNavigatorDepth),
+    height: getItemHeight(navigatorEntry),
+    ...resultingStyle.style,
+    ...cursorStyle,
+  })
+
   const iconColor = resultingStyle.iconColor
 
   const currentlyRenaming = EP.pathsEqual(props.renamingTarget, props.navigatorEntry.elementPath)
@@ -1017,7 +1025,7 @@ export const NavigatorItem: React.FunctionComponent<
                 props.navigatorEntry.type === 'CONDITIONAL_CLAUSE',
                 <ExpandableIndicator
                   key='expandable-indicator'
-                  visible={showExpandableIndicator}
+                  visible={canBeExpanded}
                   collapsed={collapsed}
                   selected={selected && !isInsideComponent}
                   onMouseDown={collapse}