[navbar] Add a button to toggle left column visibility (closes #3668337)

Follow up to commit 1c3434c6afd7.

data/cubes.squareui.js

+cw.cubes.squareui = new Namespace('cw.cubes.squareui');
+
+$.extend(cw.cubes.squareui, {
+    storeLocalData: function (key, value) {
+        localStorage.setItem(key, JSON.stringify(value));
+    },
+
+    getLocalData: function (key) {
+        var data = localStorage.getItem(key);
+        if (data !== undefined) {
+            data = JSON.parse(data);
+        }
+        return data;
+    },
+
+    toggleLeftColumn: function (toggle) {
+        var $contentCol = $('#pageContent');
+        var $asideCols = $(".cwjs-aside");
+        if ($asideCols.length) {
+            var collapsendContentClass = 'col-md-' + (12 - $asideCols.length * 3);
+            var fullContentClass = 'col-md-12';
+            var displayAsideboxes = cw.cubes.squareui.getLocalData('asideboxes');
+            if (toggle === undefined) {
+                displayAsideboxes = $asideCols.hasClass('hidden');
+                cw.cubes.squareui.storeLocalData('asideboxes', displayAsideboxes);
+            }
+            if (displayAsideboxes === false) {
+                $asideCols.addClass('hidden');
+                $contentCol.removeClass(collapsendContentClass).addClass(fullContentClass);
+            } else {
+                $asideCols.removeClass('hidden');
+                $contentCol.removeClass(fullContentClass).addClass(collapsendContentClass);
+            }
+        }
+    }
+
+});
+
+$(document).ready(function () {
+    if ($('#cw-aside-toggle').length) {
+        // if HideLeftBar component is activated
+        var displayAsideboxes = cw.cubes.squareui.getLocalData('asideboxes');
+        if (displayAsideboxes !== undefined) {
+            cw.cubes.squareui.toggleLeftColumn(displayAsideboxes);
+        }
+    }
+});

i18n/en.po

@@ -6,3 +6,31 @@
 "Generated-By: pygettext.py 1.5\n"
 "Plural-Forms: nplurals=2; plural=(n > 1);\n"
 
+msgid "Toggle navigation"
+msgstr ""
+
+msgid "by relation"
+msgstr ""
+
+msgid "cancel"
+msgstr ""
+
+msgid "collapse boxes"
+msgstr ""
+
+msgid "ctxcomponents_hide-left-bar"
+msgstr ""
+
+# schema pot file, generated on 2014-03-19 14:09:30
+#
+# singular and plural forms for each entity type
+# subject and object forms for each relation type
+# (no object form for final or symmetric relation types)
+msgid "ctxcomponents_hide-left-bar_description"
+msgstr ""
+
+msgid "searching for"
+msgstr ""
+
+msgid "to associate with"
+msgstr ""

i18n/es.po

@@ -6,3 +6,31 @@
 "Generated-By: pygettext.py 1.5\n"
 "Plural-Forms: nplurals=2; plural=(n > 1);\n"
 
+msgid "Toggle navigation"
+msgstr ""
+
+msgid "by relation"
+msgstr ""
+
+msgid "cancel"
+msgstr ""
+
+msgid "collapse boxes"
+msgstr ""
+
+msgid "ctxcomponents_hide-left-bar"
+msgstr ""
+
+# schema pot file, generated on 2014-03-19 14:09:30
+#
+# singular and plural forms for each entity type
+# subject and object forms for each relation type
+# (no object form for final or symmetric relation types)
+msgid "ctxcomponents_hide-left-bar_description"
+msgstr ""
+
+msgid "searching for"
+msgstr ""
+
+msgid "to associate with"
+msgstr ""

i18n/fr.po

@@ -6,3 +6,31 @@
 "Generated-By: pygettext.py 1.5\n"
 "Plural-Forms: nplurals=2; plural=(n > 1);\n"
 
+msgid "Toggle navigation"
+msgstr ""
+
+msgid "by relation"
+msgstr ""
+
+msgid "cancel"
+msgstr ""
+
+msgid "collapse boxes"
+msgstr "cacher/afficher les boîtes d'action"
+
+msgid "ctxcomponents_hide-left-bar"
+msgstr ""
+
+# schema pot file, generated on 2014-03-19 14:09:30
+#
+# singular and plural forms for each entity type
+# subject and object forms for each relation type
+# (no object form for final or symmetric relation types)
+msgid "ctxcomponents_hide-left-bar_description"
+msgstr ""
+
+msgid "searching for"
+msgstr ""
+
+msgid "to associate with"
+msgstr ""

uiprops.py

+JAVASCRIPTS.append(data('cubes.squareui.js'))

views/basetemplates.py

@@ -121,6 +121,6 @@
             box.render(w=html.append, view=view)
         if html:
             # only display aside columns if html availble
-            self.w(u'<div id="aside-main-%s" class="col-md-3">\n' %
+            self.w(u'<aside id="aside-main-%s" class="col-md-3 cwjs-aside">\n' %
                    context)
             self.w(u'\n'.join(html))
@@ -125,8 +125,8 @@
                    context)
             self.w(u'\n'.join(html))
-            self.w(u'</div>\n')
+            self.w(u'</aside>\n')
     return len(boxes)
 
 @monkeypatch(basetemplates.TheMainTemplate)
 def content_column(self, view, content_cols):
     w = self.w
@@ -128,9 +128,9 @@
     return len(boxes)
 
 @monkeypatch(basetemplates.TheMainTemplate)
 def content_column(self, view, content_cols):
     w = self.w
-    w(u'<div id="pageContent" class="col-md-%(col)s" role="main" data-col="%(col)s">' % {
+    w(u'<div id="pageContent" class="col-md-%(col)s" role="main">' % {
         'col': content_cols})
     components = self._cw.vreg['components']
     self.content_components(view, components)

views/component.py

+# -*- coding: utf-8 -*-
+# copyright 2014 LOGILAB S.A. (Paris, FRANCE), all rights reserved.
+# contact http://www.logilab.fr -- mailto:contact@logilab.fr
+#
+# This program is free software: you can redistribute it and/or modify it under
+# the terms of the GNU Lesser General Public License as published by the Free
+# Software Foundation, either version 2.1 of the License, or (at your option)
+# any later version.
+#
+# This program is distributed in the hope that it will be useful, but WITHOUT
+# ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+# FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+# details.
+#
+# You should have received a copy of the GNU Lesser General Public License along
+# with this program. If not, see <http://www.gnu.org/licenses/>.
+
+from logilab.common.registry import yes
+
+from cubicweb.web.views.basecomponents import HeaderComponent
+
+
+class HideLeftBar(HeaderComponent):
+    """ Hide the left bar """
+    __regid__ = 'hide-left-bar'
+    __select__ = yes()
+    context = 'header-right'
+    order = 3
+    visible = False
+    icon_css_cls = 'glyphicon glyphicon-align-justify'
+
+    def render(self, w):
+        w(u'''<button class="btn btn-default" id="cw-aside-toggle" class="navbar-toggle"
+              onclick="cw.cubes.squareui.toggleLeftColumn()" title="%(label)s">
+              <span class="%(icon_class)s"></span>
+              </button>''' % {
+                'icon_class': self.icon_css_cls,
+                'label': self._cw._('collapse boxes')
+              })