Merge pull request #303 from plone/toolbar-improvements

Reimplement "dropend" and collapsed icons for bootstrap toolbar

news/303.feature

@@ -0,0 +1,2 @@
+Reimplement dropout toolbar submenus and collapsed icons
+[petschki, agitator]

plone/app/layout/viewlets/menu.pt

@@ -15,16 +15,18 @@
           <tal:if condition="python:actionid != 'history'">
             <tal:icon tal:condition="python:action['icon']"
                       tal:replace="structure python:icons.tag(action['icon'] or 'toolbar-action', tag_alt=action['id'], tag_class='me-1')" />
-            <span tal:content="action/title" i18n:translate="">View name</span>
+            <span class="toolbar-label" tal:content="action/title" i18n:translate="">View name</span>
           </tal:if>
 
           <tal:if tal:condition="python:actionid == 'history'">
             <tal:icon tal:replace="structure python:icons.tag('lock' if locked else action['icon'], tag_alt=action['id'], tag_class='me-1')" />
-            <time
+            <span class="toolbar-label">
+              <time
                 class="pat-display-time"
                 data-pat-display-time="from-now: true"
                 datetime="${context/ModificationDate}"
                 tal:content="">${context/ModificationDate}</time>
+            </span>
           </tal:if>
 
         </a>

plone/app/layout/viewlets/toolbar.pt

@@ -1,30 +1,21 @@
 <section id="edit-bar" role="toolbar"
          tal:define="context_state view/context_state;
                      icons python:context.restrictedTraverse('@@iconresolver');
-                     personal_bar python: view.get_personal_bar()"
+                     personal_bar python: view.get_personal_bar();
+                     toolbar_pos view/toolbar_position"
          tal:condition="context_state/is_toolbar_visible"
          i18n:domain="plone">
 
-  <div class="h-100 offcanvas-toggler bg-dark">
-    <a class="toggler-hover" data-bs-toggle="offcanvas" href="#edit-zone">
-      <span class="toggler-header">
-        <tal:icon tal:replace="structure python:icons.tag('list')" />
-      </span>
-    </a>
-  </div>
 
   <div id="edit-zone" role="toolbar"
-       class="pat-toolbar offcanvas offcanvas-start bg-dark" data-bs-scroll="true">
+       class="pat-toolbar" data-bs-scroll="true">
 
-    <div class="offcanvas-header mb-3 bg-primary">
-      <a class="offcanvas-dismiss text-white" data-bs-dismiss="offcanvas" aria-label="Dismiss" href="#edit-zone">
-        <tal:icon tal:replace="structure python:icons.tag('x-lg')" />
-      </a>
-      <a class="offcanvas-unpin text-white" data-bs-dismiss="offcanvas" aria-label="Unpin" href="#edit-zone">
+    <div class="toolbar-header">
+      <a class="toolbar-collapse" aria-label="Unpin" href="#edit-zone">
         <tal:icon tal:replace="structure python:icons.tag('arrow-bar-left')" />
       </a>
-      <a class="offcanvas-pin text-white" data-bs-dismiss="offcanvas" aria-label="Pin" href="#edit-zone">
-        <tal:icon tal:replace="structure python:icons.tag('pin-angle')" />
+      <a class="toolbar-expand" aria-label="Pin" href="#edit-zone">
+        <tal:icon tal:replace="structure python:icons.tag('arrow-bar-right')" />
       </a>
     </div>
 
@@ -35,31 +26,33 @@
       </li>
     </ul>
 
-    <div tal:condition="personal_bar/user_actions" class="personaltools-wrapper">
+    <div tal:condition="personal_bar/user_actions" class="personaltools-wrapper ${python:'dropend' if toolbar_pos == 'side' else ''}">
 
       <a id="personaltools-menulink"
-        class="nav-link dropdown-toggle collapsed"
-        data-bs-toggle="collapse"
-        data-bs-target="#collapse-personaltools"
-        data-bs-
-        aria-expanded="false"
-        tal:attributes="href personal_bar/homelink_url">
+         class="nav-link dropdown-toggle"
+         data-bs-toggle="dropdown"
+         data-bs-offset="0,0"
+         aria-expanded="false"
+         tal:attributes="href personal_bar/homelink_url">
         <tal:icon tal:replace="structure python:icons.tag('toolbar-action/personaltools', tag_alt='portal-personaltools', tag_class='me-1')" />
-        <span tal:replace="personal_bar/user_name">User</span>
+        <span class="toolbar-label" tal:content="personal_bar/user_name">User</span>
       </a>
 
-      <div id="collapse-personaltools" class="collapse" data-bs-parent="#edit-zone">
-        <ul class="nav nav-pills flex-column small" aria-labelledby="personaltools-menulink">
-          <li tal:repeat="action personal_bar/user_actions">
-            <a href="${action/href}" class="nav-link">
-              <tal:icon replace="structure python:icons.tag(action.get('icon', 'dot'), tag_alt='portal-personaltools', tag_class='me-1')" />
-              <tal:actionname tal:content="action/title">
-                action title
-              </tal:actionname>
-            </a>
-          </li>
-        </ul>
-      </div>
+      <ul id="collapse-personaltools"
+          class="dropdown-menu"
+          aria-labelledby="personaltools-menulink">
+        <li>
+          <h6 class="dropdown-header">${personal_bar/user_name}</h6>
+        </li>
+        <li tal:repeat="action personal_bar/user_actions">
+          <a href="${action/href}" class="dropdown-item">
+            <tal:icon replace="structure python:icons.tag(action.get('icon', 'dot'), tag_alt='portal-personaltools', tag_class='me-1')" />
+            <tal:actionname tal:content="action/title">
+              action title
+            </tal:actionname>
+          </a>
+        </li>
+      </ul>
 
     </div>
   </div>

plone/app/layout/viewlets/toolbar.py

@@ -11,6 +11,12 @@
 class ToolbarViewletManager(OrderedViewletManager):
     custom_template = ViewPageTemplateFile("toolbar.pt")
 
+    @property
+    @memoize
+    def _settings(self):
+        registry = getUtility(IRegistry)
+        return registry.forInterface(ISiteSchema, prefix="plone", check=False)
+
     def base_render(self):
         return super().render()
 
@@ -27,17 +33,18 @@ def context_state(self):
     def portal_state(self):
         return getMultiAdapter((self.context, self.request), name="plone_portal_state")
 
+    def toolbar_position(self):
+        return self._settings.toolbar_position
+
     def get_personal_bar(self):
         viewlet = PersonalBarViewlet(self.context, self.request, self.__parent__, self)
         viewlet.update()
         return viewlet
 
     def get_toolbar_logo(self):
-        registry = getUtility(IRegistry)
-        settings = registry.forInterface(ISiteSchema, prefix="plone", check=False)
         portal_url = self.portal_state.portal_url()
         try:
-            logo = settings.toolbar_logo
+            logo = self._settings.toolbar_logo
         except AttributeError:
             logo = "/++plone++static/plone-toolbarlogo.svg"
         if not logo: