EZP-30090: As an editor I would like content tree panel staying opene…

…d until clicking on a Content Tree button again (#826) * EZP-30090: As an editor I would like content tree panel staying opened until clicking on a Content Tree button again * fixup
ezsystems · Feb 4, 2019 · 3d949fd · 3d949fd
1 parent 486105b
commit 3d949fd
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 5 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.location.content.tree.js b/src/bundle/Resources/public/js/scripts/admin.location.content.tree.js
@@ -1,5 +1,22 @@
-(function(doc, React, ReactDOM, eZ) {
+(function(doc, React, ReactDOM, eZ, localStorage) {
+    const KEY_CONTENT_TREE_EXPANDED = 'ez-content-tree-expanded';
+    const CLASS_CONTENT_TREE_EXPANDED = 'ez-content-tree-container--expanded';
+    const CLASS_BTN_CONTENT_TREE_EXPANDED = 'ez-btn--content-tree-expanded';
     const contentTreeContainer = doc.querySelector('.ez-content-tree-container');
+    const btn = doc.querySelector('.ez-btn--toggle-content-tree');
+    const toggleContentTreePanel = () => {
+        contentTreeContainer.classList.toggle(CLASS_CONTENT_TREE_EXPANDED);
+        btn.classList.toggle(CLASS_BTN_CONTENT_TREE_EXPANDED);
+
+        localStorage.setItem(KEY_CONTENT_TREE_EXPANDED, contentTreeContainer.classList.contains(CLASS_CONTENT_TREE_EXPANDED));
+    };
 
     ReactDOM.render(React.createElement(eZ.modules.ContentTree, {}), contentTreeContainer);
-})(window.document, window.React, window.ReactDOM, window.eZ);
+
+    btn.addEventListener('click', toggleContentTreePanel, false);
+
+    if (localStorage.getItem(KEY_CONTENT_TREE_EXPANDED) === 'true') {
+        contentTreeContainer.classList.add(CLASS_CONTENT_TREE_EXPANDED);
+        btn.classList.add(CLASS_BTN_CONTENT_TREE_EXPANDED);
+    }
+})(window.document, window.React, window.ReactDOM, window.eZ, window.localStorage);
diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss
@@ -181,3 +181,9 @@
         }
     }
 }
+
+.ez-btn--content-tree-expanded {
+    background: $ez-white;
+    border-color: $ez-white;
+    color: $ez-black;
+}
diff --git a/src/bundle/Resources/public/scss/_icons.scss b/src/bundle/Resources/public/scss/_icons.scss
@@ -228,3 +228,15 @@
         }
     }
 }
+
+.ez-btn--content-tree-expanded {
+    .ez-icon {
+        fill: $ez-black;
+    }
+
+    &:hover {
+        .ez-icon {
+            fill: $ez-white;
+        }
+    }
+}
diff --git a/src/bundle/Resources/public/scss/_view-content.scss b/src/bundle/Resources/public/scss/_view-content.scss
@@ -4,10 +4,17 @@
     }
 
     .ez-content-tree-container {
-        min-width: calculateRem(250px);
-        max-width: 33vw;
+        max-width: 0;
         position: relative;
         background: $ez-white;
+        overflow: auto;
+        color: inherit;
+        transition: max-width 0.2s $ez-admin-transition;
+
+        &--expanded {
+            min-width: calculateRem(250px);
+            max-width: 33vw;
+        }
     }
 
     .ez-location-view-container {

diff --git a/src/lib/Menu/LeftSidebarBuilder.php b/src/lib/Menu/LeftSidebarBuilder.php
@@ -110,7 +110,7 @@ public function createStructure(array $options): ItemInterface
                     'extras' => ['icon' => 'content-tree'],
                     'attributes' => [
                         'type' => 'button',
-                        'class' => 'btn--toggle-content-tree',
+                        'class' => 'ez-btn ez-btn--toggle-content-tree',
                     ],
                 ]
             ),