Add vertical main menu
Signed-off-by: Roberto Rosario <roberto.rosario.gonzalez@gmail.com>
This commit is contained in:
@@ -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)
|
||||
==================
|
||||
|
||||
@@ -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
|
||||
--------
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
70
mayan/apps/appearance/templates/appearance/menu_main.html
Normal file
70
mayan/apps/appearance/templates/appearance/menu_main.html
Normal file
@@ -0,0 +1,70 @@
|
||||
{% load i18n %}
|
||||
|
||||
{% load navigation_tags %}
|
||||
{% load smart_settings_tags %}
|
||||
|
||||
{% load common_tags %}
|
||||
{% load navigation_tags %}
|
||||
|
||||
{% spaceless %}
|
||||
<div class="panel-group" id="accordion-sidebar" role="tablist" aria-multiselectable="true">
|
||||
{% 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 == "<class 'mayan.apps.navigation.classes.Menu'>" %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
<h4 class="panel-title">
|
||||
<a class="non-ajax collapsed" role="button" data-toggle="collapse" data-parent="#accordion-sidebar" href="#accordion-body-{{ forloop.counter }}" aria-expanded="false" aria-controls="collapseOne">
|
||||
<div class="pull-left">
|
||||
{% if link.icon %}
|
||||
<i class="hidden-xs hidden-sm hidden-md {{ link.icon }}"></i>
|
||||
{% endif %}
|
||||
{% if link.icon_class %}{{ link.icon_class.render }}{% endif %}
|
||||
{{ link.label }}
|
||||
</div>
|
||||
<div class="accordion-indicator pull-right"><span class="caret"></span></div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="accordion-body-{{ forloop.counter }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
|
||||
<div class="panel-body">
|
||||
<ul class="list-unstyled">
|
||||
{% 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 %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
<h4 class="panel-title">
|
||||
{% include 'navigation/generic_link_instance.html' %}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endspaceless %}
|
||||
@@ -3,10 +3,11 @@
|
||||
{% load navigation_tags %}
|
||||
{% load smart_settings_tags %}
|
||||
|
||||
{% spaceless %}
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<button aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" type="button">
|
||||
<span class="sr-only">{% trans 'Toggle navigation' %}</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
@@ -14,9 +15,10 @@
|
||||
</button>
|
||||
<a class="navbar-brand" href="{% url home_view %}">{% smart_setting 'COMMON_PROJECT_TITLE' %}</a>
|
||||
</div>
|
||||
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
{% navigation_resolve_menu name='main' as topbar_menus_results %}
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
{% navigation_resolve_menu name='topbar' as topbar_menus_results %}
|
||||
{% for tobpar_menu_result in topbar_menus_results %}
|
||||
{% for link_group in tobpar_menu_result.link_groups %}
|
||||
{% for link in link_group.links %}
|
||||
@@ -34,24 +36,8 @@
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% get_menu_links name='main' as menu_links %}
|
||||
{% for link_set in menu_links %}
|
||||
{% for link in link_set %}
|
||||
{% with 'true' as as_li %}
|
||||
{% with 'true' as hide_active_anchor %}
|
||||
{% with 'active' as li_class_active %}
|
||||
{% with 'first' as li_class_first %}
|
||||
{% with ' ' as link_classes %}
|
||||
{% include 'navigation/generic_subnavigation.html' %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endspaceless %}
|
||||
@@ -32,8 +32,11 @@
|
||||
{% if appearance_type == 'plain' %}
|
||||
{% block content_plain %}{% endblock %}
|
||||
{% else %}
|
||||
<div id="menu-topbar">
|
||||
{% include 'appearance/menu_topbar.html' %}
|
||||
</div>
|
||||
<div id="menu-main">
|
||||
{% include 'appearance/main_menu.html' %}
|
||||
{% include 'appearance/menu_main.html' %}
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="row zero-margin">
|
||||
@@ -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" %}'
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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')
|
||||
)
|
||||
|
||||
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user