diff --git a/app/assets/javascripts/bootstrap-dropdown-submenu.js b/app/assets/javascripts/bootstrap-dropdown-submenu.js new file mode 100644 index 00000000..40850c29 --- /dev/null +++ b/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); +}); diff --git a/app/assets/stylesheets/bootstrap-dropdown-submenu.css.scss b/app/assets/stylesheets/bootstrap-dropdown-submenu.css.scss new file mode 100644 index 00000000..d0855298 --- /dev/null +++ b/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; +} diff --git a/app/views/application/_navigation.html.slim b/app/views/application/_navigation.html.slim index 127e170c..ca0a8505 100644 --- a/app/views/application/_navigation.html.slim +++ b/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]) diff --git a/app/views/application/_navigation_collection_link.html.slim b/app/views/application/_navigation_collection_link.html.slim new file mode 100644 index 00000000..412ea0bd --- /dev/null +++ b/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")) diff --git a/app/views/application/_navigation_submenu.html.slim b/app/views/application/_navigation_submenu.html.slim new file mode 100644 index 00000000..c12e04a4 --- /dev/null +++ b/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) diff --git a/config/locales/de.yml b/config/locales/de.yml index 24c50862..23d681b1 100644 --- a/config/locales/de.yml +++ b/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" diff --git a/config/locales/en.yml b/config/locales/en.yml index f1cc211f..ae6d99a2 100644 --- a/config/locales/en.yml +++ b/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"