improved user interface

pboard/pboard/lib/helpers.py

@@ -39,3 +39,44 @@ def getExplanationAboutStatus(psStatusId, psCurrentStatusId):
       return _("Close the item if you want not to see it anymore. The data won't be deleted")
     if psStatusId=='deleted':
       return _("This status tells that the item has been deleted.")
+
+class ID(object):
+  """ Helper class that will manage html items ids that need to be shared"""
+
+  @classmethod
+  def AddDocumentModalForm(cls, poNode=None):
+    if poNode:
+      return 'add-document-modal-form-%d'%poNode.node_id
+    else:
+      return 'add-document-modal-form'
+
+  @classmethod
+  def AddContactModalForm(cls, poNode=None):
+    if poNode:
+      return 'add-contact-modal-form-%d'%poNode.node_id
+    else:
+      return 'add-contact-modal-form'
+
+  @classmethod
+  def AddFileModalForm(cls, poNode=None):
+    if poNode:
+      return 'add-file-modal-form-%d'%poNode.node_id
+    else:
+      return 'add-file-modal-form'
+
+  @classmethod
+  def AddEventModalForm(cls, poNode=None):
+    if poNode:
+      return 'add-event-modal-form-%d'%poNode.node_id
+    else:
+      return 'add-event-modal-form'
+    ## Original id is 'current-document-add-event-form'
+
+  @classmethod
+  def AddCommentInlineForm(cls):
+    return 'current-document-add-comment-form'
+
+class ICON(object):
+  Shared = '<i class="fa fa-group"></i>'
+  Private = '<i class="fa fa-key"></i>'
+

pboard/pboard/public/javascript/pod.js

@@ -41,6 +41,7 @@
       $('#voiceBtn').hide();
     }
   };
+  
   function showErrorAlert (reason, detail) {
     var msg='';
     if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
@@ -53,53 +54,6 @@
 
   $(document).ready(function() {
 
-    $('#create_document_save_button').on('click', function(e){
-      // We don't want this to act as a link so cancel the link action
-      e.preventDefault();
-
-      // Find form and submit it
-      $('#create_document_form').submit();
-    });
-
-// ## FIXME                $('#current_node_textarea').wysihtml5({
-// ## FIXME                  "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
-// ## FIXME                  "emphasis": true, //Italics, bold, etc. Default true
-// ## FIXME                  "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
-// ## FIXME                  "html": true, //Button which allows you to edit the generated HTML. Default false
-// ## FIXME                  "link": true, //Button to insert a link. Default true
-// ## FIXME                  "image": true, //Button to insert an image. Default true,
-// ## FIXME                  // "color": true //Button to change color of font  
-// ## FIXME                });
-// ## FIXME                $('#current_node_textarea').css('margin-bottom', '0');
-// ## FIXME                $('#current_node_textarea').css("min-height", "12em");
-// ## FIXME                $('#current_node_textarea').addClass("span5");
-
-// ###################
-// ##
-// ## HERE
-// ##
-// ###################
-
-// ##
-// ## RE-IMPLEMENT THIS SOON !!!
-// ##
-// ##                /* Edit title form */
-// ##                $("#current-document-title-edit-form" ).css("display", "none");
-// ##                $("#current-document-title" ).dblclick(function() {
-// ##                  $("#current-document-title" ).css("display", "none");
-// ##                  $("#current-document-title-edit-form" ).css("display", "block");
-// ##                });
-// ##                $("#current-document-title-edit-cancel-button" ).click(function() {
-// ##                  $("#current-document-title" ).css("display", "block");
-// ##                  $("#current-document-title-edit-form" ).css("display", "none");
-// ##                });
-// ##                $('#current-document-title-save-cancel-button').on('click', function(e){
-// ##                  // We don't want this to act as a link so cancel the link action
-// ##                  e.preventDefault();
-// ##                  $('#current-document-title-edit-form').submit();
-// ##                });
-
-
     /* EDIT CONTENT FORM */
     $("#current-document-content-edit-form" ).css("display", "none");
     $("#current-document-content-edit-button" ).click(function() {
@@ -121,90 +75,6 @@
       $('#current-document-content-edit-form').submit();
     });
 
-    /* ADD EVENT => FORM */
-    $('#add_event_data_content_textarea').wysiwyg();
-    $('#add_event_data_content_textarea').css('margin-bottom', '0');
-    $('#add_event_data_content_textarea').css("height", "4em");
-    $('#add_event_data_content_textarea').addClass("span3");
-    /* ADD EVENT => SHOW/HIDE/SUBMIT BUTTONS */
-    $("#current-document-add-event-button" ).click(function() {
-      $("#current-document-add-event-form" ).css("display", "block");
-      $("#current-document-add-event-button" ).css("display", "none");
-    });
-    $('#current-document-add-event-cancel-button').on('click', function(e){
-      $("#current-document-add-event-form" ).css("display", "none");
-      $("#current-document-add-event-button" ).css("display", "block");
-    });
-    $('#current-document-add-event-save-button').on('click', function(e){
-      e.preventDefault(); // We don't want this to act as a link so cancel the link action
-      $('#add_event_data_content_textarea_wysiwyg').cleanHtml();
-      $('#add_event_data_content_textarea').val($('#add_event_data_content_textarea_wysiwyg').html());
-      $('#current-document-add-event-form').submit();
-    });
-
-    /* ADD CONTACT => FORM */
-    $('#add_contact_data_content_textarea').wysiwyg();
-    $('#add_contact_data_content_textarea').css('margin-bottom', '0');
-    $('#add_contact_data_content_textarea').css("height", "4em");
-    $('#add_contact_data_content_textarea').addClass("span3");
-    /* ADD CONTACT => SHOW/HIDE/SUBMIT BUTTONS */
-    $("#current-document-add-contact-button" ).click(function() {
-      $("#current-document-add-contact-form" ).css("display", "block");
-      $("#current-document-add-contact-button" ).css("display", "none");
-    });
-    $('#current-document-add-contact-cancel-button').on('click', function(e){
-      $("#current-document-add-contact-form" ).css("display", "none");
-      $("#current-document-add-contact-button" ).css("display", "block");
-    });
-    $('#current-document-add-contact-save-button').on('click', function(e){
-      e.preventDefault(); // We don't want this to act as a link so cancel the link action
-      $('#add_contact_data_content_textarea_wysiwyg').cleanHtml();
-      $('#add_contact_data_content_textarea').val($('#add_contact_data_content_textarea_wysiwyg').html());
-      $('#current-document-add-contact-form').submit();
-    });
-
-
-    /* ADD COMMENT => FORM */
-    $('#add_comment_data_content_textarea').wysiwyg();
-    $('#add_comment_data_content_textarea').css('margin-bottom', '0');
-    $('#add_comment_data_content_textarea').css("height", "4em");
-    $('#add_comment_data_content_textarea').addClass("span3");
-    /* ADD COMMENT => SHOW/HIDE/SUBMIT BUTTONS */
-    $("#current-document-add-comment-button" ).click(function() {
-      $("#current-document-add-comment-form" ).css("display", "block");
-      $("#current-document-add-comment-button" ).css("display", "none");
-    });
-    $('#current-document-add-comment-cancel-button').on('click', function(e){
-      $("#current-document-add-comment-form" ).css("display", "none");
-      $("#current-document-add-comment-button" ).css("display", "block");
-    });
-    $('#current-document-add-comment-save-button').on('click', function(e){
-      e.preventDefault(); // We don't want this to act as a link so cancel the link action
-      $('#add_comment_data_content_textarea_wysiwyg').cleanHtml();
-      $('#add_comment_data_content_textarea').val($('#add_comment_data_content_textarea_wysiwyg').html());
-      $('#current-document-add-comment-form').submit();
-    });
-
-    /* ADD FILE => FORM */
-    $('#add_file_data_content_textarea').wysiwyg();
-    $('#add_file_data_content_textarea').css('margin-bottom', '0');
-    $('#add_file_data_content_textarea').css("height", "4em");
-    $('#add_file_data_content_textarea').addClass("span3");
-    /* ADD FILE => SHOW/HIDE/SUBMIT BUTTONS */
-    $("#current-document-add-file-button" ).click(function() {
-      $("#current-document-add-file-form" ).css("display", "block");
-      $("#current-document-add-file-button" ).css("display", "none");
-    });
-    $('#current-document-add-file-cancel-button').on('click', function(e){
-      $("#current-document-add-file-form" ).css("display", "none");
-      $("#current-document-add-file-button" ).css("display", "block");
-    });
-    $('#current-document-add-file-save-button').on('click', function(e){
-      e.preventDefault(); // We don't want this to act as a link so cancel the link action
-      $('#add_file_data_content_textarea_wysiwyg').cleanHtml();
-      $('#add_file_data_content_textarea').val($('#add_file_data_content_textarea_wysiwyg').html());
-      $('#current-document-add-file-form').submit();
-    });
 
     $(function() {
       $('.datetime-picker-input-div').datetimepicker({
@@ -213,19 +83,6 @@
       });
     });
 
-/*
-    // Allow to go directly to required tab on load
-    // Javascript to enable link to tab
-    var url = document.location.toString();
-    if (url.match('#')) {
-      $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
-    } 
-
-    // Change hash for page-reload
-    $('.nav-tabs a').on('shown', function (e) {
-      window.location.hash = e.target.hash;
-    })
-*/
     // #################################
     // ##
     // ## The following JS code allow t

pboard/pboard/templates/document-widgets-tabs.mak

@@ -295,19 +295,16 @@
   </div>
 </%def>
 
-<%def name="FilesTabContent(poNode)">
-  <h4>${_('Attachments')}</h4> 
-% if len(poNode.getFiles())<=0:
-  <p class="pod-grey">${_("There is currently no attachment.")}<br/></p>
-  <p>${POD.OpenModalButton('create-new-file-modal-form', _(' Attach first file'))}</p>
-% else:
-  <p>${POD.OpenModalButton('create-new-file-modal-form', _(' Attach a file'))}</p>
-% endif
+<%def name="FileTabContent(poNode)">
+  <h4>${_('Attachments')}</h4>
+  
+  % if len(poNode.getFiles())<=0:
+    <p class="pod-grey">${_("There is currently no attachment.")}<br/></p>
+    <p>${POD.OpenModalButton(h.ID.AddFileModalForm(poNode), _(' Attach first file'))}</p>
+  % else:
+    <p>${POD.OpenModalButton(h.ID.AddFileModalForm(poNode), _(' Attach a file'))}</p>
+  % endif
 
-  ${DOC.FileEditModalDialog(poNode.node_id, None, tg.url('/api/create_file'), 'create-new-file-modal-form', 'Add a new file')}
-
-
-  <!-- LIST OF FILES -->
   <div>
     % if len(poNode.getFiles())>0:
       % for loFile in poNode.getFiles():
@@ -331,3 +328,156 @@
     % endif
   </div>
 </%def>
+
+<%def name="SubdocumentContent(poNode)">
+  <h4>${_('Sub-documents')}</h4>
+  
+  % if len(poNode.getChildren())<=0:
+    <p class="pod-grey">${_("There is currently no child documents.")}</p>
+  % endif
+  <p>${POD.OpenModalButton(h.ID.AddDocumentModalForm(poNode), _('Add a document'))}</p>
+
+  % if len(poNode.getChildren())>0:
+    <div>
+      % for subnode in poNode.getChildren():
+        <p style="list-style-type:none;">
+          <i class="fa-fw ${subnode.getIconClass()}"></i>
+            <a href="${tg.url('/document/%i'%subnode.node_id)}">
+              ${subnode.data_label}
+            </a>
+        </p>
+      % endfor
+    </div>
+  % endif
+</%def>
+
+<%def name="EventTabContent(poNode)">
+  <h4>${_('Calendar')}</h4>
+  
+  % if len(poNode.getEvents())<=0:
+    <p class="pod-grey">${_("The calendar is empty.")}<br/></p>
+    <p>${POD.OpenModalButton(h.ID.AddEventModalForm(poNode), _(' Add first event'))}</p>
+  % else:
+    <p>${POD.OpenModalButton(h.ID.AddEventModalForm(poNode), _(' Add an event'))}</p>
+  % endif
+
+  % if len(poNode.getEvents())>0:
+    <table class="table table-striped table-hover table-condensed">
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Time</th>
+          <th>
+            Event
+          </th>
+          <th>
+            <a href="" title="Add an event"><i class="icon-g-plus"></i></a>
+          </th>
+        </tr>
+      </thead>
+      % for event in poNode.getEvents():
+        <tr class="item-with-data-popoverable" data-content="${event.data_content}" rel="popover" data-placement="left" data-trigger="hover">
+          <td>${event.getFormattedDate(event.data_datetime)}</td>
+          <td>${event.getFormattedTime(event.data_datetime)}</td>
+          <td>${event.data_label}</td>
+        </tr>
+  ## FIXME                    <script>
+  ##                      $('.item-with-data-popoverable').popover({ html: true});
+  ##                    </script>
+
+      % endfor
+    </table>
+  % endif
+</%def>
+
+<%def name="ContactTabContent(poNode)">
+  <h4>${_('Address book')}</h4> 
+  % if len(poNode.getContacts())<=0:
+    <p class="pod-grey">${_("The address book is empty.")}<br/></p>
+    <p>${POD.OpenModalButton(h.ID.AddContactModalForm(poNode), _('Add first contact'))}</p>
+  % else:
+    <p>${POD.OpenModalButton(h.ID.AddContactModalForm(poNode), _('Add a contact'))}</p>
+  % endif
+
+  <!-- LIST OF CONTACT NODES -->
+  % for contact in poNode.getContacts():
+    <div class="well">
+      <legend class="text-info">
+        ${contact.data_label}
+        ## TODO - 2013-11-20 - Use the right form in order to update meta-data
+        <a class="pull-right" href="${tg.url('/document/%i'%contact.node_id)}"><i class="fa fa-edit"></i></a>
+      </legend>
+      
+      <div>
+        ## FIXME - D.A. - 2013-11-15 - Implement localisation stuff <a style='float: right;' href="" title='${_('Search on google maps')}'><i class='icon-g-google-maps'></i></a>
+        ${contact.data_content|n}
+      </div>
+    </div>
+  % endfor
+</%def>
+
+<%def name="CommentTabContent(poNode)">
+  <h4>${_('Comment thread')}</h4>
+  
+  % if len(poNode.getComments())<=0:
+    <p class="pod-grey">${_("The comment thread is empty.")}<br/></p>
+  % endif
+
+  % if len(poNode.getComments())>0:
+    % if len(poNode.getComments())>5:
+      ##
+      ## We show a "direct down" button in case the page is too long
+      ##
+      <p>${POD.OpenLinkButton(h.ID.AddCommentInlineForm(), _('Add a comment'))}</p>
+    % endif
+    <div>
+      % for comment in poNode.getComments():
+        <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.')}">${h.ICON.Shared|n}</span>
+            % else:
+              <span class="label label-info" title="${_('Private comment. Click to share.')}">${h.ICON.Private|n}</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
+    </div>
+  % endif
+
+  <form class="form" id="${h.ID.AddCommentInlineForm()}" action="${tg.url('/api/create_comment')}" method="POST">
+    <input type="hidden" name='parent_id' value='${poNode.node_id}'/>
+    <input type="hidden" name='data_label' value=""/>
+    <input type="hidden" id="add_comment_data_content_textarea" name='data_content' />
+    <label>
+      ${_('Write your comment below:')}
+      ${POD.RichTextEditor('add_comment_data_content_textarea_wysiwyg', '', 'boldanditalic')}
+    </label>
+    <label>
+      <input type="checkbox" name='is_shared'/> ${_('Share this comment')}
+    </label>
+    <span class="pull-right">
+      % if len(poNode.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>
+  <script>
+      $('#current-document-add-comment-save-button').on('click', function(e){
+      e.preventDefault(); // We don't want this to act as a link so cancel the link action
+      $('#add_comment_data_content_textarea_wysiwyg').cleanHtml();
+      $('#add_comment_data_content_textarea').val($('#add_comment_data_content_textarea_wysiwyg').html());
+      $('#current-document-add-comment-form').submit();
+    });
+  </script>
+</%def>

pboard/pboard/templates/document-widgets.mak

@@ -24,6 +24,22 @@
   % endif
 </%def>
 
+<%def name="ToolbarMenuItemModal(psTargetModalId, psIconClasses, psMenuLabel)">
+  <li><a href="#${psTargetModalId}" role="button" data-toggle="modal"><i class="${psIconClasses}"></i> ${psMenuLabel}</a></li>
+</%def>
+
+<%def name="ToolbarMenuItemInline(psTargetId, psIconClasses, psMenuLabel)">
+  <li><a href="#${psTargetId}"><i class="${psIconClasses}"></i> ${psMenuLabel}</a></li>
+</%def>
+<%def name="ToolbarMenuItemLink(psTargetUrl, psIconClasses, psMenuLabel, psLinkCss='', psLinkTitle='')">
+  % if psTargetUrl=='#':
+    <li class="disabled"><a href="${psTargetUrl}" class="${psLinkCss}" title="${psLinkTitle}"><i class="${psIconClasses}"></i> ${psMenuLabel}</a></li>
+  % else:
+    <li><a href="${psTargetUrl}" class="${psLinkCss}" title="${psLinkTitle}"><i class="${psIconClasses}"></i> ${psMenuLabel}</a></li>
+  % endif
+</%def>
+
+        
 <%def name="Toolbar(poNode, plNodeStatusList, plRootNodes, psDivId)">
   <div id="${psDivId}">
     <div class="btn-group">
@@ -36,19 +52,22 @@
         <span class="caret"></span>
       </a>
       <ul class="dropdown-menu">
+        <li>
+          <div class="pod-grey strong" ><strong><i class="fa fa-magic"></i> ${_('Current status is...')}</strong><br/></div>
+        </li>
       % for node_status in plNodeStatusList:
         % if node_status.status_id==poNode.getStatus().status_id:
-        <li title="${h.getExplanationAboutStatus(node_status.status_id, current_node.getStatus().status_id)}">
-          <a class="${node_status.css}" href="#"  style="color: #999;">
-            <i class="${node_status.icon_id}"></i> ${node_status.label}
-          </a>
-        </li>
-        % else:
-        <li title="${h.getExplanationAboutStatus(node_status.status_id, current_node.getStatus().status_id)}">
-          <a class="${node_status.css}" href="${tg.url('/api/edit_status?node_id=%i&node_status=%s'%(current_node.node_id, node_status.status_id))}">
-            <i class="${node_status.icon_id}"></i> ${node_status.label}
-          </a>
+          ${ToolbarMenuItemLink('#', node_status.icon_id, node_status.label, 'disabled '+node_status.css, h.getExplanationAboutStatus(node_status.status_id, current_node.getStatus().status_id))}
+        % endif
+      % endfor
+        <li class="divider" role="presentation"></li>
+        <li>
+          <div class=" strong" ><strong><i class="fa fa-magic"></i> ${_('Change to...')}</strong><br/></div>
+          <div class="pod-grey"><i>${_('change the status to...')}</i></div>
         </li>
+      % for node_status in plNodeStatusList:
+        % if node_status.status_id!=poNode.getStatus().status_id:
+          ${ToolbarMenuItemLink(tg.url('/api/edit_status', dict(node_id=current_node.node_id, node_status=node_status.status_id)), node_status.icon_id, node_status.label, node_status.css, h.getExplanationAboutStatus(node_status.status_id, current_node.getStatus().status_id))}
         % endif
       % endfor
       </ul>
@@ -61,15 +80,18 @@
       <ul class="dropdown-menu">
       
         <li>
-          <div class="btn-success strong" ><strong><i class="fa fa-magic"></i> Add New...</strong><br/></div>
-          <div class="pod-grey"><i>create a totally new item...</i></div>
+          <div class="btn-success strong" ><strong><i class="fa fa-magic"></i> ${_('Add New...')}</strong><br/></div>
+          <div class="pod-grey"><i>${_('create a totally new item...')}</i></div>
         </li>
 
-        <li><a><i class="fa fa-file-text-o"></i> Document</a></li>
-        <li><a><i class="fa fa-paperclip"></i> File</a></li>
-        <li><a><i class="fa fa-calendar"></i> Event</a></li>
-        <li><a><i class="fa fa-user"></i> Contact</a></li>
-        <li><a><i class="fa fa-comments-o"></i> Comment</a></li>
+        ${ToolbarMenuItemModal(h.ID.AddDocumentModalForm(current_node), 'fa fa-file-text-o', _('Document'))}
+        ${ToolbarMenuItemModal(h.ID.AddFileModalForm(current_node), 'fa fa-paperclip', _('File'))}
+        ${ToolbarMenuItemModal(h.ID.AddEventModalForm(current_node), 'fa fa-calendar', _('Event'))}
+        ${ToolbarMenuItemModal(h.ID.AddContactModalForm(current_node), 'fa fa-user', _('Contact'))}
+##
+## FIXME - DA - 07-05-2014 - The link below is not working clean
+##
+        ${ToolbarMenuItemInline(h.ID.AddCommentInlineForm(), 'fa fa-comments-o', _('Comment'))}
 
         <li class="divider" role="presentation"></li>
 
@@ -77,12 +99,7 @@
           <div class="btn-warning strong" ><strong><i class="fa fa-link"></i> Add Existing...</strong><br/></div>
           <div class="pod-grey"><i>link to an existing item...</i></div>
         </li>
-        <li><a><i class="fa fa-file-text-o"></i> Document</a></li>
-        <li><a><i class="fa fa-paperclip"></i> File</a></li>
-        <li><a><i class="fa fa-calendar"></i> Event</a></li>
-        <li><a><i class="fa fa-user"></i> Contact</a></li>
-        <li><a><i class="fa fa-comments-o"></i> Comment</a></li>
-
+        <li><p class="pod-grey"><i class="fa fa-danger"></i> coming soon!</p></li>
       </ul>
     </div>
     <div class="btn-group ">
@@ -112,16 +129,20 @@
 <%def name="BreadCrumb(poNode)">
   <ul class="breadcrumb span12">
     <li>
-      <span class="divider"> / Documents /</span>
+      <span class="divider">/</span>
+      <a href="${tg.url('/document/')}">Documents</a>
     </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>
+        <a href="${tg.url('/document/%s'%(breadcrumb_node.node_id))}">${breadcrumb_node.getTruncatedLabel(30)}</a>
       </li>
       % endfor
-      <li class="active">${poNode.data_label}</li>
+      <li class="active">
+        <span class="divider">/</span>
+        ${poNode.data_label}
+      </li>
     % endif
   </ul>
 </%def>
@@ -140,13 +161,16 @@
     <div style="padding: 0.5em 0 0 0">
       <input type="hidden" name="node_id" value="${current_node.node_id}"/>
       <input type="hidden" name="data_content" id="current_node_textarea" />
-      <input
-        type="text"
-        name="data_label"
-        value="${current_node.data_label}"
-        class="span4"
-        placeholder="${_('document title')}"
-      />
+      <label>
+        ${_('Title')}
+        <input
+          type="text"
+          name="data_label"
+          value="${current_node.data_label}"
+          class="span4"
+          placeholder="${_('document title')}"
+        />
+      </label>
     </div>
     <div>
       ${POD.RichTextEditor('current_node_textarea_wysiwyg', current_node.data_content)}
@@ -220,26 +244,32 @@
 <%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 class="well">
+        <strong>${_('Welcome aboard')}</strong>
+        <i class="fa fa-smile-o fa-2x"></i>
       </p>
+      ${_('<p>We suggest you to...<br/><br/></p>')|n}
+      <h4>
+        <i class="fa fa-angle-double-left fa-3x fa-fw pod-blue" style="vertical-align: middle"></i>
+        ${_('work on existing documents')}
+      </h4>
+      <p class="text-center">${_('or')}</p>
+      <h4 class="text-right">
+        ${_('create a new document')}
+        <i class="fa fa-angle-double-down fa-3x fa-fw pod-blue" style="vertical-align: middle"></i>
+      </h4>
       <p class="pull-right">
-        <a href="#create-new-document-modal-form" role="button" class="btn btn-success" data-toggle="modal">
+        <a href="#${h.ID.AddDocumentModalForm()}" role="button" class="btn btn-success" data-toggle="modal">
           <i class="fa fa-plus"></i>
-          ${_('Create your first document')}
+          ${_('Create a new document')}
         </a>
       </p>
   
-      ${DocumentEditModalDialog(None, None, tg.url('/api/create_document'), 'create-new-document-modal-form', 'Create your first document')}
+      ${DocumentEditModalDialog(None, None, tg.url('/api/create_document'), h.ID.AddDocumentModalForm(), 'Create your first document')}
+      <div style="clear: both;"></div>
+      <p class="alert alert-info" style="margin-top: 2em;">
+        <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>
     </div>
     <script>
     </script>
@@ -318,15 +348,15 @@
     aria-labelledby="myModalLabel"
     aria-hidden="true">
     
-   <div class="modal-header">
-## MODAL HEADER
+    <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]
+    ## MODAL HEADER [END]
     </div>
 
     <div class="modal-body">
-## 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}"/>
@@ -355,19 +385,147 @@
           ${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>
+      <script>
+        $('#${psModalId}-form-submit-button').click(function(){
+          $('#${psModalId}-textarea-wysiwyg').cleanHtml();
+          $('#${psModalId}-textarea').val($('#${psModalId}-textarea-wysiwyg').html());
+          $('#${psModalId}-form')[0].submit();
+        });
+      </script>
+    ## MODAL FOOTER [END]
+    </div>
+  </div>
+</%def>
 
-## MODAL BODY [END]
+<%def name="EventEditModalDialog(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' action='${psPostUrl}' method='POST'>
+        <input type="hidden" name='parent_id' value='${current_node.node_id}'/>
+        <fieldset>
+          <label>
+            ${_('Event')}
+            <input type="text" name='data_label' placeholder="Event"/>
+          </label>
+          <label>
+            ${_('Date and time')}
+            <div class="datetime-picker-input-div input-append date">
+              <input name='data_datetime' data-format="dd/MM/yyyy hh:mm" type="text" placeholder="date and time"/>
+              <span class="add-on"><i data-time-icon="icon-g-clock" data-date-icon="icon-g-calendar"></i></span>
+            </div>
+          </label>
+          <label>
+            ${_('Event description:')}
+            <div>
+              <input type="hidden" name="data_content" id="${psModalId}-textarea" />
+              ${POD.RichTextEditor(psModalId+'-textarea-wysiwyg', poNode.data_content if poNode!=None else '', 'boldanditalic')}
+            </div>
+          </label>
+        </fieldset>
+      </form>
+    ###### MODAL BODY [END]
     </div>
     
     <div class="modal-footer">
-## 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>
+      <script>
+        $('#${psModalId}-form-submit-button').click(function(){
+          $('#${psModalId}-textarea-wysiwyg').cleanHtml();
+          $('#${psModalId}-textarea').val($('#${psModalId}-textarea-wysiwyg').html());
+          $('#${psModalId}-form')[0].submit();
+        });
+      </script>
+    ###### MODAL FOOTER [END]
+    </div>
+  </div>
+</%def>
+
+<%def name="ContactEditModalDialog(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}">
+          % 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>
+            ${_('Contact name and firstname')}
+            <input
+              type="text"
+              name="data_label"
+              value="${poNode.data_label if poNode!=None else ''}"
+              class="span4"
+              placeholder="${_('name, firstname, title...')}"
+            />
+          </label>
+        </div>
+        <div>
+          <label>${_('Address, phone, email, company...')}</label>
+          ${POD.RichTextEditor(psModalId+'-textarea-wysiwyg', poNode.data_content if poNode!=None else '', 'boldanditalic')}
+        </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();
@@ -375,6 +533,7 @@
           $('#${psModalId}-form')[0].submit();
         });
       </script>
+    ## MODAL FOOTER [END]
     </div>
   </div>
 </%def>

pboard/pboard/templates/document.mak

@@ -18,13 +18,14 @@
       <a href="${tg.url('/document')}" title="${_('Root')}">
         ${_('Root')}
       </a>
-      <div class="pod-toolbar">
-        <a href="${tg.url('/api/create_document?parent_id=0')}" title="${_('Add child document')}"><i class="fa fa-plus-circle"></i></a>
-      </div>
     </div>
     <div id="pod-menu-item-0-children">${node_treeview(node_list, 0)}</div>
     
   % else:
+    % if len(node_list)<=0 and indentation==0:
+      <p class="pod-grey">${_('You have no document yet.')}</p>
+    % endif
+    
     % 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 current_node!=None and node.node_id==current_node.node_id else ''}" style="padding-left: ${(indentation+2)*0.5}em; position: relative;">
@@ -41,7 +42,6 @@
           <div class="pod-toolbar">
             <a href="${tg.url('/api/move_node_upper?node_id=%i'%(node.node_id))}" title="${_('Move up')}"><i class="fa fa-arrow-up"></i></a>
             <a href="${tg.url('/api/move_node_lower?node_id=%i'%(node.node_id))}" title="${_('Move down')}"><i class="fa fa-arrow-down"></i></a>
-            <a href="${tg.url('/api/create_document?parent_id=%i'%(node.node_id))}" title="${_('Add child document')}"><i class="fa  fa-plus-circle"></i></a>
           </div>
           <div class="pod-status ${node.getStatus().css}" title='${node.getStatus().label}'>
              <i class='${node.getStatus().icon}'></i>
@@ -107,6 +107,15 @@
           ${DOC.EditForm(current_node)}
         </div>
         <div id='application-metadata-panel' class="span4">
+          ######
+          ##
+          ## HERE WE INCLUDE ALL MODAL DIALOG WHICH WILL BE ACCESSIBLE THROUGH TABS OR MENU
+          ##
+          ${DOC.DocumentEditModalDialog(current_node.node_id, None, tg.url('/api/create_document'), h.ID.AddDocumentModalForm(current_node), _('New Sub-document'))}
+          ${DOC.EventEditModalDialog(current_node.node_id, None, tg.url('/api/create_event'), h.ID.AddEventModalForm(current_node), _('Add an event'))}
+          ${DOC.ContactEditModalDialog(current_node.node_id, None, tg.url('/api/create_contact'), h.ID.AddContactModalForm(current_node), _('Add a new contact'))}
+          ${DOC.FileEditModalDialog(current_node.node_id, None, tg.url('/api/create_file'), h.ID.AddFileModalForm(current_node), _('Add a new file'))}
+          
           <div class="tabbable">
             <ul class="nav nav-tabs" style="margin-bottom: 0em;">
                 <li>${DOC.MetadataTab('#subdocuments', 'tab', _('Subdocuments'), 'fa-file-text-o', current_node.getChildren())}</li>
@@ -116,303 +125,18 @@
                 <li>${DOC.MetadataTab('#files', 'tab', _('Attachments'), 'fa-paperclip', current_node.getFiles())}</li>
                 <li class="pull-right">${DOC.MetadataTab('#accessmanagement', 'tab', _('Access Management'), 'fa-key', [])}</li>
             </ul>
+            ################################
+            ##
+            ## PANEL SHOWING ASSOCIATED DATA AND METADATA
+            ##
+            ################################
             <div class="tab-content">
-                ################################
-                ##
-                ## PANEL SHOWING LIST OF SUB DOCUMENTS
-                ##
-                ################################
-                <!-- DEBUG - D.A. - 2013-11-07 - Not using tags for th moment -->
-                <div class="tab-pane" id="subdocuments">
-                  <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 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 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>
-                    % for subnode in current_node.getChildren():
-                      <p style="list-style-type:none;">
-                        <i class="fa-fw ${subnode.getIconClass()}"></i>
-                          <a href="${tg.url('/document/%i'%subnode.node_id)}">
-                            ${subnode.data_label}
-                          </a>
-                      </p>
-                    % endfor
-                  </div>
-                % endif
-                </div>
-                
-                ################################
-                ##
-                ## PANEL SHOWING LIST OF EVENTS
-                ##
-                ################################
-                <div class="tab-pane active" id="events">
-                  <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>
-                % else:
-                  <p>${POD.AddButton('current-document-add-event-button', True, _(' Add an event'))}</p>
-                % endif
-                
-                  <form style='display: none;' id='current-document-add-event-form' action='${tg.url('/api/create_event')}' method='post' class="well">
-                    <input type="hidden" name='parent_id' value='${current_node.node_id}'/>
-                    <fieldset>
-                      <legend>Add an event</legend>
-                      <label>
-                        <input type="text" name='data_label' placeholder="Event"/>
-                      </label>
-                      <label>
-                        <div class="datetime-picker-input-div input-append date">
-                          <input name='data_datetime' data-format="dd/MM/yyyy hh:mm" type="text" placeholder="date and time"/>
-                          <span class="add-on"><i data-time-icon="icon-g-clock" data-date-icon="icon-g-calendar"></i></span>
-                        </div>
-                      </label>
-                      <label>
-                        <div>
-                          <input type="hidden" id="add_event_data_content_textarea" name='data_content' />
-                          ${POD.RichTextEditor('add_event_data_content_textarea_wysiwyg', '', 'boldanditalic|undoredo|fullscreen')}
-                        </div>
-                      </label>
-                      <label class="checkbox">
-                        <input disabled name='add_reminder' type="checkbox"> add a reminder
-                      </label>
-                      <label>
-                        <div class="datetime-picker-input-div input-append date">
-                          <input disabled name='data_reminder_datetime' data-format="dd/MM/yyyy hh:mm" type="text" placeholder="date and time"/>
-                          <span class="add-on"><i data-time-icon="icon-g-clock" data-date-icon="icon-g-calendar"></i></span>
-                        </div>
-                      </label>
-
-
-                      ${POD.CancelButton('current-document-add-event-cancel-button', True)}
-                      ${POD.SaveButton('current-document-add-event-save-button', True)}
-                    </fieldset>
-                  </form>
-
-                % if len(current_node.getEvents())>0:
-                  <table class="table table-striped table-hover table-condensed">
-                    <thead>
-                      <tr>
-                        <th>Date</th>
-                        <th>Time</th>
-                        <th>
-                          Event
-                        </th>
-                        <th>
-                          <a href="" title="Add an event"><i class="icon-g-plus"></i></a>
-                        </th>
-                      </tr>
-                    </thead>
-                    % for event in current_node.getEvents():
-                      <tr class="item-with-data-popoverable" data-content="${event.data_content}" rel="popover" data-placement="left" data-trigger="hover">
-                        <td>${event.getFormattedDate(event.data_datetime)}</td>
-                        <td>${event.getFormattedTime(event.data_datetime)}</td>
-                        <td>${event.data_label}</td>
-                      </tr>
-  ## FIXME                    <script>
-  ##                      $('.item-with-data-popoverable').popover({ html: true});
-  ##                    </script>
-
-                    % endfor
-                  </table>
-                % endif
-                </div>
-                ##############################
-                ## 
-                ## PANEL SHOWING LIST OF CONTACTS
-                ##
-                ##############################
-                <div class="tab-pane" id="contacts">
-                  <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>
-                % else:
-                  <p>${POD.AddButton('current-document-add-contact-button', True, _(' Add a contact'))}</p>
-                % endif
-
-                  <!-- ADD CONTACT FORM -->
-                  <form style='display: none;' id='current-document-add-contact-form' action='${tg.url('/api/create_contact')}' method='post' class="well">
-                    <input type="hidden" name='parent_id' value='${current_node.node_id}'/>
-                    <fieldset>
-                      <legend>${_('Add a contact')}</legend>
-                      <label>
-                        <input type="text" name='data_label' placeholder="Title"/>
-                      </label>
-                      <label>
-                        <div>
-                          <input type="hidden" id="add_contact_data_content_textarea" name='data_content' />
-                          ${POD.RichTextEditor('add_contact_data_content_textarea_wysiwyg', '', 'boldanditalic|undoredo|fullscreen')}
-                        </div>
-                      </label>
-                      ${POD.CancelButton('current-document-add-contact-cancel-button', True)}
-                      ${POD.SaveButton('current-document-add-contact-save-button', True)}
-                    </fieldset>
-                  </form>
-
-                  <!-- LIST OF CONTACT NODES -->
-                  % for contact in current_node.getContacts():
-                    <div class="well">
-                      <legend class="text-info">
-                        ${contact.data_label}
-                        ## TODO - 2013-11-20 - Use the right form in order to update meta-data
-                        <a class="pull-right" href="${tg.url('/document/%i'%contact.node_id)}"><i class="fa fa-edit"></i></a>
-                      </legend>
-                      
-                      <div>
-                        ## FIXME - D.A. - 2013-11-15 - Implement localisation stuff <a style='float: right;' href="" title='${_('Search on google maps')}'><i class='icon-g-google-maps'></i></a>
-                        ${contact.data_content|n}
-                      </div>
-                    </div>
-                  % endfor
-                </div>
-                ################################
-                ##
-                ## PANEL SHOWING LIST OF COMMENTS
-                ##
-                ################################
-                <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>
-                % endif
-                  <!-- LIST OF COMMENTS -->
-                % if len(current_node.getComments())>0:
-                  <div>
-                    % for comment in current_node.getComments():
-                      <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
-                  </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>
-                ################################
-                ##
-                ## PANEL SHOWING LIST OF FILES
-                ##
-                ################################
-                <div class="tab-pane" id="files">
-                  ${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>
-                % else:
-                  <p>${POD.AddButton('current-document-add-file-button', True, _(' Attach a file'))}</p>
-                % endif
-
-                  <!-- ADD FILE FORM -->
-                  <form style='display: none;' id='current-document-add-file-form' enctype="multipart/form-data" action='${tg.url('/api/create_file')}' method='post' class="well">
-                    <input type="hidden" name='parent_id' value='${current_node.node_id}'/>
-                    <fieldset>
-                      <legend>${_('Add a file')}</legend>
-                      <label>
-                        <input type="text" name='data_label' placeholder="Title"/>
-                      </label>
-                      <label>
-                        <input type="file" name='data_file' placeholder="choose a file..."/>
-                      </label>
-                      <label>
-                        <div>
-                          <input type="hidden" id="add_file_data_content_textarea" name='data_content' />
-                          ${POD.RichTextEditor('add_file_data_content_textarea_wysiwyg', '', 'boldanditalic|undoredo|fullscreen')}
-                        </div>
-                      </label>
-                      ${POD.CancelButton('current-document-add-file-cancel-button', True)}
-                      ${POD.SaveButton('current-document-add-file-save-button', True)}
-                    </fieldset>
-                  </form>
-
-                  <!-- LIST OF FILES -->
-                  <div>
-                % if len(current_node.getFiles())>0:
-                    % for current_file in current_node.getFiles():
-                      <p style="list-style-type:none; margin-bottom: 0.5em;">
-                        <i class="fa fa-paperclip"></i>
-                        <a
-                          href="${tg.url('/document/%i'%current_file.node_id)}"
-                          title="${_('View the attachment')}: ${current_file.data_label}"
-                        >
-                          ${current_file.getTruncatedLabel(50)}
-                        </a>
-                        <a
-                          class="pull-right"
-                          href="${tg.url('/api/get_file_content/%s'%(current_file.node_id))}"
-                          title="${_('View the attachment')}"
-                        >
-                          <i class="fa fa-download"></i>
-                        </a>
-                      </p>
-                    % endfor
-                % endif
-                  </div>
-                </div>
-                
-                
-                ################################
-                ##
-                ## PANEL SHOWING ACCESS MANAGEMENT
-                ##
-                ################################
-                
-                <div class="tab-pane" id="accessmanagement">
-                  ${DOCTABS.AccessManagementTab(current_node)}
-                </div>
-              </div>
+              <div class="tab-pane" id="subdocuments">${DOCTABS.SubdocumentContent(current_node)}</div>
+              <div class="tab-pane active" id="events">${DOCTABS.EventTabContent(current_node)}</div>
+              <div class="tab-pane" id="contacts">${DOCTABS.ContactTabContent(current_node)}</div>
+              <div class="tab-pane" id="comments">${DOCTABS.CommentTabContent(current_node)}</div>
+              <div class="tab-pane" id="files">${DOCTABS.FileTabContent(current_node)}</div>
+              <div class="tab-pane" id="accessmanagement">${DOCTABS.AccessManagementTab(current_node)}</div>
             </div>
           </div>
         </div>

pboard/pboard/templates/master.mak

@@ -55,7 +55,11 @@
 
 <%def name="footer()">
   <div class="footer hidden-tablet hidden-phone text-center">
-    <p class="pod-blue"><i>${_("Using pod, you can: search a job, manage projects, track and manage clients and prospects, document processes and knowledge, ...")}</i></p>
+    <p class="pod-blue">
+      <i>${_("collaborative work  ♦  improved efficiency  ♦  full traceability")}</i>
+      <br/>
+      this is pod
+    </p>
     <hr style="width: 50%; margin: 0.5em auto;"/>
     <p>Copyright &copy; 2013 - ${h.current_year()} pod project.</p>
   </div>

pboard/pboard/templates/pod.mak

@@ -52,11 +52,19 @@
   ${Button(piId, pbWithLabel, 'btn btn-small', psLabel or _('New'), 'fa fa-plus', psLabel or _('New'))}
 % endif
 </%def>
+
+###
+##
+## GREEN CALL-TO-ACTION BUTTONS IN THE INTERFACE
+##
+##
 <%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>
+  <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="OpenLinkButton(psModalAnchor, psLabel)">
+  <a href="#${psModalAnchor}" class="btn btn-success btn-small"><i class="fa fa-plus"></i> ${psLabel}</a>
 </%def>
+## END OF GREEN CALL-TO-ACTION BUTTONS
 
 <%def name='Badge(psLabel, psCssClass="")'>
   <span class='badge ${psCssClass}'>${psLabel}</span>
@@ -160,7 +168,7 @@
       % endif
       % if psMenuOptions.find('fullscreen')>=0:
         <div class="btn-group">
-          <a class="btn btn-primary pod-toggle-full-screen-button"
+          <a class="btn btn-success pod-toggle-full-screen-button"
              title="Toggle fullscreen"
              onclick="toggleFullScreen('#${psRichTextEditorNodeId}-widget', '#${psRichTextEditorNodeId}-widget-inner')"
             >
@@ -214,3 +222,4 @@
 
 </%def>
 
+<%def name="AddDocumentModalFormId(poNode)">add-document-modal-form-${poNode.node_id if poNode!=None else ''}</%def>