Feat/condensed row component (#5922)

Part of #5840 **Problem:** Condensed rows (and even render prop rows!) don't use the purple colors for component contexts. **Fix:** Make them behave like the other navigator rows. | Before | After | |--------|--------| | <img width="397" alt="Screenshot 2024-06-13 at 1 25 32 PM" src="https://github.com/concrete-utopia/utopia/assets/1081051/5c1cb40f-3465-4baf-b107-a59010ae1b22"> | <img width="397" alt="Screenshot 2024-06-13 at 1 25 25 PM" src="https://github.com/concrete-utopia/utopia/assets/1081051/4a71dd58-e0e4-4ad7-b451-11bbbc423448"> | **Manual Tests:** I hereby swear that: - [x] I opened a hydrogen project and it loaded - [x] I could navigate to various routes in Preview mode
concrete-utopia · Jun 13, 2024 · 04a5b5b · 04a5b5b
1 parent 58a7092
commit 04a5b5b
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 8 deletions.
diff --git a/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx b/editor/src/components/navigator/navigator-item/navigator-condensed-entry.tsx
@@ -22,6 +22,7 @@ import {
   NavigatorRowClickableWrapper,
   useGetNavigatorClickActions,
 } from './navigator-item-clickable-wrapper'
+import type { ThemeObject } from '../../../uuiui/styles/theme/theme-helpers'
 import { useNavigatorSelectionBoundsForEntry } from './use-navigator-selection-bounds-for-entry'
 
 function useEntryLabel(entry: NavigatorEntry) {
@@ -38,6 +39,12 @@ function useEntryLabel(entry: NavigatorEntry) {
   return entryLabel
 }
 
+function getSelectionColor(colorTheme: ThemeObject, isComponent: boolean) {
+  return isComponent
+    ? { main: colorTheme.selectionPurple.value, child: colorTheme.childSelectionPurple.value }
+    : { main: colorTheme.selectionBlue.value, child: colorTheme.childSelectionBlue.value }
+}
+
 export const CondensedEntryItemWrapper = React.memo(
   (props: { windowStyle: React.CSSProperties; navigatorRow: CondensedNavigatorRow }) => {
     const colorTheme = useColorTheme()
@@ -73,6 +80,31 @@ export const CondensedEntryItemWrapper = React.memo(
       'CondensedEntryItemWrapper isCollapsed',
     )
 
+    const autoFocusedPaths = useEditorState(
+      Substores.derived,
+      (store) => store.derived.autoFocusedPaths,
+      'CondensedEntryItemWrapper autoFocusedPaths',
+    )
+
+    const isComponentOrInsideComponent = useEditorState(
+      Substores.focusedElement,
+      (store) =>
+        props.navigatorRow.entries.some(
+          (entry) =>
+            EP.isInExplicitlyFocusedSubtree(
+              store.editor.focusedElementPath,
+              autoFocusedPaths,
+              entry.elementPath,
+            ) ||
+            EP.isExplicitlyFocused(
+              store.editor.focusedElementPath,
+              autoFocusedPaths,
+              entry.elementPath,
+            ),
+        ),
+      'CondensedEntryItemWrapper isInFocusedComponentSubtree',
+    )
+
     const isDataReferenceRow = React.useMemo(() => {
       return props.navigatorRow.entries.every(
         (entry, idx) =>
@@ -92,6 +124,15 @@ export const CondensedEntryItemWrapper = React.memo(
       )
     }, [selectedViews, props.navigatorRow])
 
+    function getBackgroundColor() {
+      if (rowRootSelected) {
+        return getSelectionColor(colorTheme, isComponentOrInsideComponent).main
+      } else if (hasSelection || wholeRowInsideSelection) {
+        return getSelectionColor(colorTheme, isComponentOrInsideComponent).child
+      } else {
+        return 'transparent'
+      }
+    }
     const { isTopOfSelection, isBottomOfSelection } = useNavigatorSelectionBoundsForEntry(
       props.navigatorRow.entries[0],
       rowRootSelected,
@@ -104,11 +145,7 @@ export const CondensedEntryItemWrapper = React.memo(
           ...props.windowStyle,
           display: 'flex',
           alignItems: 'center',
-          backgroundColor: rowRootSelected
-            ? colorTheme.selectionBlue.value
-            : hasSelection || wholeRowInsideSelection
-            ? colorTheme.childSelectionBlue.value
-            : 'transparent',
+          backgroundColor: getBackgroundColor(),
           borderTopLeftRadius: isTopOfSelection ? NavigatorRowBorderRadius : 0,
           borderTopRightRadius: isTopOfSelection ? NavigatorRowBorderRadius : 0,
           borderBottomLeftRadius:
@@ -138,6 +175,7 @@ export const CondensedEntryItemWrapper = React.memo(
                 wholeRowInsideSelection={wholeRowInsideSelection}
                 rowContainsSelection={rowContainsSelection}
                 rowRootSelected={rowRootSelected}
+                isComponentOrInsideComponent={isComponentOrInsideComponent}
               />
             )
           })}
@@ -158,6 +196,7 @@ const CondensedEntryItem = React.memo(
     wholeRowInsideSelection: boolean
     showSeparator: boolean
     showExpandableIndicator: boolean
+    isComponentOrInsideComponent: boolean
   }) => {
     const colorTheme = useColorTheme()
 
@@ -206,7 +245,7 @@ const CondensedEntryItem = React.memo(
       if (props.wholeRowInsideSelection) {
         return 'transparent'
       } else if (!selectionIsDataReference && (isSelected || isChildOfSelected)) {
-        return colorTheme.childSelectionBlue.value
+        return getSelectionColor(colorTheme, props.isComponentOrInsideComponent).child
       } else {
         return colorTheme.bg1.value
       }
@@ -216,6 +255,7 @@ const CondensedEntryItem = React.memo(
       selectionIsDataReference,
       isSelected,
       isChildOfSelected,
+      props.isComponentOrInsideComponent,
     ])
 
     return (
@@ -229,6 +269,7 @@ const CondensedEntryItem = React.memo(
           isDataReferenceRow={props.isDataReferenceRow}
           indentation={indentation}
           rowRootSelected={props.rowRootSelected}
+          isComponentOrInsideComponent={props.isComponentOrInsideComponent}
         />
         {when(
           props.showSeparator,
@@ -253,6 +294,7 @@ const CondensedEntryItemContent = React.memo(
     showExpandableIndicator: boolean
     isDataReferenceRow: boolean
     indentation: number
+    isComponentOrInsideComponent: boolean
   }) => {
     const dispatch = useDispatch()
     const colorTheme = useColorTheme()
@@ -341,7 +383,9 @@ const CondensedEntryItemContent = React.memo(
             justifyContent: 'center',
             borderRadius: 5,
             backgroundColor:
-              props.selected && !isDataReference ? colorTheme.selectionBlue.value : undefined,
+              props.selected && !isDataReference
+                ? getSelectionColor(colorTheme, props.isComponentOrInsideComponent).main
+                : undefined,
             width: '100%',
             height: '100%',
             padding: props.showExpandableIndicator ? '0px 5px' : 0,

diff --git a/editor/src/components/navigator/navigator-item/navigator-item.tsx b/editor/src/components/navigator/navigator-item/navigator-item.tsx
@@ -444,7 +444,6 @@ export const NavigatorItem: React.FunctionComponent<
   const isInFocusedComponentSubtree = useEditorState(
     Substores.focusedElement,
     (store) =>
-      isRegularNavigatorEntry(navigatorEntry) &&
       EP.isInExplicitlyFocusedSubtree(
         store.editor.focusedElementPath,
         autoFocusedPaths,