Skip to content
Permalink
Browse files

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
  • Loading branch information...
sunpietro authored and lserwatka committed Feb 4, 2019
1 parent 486105b commit 3d949fd9730f719ef216e537c04cef7fc9000374
@@ -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);
@@ -181,3 +181,9 @@
}
}
}

.ez-btn--content-tree-expanded {
background: $ez-white;
border-color: $ez-white;
color: $ez-black;
}
@@ -228,3 +228,15 @@
}
}
}

.ez-btn--content-tree-expanded {
.ez-icon {
fill: $ez-black;
}

&:hover {
.ez-icon {
fill: $ez-white;
}
}
}
@@ -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 {
@@ -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',
],
]
),

0 comments on commit 3d949fd

Please sign in to comment.
You can’t perform that action at this time.