add separator element to ActionMenu, fixes #3013

Closes #3013

Merge request studip/studip!2017

lib/classes/ActionMenu.php

@@ -96,6 +96,18 @@ class ActionMenu
         return $result;
     }
 
+    /**
+     * Returns the number of action menu items (not counting separators).
+     *
+     * @return int count
+     */
+    protected function countActions(): int
+    {
+        return count(array_filter($this->actions, function($action) {
+            return $action['type'] !== 'separator';
+        }));
+    }
+
     /**
      * Adds a link to the list of actions.
      *
@@ -213,6 +225,23 @@ class ActionMenu
         return $this;
     }
 
+    /**
+     * Adds a separator line to the list of actions.
+     *
+     * @return ActionMenu instance to allow chaining
+     */
+    public function addSeparator(): ActionMenu
+    {
+        if ($this->checkCondition()) {
+            $this->actions[] = [
+                'type'   => 'separator',
+                'index'  => ''
+            ];
+        }
+
+        return $this;
+    }
+
     /**
      * Adds a css classs to the root element in html.
      *
@@ -251,7 +280,7 @@ class ActionMenu
      */
     public function render()
     {
-        if (count($this->actions) === 0) {
+        if ($this->countActions() === 0) {
             return '';
         }
 
@@ -342,7 +371,7 @@ class ActionMenu
         $rendering_mode = $this->rendering_mode;
 
         if ($rendering_mode === null) {
-            $rendering_mode = count($this->actions) <= Config::get()->ACTION_MENU_THRESHOLD
+            $rendering_mode = $this->countActions() <= Config::get()->ACTION_MENU_THRESHOLD
                             ? self::RENDERING_MODE_ICONS
                             : self::RENDERING_MODE_MENU;
         }

resources/assets/stylesheets/scss/actionmenu.scss

@@ -141,6 +141,12 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60;
                 color: $active-color;
             }
         }
+
+        > hr {
+            border-style: none;
+            border-top: thin solid var(--dark-gray-color-45);
+            margin: 4px 0;
+        }
     }
 
     &.is-open {

resources/vue/components/StudipActionMenu.vue

@@ -11,10 +11,10 @@
             </div>
             <ul class="action-menu-list">
                 <li v-for="item in navigationItems" :key="item.id" class="action-menu-item">
-                    <a v-if="item.type === 'link'" v-bind="linkAttributes(item)" v-on="linkEvents(item)">
+                    <hr v-if="item.type === 'separator'">
+                    <a v-else-if="item.type === 'link'" v-bind="linkAttributes(item)" v-on="linkEvents(item)">
                         <studip-icon v-if="item.icon !== false" :shape="item.icon.shape" :role="item.icon.role"></studip-icon>
                         <span v-else class="action-menu-no-icon"></span>
-
                         {{ item.label }}
                     </a>
                     <label v-else-if="item.icon" class="undecorated" v-bind="linkAttributes(item)" v-on="linkEvents(item)">
@@ -33,7 +33,8 @@
     </div>
     <div v-else>
         <a v-for="item in navigationItems" :key="item.id" v-bind="linkAttributes(item)" v-on="linkEvents(item)">
-            <studip-icon :title="item.label" :shape="item.icon.shape" :role="item.icon.role" :size="20"></studip-icon>
+            <span v-if="item.type === 'separator'" class="quiet">|</span>
+            <studip-icon v-else :title="item.label" :shape="item.icon.shape" :role="item.icon.role" :size="20"></studip-icon>
         </a>
     </div>
 </template>
@@ -119,7 +120,7 @@ export default {
             if (collapseAt === true) {
                 return true;
             }
-            return Number.parseInt(collapseAt) <= this.items.length;
+            return Number.parseInt(collapseAt) <= this.items.filter((item) => item.type !== 'separator').length;
         },
         title () {
             return this.context ? this.$gettextInterpolate(this.$gettext('Aktionsmenü für %{context}'), {context: this.context}) : this.$gettext('Aktionsmenü');

templates/shared/action-menu-single.php

@@ -30,5 +30,7 @@
         <? endif ?>
     <? elseif ($action['type'] === 'multi-person-search'): ?>
         <?= $action['object']->render(false) ?>
+    <? elseif ($action['type'] === 'separator'): ?>
+        <span class="quiet">|</span>
     <? endif ?>
 <? endforeach ?>

templates/shared/action-menu.php

@@ -48,6 +48,8 @@
                 <? endif ?>
             <? elseif ($action['type'] === 'multi-person-search'): ?>
                 <?= $action['object']->render() ?>
+            <? elseif ($action['type'] === 'separator'): ?>
+                <hr>
             <? endif ?>
             </li>
         <? endforeach ?>