UI: Implement top menu bar

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/Makefile.am b/Makefile.am
index 6db0a9acd5c40053501c1dfaa7ff3b7c536ce371..2881683252d4b0acd1622516154b5c256708ad20 100644 (file)
--- a/Makefile.am
+++ b/Makefile.am
@@ -171,8 +171,10 @@ dist_templates_modules_graphs_DATA = \
 templates_modules_menudir = $(templates_modulesdir)/menu
 
 dist_templates_modules_menu_DATA = \
+       src/templates/modules/menu/dropdown.html \
+       src/templates/modules/menu/link.html \
        src/templates/modules/menu/sidebar.html \
-       src/templates/modules/menu/sidebar-link.html
+       src/templates/modules/menu/topbar.html
 
 ui_modulesdir = $(datadir)/westferry/templates/modules
 

diff --git a/src/templates/base.html b/src/templates/base.html
index b091e185eacb3b1ce4714e5d7b97145506b553c0..a8618fe2c7b7f6458935595f57b461b433ad7a42 100644 (file)
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -23,19 +23,7 @@
                <div class="grid-container">
                        <div class="top-bar">
                                <div class="top-bar-left">
-                                       <ul class="dropdown menu" data-dropdown-menu>
-                                               <li class="menu-text">{{ hostname() }}</li>
-                                               <li>
-                                                       <a href="#">One</a>
-                                                       <ul class="menu vertical">
-                                                               <li><a href="#">One</a></li>
-                                                               <li><a href="#">Two</a></li>
-                                                               <li><a href="#">Three</a></li>
-                                                       </ul>
-                                               </li>
-                                               <li><a href="#">Two</a></li>
-                                               <li><a href="#">Three</a></li>
-                                       </ul>
+                                       {% module TopbarMenu(handler.topmenu) %}
                                </div>
 
                                <div class="top-bar-right">

diff --git a/src/templates/modules/menu/dropdown.html b/src/templates/modules/menu/dropdown.html
new file mode 100644 (file)
index 0000000..21dcf53
--- /dev/null
+++ b/src/templates/modules/menu/dropdown.html
@@ -0,0 +1,15 @@
+{% import westferry.ui.menu %}
+
+<a href="#">{{ menu.title or _("- No Title -") }}</a>
+
+<ul class="menu vertical {% if nested %}nested{% end %}">
+       {% for element in menu %}
+               <li>
+                       {% if isinstance(element, westferry.ui.menu.Menu) %}
+                               {% module MenuDropdown(element, nested=True) %}
+                       {% elif isinstance(element, westferry.ui.menu.MenuLink) %}
+                               {% module MenuLink(element) %}
+                       {% end %}
+               </li>
+       {% end %}
+</ul>          

diff --git a/src/templates/modules/menu/link.html b/src/templates/modules/menu/link.html
new file mode 100644 (file)
index 0000000..e2f5031
--- /dev/null
+++ b/src/templates/modules/menu/link.html
@@ -0,0 +1,3 @@
+<a href="{{ element.url }}">
+       {{ element.title }}
+</a>

diff --git a/src/templates/modules/menu/sidebar-link.html b/src/templates/modules/menu/sidebar-link.html
deleted file mode 100644 (file)
index 4a2facf..0000000
--- a/src/templates/modules/menu/sidebar-link.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<a href="{{ item.url }}">
-       {{ item.title }}
-</a>

diff --git a/src/templates/modules/menu/sidebar.html b/src/templates/modules/menu/sidebar.html
index 48a1599d0fde32f138406d905de63e9db4962353..97dedf5aa57847cd2ae86d5a1fd14b755ed59c48 100644 (file)
--- a/src/templates/modules/menu/sidebar.html
+++ b/src/templates/modules/menu/sidebar.html
@@ -2,7 +2,7 @@
        {% for i in menu %}
                <li {% if i.is_active() %}class="is-active"{% end %}>
                        {% if i.type == "link" %}
-                               {% module SidebarMenuLink(i) %}
+                               {% module MenuLink(i) %}
                        {% elif i.type == "menu" %}
                                {% module SidebarMenu(i, nested=True) %}
                        {% end %}

diff --git a/src/templates/modules/menu/topbar.html b/src/templates/modules/menu/topbar.html
new file mode 100644 (file)
index 0000000..0be7e16
--- /dev/null
+++ b/src/templates/modules/menu/topbar.html
@@ -0,0 +1,15 @@
+{% import westferry.ui.menu %}
+
+<ul class="dropdown menu" data-dropdown-menu>
+       <li class="menu-text">{{ hostname() }}</li>
+
+       {% for element in menu %}
+               <li>
+                       {% if isinstance(element, westferry.ui.menu.Menu) %}
+                               {% module MenuDropdown(element) %}
+                       {% elif isinstance(element, westferry.ui.menu.MenuLink) %}
+                               {% module MenuLink(element) %}
+                       {% end %}
+               </li>
+       {% end %}
+</ul>

diff --git a/src/westferry/handlers/base.py b/src/westferry/handlers/base.py
index 774d9f23aedb6c1bf27a5c122aa7211fd0d534fc..fdb624aeba19d98379ed350343c2fe471f0982df 100644 (file)
--- a/src/westferry/handlers/base.py
+++ b/src/westferry/handlers/base.py
@@ -61,6 +61,32 @@ class BaseHandler(tornado.web.RequestHandler, metaclass=HandlerRegistration):
                """
                return self.application.backend
 
+       @property
+       def topmenu(self):
+               """
+                       Creates the default menu in to the top navigation
+               """
+               _ = self.locale.translate
+
+               # XXX This is ugly, but since this file declares the base handler,
+               # recursive imports fail
+               from . import analytics
+               from . import demo
+
+               menu = ui.menu.Menu(self)
+
+               # Analytics
+               menu.add_handler(analytics.AnalyticsOverviewHandler, title=_("Analytics"))
+
+               # Demo (only in debug mode)
+               if self.backend.debug:
+                       submenu = menu.add_menu(_("Demo"))
+
+                       submenu.add_handler(demo.DemoOverviewHandler)
+                       submenu.add_handler(demo.DemoFormsHandler)
+
+               return menu
+
        @functools.cached_property
        def tabs(self):
                return ui.tabs.Tabs(self)

diff --git a/src/westferry/ui/menu.py b/src/westferry/ui/menu.py
index a0ca571590ce720a4b289dfebf98bcfdc1d4abdf..846afdf5aa76738fb8eee40ab3805ffb3818b325 100644 (file)
--- a/src/westferry/ui/menu.py
+++ b/src/westferry/ui/menu.py
@@ -129,6 +129,11 @@ class Menu(object):
                return menu
 
 
+class TopbarMenuModule(base.BaseUIModule):
+       def render(self, menu):
+               return self.render_string("modules/menu/topbar.html", menu=menu)
+
+
 class SidebarMenuModule(base.BaseUIModule):
        def render(self, menu, nested=False):
                return self.render_string(
@@ -138,6 +143,12 @@ class SidebarMenuModule(base.BaseUIModule):
                )
 
 
-class SidebarMenuLinkModule(base.BaseUIModule):
-       def render(self, item):
-               return self.render_string("modules/menu/sidebar-link.html", item=item)
+class MenuLinkModule(base.BaseUIModule):
+       def render(self, element):
+               return self.render_string("modules/menu/link.html", element=element)
+
+
+class MenuDropdownModule(base.BaseUIModule):
+       def render(self, menu, nested=False):
+               return self.render_string("modules/menu/dropdown.html",
+                       menu=menu, nested=nested)