backoffice: replace navigational tabs by a sidepage (#7284)

data/print-html-as-pdf.js

@@ -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');

wcs/backoffice/root.py

@@ -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)
 

wcs/qommon/static/css/dc2/gadjo.css

@@ -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); }

wcs/qommon/static/js/gadjo.sidepage.js

@@ -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');
+  }
+});

wcs/qommon/template.py

@@ -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