add SeparatorElement for sidebar widgets, re #3235

Merge request !2204

lib/classes/sidebar/ListWidget.php

@@ -37,6 +37,16 @@ class ListWidget extends SidebarWidget
         $this->classes = array_diff($this->css_class, [$css_class]);
     }
 
+    /**
+     * Adds a separator to the widget
+     *
+     * @param array  $attributes  Optional additional attributes
+     */
+    public function addSeparator($attributes = [])
+    {
+        $this->addElement(new SeparatorElement($attributes));
+    }
+
     /**
      * 
      */
@@ -46,4 +56,4 @@ class ListWidget extends SidebarWidget
 
        return parent::render($variables);
     }
-}
\ No newline at end of file
+}

lib/classes/sidebar/SeparatorElement.php

+<?php
+
+class SeparatorElement extends WidgetElement
+{
+    public $attributes = [];
+
+    /**
+     * create a separator element
+     *
+     * @param array  $attributes HTML-attributes in an associative array.
+     */
+    public function __construct($attributes = [])
+    {
+        parent::__construct();
+
+        $this->attributes = $attributes;
+    }
+
+    /**
+     * Renders the element.
+     *
+     * @return string
+     */
+    public function render()
+    {
+        return sprintf('<hr %s>', arrayToHtmlAttributes($this->attributes));
+    }
+}

resources/assets/stylesheets/scss/sidebar.scss

@@ -124,6 +124,12 @@ ul.widget-list {
         word-wrap: break-word;
     }
 
+    hr {
+        border-style: none;
+        border-top: thin solid var(--content-color-40);
+        margin: 4px 0px 4px -20px;
+    }
+
     button {
         @extend .as-link;
         text-align: left;

templates/sidebar/list-widget.php

@@ -2,6 +2,7 @@
     <?= CSRFProtection::tokenTag() ?>
     <ul class="<?= implode(' ', $css_classes) ?>" aria-label="<?= htmlReady($title) ?>">
     <? foreach ($elements as $index => $element): ?>
+        <? $icon = null ?>
         <? if ($element instanceof LinkElement): ?>
             <? $icon = $element->icon ?? null ?>
             <? if ($icon && $element->isDisabled()): ?>