Merge pull request #2696 from samialfattani/feature/menu-divider

Ability to add menu divider

Author: samuelhwilliams

doc/introduction.rst

@@ -331,10 +331,14 @@ To nest related views within these drop-downs, use the `add_sub_category` method
 
     admin.add_sub_category(name="Links", parent_name="Team")
 
-And to add arbitrary hyperlinks to the menu::
+To add arbitrary hyperlinks to the menu::
 
   admin.add_link(MenuLink(name='Home Page', url='/', category='Links'))
 
+And to add a menu divider to separate menu items in the menu::
+
+  admin.add_menu_item(MenuDivider(), target_category='Links')
+
 
 Adding Your Own Views
 =====================

examples/bootstrap4/main.py

@@ -4,6 +4,7 @@
 from flask import Flask
 from flask_admin import Admin
 from flask_admin.contrib.sqla import ModelView
+from flask_admin.menu import MenuDivider
 from flask_admin.menu import MenuLink
 from flask_admin.theme import Bootstrap4Theme
 from flask_sqlalchemy import SQLAlchemy
@@ -208,6 +209,7 @@ def build_sample_db():
             menu_class_name="text-warning",
         )
     )
+    admin.add_menu_item(MenuDivider(), target_category="Menu")
     admin.add_view(CustomView(Page, db.session, category="Menu"))
     admin.add_view(
         CustomView(
@@ -254,6 +256,7 @@ def build_sample_db():
             class_name="text-success",
         )
     )
+    admin.add_menu_item(MenuDivider(), target_category="Links")
     admin.add_link(
         MenuLink(name="External link", url="http://www.example.com/", category="Links")
     )

flask_admin/menu.py

@@ -181,3 +181,23 @@ class SubMenuCategory(MenuCategory):
     def __init__(self, *args: str, **kwargs: t.Any) -> None:
         super().__init__(*args, **kwargs)
         self.class_name += " dropdown-submenu dropright"
+
+
+class MenuDivider(MenuLink):
+    """
+    Bootstrap Menu divider item
+    Usage:
+      admin = Admin(app, ...)
+      admin.add_menu_item(MenuDivider(), target_category='Category1')
+    """
+
+    def __init__(self, class_name=""):
+        class_name = "dropdown-divider" + (" " + class_name if class_name else "")
+        super().__init__("divider", class_name=class_name)
+
+    def get_url(self):
+        return None
+
+    def is_visible(self):
+        # Return True/False depending on your use-case
+        return True

flask_admin/templates/bootstrap4/admin/layout.html

@@ -22,42 +22,45 @@
       {% set children = item.get_children() %}
       {%- if children %}
         {% set class_name = item.get_class_name() or '' %}
-        {%- if item.is_active(admin_view) %}
-          <li class="active dropdown">
-            {% else -%}
-          <li class="dropdown">
-        {%- endif %}
-      <a class="dropdown-toggle {% if is_main_nav %}nav-link{% else %}dropdown-item{% endif %}" data-toggle="dropdown" href="javascript:void(0)">
-        <!-- show icon -->
-        {% if item.class_name %}<span class="{{ item.class_name }}"></span> {% endif %}
-        {{ menu_icon(item) }}{{ item.name }}
-        {%- if 'dropdown-submenu' in class_name -%}
-          <i class="glyphicon glyphicon-chevron-right small"></i>
-        {%- else -%}
-          <i class="glyphicon glyphicon-chevron-down small"></i>
-        {%- endif -%}
-      </a>
-      <ul class="dropdown-menu">
-        {%- for child in children -%}
-          {%- if child.is_category() -%}
-            {{ menu(menu_root=[child]) }}
-          {% else %}
-            {% set class_name = child.get_class_name() %}
-            <li>
-              {%- if child.is_active(admin_view) %}
-                <a class="dropdown-item active {{ class_name }} " href="{{ child.get_url() }}"{% if child.target %}
-                target="{{ child.target }}"{% endif %}>
-                  {{ menu_icon(child) }}{{ child.name }}</a>
+
+        <!-- just enhance the readability -->
+        <li class="{% if item.is_active(admin_view) %}active {% endif %}dropdown">
+
+          <a class="dropdown-toggle {% if is_main_nav %}nav-link{% else %}dropdown-item{% endif %}" data-toggle="dropdown" href="javascript:void(0)">
+            <!-- show icon -->
+            {% if item.class_name %}<span class="{{ item.class_name }}"></span> {% endif %}
+            {{ menu_icon(item) }}{{ item.name }}
+            {%- if 'dropdown-submenu' in class_name -%}
+              <i class="glyphicon glyphicon-chevron-right small"></i>
+            {%- else -%}
+              <i class="glyphicon glyphicon-chevron-down small"></i>
+            {%- endif -%}
+          </a>
+          <ul class="dropdown-menu">
+            {%- for child in children -%}
+              {%- if child.is_category() -%}
+                {{ menu(menu_root=[child]) }}
               {% else %}
-                <a class="dropdown-item {{ class_name }}" href="{{ child.get_url() }}"{% if child.target %}
-                target="{{ child.target }}"{% endif %}>
-                  {{ menu_icon(child) }}{{ child.name }}</a>
+                {% set class_name = child.get_class_name() %}
+                {% if 'dropdown-divider' in class_name %}
+                  <li class="{{ class_name }}"></li>
+                {% else %}
+                  <li>
+                    {%- if child.is_active(admin_view) %}
+                      <a class="dropdown-item active {{ class_name }} " href="{{ child.get_url() }}"{% if child.target %}
+                      target="{{ child.target }}"{% endif %}>
+                        {{ menu_icon(child) }}{{ child.name }}</a>
+                    {% else %}
+                      <a class="dropdown-item {{ class_name }}" href="{{ child.get_url() }}"{% if child.target %}
+                      target="{{ child.target }}"{% endif %}>
+                        {{ menu_icon(child) }}{{ child.name }}</a>
+                    {%- endif %}
+                  </li>
+                {%- endif %}
               {%- endif %}
-            </li>
-          {%- endif %}
-        {%- endfor %}
-      </ul>
-      </li>
+            {%- endfor %}
+          </ul>
+        </li>
       {% endif %}
     {%- else %}
       {%- if item.is_accessible() and item.is_visible() -%}

flask_admin/tests/test_base.py

@@ -12,6 +12,8 @@
 from flask_admin import base
 from flask_admin import BaseView
 from flask_admin import expose
+from flask_admin.menu import MenuDivider
+from flask_admin.menu import MenuLink
 
 
 @pytest.fixture
@@ -355,6 +357,40 @@ def test_submenu(admin):
     assert children[0].is_accessible()
 
 
+def test_menu_divider(app, admin):
+    # admin.add_view(MockView(name="Test 1", category="Test", endpoint="test1"))
+    # admin.add_view(MockView(name="Test 2", category="Test", endpoint="test2"))
+    admin.add_link(
+        MenuLink(name="link1", url="http://www.example.com/", category="Links")
+    )
+    admin.add_link(
+        MenuLink(name="link2", url="http://www.example.com/", category="Links")
+    )
+    admin.add_menu_item(MenuDivider(), target_category="Links")
+    admin.add_link(
+        MenuLink(name="link3", url="http://www.example.com/", category="Links")
+    )
+
+    assert admin.menu()[1].name == "Links"
+    assert len(admin._menu) == 2
+    assert admin._menu[1].name == "Links"
+    assert len(admin._menu[1]._children) == 4
+
+    client = app.test_client()
+
+    rv = client.get("/admin/")
+    assert rv.status_code == 200
+
+    data = rv.data.decode("utf-8")
+    pos1 = data.find("link1")
+    pos2 = data.find("link2")
+    pos3 = data.find('<li class="dropdown-divider"></li>')
+    pos4 = data.find("link3")
+    assert pos2 > pos1
+    assert pos3 > pos2
+    assert pos4 > pos3
+
+
 def test_delayed_init(app, admin):
     admin.add_view(MockView())