TASK: Render hover color for node items

psmb · Oct 4, 2024 · d7c2748 · d7c2748
1 parent 5f97f07
commit d7c2748
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/Resources/Private/FlatNav/src/FlatNav.js b/Resources/Private/FlatNav/src/FlatNav.js
@@ -117,7 +117,7 @@ export default class FlatNav extends Component {
         if (isHidden) {
             return (
                 <span className="fa-layers fa-fw">
-                    <Icon icon={nodeTypeIcon} />
+                    <Icon icon={nodeTypeIcon} className={style.baseIcon} />
                     <Icon icon="circle" color="error" transform="shrink-3 down-6 right-4" />
                     <Icon icon="times" transform="shrink-7 down-6 right-4" />
                 </span>
@@ -127,15 +127,15 @@ export default class FlatNav extends Component {
         if (isHiddenBefore || isHiddenAfter) {
             return (
                 <span className="fa-layers fa-fw">
-                    <Icon icon={nodeTypeIcon} />
+                    <Icon icon={nodeTypeIcon} className={style.baseIcon} />
                     <Icon icon="circle" color="primaryBlue" transform="shrink-5 down-6 right-4" />
                     <Icon icon="clock" transform="shrink-9 down-6 right-4" />
                 </span>
             );
         }
 
         return (
-            <Icon icon={nodeTypeIcon} />
+            <Icon icon={nodeTypeIcon} className={style.baseIcon} />
         );
     }
 

diff --git a/Resources/Private/FlatNav/src/style.modules.css b/Resources/Private/FlatNav/src/style.modules.css
@@ -13,6 +13,7 @@
 
 .panel {
     height: 100%;
+    overflow-y: hidden;
 }
 
 .toolbar {
@@ -53,18 +54,29 @@
     border-bottom: 1px solid var(--colors-ContrastDark);
 }
 
+.treeWrapper {
+    flex-grow: 1;
+    padding: 5px 0;
+}
+
 .pageTreeToolbarOriginal :is(div) {
     border-top: 0;
 }
 
 .node {
     display: flex;
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     width: 100%;
     padding: 3px 6px;
     cursor: pointer;
+
+    &:hover {
+        .nodeIconWrapper,
+        .nodeIconWrapper svg.baseIcon,
+        .nodeLabel {
+            color: var(--colors-PrimaryBlueHover);
+        }
+    }
 }
 
 .nodeIconWrapper {