Add a cog icon into the toolbar

plone · Nov 17, 2022 · ae09c8a · ae09c8a
1 parent 026047f
commit ae09c8a
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 13 deletions.
diff --git a/src/actions/sidebar/sidebar.js b/src/actions/sidebar/sidebar.js
@@ -3,7 +3,10 @@
  * @module actions/sidebar/sidebar
  */
 
-import { SET_SIDEBAR_TAB } from '@plone/volto/constants/ActionTypes';
+import {
+  SET_SIDEBAR_EXPANDED,
+  SET_SIDEBAR_TAB,
+} from '@plone/volto/constants/ActionTypes';
 
 /**
  * Set sidebar tab function.
@@ -17,3 +20,10 @@ export function setSidebarTab(index) {
     index,
   };
 }
+
+export function setSidebarExpanded(isExpanded) {
+  return {
+    type: SET_SIDEBAR_EXPANDED,
+    isExpanded,
+  };
+}
diff --git a/src/components/manage/Add/Add.jsx b/src/components/manage/Add/Add.jsx
@@ -15,8 +15,14 @@ import { Portal } from 'react-portal';
 import { v4 as uuid } from 'uuid';
 import qs from 'query-string';
 import { toast } from 'react-toastify';
+import cx from 'classnames';
 
-import { createContent, getSchema, changeLanguage } from '@plone/volto/actions';
+import {
+  changeLanguage,
+  createContent,
+  getSchema,
+  setSidebarExpanded,
+} from '@plone/volto/actions';
 import {
   Form,
   Icon,
@@ -42,6 +48,7 @@ import config from '@plone/volto/registry';
 
 import saveSVG from '@plone/volto/icons/save.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import configSVG from '@plone/volto/icons/configuration.svg';
 
 const messages = defineMessages({
   add: {
@@ -386,6 +393,24 @@ class Add extends Component {
                         title={this.props.intl.formatMessage(messages.cancel)}
                       />
                     </Button>
+                    <Button
+                      className={cx('settings', {
+                        'sidebar-expanded': this.props.sidebarExpanded,
+                      })}
+                      // TODO: The below should set `aria-pressed`, but it doesn't for some reason :(
+                      active={this.props.sidebarExpanded}
+                      onClick={() => {
+                        this.props.setSidebarExpanded(
+                          !this.props.sidebarExpanded,
+                        );
+                      }}
+                    >
+                      <span class="sr-only">Hide sidebar</span>
+                      <div aria-hidden="true" focusable="false">
+                        <Icon name={configSVG} />
+                      </div>
+                    </Button>
+
                   </>
                 }
               />
@@ -457,8 +482,9 @@ export default compose(
       pathname: props.location.pathname,
       returnUrl: qs.parse(props.location.search).return_url,
       type: qs.parse(props.location.search).type,
+      sidebarExpanded: state.sidebar.expanded,
     }),
-    { createContent, getSchema, changeLanguage },
+    { createContent, getSchema, changeLanguage, setSidebarExpanded },
   ),
   preloadLazyLibs('cms'),
 )(Add);
diff --git a/src/components/manage/Edit/Edit.jsx b/src/components/manage/Edit/Edit.jsx
@@ -15,6 +15,7 @@ import { Portal } from 'react-portal';
 import qs from 'query-string';
 import { find } from 'lodash';
 import { toast } from 'react-toastify';
+import cx from 'classnames';
 
 import {
   Forbidden,
@@ -34,12 +35,14 @@ import {
   unlockContent,
   getSchema,
   listActions,
+  setSidebarExpanded,
 } from '@plone/volto/actions';
 import { getBaseUrl, hasBlocksData } from '@plone/volto/helpers';
 import { preloadLazyLibs } from '@plone/volto/helpers/Loadable';
 
 import saveSVG from '@plone/volto/icons/save.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import configSVG from '@plone/volto/icons/configuration.svg';
 
 import config from '@plone/volto/registry';
 
@@ -420,6 +423,23 @@ class Edit extends Component {
                       title={this.props.intl.formatMessage(messages.cancel)}
                     />
                   </Button>
+                  <Button
+                    className={cx('settings', {
+                      'sidebar-expanded': this.props.sidebarExpanded,
+                    })}
+                    // TODO: The below should set `aria-pressed`, but it doesn't for some reason :(
+                    active={this.props.sidebarExpanded}
+                    onClick={() => {
+                      this.props.setSidebarExpanded(
+                        !this.props.sidebarExpanded,
+                      );
+                    }}
+                  >
+                    <span class="sr-only">Hide sidebar</span>
+                    <div aria-hidden="true" focusable="false">
+                      <Icon name={configSVG} />
+                    </div>
+                  </Button>
 
                   {config.settings.isMultilingual && (
                     <CompareLanguages
@@ -503,13 +523,15 @@ export default compose(
       updateRequest: state.content.update,
       pathname: props.location.pathname,
       returnUrl: qs.parse(props.location.search).return_url,
+      sidebarExpanded: state.sidebar.expanded,
     }),
     {
       updateContent,
       getContent,
       getSchema,
       lockContent,
       unlockContent,
+      setSidebarExpanded,
     },
   ),
   preloadLazyLibs('cms'),

diff --git a/src/components/manage/Sidebar/Sidebar.jsx b/src/components/manage/Sidebar/Sidebar.jsx
@@ -14,8 +14,9 @@ import cx from 'classnames';
 import { BodyClass, getCookieOptions } from '@plone/volto/helpers';
 import { Icon } from '@plone/volto/components';
 import forbiddenSVG from '@plone/volto/icons/forbidden.svg';
-import { setSidebarTab } from '@plone/volto/actions';
+import { setSidebarExpanded, setSidebarTab } from '@plone/volto/actions';
 import expandSVG from '@plone/volto/icons/left-key.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
 import collapseSVG from '@plone/volto/icons/right-key.svg';
 
 const messages = defineMessages({
@@ -89,18 +90,25 @@ class Sidebar extends Component {
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.sidebarExpanded !== prevProps.sidebarExpanded) {
+      const { cookies } = this.props;
+      cookies.set(
+        'sidebar_expanded',
+        this.props.sidebarExpanded,
+        getCookieOptions(),
+      );
+    }
+  }
+
   /**
    * On toggle expanded handler
    * also reset sidebar since this has mimized it
    * @method onToggleExpanded
    * @returns {undefined}
    */
   onToggleExpanded() {
-    const { cookies } = this.props;
-    cookies.set('sidebar_expanded', !this.state.expanded, getCookieOptions());
-    this.setState({
-      expanded: !this.state.expanded,
-    });
+    this.props.setSidebarExpanded(!this.props.sidebarExpanded);
     this.resetFullSizeSidebar();
   }
 
@@ -109,7 +117,7 @@ class Sidebar extends Component {
    * Reset state
    */
   resetFullSizeSidebar() {
-    if (!this.state.expanded) {
+    if (!this.props.sidebarExpanded) {
       const currentResizer = document.querySelector('#sidebar');
       const sidebarContainer = currentResizer.getElementsByClassName(
         'sidebar-container',
@@ -168,7 +176,7 @@ class Sidebar extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { expanded } = this.state;
+    const expanded = this.props.sidebarExpanded;
 
     return (
       <Fragment>
@@ -202,6 +210,10 @@ class Sidebar extends Component {
               name={this.state.showFull ? expandSVG : collapseSVG}
             />
           </Button>
+          <Button className="close-sidenav-btn" onClick={this.onToggleExpanded}>
+            <span className="sr-only">Hide sidebar</span>
+            <Icon name={clearSVG} />
+          </Button>
           <Tab
             menu={{
               secondary: true,
@@ -262,7 +274,9 @@ class Sidebar extends Component {
             ].filter((tab) => tab)}
           />
         </div>
-        <div className={this.state.expanded ? 'pusher expanded' : 'pusher'} />
+        <div
+          className={this.props.sidebarExpanded ? 'pusher expanded' : 'pusher'}
+        />
       </Fragment>
     );
   }
@@ -274,9 +288,10 @@ export default compose(
   connect(
     (state) => ({
       tab: state.sidebar.tab,
+      sidebarExpanded: state.sidebar.expanded,
       toolbarExpanded: state.toolbar.expanded,
       type: state.schema?.schema?.title,
     }),
-    { setSidebarTab },
+    { setSidebarTab, setSidebarExpanded },
   ),
 )(Sidebar);