complete integration of sidebarleft + gulp process

gulpfile.js

 
 const listCssFiles = [
   _srcdir + 'css/default_skin.css',
-  _srcdir + 'css/bootstrap.min.css',
+  _srcdir + 'css/bootstrap.css',
   _srcdir + 'font-awesome-4.2.0/css/font-awesome.css',
   _srcdir + 'select2-4.0.3/css/select2.min.css',
   _srcdir + 'css/dashboard.css'

tracim/tracim/public/assets/css/dashboard.css

   right: 0;
   overflow-x: visible;
   overflow-y: auto;
-  background-color: #F5F5F5;
   border-left: 1px solid #CCC;
 }
 .navbar-right {
 }
 
 div.t-page-header-row {
-    background-color: #F5F5F5;
     border-bottom: 1px solid #CCC;
 }
 
     z-index: 1000;
     overflow-x: hidden;
     overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-    background-color: #555;
     color: #DDD;
     border-right: 1px solid #CCC;
   }

tracim/tracim/public/assets/css/default_skin.css

 * this file is used to declare default tracim skin before bootstrap.min.css so that the bootstrap.css file generated by tracim_theme
 * can override them withtout adding specificity, just by rules declaration order
 */
+.bg-primary {
+  background-color: #555;
+}
+.bg-secondary {
+  background-color: #F5F5F5;
+}
+.textMenuColor {
+  color: #ddd;
+}
 .textMenuClickedBgColor {
   background: #beebff;
 }

tracim/tracim/templates/file/getone.mak

 <%namespace name="TOOLBAR" file="tracim.templates.file.toolbar"/>
 <%namespace name="FORMS" file="tracim.templates.file.forms"/>
 
+<%namespace name="LEFT_MENU" file="tracim.templates.widgets.left_menu"/>
 <%namespace name="WIDGETS" file="tracim.templates.user_workspace_widgets"/>
 
 <%namespace name="BUTTON" file="tracim.templates.widgets.button"/>
 <%def name="title()">${result.file.label}</%def>
 
 <%def name="SIDEBAR_LEFT_CONTENT()">
-    <h4>${_('Workspaces')}</h4>
-    ${WIDGETS.TREEVIEW('sidebar-left-menu', 'workspace_{}__item_{}'.format(result.file.workspace.id, result.file.id))}
-    <hr/>
+    ${LEFT_MENU.TREEVIEW('sidebar-left-menu', 'workspace_{}__item_{}'.format(result.file.workspace.id, result.file.id))}
 </%def>
 
 <%def name="SIDEBAR_RIGHT_CONTENT()">
 
 <div class="content-container ${'not-editable' if not result.file.is_editable else ''} ${'archived' if result.file.is_archived else ''} ${'deleted' if result.file.is_deleted else ''}">
 
-    <div class="t-page-header-row">
+    <div class="t-page-header-row bg-secondary">
         <div class="main">
             <h1 class="page-header t-file-color-border">
                 <i class="fa fa-fw fa-lg fa-paperclip tracim-less-visible t-file-color"></i>

tracim/tracim/templates/folder/forms.mak

 <%namespace name="TIM" file="tracim.templates.pod"/>
 <%namespace name="BUTTON" file="tracim.templates.widgets.button"/>
 <%namespace name="ICON" file="tracim.templates.widgets.icon"/>
-<%namespace name="LEFT_MENU" file="tracim.templates.widgets.left_menu"/>
+<%namespace name="LEFT_MENU" file="tracim.templates.user_workspace_widgets"/>
 
 <%def name="NEW(dom_id, workspace_id, parent_id=None)">
     <div id="{dom_id}">
 </%def>
 
 <%def name="MOVE(dom_id, item, do_move_url, modal_title)">
-    <form role="form" method="POST" action="${do_move_url}">
+    <form id="move_folder_popup" role="form" method="POST" action="${do_move_url}">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">${_('Close')}</span></button>
             <h4 class="modal-title">${TIM.FA('fa-arrows t-less-visible')} ${modal_title}</h4>
                     <li role="presentation"><a href="#move-to-another-workspace" aria-controls="move-to-another-workspace" role="tab" data-toggle="tab">${_('to another workspace')}</a></li>
                 </ul>
                 <div class="tab-content">
-                    <div role="tabpanel" class="tab-pane active" id="move-to-same-workspace">
-                        <div class="t-half-spacer-above">
-                            ${LEFT_MENU.TREEVIEW('sidebar-left-menu', '__')}
-                        </div>
-                    </div>
-                    <div role="tabpanel" class="tab-pane" id="move-to-another-workspace">
-                        <div class="t-half-spacer-above">
-                            ${LEFT_MENU.TREEVIEW('sidebar-left-menu', '__')}
-                        </div>
-                    </div>
+                    <div role="tabpanel" class="tab-pane active bg-primary" id="move-to-same-workspace"></div>
+                    <%
+                      selected_id = 'workspace_{}__folder_{}'.format(item.workspace.id, item.folder.id if item.folder else '')
+                      apiPath = tg.url('/workspaces/treeview_root')
+                      apiParameters = tg.url('', dict(current_id=selected_id, all_workspaces=0, folder_allowed_content_types='folder', ignore_id=item.id))
+                      apiChildPath = tg.url('/workspaces/treeview_children')
+                      apiChildParameters = tg.url('', dict(ignore_id=item.id, allowed_content_types='folder'))
+                    %>
+                    ${LEFT_MENU.TREEVIEW('move-to-same-workspace', apiPath, apiParameters, apiChildPath, apiChildParameters, 'True')}
+                    <div role="tabpanel" class="tab-pane bg-primary" id="move-to-another-workspace"></div>
+                    <%
+                      apiPath = tg.url('/workspaces/treeview_root')
+                      apiParameters = tg.url('', dict(current_id=None, all_workspaces=1, folder_allowed_content_types='folder', ignore_id=item.id, ignore_workspace_id=item.workspace.id))
+                      apiChildPath = tg.url('/workspaces/treeview_children')
+                      apiChildParameters = tg.url('', dict(ignore_id=item.id, allowed_content_types='folder'))
+                    %>
+                    ${LEFT_MENU.TREEVIEW('move-to-another-workspace', apiPath, apiParameters, apiChildPath, apiChildParameters, 'False')}
                 </div>
             </div>
         </div>

tracim/tracim/templates/folder/getone.mak

 <%namespace name="TIM" file="tracim.templates.pod"/>
 <%namespace name="TOOLBAR" file="tracim.templates.folder.toolbar"/>
 <%namespace name="FORMS" file="tracim.templates.user_workspace_forms"/>
-<%namespace name="WIDGETS" file="tracim.templates.user_workspace_widgets"/>
+<%namespace name="LEFT_MENU" file="tracim.templates.widgets.left_menu"/>
 
 <%namespace name="BUTTON" file="tracim.templates.widgets.button"/>
 <%namespace name="TABLE_ROW" file="tracim.templates.widgets.table_row"/>
 <%def name="title()">${result.folder.label}</%def>
 
 <%def name="SIDEBAR_LEFT_CONTENT()">
-    <h4>${_('Workspaces')}</h4>
-    ${WIDGETS.TREEVIEW('sidebar-left-menu', 'workspace_{}__item_{}'.format(result.folder.workspace.id, result.folder.id))}
+    ${LEFT_MENU.TREEVIEW('sidebar-left-menu', 'workspace_{}__item_{}'.format(result.folder.workspace.id, result.folder.id))}
 </%def>
 
 <%def name="SIDEBAR_RIGHT_CONTENT()">
 
 <div class="folder-container ${'not-editable' if not result.folder.is_editable else ''} ${'archived' if result.folder.is_archived else ''} ${'deleted' if result.folder.is_deleted else ''}">
 
-    <div class="t-page-header-row">
+    <div class="t-page-header-row bg-secondary">
         <div class=" main">
             <h1 class="page-header t-folder-color-border">
                 <i class="fa fa-fw fa-lg fa-folder-open tracim-less-visible" style="color: #CCCC00"></i>

tracim/tracim/templates/master_authenticated.mak

                 </a>
             </div>
 
-            <div class="header__navbar navbar-collapse collapse">
+            <div class="header__navbar bg-primary navbar-collapse collapse">
                 % if request.identity:
                     <ul class="header__navbar__list nav navbar-nav navbar-left">
                         <li class="header__navbar__list__item active">

tracim/tracim/templates/master_authenticated_left_treeview.mak

     ## SIDEBAR LEFT [END]
 
     ## SIDEBAR RIGHT
-    <div id="sidebar-right" class="sidebar">
+    <div id="sidebar-right" class="sidebar bg-secondary">
         ${self.SIDEBAR_RIGHT_CONTENT()}
     </div> <!-- # End of side bar right -->
     ## SIDEBAR RIGHT [END]

tracim/tracim/templates/master_authenticated_left_treeview_right_toolbar.mak

 
 <%def name="content_wrapper()">
     ## SIDEBAR LEFT
-    <div id="sidebar-left" class="sidebar">
+    <div id="sidebar-left" class="sidebar bg-primary">
         <div class="btn-group" style="position: absolute; right: 2px; top: 4px; ">
             <button id="toggle-left-sidebar-width" type="button" class="btn btn-link"><i class="fa fa-angle-double-right"></i></button>
         </div>
     ## SIDEBAR LEFT [END]
 
     ## SIDEBAR RIGHT
-    <div id="sidebar-right" class="sidebar">
+    <div id="sidebar-right" class="sidebar bg-secondary">
         ${self.SIDEBAR_RIGHT_CONTENT()}
     </div> <!-- # End of side bar right -->
     ## SIDEBAR RIGHT [END]

tracim/tracim/templates/page/getone.mak

 
 <%namespace name="TIM" file="tracim.templates.pod"/>
 <%namespace name="FORMS" file="tracim.templates.user_workspace_forms"/>
+<%namespace name="LEFT_MENU" file="tracim.templates.widgets.left_menu"/>
 <%namespace name="WIDGETS" file="tracim.templates.user_workspace_widgets"/>
 
 <%namespace name="TOOLBAR" file="tracim.templates.page.toolbar"/>
 <%def name="title()">${result.page.label}</%def>
 
 <%def name="SIDEBAR_LEFT_CONTENT()">
-    <h4>${_('Workspaces')}</h4>
-    ${WIDGETS.TREEVIEW('sidebar-left-menu', 'workspace_{}__item_{}'.format(result.page.workspace.id, result.page.id))}
-    <hr/>
+    ${LEFT_MENU.TREEVIEW('sidebar-left-menu', 'workspace_{}__item_{}'.format(result.page.workspace.id, result.page.id))}
 </%def>
 
 <%def name="SIDEBAR_RIGHT_CONTENT()">

tracim/tracim/templates/search/display.mak

 ##
 ############################################################################
 
-<div class="row t-page-header-row">
+<div class="row t-page-header-row bg-secondary">
     <div class="col-sm-7 col-sm-offset-3 main">
         <h1 class="page-header t-search-color-border">
             <i class="fa fa-fw fa-lg fa-search t-search-color"></i>

tracim/tracim/templates/thread/getone.mak

 
 <%namespace name="TIM" file="tracim.templates.pod"/>
 <%namespace name="TOOLBAR" file="tracim.templates.thread.toolbar"/>
+<%namespace name="LEFT_MENU" file="tracim.templates.widgets.left_menu"/>
 <%namespace name="WIDGETS" file="tracim.templates.user_workspace_widgets"/>
 
 
 <%def name="title()">${result.thread.label}</%def>
 
 <%def name="SIDEBAR_LEFT_CONTENT()">
-    <h4>${_('Workspaces')}</h4>
-    ${WIDGETS.TREEVIEW('sidebar-left-menu', 'workspace_{}__item_{}'.format(result.thread.workspace.id, result.thread.id))}
-    <hr/>
+    ${LEFT_MENU.TREEVIEW('sidebar-left-menu', 'workspace_{}__item_{}'.format(result.thread.workspace.id, result.thread.id))}
 </%def>
 
 <%def name="SIDEBAR_RIGHT_CONTENT()">
 
 <div class="content-container ${'not-editable' if not result.thread.is_editable else ''} ${'archived' if result.thread.is_archived else ''} ${'deleted' if result.thread.is_deleted else ''}">
 
-    <div class="t-page-header-row">
+    <div class="t-page-header-row bg-secondary">
         <div class="main">
             <h1 class="page-header t-thread-color-border">
                 <i class="fa fa-fw fa-lg fa-comments-o tracim-less-visible t-thread-color"></i>

tracim/tracim/templates/user_toolbars.mak

 
 <%def name="USERS(current_user)">
     ## SIDEBAR RIGHT
-    <div id="sidebar-right" class="col-sm-1 col-md-1 col-sm-offset-11 sidebar">
+    <div id="sidebar-right" class="col-sm-1 col-md-1 col-sm-offset-11 sidebar bg-secondary">
         <div class="btn-group btn-group-vertical">
         </div>
         <p></p>

tracim/tracim/templates/user_workspace_widgets.mak

     % endif
 </%def>
 
-<%def name="TREEVIEW(dom_id, selected_id='', uniq_workspace='0')">
-    ## <% get_root_url = tg.url("/workspaces/treeview_root", dict(current_id=selected_id)) %>
-    <div id='sidebarleft_menu'></div>
-    <script src="${tg.url('/assets/js/sidebarleft.js')}"></script>
+<%def name="TREEVIEW(dom_id, apiPath='/', apiParameters='', apiChildPath='', apiChildParameters='', loadScript='True')">
+## this function should only be called by the popup 'move folder'. For the sidebar left, use templates.widgets.left_menu.TREEVIEW
+## loadScript is used to call the js file only once AND (more importantly) create only one instance of the input hidden. Otherwise, an array of folder_id would be send through POST
+    <div id='${dom_id}'></div>
+    % if loadScript == 'True':
+      <script src="${tg.url('/assets/js/sidebarleft.js')}"></script>
+      <input type='hidden' id='move-folder-treeview-hidden-field' name='folder_id' value=''/>
+    % endif
     <script>
       // (function () { })() is equivalent to window.onload (http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the)
-      (function () {
-        sidebarLeft(document.getElementById('sidebarleft_menu'), '/', '?current_id=${selected_id}')
+      ;(function () {
+        sidebarLeft(document.getElementById('${dom_id}'), false, '${apiPath|n}', '${apiParameters|n}', '${apiChildPath|n}', '${apiChildParameters|n}')
       })()
+      $('#${dom_id}').on('click', '.sidebarleft__menu__item__link', function () {
+        $('#move-folder-treeview-hidden-field').val($(this).attr('id'))
+      })
     </script>
 </%def>
 

tracim/tracim/templates/widgets/left_menu.mak

     <script src="${tg.url('/assets/js/sidebarleft.js')}"></script>
     <script>
       // (function () { })() is equivalent to window.onload (http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the)
-      (function () {
-        sidebarLeft(document.getElementById('sidebarleft_menu'), '/')
+      ;(function () {
+        sidebarLeft(document.getElementById('sidebarleft_menu'), true, '/workspaces/treeview_root/', '?current_id=${selected_id}', '/workspaces/treeview_children', '')
       })()
     </script>
 </%def>

tracim/tracim/templates/workspace/getone.mak

 <%namespace name="TIM" file="tracim.templates.pod"/>
 <%namespace name="TOOLBAR" file="tracim.templates.workspace.toolbar"/>
 <%namespace name="FORMS" file="tracim.templates.user_workspace_forms"/>
+<%namespace name="LEFT_MENU" file="tracim.templates.widgets.left_menu"/>
 <%namespace name="WIDGETS" file="tracim.templates.user_workspace_widgets"/>
 <%namespace name="BUTTON" file="tracim.templates.widgets.button"/>
 
 <%def name="title()">${result.workspace.label}</%def>
 
 <%def name="SIDEBAR_LEFT_CONTENT()">
-    <h4>${_('Workspaces')}</h4>
-    ${WIDGETS.TREEVIEW('sidebar-left-menu', 'workspace_{}__'.format(result.workspace.id))}
+    ${LEFT_MENU.TREEVIEW('sidebar-left-menu', 'workspace_{}__'.format(result.workspace.id))}
 </%def>
 
 <%def name="SIDEBAR_RIGHT_CONTENT()">
 ##
 ############################################################################
 
-<div class="t-page-header-row">
+<div class="t-page-header-row bg-secondary">
     <div class="main">
         <h1 class="page-header t-less-visible-border">
             <i class="fa fa-fw fa-lg fa-bank t-less-visible"></i>