allow 3 view modes

pboard/pboard/templates/document.mak

 
 <%def name="node_treeview(node_list, indentation=-1)">
   % if indentation==-1:
-    <div class="pod-toolbar-parent" style="padding-left: 0.5em; position: relative;">
+    <div id='pod-menu-item-0' class="pod-toolbar-parent" style="padding-left: 0.5em; position: relative;">
+      <a class="toggle-child-menu-items"><i class='icon-g-folder-open'></i></a>
       <a href="?node=0" title="${_('Root')}">
-        <i class='icon-g-folder-open'></i>
         ${_('Root')}
       </a>
       <div class="pod-toolbar">
         <a href="${tg.url('/api/create_document?parent_id=0')}" title="${_('Add child document')}"><i class="icon-g-circle-plus"></i></a>
       </div>
     </div>
-    ${node_treeview(node_list, 0)}
+    <div id="pod-menu-item-0-children">${node_treeview(node_list, 0)}</div>
+    
   % else:
     % if len(node_list)>0:
       % for node in node_list:
 </%def>
 
   <div class="row">
-    <div class="span3">
+    <div id='application-left-panel' class="span3">
       <div>
         ${node_treeview(root_node_list)}
       </div>
     </div>
-    <div class="span9">
+    <div id='application-main-panel' class="span9">
         
         
         
         ${POD.EditButton('current-document-content-edit-button', True)}
         <a class="btn" href="#" data-toggle="dropdown"><i class="icon-g-move"></i> ${_('Move to')} <span class="caret"></span></a>
         <ul class="dropdown-menu">
-          AGAGA
-          {node_treeview_for_set_parent_menu(current_node.node_id, root_node_list)}
+          ${node_treeview_for_set_parent_menu(current_node.node_id, root_node_list)}
         </ul>
 
 
           </div>
         </form>
       </div>
-      <div class="span5">
+      <div id='application-document-panel' class="span5">
       <p>
         <div id='current-document-content' class="">
           ${current_node.getContentWithTags()|n}
         </form>
       </p>
     </div>
-    <div class="span4">
+    <div id='application-metadata-panel' class="span4">
       <div class="tabbable">
         <ul class="nav nav-tabs">
             <li class="active"><a href="#tags" data-toggle="tab" title="${_('Tags')}"><i class='icon-g-tags'></i></a></li>

pboard/pboard/templates/master.mak

                     window.location.hash = e.target.hash.replace("#", "#" + prefix);
                 });
 
+              
+                #################################
+                ##
+                ## Show/hide behavior
+                ## for the main menu
+                ##
+                ##
                 $('a.toggle-child-menu-items').on('click', function (e) {
                   parent_id    = $(this).parent().attr('id');
                   child        = $('#'+parent_id+'-children');
                     togglebutton.addClass('icon-g-folder-plus');
                     console.log("class is: "+togglebutton.attr('class'));
                   }
+                });
+
+                #################################
+                ##
+                ## large / small view of the document
+                ## (toggle visibility of the left panel)
+                ##
+                ##
+                $('a#view-size-toggle-button-small').on('click', function (e) {
+                  console.log("Toggle view mode");
+                  $('#view-size-toggle-button-small').css('display', 'none');
+                  $('#view-size-toggle-button-medium').css('display', 'block');
+                  $('#view-size-toggle-button-large').css('display', 'none');
+              
+                  left_panel_id     = '#application-left-panel'; // is span3 by default (to be hidden in fullscreen mode)
+                  main_panel_id     = '#application-main-panel'; // is span9 by default (to be 12 in fullscreen mode)
+                  docu_panel_id     = '#application-document-panel'; // is span5 by default (to be span8 in fullscreen mode)
+                  metadata_panel_id = '#application-metadata-panel';
+                  
+                  left_panel = $(left_panel_id);
+                  main_panel = $(main_panel_id);
+                  docu_panel = $(docu_panel_id);
+                  metadata_panel = $(metadata_panel_id);
+
+                  console.log("Toggle from small (default) to medium (no left tab)");
+                  left_panel.css('display', 'block');
+                  metadata_panel.css('display', 'block');
+                  main_panel.removeClass('span9');
+                  main_panel.removeClass('span12');
+                  main_panel.addClass('span9');
+                  
+                  docu_panel.removeClass('span5');
+                  docu_panel.removeClass('span8');
+                  docu_panel.removeClass('span12');
+                  docu_panel.addClass('span5');
+                });
+
+                $('a#view-size-toggle-button-medium').on('click', function (e) {
+                  console.log("Toggle view mode to: MEDIUM");
+                  $('#view-size-toggle-button-small').css('display', 'none');
+                  $('#view-size-toggle-button-medium').css('display', 'none');
+                  $('#view-size-toggle-button-large').css('display', 'block');
+
+                  left_panel_id     = '#application-left-panel'; // is span3 by default (to be hidden in fullscreen mode)
+                  main_panel_id     = '#application-main-panel'; // is span9 by default (to be 12 in fullscreen mode)
+                  docu_panel_id     = '#application-document-panel'; // is span5 by default (to be span8 in fullscreen mode)
+                  metadata_panel_id = '#application-metadata-panel';
+                  
+                  left_panel = $(left_panel_id);
+                  main_panel = $(main_panel_id);
+                  docu_panel = $(docu_panel_id);
+                  metadata_panel = $(metadata_panel_id);
+
+                  left_panel.css('display', 'none');
+                  metadata_panel.css('display', 'block');
+                  
+                  main_panel.removeClass('span12');
+                  main_panel.addClass('span9');
+                  
+                  docu_panel.removeClass('span5');
+                  docu_panel.removeClass('span12');
+                  docu_panel.addClass('span8');
+
+                });
+
+                $('a#view-size-toggle-button-large').on('click', function (e) {
+                  console.log("Toggle view mode to: LARGE");
+                  $('#view-size-toggle-button-small').css('display', 'block');
+                  $('#view-size-toggle-button-medium').css('display', 'none');
+                  $('#view-size-toggle-button-large').css('display', 'none');
+
+                  left_panel_id     = '#application-left-panel'; // is span3 by default (to be hidden in fullscreen mode)
+                  main_panel_id     = '#application-main-panel'; // is span9 by default (to be 12 in fullscreen mode)
+                  docu_panel_id     = '#application-document-panel'; // is span5 by default (to be span8 in fullscreen mode)
+                  metadata_panel_id = '#application-metadata-panel';
+                  
+                  left_panel = $(left_panel_id);
+                  main_panel = $(main_panel_id);
+                  docu_panel = $(docu_panel_id);
+                  metadata_panel = $(metadata_panel_id);
+
+                  left_panel.css('display', 'none');
+                  metadata_panel.css('display', 'none');
                   
+                  main_panel.removeClass('span9');
+                  main_panel.addClass('span12');
+                  
+                  docu_panel.removeClass('span5');
+                  docu_panel.removeClass('span8');
+                  docu_panel.addClass('span12');
+
                 });
               });
 
         <div class="nav-collapse">
           <ul class="nav">
             <li class="active"><a href="${tg.url('/dashboard')}"><i class="icon-home icon-white"></i> Dashboard</a></li>
-            <li><a>Link</a></li>
+            <li>
+              <a title="${_('Toggle view mode: narrow')}" id='view-size-toggle-button-small' style="display: none;"><i class='icon-g-eye-open'></i> ${_('View mode')}</a>
+              <a title="${_('Toggle view mode: medium')}" id='view-size-toggle-button-medium'><i class='icon-g-eye-open'></i> ${_('View mode')}</a>
+              <a title="${_('Toggle view mode: large')}" id='view-size-toggle-button-large' style="display: none;"><i class='icon-g-eye-open'></i> ${_('View mode')}</a>
+            </li>
             <li><a href="#">Link</a></li>
 
           % if request.identity: