backoffice: replace navigational tabs by a sidepage (#7284)
|
@ -12,7 +12,9 @@ page.paperSize = {
|
|||
page.open(system.args[1], function() {
|
||||
x = page.evaluate(function() {
|
||||
$('#top, #header, #sidebar, #sidebar-toggle, #breadcrumb, a.back').hide();
|
||||
$('#sidepage, #main').removeClass('sidepage-expanded');
|
||||
$('html').css('background', 'white').css('font-size', '8pt');
|
||||
$('div#main').css('width', '95%');
|
||||
$('div#main-content').css('width', '95%').css('border', 'none');
|
||||
});
|
||||
page.render(system.args[1] + '.pdf');
|
||||
|
|
|
@ -68,7 +68,7 @@ class RootDirectory(BackofficeRootDirectory):
|
|||
]
|
||||
|
||||
def _q_traverse(self, path):
|
||||
get_response().add_javascript(['jquery.js'])
|
||||
get_response().add_javascript(['jquery.js', 'gadjo.sidepage.js'])
|
||||
return super(RootDirectory, self)._q_traverse(path)
|
||||
|
||||
@classmethod
|
||||
|
@ -139,7 +139,7 @@ class RootDirectory(BackofficeRootDirectory):
|
|||
return _('''Welcome.''')
|
||||
|
||||
def generate_header_menu(self, selected=None):
|
||||
s = ['<ul id="menu">\n']
|
||||
s = ['<ul id="sidepage-menu">\n']
|
||||
for menu_item in self.get_menu_items():
|
||||
if not 'icon' in menu_item:
|
||||
continue
|
||||
|
@ -147,7 +147,7 @@ class RootDirectory(BackofficeRootDirectory):
|
|||
s.append('<li class="active">')
|
||||
else:
|
||||
s.append('<li>')
|
||||
s.append('<a href="%(url)s">%(label)s</a></li>\n' % menu_item)
|
||||
s.append('<a href="%(url)s" class="icon-%(icon)s">%(label)s</a></li>\n' % menu_item)
|
||||
s.append('</ul>\n')
|
||||
return ''.join(s)
|
||||
|
||||
|
|
|
@ -7,6 +7,15 @@ html, body {
|
|||
color: #3c3c33;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
|
@ -94,7 +103,7 @@ div#header {
|
|||
padding-left: 25px;
|
||||
border-bottom: 1px solid #888;
|
||||
position: relative;
|
||||
height: 92px;
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
div#header h1:after {
|
||||
|
@ -324,8 +333,8 @@ a[class^="icon-"], a[class*=" icon-"] {
|
|||
color: #FF7800;
|
||||
}
|
||||
|
||||
.icon-home-space:before { content: "\f015 "; }
|
||||
.icon-remove-sign:before { content: "\f057"; }
|
||||
.icon-home-space:before { content: "\f015 "; }
|
||||
.icon-remove-sign:before { content: "\f057"; }
|
||||
|
||||
/* misc */
|
||||
|
||||
|
@ -520,3 +529,99 @@ form.small button + button,
|
|||
form.small button + a.button {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#sidepage {
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
background: black;
|
||||
width: 220px;
|
||||
height: 2em;
|
||||
text-align: left;
|
||||
transition: all 0ms ease-in;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#main.sidepage-expanded {
|
||||
margin-left: 220px;
|
||||
}
|
||||
|
||||
#main.enable-transitions,
|
||||
#sidepage.enable-transitions {
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
#sidepage.sidepage-expanded {
|
||||
height: 100%;
|
||||
background: #23282d url(texture.png);
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
#main {
|
||||
transition: margin-left 0ms ease-in;
|
||||
}
|
||||
|
||||
#sidepage span#applabel {
|
||||
padding-left: 1em;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#sidepage ul#sidepage-menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#sidepage ul#sidepage-menu a {
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidepage ul#sidepage-menu li {
|
||||
padding-left: 1em;
|
||||
position: relative;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
ul#sidepage-menu li a {
|
||||
background: transparent no-repeat 0 50%;
|
||||
padding: 5px 0 5px 25px;
|
||||
}
|
||||
|
||||
#sidepage ul#sidepage-menu .active a {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
#sidepage ul#sidepage-menu li.active,
|
||||
#sidepage ul#sidepage-menu li.active:hover {
|
||||
background: #215D9C;
|
||||
}
|
||||
|
||||
#sidepage ul#sidepage-menu li:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
#sidepage ul#sidepage-menu li.active:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
background: #215D9C;
|
||||
right: -17px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
-moz-transform: scale(0.4, 0.707) rotate(45deg);
|
||||
-webkit-transform: scale(0.4, 0.707) rotate(45deg);
|
||||
transform: scale(0.4, 0.707) rotate(45deg);
|
||||
}
|
||||
|
||||
ul#sidepage-menu li a.icon-management { background-image: url(small-icon-management.png); }
|
||||
ul#sidepage-menu li a.icon-submission { background-image: url(small-icon-submission.png); }
|
||||
ul#sidepage-menu li a.icon-categories { background-image: url(small-icon-categories.png); }
|
||||
ul#sidepage-menu li a.icon-workflows { background-image: url(small-icon-workflows.png); }
|
||||
ul#sidepage-menu li a.icon-forms { background-image: url(small-icon-forms.png); }
|
||||
ul#sidepage-menu li a.icon-roles { background-image: url(small-icon-roles.png); }
|
||||
ul#sidepage-menu li a.icon-users { background-image: url(small-icon-users.png); }
|
||||
ul#sidepage-menu li a.icon-settings { background-image: url(small-icon-settings.png); }
|
||||
|
|
After Width: | Height: | Size: 360 B |
After Width: | Height: | Size: 359 B |
After Width: | Height: | Size: 797 B |
After Width: | Height: | Size: 784 B |
After Width: | Height: | Size: 598 B |
After Width: | Height: | Size: 608 B |
After Width: | Height: | Size: 635 B |
After Width: | Height: | Size: 576 B |
After Width: | Height: | Size: 669 B |
After Width: | Height: | Size: 658 B |
After Width: | Height: | Size: 843 B |
After Width: | Height: | Size: 655 B |
After Width: | Height: | Size: 487 B |
After Width: | Height: | Size: 447 B |
After Width: | Height: | Size: 467 B |
After Width: | Height: | Size: 421 B |
After Width: | Height: | Size: 703 B |
After Width: | Height: | Size: 646 B |
After Width: | Height: | Size: 2.4 KiB |
|
@ -0,0 +1,19 @@
|
|||
$(function() {
|
||||
var sidepage_button = $('#sidepage #applabel');
|
||||
sidepage_button.on('click', function() {
|
||||
$('#sidepage, #main').addClass('enable-transitions');
|
||||
$('#sidepage, #main').toggleClass('sidepage-expanded');
|
||||
if ($('#sidepage').hasClass('sidepage-expanded')) {
|
||||
window.localStorage.sidepage_status = 'expanded';
|
||||
} else {
|
||||
window.localStorage.sidepage_status = null;
|
||||
}
|
||||
});
|
||||
if (window.location.protocol == 'file:') {
|
||||
/* don't open sidepage when loading from a file:// */
|
||||
window.localStorage.sidepage_status = null;
|
||||
}
|
||||
if (window.localStorage.sidepage_status == 'expanded' || window.localStorage.sidepage_status === undefined) {
|
||||
$('#sidepage, #main').toggleClass('sidepage-expanded');
|
||||
}
|
||||
});
|
|
@ -171,15 +171,21 @@ ADMIN_TEMPLATE_EZT = """<!DOCTYPE html>
|
|||
[if-any extra_css]
|
||||
<link rel="stylesheet" type="text/css" href="[extra_css]"/>
|
||||
[end]
|
||||
[if-any extra_head]
|
||||
[extra_head]
|
||||
[end]
|
||||
</head>
|
||||
<body [if-any admin_for_all]class="admin-for-all"[end]>
|
||||
<div id="top">
|
||||
<div id="sidepage">
|
||||
<span id="applabel">[if-any app_label][app_label][end]</span>
|
||||
[header_menu]
|
||||
</div>
|
||||
[user_info]
|
||||
</div>
|
||||
<div id="main">
|
||||
<div id="header">
|
||||
<h1><span>[site_name]</span></h1>
|
||||
<div id="main-menu">[header_menu]</div>
|
||||
</div>
|
||||
<div id="main-content">
|
||||
<div id="more-user-links">
|
||||
|
@ -351,6 +357,8 @@ def decorate(body, response):
|
|||
if os.path.exists(filename):
|
||||
extra_css = root_url + 'themes/%s/admin.css' % current_theme
|
||||
break
|
||||
extra_head = get_publisher().get_site_option('backoffice_extra_head')
|
||||
app_label = get_publisher().get_site_option('app_label') or 'w.c.s.'
|
||||
else:
|
||||
if current_theme == 'default':
|
||||
css = root_url + 'css/%s.css' % get_publisher().APP_NAME
|
||||
|
|