From ea6d59f3c9e139270a8d04f91f7a3114036f6a10 Mon Sep 17 00:00:00 2001 From: Maximilian Grundke Date: Tue, 10 Apr 2018 17:00:49 +0200 Subject: [PATCH 1/5] Implement Bootstrap-based sub-menus --- .../javascripts/bootstrap-dropdown-submenu.js | 17 +++++++++ .../bootstrap-dropdown-submenu.css.scss | 38 +++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 app/assets/javascripts/bootstrap-dropdown-submenu.js create mode 100644 app/assets/stylesheets/bootstrap-dropdown-submenu.css.scss diff --git a/app/assets/javascripts/bootstrap-dropdown-submenu.js b/app/assets/javascripts/bootstrap-dropdown-submenu.js new file mode 100644 index 00000000..bef1fa3c --- /dev/null +++ b/app/assets/javascripts/bootstrap-dropdown-submenu.js @@ -0,0 +1,17 @@ +$(document).ready(function () { + $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) { + event.preventDefault(); + event.stopPropagation(); + $(this).parent().addClass('open'); + + var menu = $(this).parent().find("ul"); + var menupos = menu.offset(); + + if ((menupos.left + menu.width()) + 30 > $(window).width()) { + var newpos = -menu.width(); + } else { + var newpos = $(this).parent().width(); + } + menu.css({left: newpos}); + }); +}); 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; +} From f073042945f2f876cccc35c59c4eff0b0cfb4535 Mon Sep 17 00:00:00 2001 From: Maximilian Grundke Date: Tue, 10 Apr 2018 17:34:44 +0200 Subject: [PATCH 2/5] Enable menu access on hover and links from section titles --- app/assets/javascripts/bootstrap-dropdown-submenu.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/bootstrap-dropdown-submenu.js b/app/assets/javascripts/bootstrap-dropdown-submenu.js index bef1fa3c..f34274df 100644 --- a/app/assets/javascripts/bootstrap-dropdown-submenu.js +++ b/app/assets/javascripts/bootstrap-dropdown-submenu.js @@ -1,6 +1,9 @@ $(document).ready(function () { - $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) { - event.preventDefault(); + + function openSubMenu(event) { + if (this.pathname === '/') { + event.preventDefault(); + } event.stopPropagation(); $(this).parent().addClass('open'); @@ -13,5 +16,7 @@ $(document).ready(function () { var newpos = $(this).parent().width(); } menu.css({left: newpos}); - }); + } + + $('ul.dropdown-menu [data-toggle=dropdown]').on('click', openSubMenu).on('mouseenter', openSubMenu); }); From 7e5f87af0fd1b7fd33b8069d2663ca77475236ae Mon Sep 17 00:00:00 2001 From: Maximilian Grundke Date: Tue, 10 Apr 2018 19:17:10 +0200 Subject: [PATCH 3/5] Hide other submenus when opening a new one --- .../javascripts/bootstrap-dropdown-submenu.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/bootstrap-dropdown-submenu.js b/app/assets/javascripts/bootstrap-dropdown-submenu.js index f34274df..40850c29 100644 --- a/app/assets/javascripts/bootstrap-dropdown-submenu.js +++ b/app/assets/javascripts/bootstrap-dropdown-submenu.js @@ -1,22 +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()) { - var newpos = -menu.width(); + newPos = -menu.width(); } else { - var newpos = $(this).parent().width(); + newPos = $(this).parent().width(); } - menu.css({left: newpos}); + menu.css({left: newPos}); } - $('ul.dropdown-menu [data-toggle=dropdown]').on('click', openSubMenu).on('mouseenter', openSubMenu); + $(subMenusSelector).on('click', openSubMenu).on('mouseenter', openSubMenu); }); From cf22b26c8489e2ce36b6781ece6a570bc6ca520b Mon Sep 17 00:00:00 2001 From: Maximilian Grundke Date: Tue, 10 Apr 2018 19:21:01 +0200 Subject: [PATCH 4/5] Structure main menu --- app/views/application/_navigation.html.slim | 11 ++++++----- .../application/_navigation_collection_link.html.slim | 2 ++ app/views/application/_navigation_submenu.html.slim | 6 ++++++ config/locales/de.yml | 6 ++++++ config/locales/en.yml | 6 ++++++ 5 files changed, 26 insertions(+), 5 deletions(-) create mode 100644 app/views/application/_navigation_collection_link.html.slim create mode 100644 app/views/application/_navigation_submenu.html.slim diff --git a/app/views/application/_navigation.html.slim b/app/views/application/_navigation.html.slim index 127e170c..a8b7b382 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('navigation.sections.integrations'), models: [Consumer, CodeHarborLink]) + = render('navigation_collection_link', model: ExecutionEnvironment) + = 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_submenu', title: t('navigation.sections.errors'), models: [ErrorTemplate, ErrorTemplateAttribute]) + = render('navigation_submenu', title: t('navigation.sections.files'), models: [FileType, FileTemplate]) 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 05c7108e..149d8128 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 5d6ada43..fe12f410 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" From 11f168bef73ea36ae893518de2db7852fec77df6 Mon Sep 17 00:00:00 2001 From: Maximilian Grundke Date: Wed, 11 Apr 2018 15:20:39 +0200 Subject: [PATCH 5/5] Reorder --- app/views/application/_navigation.html.slim | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/application/_navigation.html.slim b/app/views/application/_navigation.html.slim index a8b7b382..ca0a8505 100644 --- a/app/views/application/_navigation.html.slim +++ b/app/views/application/_navigation.html.slim @@ -9,9 +9,9 @@ li = link_to(t('breadcrumbs.dashboard.show'), admin_dashboard_path) li = link_to(t('breadcrumbs.statistics.show'), statistics_path) li.divider - = render('navigation_submenu', title: t('navigation.sections.integrations'), models: [Consumer, CodeHarborLink]) - = render('navigation_collection_link', model: ExecutionEnvironment) = 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])