TASK: Render hover color for node items

Author: markusguenther

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} />
         );
     }
 

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 {

Resources/Public/JavaScript/FlatNav/Plugin.css

@@ -6,9 +6,12 @@
 .style-modules__tabsContent_gGud6a__ {
   height: calc(100% - 41px);
 }
-.style-modules__tabsPanel_gGud6a__,
+.style-modules__tabsPanel_gGud6a__ {
+  height: 100%;
+}
 .style-modules__panel_gGud6a__ {
   height: 100%;
+  overflow-y: hidden;
 }
 .style-modules__toolbar_gGud6a__ {
   background-color: var(--colors-ContrastDarker);
@@ -44,18 +47,25 @@
   height: 100%;
   display: flex;
 }
+.style-modules__treeWrapper_gGud6a__ {
+  flex-grow: 1;
+  padding: 5px 0;
+}
 .style-modules__pageTreeToolbarOriginal_gGud6a__ :is(div) {
   border-top: 0;
 }
 .style-modules__node_gGud6a__ {
-  white-space: nowrap;
-  text-overflow: ellipsis;
   cursor: pointer;
   width: 100%;
   padding: 3px 6px;
   display: flex;
   overflow: hidden;
 }
+.style-modules__node_gGud6a__:hover .style-modules__nodeIconWrapper_gGud6a__,
+.style-modules__node_gGud6a__:hover .style-modules__nodeIconWrapper_gGud6a__ svg.style-modules__baseIcon_gGud6a__,
+.style-modules__node_gGud6a__:hover .style-modules__nodeLabel_gGud6a__ {
+  color: var(--colors-PrimaryBlueHover);
+}
 .style-modules__nodeIconWrapper_gGud6a__ {
   text-align: center;
   width: 2em;

Resources/Public/JavaScript/FlatNav/Plugin.js

@@ -298,10 +298,11 @@
   });
 
   // src/style.modules.css
-  var loadMoreButton, node, nodeDirty, nodeFocused, nodeIconWrapper, nodeLabel, nodeRemoved, pageTreeContainer, pageTreeToolbarOriginal, panel, tabsContent, tabsPanel, toolbar, toolbarButtons, toolbarSearch, toolbarSearchClearButton, toolbarSearchInput, toolbarSearchNoResults, style_modules_default;
+  var baseIcon, loadMoreButton, node, nodeDirty, nodeFocused, nodeIconWrapper, nodeLabel, nodeRemoved, pageTreeContainer, pageTreeToolbarOriginal, panel, tabsContent, tabsPanel, toolbar, toolbarButtons, toolbarSearch, toolbarSearchClearButton, toolbarSearchInput, toolbarSearchNoResults, treeWrapper, style_modules_default;
   var init_style_modules = __esm({
     "src/style.modules.css"() {
       init_();
+      baseIcon = "style-modules__baseIcon_gGud6a__";
       loadMoreButton = "style-modules__loadMoreButton_gGud6a__";
       node = "style-modules__node_gGud6a__";
       nodeDirty = "style-modules__nodeDirty_gGud6a__";
@@ -320,7 +321,9 @@
       toolbarSearchClearButton = "style-modules__toolbarSearchClearButton_gGud6a__";
       toolbarSearchInput = "style-modules__toolbarSearchInput_gGud6a__";
       toolbarSearchNoResults = "style-modules__toolbarSearchNoResults_gGud6a__";
+      treeWrapper = "style-modules__treeWrapper_gGud6a__";
       style_modules_default = {
+        "baseIcon": baseIcon,
         "loadMoreButton": loadMoreButton,
         "node": node,
         "nodeDirty": nodeDirty,
@@ -338,7 +341,8 @@
         "toolbarSearch": toolbarSearch,
         "toolbarSearchClearButton": toolbarSearchClearButton,
         "toolbarSearchInput": toolbarSearchInput,
-        "toolbarSearchNoResults": toolbarSearchNoResults
+        "toolbarSearchNoResults": toolbarSearchNoResults,
+        "treeWrapper": treeWrapper
       };
     }
   });
@@ -524,12 +528,12 @@
           const isHiddenAfter = node2?.properties?._hiddenAfterDateTime;
           const nodeTypeIcon = nodeType?.ui?.icon;
           if (isHidden) {
-            return /* @__PURE__ */ import_react5.default.createElement("span", { className: "fa-layers fa-fw" }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: nodeTypeIcon }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: "circle", color: "error", transform: "shrink-3 down-6 right-4" }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: "times", transform: "shrink-7 down-6 right-4" }));
+            return /* @__PURE__ */ import_react5.default.createElement("span", { className: "fa-layers fa-fw" }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: nodeTypeIcon, className: style_modules_default.baseIcon }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: "circle", color: "error", transform: "shrink-3 down-6 right-4" }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: "times", transform: "shrink-7 down-6 right-4" }));
           }
           if (isHiddenBefore || isHiddenAfter) {
-            return /* @__PURE__ */ import_react5.default.createElement("span", { className: "fa-layers fa-fw" }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: nodeTypeIcon }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: "circle", color: "primaryBlue", transform: "shrink-5 down-6 right-4" }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: "clock", transform: "shrink-9 down-6 right-4" }));
+            return /* @__PURE__ */ import_react5.default.createElement("span", { className: "fa-layers fa-fw" }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: nodeTypeIcon, className: style_modules_default.baseIcon }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: "circle", color: "primaryBlue", transform: "shrink-5 down-6 right-4" }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: "clock", transform: "shrink-9 down-6 right-4" }));
           }
-          return /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: nodeTypeIcon });
+          return /* @__PURE__ */ import_react5.default.createElement(import_react_ui_components5.Icon, { icon: nodeTypeIcon, className: style_modules_default.baseIcon });
         }
         render() {
           const { focused, nodes, isLoadingReferenceNodePath, isLoading, preset, isAllowedToAddChildOrSiblingNodes, canBeDeleted, canBeEdited } = this.props;

Resources/Public/JavaScript/FlatNav/src/style.modules.css.d.ts

@@ -1,3 +1,4 @@
+export declare const baseIcon: string;
 export declare const loadMoreButton: string;
 export declare const node: string;
 export declare const nodeDirty: string;
@@ -16,8 +17,10 @@ export declare const toolbarSearch: string;
 export declare const toolbarSearchClearButton: string;
 export declare const toolbarSearchInput: string;
 export declare const toolbarSearchNoResults: string;
+export declare const treeWrapper: string;
 
 declare const ClassNames: {
+  "baseIcon": string;
   "loadMoreButton": string;
   "node": string;
   "nodeDirty": string;
@@ -36,5 +39,6 @@ declare const ClassNames: {
   "toolbarSearchClearButton": string;
   "toolbarSearchInput": string;
   "toolbarSearchNoResults": string;
+  "treeWrapper": string;
 };
 export default ClassNames;

Resources/Public/JavaScript/FlatNav/src/style.modules.d.css.ts

@@ -1,3 +1,4 @@
+export declare const baseIcon: string;
 export declare const loadMoreButton: string;
 export declare const node: string;
 export declare const nodeDirty: string;
@@ -16,8 +17,10 @@ export declare const toolbarSearch: string;
 export declare const toolbarSearchClearButton: string;
 export declare const toolbarSearchInput: string;
 export declare const toolbarSearchNoResults: string;
+export declare const treeWrapper: string;
 
 declare const ClassNames: {
+  "baseIcon": string;
   "loadMoreButton": string;
   "node": string;
   "nodeDirty": string;
@@ -36,5 +39,6 @@ declare const ClassNames: {
   "toolbarSearchClearButton": string;
   "toolbarSearchInput": string;
   "toolbarSearchNoResults": string;
+  "treeWrapper": string;
 };
 export default ClassNames;