Merge pull request #166 from openHPI/clustered-admin-menu

Structure admin menu

app/assets/javascripts/bootstrap-dropdown-submenu.js

@@ -0,0 +1,27 @@
+$(document).ready(function () {
+
+  var subMenusSelector = 'ul.dropdown-menu [data-toggle=dropdown]';
+
+  function openSubMenu(event) {
+    if (this.pathname === '/') {
+      event.preventDefault();
+    }
+    event.stopPropagation();
+
+    $(subMenusSelector).parent().removeClass('open');
+    $(this).parent().addClass('open');
+
+    var menu = $(this).parent().find("ul");
+    var menupos = menu.offset();
+
+    var newPos;
+    if ((menupos.left + menu.width()) + 30 > $(window).width()) {
+      newPos = -menu.width();
+    } else {
+      newPos = $(this).parent().width();
+    }
+    menu.css({left: newPos});
+  }
+
+  $(subMenusSelector).on('click', openSubMenu).on('mouseenter', openSubMenu);
+});

app/assets/stylesheets/bootstrap-dropdown-submenu.css.scss

@@ -0,0 +1,38 @@
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+}
+
+.dropdown-submenu > a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #cccccc;
+  margin-top: 5px;
+  margin-right: -10px;
+}
+
+.dropdown-submenu:hover > a:after {
+  border-left-color: #ffffff;
+}
+
+.dropdown-submenu.pull-left {
+  float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  -webkit-border-radius: 6px 0 6px 6px;
+  -moz-border-radius: 6px 0 6px 6px;
+  border-radius: 6px 0 6px 6px;
+}

app/views/application/_navigation.html.slim

@@ -9,8 +9,9 @@
           li = link_to(t('breadcrumbs.dashboard.show'), admin_dashboard_path)
           li = link_to(t('breadcrumbs.statistics.show'), statistics_path)
           li.divider
-        - models = [ExecutionEnvironment, Exercise, ExerciseCollection, ProxyExercise, Tag, Consumer, CodeHarborLink, UserExerciseFeedback,
-                ErrorTemplate, ErrorTemplateAttribute, ExternalUser, FileType, FileTemplate, InternalUser].sort_by {|model| model.model_name.human(count: 2) }
-        - models.each do |model|
-          - if policy(model).index?
-            li = link_to(model.model_name.human(count: 2), send(:"#{model.model_name.collection}_path"))
+        = render('navigation_submenu', title: t('activerecord.models.exercise.other'), models: [Exercise, ExerciseCollection, ProxyExercise, Tag], link: exercises_path)
+        = render('navigation_submenu', title: t('navigation.sections.users'), models: [InternalUser, ExternalUser])
+        = render('navigation_collection_link', model: ExecutionEnvironment)
+        = render('navigation_submenu', title: t('navigation.sections.errors'), models: [ErrorTemplate, ErrorTemplateAttribute])
+        = render('navigation_submenu', title: t('navigation.sections.files'), models: [FileType, FileTemplate])
+        = render('navigation_submenu', title: t('navigation.sections.integrations'), models: [Consumer, CodeHarborLink])

app/views/application/_navigation_collection_link.html.slim

@@ -0,0 +1,2 @@
+- if policy(model).index?
+  li = link_to(model.model_name.human(count: 2), send(:"#{model.model_name.collection}_path"))

app/views/application/_navigation_submenu.html.slim

@@ -0,0 +1,6 @@
+li.dropdown.dropdown-submenu
+  - link = link.nil? ? "#" : link
+  a href=link class="dropdown-toggle" data-toggle="dropdown" = title
+  ul class="dropdown-menu"
+    - models.each do |model|
+      = render('navigation_collection_link', model: model)

config/locales/de.yml

@@ -755,3 +755,9 @@ de:
         with_comments: "Anfragen mit Kommentaren"
       users:
         currently_active: "Aktiv (5 Minuten)"
+  navigation:
+    sections:
+      errors: "Fehler"
+      files: "Dateien"
+      users: "Benutzer"
+      integrations: "Integrationen"

config/locales/en.yml

@@ -755,3 +755,9 @@ en:
         with_comments: "RfCs with Comments"
       users:
         currently_active: "Active (5 minutes)"
+  navigation:
+    sections:
+      errors: "Errors"
+      files: "Files"
+      users: "Users"
+      integrations: "Integrations"