From b01b63ecdfb3024677fef5399613f118082dfbce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20Gu=CC=88nther?= Date: Fri, 4 Oct 2024 20:09:03 +0200 Subject: [PATCH] TASK: Render hover color for node items --- Resources/Private/FlatNav/src/FlatNav.js | 6 +++--- Resources/Private/FlatNav/src/style.modules.css | 16 ++++++++++++++-- Resources/Public/JavaScript/FlatNav/Plugin.css | 16 +++++++++++++--- Resources/Public/JavaScript/FlatNav/Plugin.js | 14 +++++++++----- .../FlatNav/src/style.modules.css.d.ts | 4 ++++ .../FlatNav/src/style.modules.d.css.ts | 4 ++++ 6 files changed, 47 insertions(+), 13 deletions(-) diff --git a/Resources/Private/FlatNav/src/FlatNav.js b/Resources/Private/FlatNav/src/FlatNav.js index 5958b32..d96c140 100644 --- 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 ( - + @@ -127,7 +127,7 @@ export default class FlatNav extends Component { if (isHiddenBefore || isHiddenAfter) { return ( - + @@ -135,7 +135,7 @@ export default class FlatNav extends Component { } return ( - + ); } diff --git a/Resources/Private/FlatNav/src/style.modules.css b/Resources/Private/FlatNav/src/style.modules.css index b5a926b..08e9217 100644 --- 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,6 +54,11 @@ border-bottom: 1px solid var(--colors-ContrastDark); } +.treeWrapper { + flex-grow: 1; + padding: 5px 0; +} + .pageTreeToolbarOriginal :is(div) { border-top: 0; } @@ -60,11 +66,17 @@ .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 { diff --git a/Resources/Public/JavaScript/FlatNav/Plugin.css b/Resources/Public/JavaScript/FlatNav/Plugin.css index 8d9c632..ff9175d 100644 --- a/Resources/Public/JavaScript/FlatNav/Plugin.css +++ b/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; diff --git a/Resources/Public/JavaScript/FlatNav/Plugin.js b/Resources/Public/JavaScript/FlatNav/Plugin.js index 6abca90..3d341e1 100644 --- a/Resources/Public/JavaScript/FlatNav/Plugin.js +++ b/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; diff --git a/Resources/Public/JavaScript/FlatNav/src/style.modules.css.d.ts b/Resources/Public/JavaScript/FlatNav/src/style.modules.css.d.ts index 6e833ba..ae538e7 100644 --- a/Resources/Public/JavaScript/FlatNav/src/style.modules.css.d.ts +++ b/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; \ No newline at end of file diff --git a/Resources/Public/JavaScript/FlatNav/src/style.modules.d.css.ts b/Resources/Public/JavaScript/FlatNav/src/style.modules.d.css.ts index 6e833ba..ae538e7 100644 --- a/Resources/Public/JavaScript/FlatNav/src/style.modules.d.css.ts +++ b/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; \ No newline at end of file