- increase opacity of full-screen editor

pboard/pboard/controllers/root.py

         loCurrentUser   = pld.PODStaticController.getCurrentUser()
         loApiController = pld.PODUserFilteredApiController(loCurrentUser.user_id)
 
-        # loRootNodeList   = pbm.DBSession.query(pbmd.PBNode).filter(pbmd.PBNode.parent_id==None).order_by(pbmd.PBNode.node_order).all()
         loRootNodeList = loApiController.buildTreeListForMenu(pbmd.PBNodeStatus.getVisibleIdsList())
         liNodeId         = int(node)
 
         loCurrentNode    = None
         loNodeStatusList = None
+
         try:
           loNodeStatusList = pbmd.PBNodeStatus.getChoosableList()
           loCurrentNode    = loApiController.getNode(liNodeId)
 
         # FIXME - D.A - 2013-11-07 - Currently, the code build a new item if no item found for current user
         # the correct behavior should be to redirect to setup page
-        if loCurrentNode is not None and "%s"%loCurrentNode.node_id!=node:
-          redirect(tg.url('/document/%i'%loCurrentNode.node_id))
-
-        if loCurrentNode is None:
-          loCurrentNode = loApiController.getNode(0) # try to get an item
-          if loCurrentNode is not None:
-            flash(_('Document not found. Randomly showing item #%i')%(loCurrentNode.node_id), 'warning')
-            redirect(tg.url('/document/%i'%loCurrentNode.node_id))
-          else:
-            flash(_('Your first document has been automatically created'), 'info')
-            loCurrentNode = loApiController.createDummyNode()
-            pm.DBSession.flush()
-            redirect(tg.url('/document/%i'%loCurrentNode.node_id))
 
         return dict(
             root_node_list=loRootNodeList,

pboard/pboard/model/data.py

           break
       return PBNodeStatus.getStatusItem(lsRealStatusId)
 
-  def getTruncatedLabel(self: PBNode, piCharNb: int):
+  def getTruncatedLabel(self, piCharNb: int):
     """
     return a truncated version of the data_label property.
     if piCharNb is not > 0, then the full data_label is returned

pboard/pboard/public/css/style.css

 
   padding: 0.5em 0.5em 0.5em 0.5em;
   
-  filter: alpha(opacity=90); /* internet explorer */
-  -khtml-opacity: 0.9;      /* khtml, old safari */
-  -moz-opacity: 0.9;       /* mozilla, netscape */
-  opacity: 0.9;           /* fx, safari, opera */
+  filter: alpha(opacity=95); /* internet explorer */
+  -khtml-opacity: 0.95;      /* khtml, old safari */
+  -moz-opacity: 0.95;       /* mozilla, netscape */
+  opacity: 0.95;           /* fx, safari, opera */
 }
 
 .full-size-overlay-inner {
   margin-bottom: 0;
 }
 
+ul.nav-tabs li.active > a { background-color: #efefef; }
+div.tab-pane > h4 { background-color: #efefef; padding: 0.5em; margin: 0 0 0.5em 0;}

pboard/pboard/public/javascript/pod.js

+  function generateStringId(charNb = 32, allowedChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789") {
+    var text = "";
+
+    for( var i=0; i < charNb; i++ ) {
+      text += allowedChars.charAt(Math.floor(Math.random() * allowedChars.length));
+    }
+
+    return text;
+  }
+
   function toggleFullScreen(outerWidgetId, innerWidgetId) {
     if($(outerWidgetId).hasClass('full-size-overlay')) {
       // Toggle from fullscreen to "normal"
       $("#current-document-content-edit-form" ).css("display", "block");
       $("#current-document-toobar").css("display", "none");
     });
-    $("#current-document-content" ).dblclick(function() {
-      $("#current-document-content" ).css("display", "none");
-      $("#current-document-content-edit-form" ).css("display", "block");
-    });
+
     $("#current-document-content-edit-cancel-button, #current-document-content-edit-cancel-button-top" ).click(function() {
       $("#current-document-content" ).css("display", "block");
       $("#current-document-content-edit-form" ).css("display", "none");

pboard/pboard/templates/document-widgets.mak

 <%def name="node_treeview_for_set_parent_menu(node_id, node_list, indentation=-1)">
   % if indentation==-1:
     <li>
-      <a href="${tg.url('/api/set_parent_node?node_id=%i&new_parent_id=0'%(current_node.node_id))}">
+      <a href="${tg.url('/api/set_parent_node', dict(node_id=node_id, new_parent_id=0))}">
         <i class="fa fa-file-text-o"></i> ${_('Home')}
       </a>
       ${node_treeview_for_set_parent_menu(node_id, node_list, 0)}
       <ul style="list-style: none;">
       % for new_parent_node in node_list:
         <li>
-          <a href="${tg.url('/api/set_parent_node?node_id=%i&new_parent_id=%i'%(node_id, new_parent_node.node_id))}"><i class="fa fa-file-text-o"></i> ${new_parent_node.getTruncatedLabel(40-indentation*2)}
+          <a href="${tg.url('/api/set_parent_node', dict(node_id=node_id, new_parent_id=new_parent_node.node_id))}"><i class="fa fa-file-text-o"></i> ${new_parent_node.getTruncatedLabel(40-indentation*2)}
           </a>
           ${node_treeview_for_set_parent_menu(node_id, new_parent_node.getStaticChildList(), indentation+1)}
         </li>
 <%def name="Toolbar(poNode, plNodeStatusList, plRootNodes, psDivId)">
   <div id="${psDivId}">
     <div class="btn-group">
-  % if poNode.parent_id!=None and poNode.parent_id!=0:
       ${POD.EditButton('current-document-content-edit-button', True)}
-  % endif
       <button class="btn btn-small"  data-toggle="dropdown" href="#"> 
         <i class="fa  fa-signal"></i>
         ${_("Change status")}
       </ul>
       <a
         class="btn btn-small btn-danger"
-        href='${tg.url('/api/edit_status?node_id=%i&node_status=%s'%(poNode.node_id, 'deleted'))}'
+        href='${tg.url('/api/edit_status', dict(node_id=poNode.node_id, node_status='deleted'))}'
         id='current-document-force-delete-button' onclick="return confirm('${_('Delete current document?')}');"
         title="${_('Delete')}"
         ><i class="fa fa-trash-o"></i></a>
     <li>
       <span class="divider"> / Documents /</span>
     </li>
-    % for breadcrumb_node in poNode.getBreadCrumbNodes():
-    <li>
-      <a href="${tg.url('/document/%s'%(breadcrumb_node.node_id))}">${breadcrumb_node.getTruncatedLabel(30)}</a>
-      <span class="divider">/</span>
-    </li>
-    % endfor
-    <li class="active">${poNode.data_label}</li>
+    % if poNode!=None:
+      % for breadcrumb_node in poNode.getBreadCrumbNodes():
+      <li>
+        <a href="${tg.url('/document/%s'%(breadcrumb_node.node_id))}">${breadcrumb_node.getTruncatedLabel(30)}</a>
+        <span class="divider">/</span>
+      </li>
+      % endfor
+      <li class="active">${poNode.data_label}</li>
+    % endif
   </ul>
 </%def>
 
   <h3 id="${psId}" title="Document ${poNode.node_id}: ${poNode.data_label}">
     ${poNode.data_label}
     <sup class="label ${poNode.getStatus().css}" href="#">
+      <i class="${poNode.getStatus().icon_id}"></i>
       ${poNode.getStatus().label}
     </sup>
+    
+    % if poNode.is_shared==False:
+      <sup class="label label-info" title="${_('This document is private')}">
+        <i class="fa fa-key"></i>
+        ${_('private')}
+      </sup>
+    % else:
+      <sup class="label label-warning" title="${_('This document is collaborative')}">
+        <i class="fa fa-group"></i>
+        ${_('collaborative')}
+      </sup>
+    % endif
+######
+##
+## 2014-05-06 - D.A. - The document is not yet internet-sharable
+##
+##    % if poNode.is_public==True:
+##      <sup class="label label-warning" href="#">
+##        <i class="fa fa-globe"></i>
+##        <span title="${_('This document is published through internet at %s')%poNode.public_url_key}">${_('shared')}</span>
+##      </sup>
+##    % endif
+
   </h3>
 </%def>
 
   </a>
 </%def>
 
+
+<%def name="FirstTimeFakeDocument()">
+  <div id='application-document-panel' class="span5">
+    <div id='current-document-content' class="">
+      <p class="alert alert-info">
+        <i class="fa  fa-smile-o"></i> <strong>${_('Welcome aboard.')}</strong>
+      </p>
+      <p>
+        ${_('It appears you do not have any document yet. We suggest you to start by creating a new document.')}
+      </p>
+      <p>
+        ${_('We suggest you to start by creating a new document.')}
+      </p>
+      <p class="alert alert-info">
+        <i class="fa fa-info-circle"></i> ${_('<strong>Note :</strong> You can even create a dummy document: you will be able to remove it later.')|n}
+      </p>
+      <p class="pull-right">
+        <a href="#create-new-document-modal-form" role="button" class="btn btn-success" data-toggle="modal">
+          <i class="fa fa-plus"></i>
+          ${_('Create your first document')}
+        </a>
+      </p>
+  
+      ${DocumentEditModalDialog(None, None, tg.url('/api/create_document'), 'create-new-document-modal-form', 'Create your first document')}
+    </div>
+    <script>
+    </script>
+  </div>
+</%def>
+
+<%def name="DocumentEditModalDialog(piParentNodeId, poNode, psPostUrl, psModalId, psTitle)">
+  <div
+    id="${psModalId}"
+    class="modal hide"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="myModalLabel"
+    aria-hidden="true">
+    
+   <div class="modal-header">
+## MODAL HEADER
+      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+      <h3 id="myModalLabel">${psTitle}</h3>
+## MODAL HEADER [END]
+    </div>
+
+    <div class="modal-body">
+## MODAL BODY
+      <form id='${psModalId}-form' method="GET" action="${psPostUrl}">
+        <div style="padding: 0.5em 0 0 0">
+          % if poNode!=None:
+            <input type="hidden" name="node_id" value="${poNode.node_id}"/>
+          % endif
+          <input type="hidden" name="parent_id" value="${piParentNodeId if piParentNodeId else 0}"/>
+          
+          <input type="hidden" name="data_content" id="${psModalId}-textarea" />
+          <input
+            type="text"
+            name="data_label"
+            value="${poNode.data_label if poNode!=None else ''}"
+            class="span4"
+            placeholder="${_('document title')}"
+          />
+        </div>
+        <div>
+          ${POD.RichTextEditor(psModalId+'-textarea-wysiwyg', poNode.data_content if poNode!=None else '')}
+        </div>
+      </form>
+
+## MODAL BODY [END]
+    </div>
+    
+    <div class="modal-footer">
+## MODAL FOOTER
+      <button class="btn" data-dismiss="modal" aria-hidden="true">
+        <i class="fa fa-ban"></i> ${_('Cancel')}
+      </button>
+      <button class="btn btn-success" id="${psModalId}-form-submit-button">
+        <i class="fa fa-check"></i> ${_('Save changes')}
+      </button>
+## MODAL FOOTER [END]
+      <script>
+        $('#${psModalId}-form-submit-button').click(function(){
+          $('#${psModalId}-textarea-wysiwyg').cleanHtml();
+          $('#${psModalId}-textarea').val($('#${psModalId}-textarea-wysiwyg').html());
+          $('#${psModalId}-form')[0].submit();
+        });
+      </script>
+    </div>
+  </div>
+</%def>
+
+
+<%def name="FileEditModalDialog(piParentNodeId, poNode, psPostUrl, psModalId, psTitle)">
+  <div
+    id="${psModalId}"
+    class="modal hide"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="myModalLabel"
+    aria-hidden="true">
+    
+   <div class="modal-header">
+## MODAL HEADER
+      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+      <h3 id="myModalLabel">${psTitle}</h3>
+## MODAL HEADER [END]
+    </div>
+
+    <div class="modal-body">
+## MODAL BODY
+      <form id='${psModalId}-form' method="POST" action="${psPostUrl}" enctype="multipart/form-data">
+          % if poNode!=None:
+            <input type="hidden" name="node_id" value="${poNode.node_id}"/>
+          % endif
+          <input type="hidden" name="parent_id" value="${piParentNodeId if piParentNodeId else 0}"/>
+          <input type="hidden" name="data_content" id="${psModalId}-textarea" />
+        <div>
+          <label>
+            ${_('Title')}
+            <input
+              type="text"
+              name="data_label"
+              value="${poNode.data_label if poNode!=None else ''}"
+              class="span4"
+              placeholder="${_('this field is optionnal')}"
+            />
+          </label>
+          <label>
+            ${_('Choose a file...')}
+            <input type="file" class="span4" placeholder="${_('choose a file...')}" name="data_file"/>
+          </label>
+          
+        </div>
+        <div>
+          <label>${_('File description (optionnal)')}</label>
+          ${POD.RichTextEditor(psModalId+'-textarea-wysiwyg', poNode.data_content if poNode!=None else '', '')}
+        </div>
+      </form>
+
+## MODAL BODY [END]
+    </div>
+    
+    <div class="modal-footer">
+## MODAL FOOTER
+      <button class="btn" data-dismiss="modal" aria-hidden="true">
+        <i class="fa fa-ban"></i> ${_('Cancel')}
+      </button>
+      <button class="btn btn-success" id="${psModalId}-form-submit-button">
+        <i class="fa fa-check"></i> ${_('Save changes')}
+      </button>
+## MODAL FOOTER [END]
+      <script>
+        $('#${psModalId}-form-submit-button').click(function(){
+          $('#${psModalId}-textarea-wysiwyg').cleanHtml();
+          $('#${psModalId}-textarea').val($('#${psModalId}-textarea-wysiwyg').html());
+          $('#${psModalId}-form')[0].submit();
+        });
+      </script>
+    </div>
+  </div>
+</%def>

pboard/pboard/templates/document.mak

 <%inherit file="local:templates.master"/>
 <%namespace name="POD" file="pboard.templates.pod"/>
 <%namespace name="DOC" file="pboard.templates.document-widgets"/>
+<%namespace name="DOCTABS" file="pboard.templates.document-widgets-tabs"/>
 
 <%def name="title()">
-pod :: document ${current_node.getTruncatedLabel(40)} [#${current_node.node_id} / ${current_node.getStatus().label}]
+  % if current_node!=None:
+    pod :: document ${current_node.getTruncatedLabel(40)} [#${current_node.node_id} / ${current_node.getStatus().label}]
+  % else:
+    pod :: document root
+  % endif
 </%def>
 
 <%def name="node_treeview(node_list, indentation=-1)">
   % if indentation==-1:
     <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='fa fa-folder-open'></i></a>
-      <a href="?node=0" title="${_('Root')}">
+      <a href="${tg.url('/document')}" title="${_('Root')}">
         ${_('Root')}
       </a>
       <div class="pod-toolbar">
   % else:
     % if len(node_list)>0:
       % for node in node_list:
-        <div id='pod-menu-item-${node.node_id}' class="pod-toolbar-parent ${'pod-status-active' if node.node_id==current_node.node_id else ''}" style="padding-left: ${(indentation+2)*0.5}em; position: relative;">
+        <div id='pod-menu-item-${node.node_id}' class="pod-toolbar-parent ${'pod-status-active' if current_node!=None and node.node_id==current_node.node_id else ''}" style="padding-left: ${(indentation+2)*0.5}em; position: relative;">
           <a class="toggle-child-menu-items"><i class='${node.getIconClass()}'></i></a>
           <a href="${tg.url('/document/%s'%(node.node_id))}" title="${node.data_label}">
             % if node.getStatus().status_family=='closed' or node.getStatus().status_family=='invisible':
     </div>
     <div id='application-main-panel' class="span9">
 
+      % if current_node==None:
+        <div class="row">
+          ${DOC.FirstTimeFakeDocument()}
+        </div>
+        
+      % else:
       <div class="row">
         <div id='application-document-panel' class="span5">
           <div id='current-document-content' class="">
         </div>
         <div id='application-metadata-panel' class="span4">
           <div class="tabbable">
-            <ul class="nav nav-tabs" style="margin-bottom: 0.5em;">
+            <ul class="nav nav-tabs" style="margin-bottom: 0em;">
                 <li>${DOC.MetadataTab('#subdocuments', 'tab', _('Subdocuments'), 'fa-file-text-o', current_node.getChildren())}</li>
                 <li class="active">${DOC.MetadataTab('#events', 'tab', _('Calendar'), 'fa-calendar', current_node.getEvents())}</li>
                 <li>${DOC.MetadataTab('#contacts', 'tab', _('Address book'), 'fa-user', current_node.getContacts())}</li>
                 ################################
                 <!-- DEBUG - D.A. - 2013-11-07 - Not using tags for th moment -->
                 <div class="tab-pane" id="subdocuments">
-                  <p><strong>Sub-documents</strong></p> 
+                  <h4>${_('Sub-documents')}</h4>
+                  ${DOC.DocumentEditModalDialog(current_node.node_id, None, tg.url('/api/create_document'), 'add-subdocument-modal-%i'%current_node.node_id, _('New Sub-document'))}
+                  
                 % if len(current_node.getChildren())<=0:
                   <p class="pod-grey">
                     ${_("There is currently no child documents.")}<br/>
                   </p>
                   <p>
-                    
-                    <a class="btn btn-success btn-small" href="${tg.url('/api/create_document?parent_id=%i'%current_node.node_id)}">
-                      <i class="fa fa-plus"></i> ${_("Add one")}
+                    <a href="#add-subdocument-modal-${current_node.node_id}" role="button" class="btn btn-success btn-small" data-toggle="modal">
+                      <i class="fa fa-plus"></i>
+                      ${_("Add one")}
                     </a>
                   </p>
                 % else:
                   <p>
-                    <a class="btn btn-success btn-small" href="${tg.url('/api/create_document?parent_id=%i'%current_node.node_id)}">
+                    <a href="#add-subdocument-modal-${current_node.node_id}" role="button" class="btn btn-success btn-small" data-toggle="modal">
                       <i class="fa fa-plus"></i> ${_("Add one")}
                     </a>
                   </p>
                 ##
                 ################################
                 <div class="tab-pane active" id="events">
-                  <p><strong>Calendar</strong></p> 
+                  <h4>${_('Calendar')}</h4> 
                 % if len(current_node.getEvents())<=0:
                   <p class="pod-grey">${_("The calendar is empty.")}<br/></p>
                   <p>${POD.AddButton('current-document-add-event-button', True, _(' Add first event'))}</p>
                 ##
                 ##############################
                 <div class="tab-pane" id="contacts">
-                  <p><strong>${_('Address book')}</strong></p> 
+                  <h4>${_('Address book')}</h4> 
                 % if len(current_node.getContacts())<=0:
                   <p class="pod-grey">${_("The address book is empty.")}<br/></p>
                   <p>${POD.AddButton('current-document-add-contact-button', True, _(' Add first contact'), True)}</p>
                 ## PANEL SHOWING LIST OF COMMENTS
                 ##
                 ################################
-                <div class="tab-pane" id="comments">
-                  <p><strong>${_('Comment thread')}</strong></p> 
+                <div class="tab-pane" id="comments" style="margin: 0;">
+                  <h4>${_('Comment thread')}</h4>
                 % if len(current_node.getComments())<=0:
                   <p class="pod-grey">${_("The comment thread is empty.")}<br/></p>
-                  <p>${POD.AddButton('current-document-add-comment-button', True, _('Add first comment'), True)}</p>
-                % else:
-                  <p>${POD.AddButton('current-document-add-comment-button', True, _('Add a comment'))}</p>
                 % endif
-
-                  <!-- ADD COMMENT FORM -->
-                  <form style='display: none;' id='current-document-add-comment-form' action='${tg.url('/api/create_comment')}' method='post' class="well">
-                    <input type="hidden" name='parent_id' value='${current_node.node_id}'/>
-                    <fieldset>
-                      <legend>${_('Add a comment')}</legend>
-                      <label>
-                        <input type="text" name='data_label' placeholder="Title"/>
-                      </label>
-                      <label>
-                        <div>
-                          <input type="hidden" id="add_comment_data_content_textarea" name='data_content' />
-                          ${POD.RichTextEditor('add_comment_data_content_textarea_wysiwyg', '', 'boldanditalic|undoredo|fullscreen')}
-                        </div>
-                      </label>
-                      ${POD.CancelButton('current-document-add-comment-cancel-button', True)}
-                      ${POD.SaveButton('current-document-add-comment-save-button', True)}
-                    </fieldset>
-                  </form>
-
                   <!-- LIST OF COMMENTS -->
                 % if len(current_node.getComments())>0:
-                  <table class="table table-striped table-hover table-condensed">
+                  <div>
                     % for comment in current_node.getComments():
-                      <tr title="Last updated: ${comment.updated_at}">
-                        <td>
-                          <i>The ${comment.getFormattedDate(comment.updated_at)} at ${comment.getFormattedTime(comment.updated_at)}: </i><br/>
-                          <b>${comment.data_label}</b>
-                          ## TODO - 2013-11-20 - Use the right form in order to update meta-data
-                          <a class="pull-right" href="${tg.url('/document/%i'%comment.node_id)}"><i class="fa fa-edit"></i></a>
-                          <br/>
-                          <p>
-                            ${comment.data_content|n}
-                          </p>
-                        </td>
-                      </tr>
+                      <p>
+                        <a href="${tg.url('/api/toggle_share_status', dict(node_id=comment.node_id))}">
+                          % if comment.is_shared:
+                            <span class="label label-warning" title="${_('Shared comment. Click to make private.')}"><i class="fa fa-group"></i></span>
+                          % else:
+                            <span class="label label-info" title="${_('Private comment. Click to share.')}"><i class="fa fa-key"></i></span>
+                          % endif
+                        </a>
+                        <strong>${comment._oOwner.display_name}</strong>
+                        <i class="pull-right">
+                          The ${comment.getFormattedDate(comment.updated_at)} 
+                          at ${comment.getFormattedTime(comment.updated_at)}
+                        </i>
+                        <br/>
+                        ${comment.data_content|n}
+                        <hr style="border-top: 1px dotted #ccc; margin: 0;"/>
+                      </p>
                     % endfor
-                  </table>
+                  </div>
                 % endif
+
+                  <!-- ADD COMMENT FORM -->
+                  <form class="form" id='current-document-add-comment-form' action='${tg.url('/api/create_comment')}' method='post'>
+                    <input type="hidden" name='parent_id' value='${current_node.node_id}'/>
+                    <input type="hidden" name='data_label' value=""/>
+                    <input type="hidden" id="add_comment_data_content_textarea" name='data_content' />
+                    ${POD.RichTextEditor('add_comment_data_content_textarea_wysiwyg', '', '')}
+                    <label>
+                      <input type="checkbox" name='is_shared'/> ${_('Share this comment')}
+                    </label>
+                    <span class="pull-right">
+                      % if len(current_node.getComments())<=0:
+                        ${POD.SaveButton('current-document-add-comment-save-button', True, _('Add first comment'))}
+                      % else:
+                        ${POD.SaveButton('current-document-add-comment-save-button', True, _('Comment'))}
+                      % endif
+                    </span>
+                  </form>
+
                 </div>
                 ################################
                 ##
                 ##
                 ################################
                 <div class="tab-pane" id="files">
-                  <p><strong>${_('Attachments')}</strong></p> 
+                  ${DOCTABS.FilesTabContent(current_node)}
+                </div>
+
+                <div class="tab-pane" id="files">
+                  <h4>${_('Attachments')}</h4> 
                 % if len(current_node.getFiles())<=0:
                   <p class="pod-grey">${_("There is currently no attachment.")}<br/></p>
                   <p>${POD.AddButton('current-document-add-file-button', True, _(' Attach first file'))}</p>
                 ## PANEL SHOWING ACCESS MANAGEMENT
                 ##
                 ################################
+                
                 <div class="tab-pane" id="accessmanagement">
-                  blabla
+                  ${DOCTABS.AccessManagementTab(current_node)}
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+      % endif
     </div>
   </div>
-
+</div>

pboard/pboard/templates/master.mak

             </li>
 
             <li title="Rebuild document index">
-            % if current_node is UNDEFINED:
+            % if current_node is UNDEFINED or current_node==None:
               <a href="${tg.url('/api/reindex_nodes?back_to_node_id=0')}"><i class="fa fa-refresh"></i></a>
             % else:
               <a href="${tg.url('/api/reindex_nodes?back_to_node_id=%i'%(current_node.node_id))}"><i class="fa fa-refresh"></i></a>

pboard/pboard/templates/pod.mak

   <button id='${piId}' type="button" class="${psButtonCssClass}" title="${psButtonTitle}"><i class="${psButtonIcon}"></i>${'' if (pbWithLabel==False) else ' %s'%(psButtonLabel)}</button>
 </%def>
 
-<%def name="SaveButton(piId, pbWithLabel=False)" >
-  ${Button(piId, pbWithLabel, 'btn btn-small btn-success', _('Save'), ' icon-g-ok-2 icon-g-white', _('Save'))}
+<%def name="SaveButton(piId, pbWithLabel=False, psLabel='Save')" >
+## FIXME - Make the default value use _() in order to be translated
+  ${Button(piId, pbWithLabel, 'btn btn-small btn-success', psLabel, ' icon-g-ok-2 icon-g-white', psLabel)}
 </%def>
 <%def name="EditButton(piId, pbWithLabel=False)" >
   ${Button(piId, pbWithLabel, 'btn btn-small', _('Edit'), 'fa fa-edit', _('Edit'))}
   ${Button(piId, pbWithLabel, 'btn btn-small', psLabel or _('New'), 'fa fa-plus', psLabel or _('New'))}
 % endif
 </%def>
+<%def name="OpenModalButton(psModalAnchor, psLabel)">
+  <a href="#${psModalAnchor}" role="button" class="btn btn-success btn-small" data-toggle="modal">
+    <i class="fa fa-plus"></i>${psLabel}
+  </a>
+</%def>
+
 <%def name='Badge(psLabel, psCssClass="")'>
   <span class='badge ${psCssClass}'>${psLabel}</span>
 </%def>