BUGFIX: Adjust the styles to be loaded

psmb · Oct 4, 2024 · 07af076 · 07af076
1 parent e92bea5
commit 07af076
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 38 deletions.
diff --git a/Resources/Private/FlatNav/src/FlatNav.js b/Resources/Private/FlatNav/src/FlatNav.js
@@ -155,15 +155,16 @@ export default class FlatNav extends Component {
                     )).length > 0;
                     const isRemoved = item?.properties?._removed;
                     const nodeIconComponent = this.getNodeIconComponent(item);
+                    const nodeItemClassNames = mergeClassNames({
+                        [style.node]: true,
+                        [style.nodeFocused]: isFocused,
+                        [style.nodeDirty]: isDirty,
+                        [style.nodeRemoved]: isRemoved
+                    })
 
                     return (
                         <div
-                            className={mergeClassNames({
-                                [style.node]: true,
-                                [style['node--focused']]: isFocused,
-                                [style['node--dirty']]: isDirty,
-                                [style['node--removed']]: isRemoved
-                            })}
+                            className={nodeItemClassNames}
                             key={contextPath}
                             onClick={() => {
                                 if ( ! isRemoved) {
@@ -174,11 +175,11 @@ export default class FlatNav extends Component {
                             role="button"
                             >
                             <div
-                                className={style.node__iconWrapper}>
+                                className={style.nodeIconWrapper}>
                                 {nodeIconComponent}
                             </div>
                             <span
-                                className={style.node__label}>
+                                className={style.nodeLabel}>
                                 {item?.label}
                             </span>
                         </div>

diff --git a/Resources/Private/FlatNav/src/makeFlatNavContainer.js b/Resources/Private/FlatNav/src/makeFlatNavContainer.js
@@ -232,8 +232,8 @@ const makeFlatNavContainer = OriginalPageTree => {
         render() {
             return (
                 <Tabs theme={{
-                    tabs__content: style.tabs__content,
-                    tabs__panel: style.tabs__panel
+                    tabs__content: style.tabsContent,
+                    tabs__panel: style.tabsPanel
                 }}>
                     {Object.keys(this.props.options.presets).map(presetName => {
                         const preset = this.props.options.presets[presetName];

diff --git a/Resources/Private/FlatNav/src/style.modules.css b/Resources/Private/FlatNav/src/style.modules.css
@@ -3,11 +3,11 @@
     opacity: 1 !important;
 }
 
-.tabs__content {
+.tabsContent {
     height: calc(100% - 41px);
 }
 
-.tabs__panel {
+.tabsPanel {
     height: 100%;
 }
 
@@ -31,11 +31,11 @@
 }
 .toolbarSearchInput {
     border-radius: 0;
+}
 
-    &:focus {
-        background-color: var(--colors-ContrastDark);
-        color: var(--colors-ContrastBrightest);
-    }
+.toolbarSearchInput:focus {
+    background-color: var(--colors-ContrastDark);
+    color: var(--colors-ContrastBrightest);
 }
 .toolbarSearchClearButton {
     background-color: var(--colors-ContrastDark);
@@ -53,47 +53,40 @@
     border-bottom: 1px solid var(--colors-ContrastDark);
 }
 
-.pageTreeToolbarOriginal {
-    :is(div) {
-        border-top: 0;
-    }
+.pageTreeToolbarOriginal :is(div) {
+    border-top: 0;
 }
 
 .node {
-    position: relative;
+    display: flex;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     width: 100%;
     padding: 3px 6px;
     cursor: pointer;
 }
-.node--focused {
+
+.nodeIconWrapper {
+    width: 2em;
+    text-align: center;
+}
+
+.nodeFocused {
     background-color: var(--colors-ContrastNeutral);
 }
-.node--focused .node__label {
+.nodeFocused .nodeLabel {
     color: var(--colors-PrimaryBlue);
 }
-.node--dirty {
+.nodeDirty {
     border-left: 2px solid var(--colors-Warn);
     padding-left: 4px;
 }
-.node--removed {
+.nodeRemoved {
     cursor: not-allowed;
     border-color: var(--colors-Error);
 }
-.node--removed .node__label,
-.node--removed .node__iconWrapper {
+.nodeRemoved .nodeLabel,
+.nodeRemoved .nodeIconWrapper {
     opacity: 0.5;
 }
-
-.node__iconWrapper {
-    width: 2em;
-    display: inline-block;
-    position: absolute;
-    text-align: center;
-}
-
-.node__label {
-    margin-left: 2em;
-}