diff --git a/HISTORY.rst b/HISTORY.rst index cedc1152ba..64cd15ae0e 100644 --- a/HISTORY.rst +++ b/HISTORY.rst @@ -4,6 +4,7 @@ - Add icons and no-result template to the object error log view and links. - Use Select2 widget for the document type selection form. +- Backport the vertical main menu update. 3.2.5 (2019-07-05) ================== diff --git a/docs/releases/3.3.rst b/docs/releases/3.3.rst index 47bcc0a2d0..b75446368b 100644 --- a/docs/releases/3.3.rst +++ b/docs/releases/3.3.rst @@ -11,6 +11,12 @@ Changes - Add icons and no-result template to the object error log view and links. - Use Select2 widget for the document type selection form. +- Backport the vertical main menu update. This update splits the previous + main menu into a new menu in the same location as the previous one + now called the top bar, and a new vertical main menu on the left side. + The vertical menu remain open even when clicking on items and upon + a browser refresh will also restore its state to match the selected + view. Removals -------- diff --git a/mayan/apps/appearance/static/appearance/css/base.css b/mayan/apps/appearance/static/appearance/css/base.css index 2e57afddb9..0959dddf57 100644 --- a/mayan/apps/appearance/static/appearance/css/base.css +++ b/mayan/apps/appearance/static/appearance/css/base.css @@ -12,7 +12,7 @@ } body { - padding-top: 70px; + padding-top: 60px; } .navbar-brand { @@ -331,7 +331,7 @@ a i { .main { padding-right: 0px; padding-left: 0px; - /*margin-left: 210px;*/ + margin-left: 210px; } } @@ -413,3 +413,120 @@ a i { .btn-list { margin-bottom: 2px; } + + +/* + * Top navigation + * Hide default border to remove 1px line. + */ +.navbar-fixed-top { + border: 0; +} + + +/* menu_main */ +/* Hide for mobile, show later */ + +#menu-main { + display: none; + background-color: #2c3e50; + border-right: 1px solid #18bc9c; + bottom: 0; + left: 0; + overflow-x: hidden; + overflow-y: auto; + padding-top: 10px; + position: fixed; + top: 51px; + width: 210px; + z-index: 1000; +} + +@media (min-width: 768px) { + #menu-main { + display: block; + } + + .navbar-brand { + text-align: center; + width: 210px; + } +} + +.main .page-header { + margin-top: 0; +} + +.navbar-brand { +} + +.navbar-brand { + outline: none; +} + +.container-fluid { + margin-right: 0px; + margin-left: 0px; + width: 100%; +} + +#accordion-sidebar a { + padding: 10px 15px; +} + +#accordion-sidebar a[aria-expanded="true"] { + background: #1a242f; +} + +#accordion-sidebar .panel { + border: 0px; +} + +#accordion-sidebar a { + text-decoration: none; + outline: none; + position: relative; + display: block; +} + +#accordion-sidebar .panel-heading { + background-color: #2c3e50; + color: white; + padding: 0px; +} + +#accordion-sidebar .panel-heading:hover { + background-color: #517394; +} + +#accordion-sidebar > .panel > div > .panel-body > ul > li > a:hover { + background-color: #517394; +} + +#accordion-sidebar > .panel > div > .panel-body > ul > li.active { + background: #1a242f; +} + +#accordion-sidebar .panel-title { + font-size: 15px; +} + +#accordion-sidebar .panel-body { + font-size: 13px; + border: 0px; + background-color: #2c3e50; + padding-top: 5px; + padding-left: 20px; + padding-right: 0px; + padding-bottom: 0px; +} + +#accordion-sidebar .panel-body li { + padding: 0px; +} + +#accordion-sidebar .panel-body a { + color: white; + text-decoration: none; + padding: 9px; +} diff --git a/mayan/apps/appearance/static/appearance/js/mayan_app.js b/mayan/apps/appearance/static/appearance/js/mayan_app.js index 4011ce59ca..d96c7f4c9b 100644 --- a/mayan/apps/appearance/static/appearance/js/mayan_app.js +++ b/mayan/apps/appearance/static/appearance/js/mayan_app.js @@ -41,6 +41,17 @@ class MayanApp { } } + static setupNavBarState () { + $('body').on('click', '.a-main-menu-accordion-link', function (event) { + console.log('ad'); + $('.a-main-menu-accordion-link').each(function (index, value) { + $(this).parent().removeClass('active'); + }); + + $(this).parent().addClass('active'); + }); + } + static updateNavbarState () { var uri = new URI(window.location.hash); var uriFragment = uri.fragment(); @@ -160,6 +171,7 @@ class MayanApp { this.setupFullHeightResizing(); this.setupItemsSelector(); this.setupNavbarCollapse(); + MayanApp.setupNavBarState(); this.setupNewWindowAnchor(); $.each(this.ajaxMenusOptions, function(index, value) { value.app = self; diff --git a/mayan/apps/appearance/templates/appearance/menu_main.html b/mayan/apps/appearance/templates/appearance/menu_main.html new file mode 100644 index 0000000000..d9e356607a --- /dev/null +++ b/mayan/apps/appearance/templates/appearance/menu_main.html @@ -0,0 +1,70 @@ +{% load i18n %} + +{% load navigation_tags %} +{% load smart_settings_tags %} + +{% load common_tags %} +{% load navigation_tags %} + +{% spaceless %} +
+ {% navigation_resolve_menu name='main' as main_menus_results %} + {% for main_menu_results in main_menus_results %} + {% for link_group in main_menu_results.link_groups %} + {% for link in link_group.links %} + {% with 'active' as li_class_active %} + {% with ' ' as link_classes %} + {% if link|get_type == "" %} +
+ +
+
+
    + {% navigation_resolve_menu name=link.name as sub_menus_results %} + {% for sub_menu_results in sub_menus_results %} + {% for link_group in sub_menu_results.link_groups %} + {% with '' as link_class_active %} + {% with 'a-main-menu-accordion-link' as link_classes %} + {% with 'true' as as_li %} + {% with link_group.links as object_navigation_links %} + {% include 'navigation/generic_navigation.html' %} + {% endwith %} + {% endwith %} + {% endwith %} + {% endwith %} + {% endfor %} + {% endfor %} +
+
+
+
+ {% else %} +
+ +
+ {% endif %} + {% endwith %} + {% endwith %} + {% endfor %} + {% endfor %} + {% endfor %} +
+{% endspaceless %} diff --git a/mayan/apps/appearance/templates/appearance/main_menu.html b/mayan/apps/appearance/templates/appearance/menu_topbar.html similarity index 59% rename from mayan/apps/appearance/templates/appearance/main_menu.html rename to mayan/apps/appearance/templates/appearance/menu_topbar.html index 5d41c7ee1b..b9401818a1 100644 --- a/mayan/apps/appearance/templates/appearance/main_menu.html +++ b/mayan/apps/appearance/templates/appearance/menu_topbar.html @@ -3,10 +3,11 @@ {% load navigation_tags %} {% load smart_settings_tags %} +{% spaceless %} +{% endspaceless %} diff --git a/mayan/apps/appearance/templates/appearance/root.html b/mayan/apps/appearance/templates/appearance/root.html index be3f89e235..548108a1e8 100644 --- a/mayan/apps/appearance/templates/appearance/root.html +++ b/mayan/apps/appearance/templates/appearance/root.html @@ -32,8 +32,11 @@ {% if appearance_type == 'plain' %} {% block content_plain %}{% endblock %} {% else %} +
@@ -101,11 +104,18 @@ var app = new MayanApp({ ajaxMenusOptions: [ { + callback: MayanApp.updateNavbarState, interval: 5000, menuSelector: '#menu-main', name: 'menu_main', url: '{% url "rest_api:template-detail" "menu_main" %}' }, + { + interval: 5000, + menuSelector: '#menu-topbar', + name: 'menu_topbar', + url: '{% url "rest_api:template-detail" "menu_topbar" %}' + }, ] }); diff --git a/mayan/apps/common/apps.py b/mayan/apps/common/apps.py index 3d7f633675..f097153661 100644 --- a/mayan/apps/common/apps.py +++ b/mayan/apps/common/apps.py @@ -28,7 +28,7 @@ from .links import ( from .literals import MESSAGE_SQLITE_WARNING from .menus import ( - menu_about, menu_main, menu_secondary, menu_user + menu_about, menu_main, menu_secondary, menu_topbar, menu_user ) from .settings import ( setting_auto_logging, setting_production_error_log_path, @@ -97,7 +97,10 @@ class CommonApp(MayanAppConfig): ) Template( - name='menu_main', template_name='appearance/main_menu.html' + name='menu_main', template_name='appearance/menu_main.html' + ) + Template( + name='menu_topbar', template_name='appearance/menu_topbar.html' ) menu_user.bind_links( @@ -112,7 +115,7 @@ class CommonApp(MayanAppConfig): ) ) - menu_main.bind_links(links=(menu_about, menu_user,), position=99) + menu_topbar.bind_links(links=(menu_about, menu_user,), position=99) menu_secondary.bind_links( links=(link_object_error_list_clear,), sources=( 'common:object_error_list', diff --git a/mayan/apps/common/menus.py b/mayan/apps/common/menus.py index c25064cb40..d1c39545a5 100644 --- a/mayan/apps/common/menus.py +++ b/mayan/apps/common/menus.py @@ -17,6 +17,7 @@ menu_object = Menu(label=_('Actions'), name='object') menu_secondary = Menu(label=_('Secondary'), name='secondary') menu_setup = Menu(name='setup') menu_tools = Menu(name='tools') +menu_topbar = Menu(name='topbar') menu_user = Menu( icon_class=icon_menu_user, name='user', label=_('User') ) diff --git a/mayan/apps/events/apps.py b/mayan/apps/events/apps.py index 164f301131..6ec59d3b90 100644 --- a/mayan/apps/events/apps.py +++ b/mayan/apps/events/apps.py @@ -6,7 +6,7 @@ from django.utils.translation import ugettext_lazy as _ from mayan.apps.common.apps import MayanAppConfig from mayan.apps.common.html_widgets import TwoStateWidget from mayan.apps.common.menus import ( - menu_main, menu_object, menu_secondary, menu_tools, menu_user + menu_main, menu_object, menu_secondary, menu_tools, menu_topbar, menu_user ) from mayan.apps.navigation.classes import SourceColumn @@ -85,7 +85,7 @@ class EventsApp(MayanAppConfig): source=Notification, widget=TwoStateWidget ) - menu_main.bind_links( + menu_topbar.bind_links( links=(link_user_notifications_list,), position=99 ) menu_object.bind_links(