Merge branch 'master' of bitbucket.org:lebouquetin/protov1

doc/database/pod-upgrade-0.3.0_to_0.4.0.sql

     FROM pod_nodes_history
     ORDER BY node_id, updated_at DESC;
 
+CREATE OR REPLACE RULE pod_insert_new_node AS ON INSERT
+TO pod_nodes
+DO INSTEAD INSERT INTO pod_nodes_history (node_id, parent_id, node_order, node_type, created_at, updated_at, 
+       data_label, data_content, data_datetime, node_status, data_reminder_datetime, 
+       data_file_name, data_file_content, data_file_mime_type, parent_tree_path, 
+       node_depth, owner_id, version_id, is_shared, is_public, public_url_key) VALUES (nextval('pod_nodes__node_id__sequence'), NEW.parent_id, NEW.node_order, NEW.node_type, NEW.created_at, NEW.updated_at, NEW.data_label, NEW.data_content, NEW.data_datetime, NEW.node_status, NEW.data_reminder_datetime, NEW.data_file_name, NEW.data_file_content, NEW.data_file_mime_type, NEW.parent_tree_path, NEW.node_depth, NEW.owner_id, nextval('pod_nodes_version_id_sequence'), NEW.is_shared, NEW.is_public, NEW.public_url_key)
+RETURNING node_id, parent_id, node_order, node_type, created_at, updated_at, 
+       data_label, data_content, data_datetime, node_status, data_reminder_datetime, 
+       data_file_name, data_file_content, data_file_mime_type, parent_tree_path, 
+       node_depth, owner_id, is_shared, is_public, public_url_key;
 
+CREATE OR REPLACE FUNCTION pod_update_node() RETURNS trigger AS $$
+BEGIN
+INSERT INTO pod_nodes_history (node_id, parent_id, node_order, node_type, created_at, updated_at, 
+       data_label, data_content, data_datetime, node_status, data_reminder_datetime, 
+       data_file_name, data_file_content, data_file_mime_type, parent_tree_path, 
+       node_depth, owner_id, version_id, is_shared, is_public, public_url_key) VALUES (NEW.node_id, NEW.parent_id, NEW.node_order, NEW.node_type, NEW.created_at, NEW.updated_at, NEW.data_label, NEW.data_content, NEW.data_datetime, NEW.node_status, NEW.data_reminder_datetime, NEW.data_file_name, NEW.data_file_content, NEW.data_file_mime_type, NEW.parent_tree_path, NEW.node_depth, NEW.owner_id, nextval('pod_nodes_version_id_sequence'), NEW.is_shared, NEW.is_public, NEW.public_url_key);
+return new;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE TRIGGER pod_update_node_tg INSTEAD OF UPDATE ON pod_nodes FOR EACH ROW EXECUTE PROCEDURE pod_update_node();

pboard/pboard/config/app_cfg.py

 base_config = AppConfig()
 base_config.renderers = []
 base_config.use_toscawidgets = False
-base_config.use_toscawidgets2 = False
+base_config.use_toscawidgets2 = True
 
 base_config.package = pboard
 

pboard/pboard/controllers/api.py

       redirect(lurl('/document/%i'%(loNewNode.parent_id)))
 
     @expose()
-    def create_comment(self, parent_id=None, data_label='', data_content='', **kw):
+    def create_comment(self, parent_id=None, data_label='', data_content='', is_shared='', **kw):
       loCurrentUser   = pld.PODStaticController.getCurrentUser()
       loApiController = pld.PODUserFilteredApiController(loCurrentUser.user_id)
-      
+
       loNewNode = loApiController.createNode()
       loNewNode.parent_id     = int(parent_id)
       loNewNode.node_type     = pmd.PBNodeType.Comment
       loNewNode.data_label    = data_label
       loNewNode.data_content  = data_content
+      if is_shared=='on':
+        loNewNode.is_shared = True
 
       pm.DBSession.flush()
       redirect(lurl('/document/%i'%(loNewNode.parent_id)))
       redirect(lurl('/document/%s'%(node_id)))
 
     @expose()
-    def create_document(self, parent_id=None):
+    def create_document(self, parent_id=None, data_label='', data_content=''):
       loCurrentUser   = pld.PODStaticController.getCurrentUser()
       loApiController = pld.PODUserFilteredApiController(loCurrentUser.user_id)
-      
+
+      lsNodeName = 'Document with no name...'
+      if int(parent_id)!=0:
+        loParent = loApiController.getNode(parent_id)
+        lsNodeName = 'Subdocument of (%s)' % loParent.data_label
+
       loNewNode = loApiController.createDummyNode()
-      loNewNode.data_label   = 'New document'
+      loNewNode.data_label   = lsNodeName
       loNewNode.data_content = 'insert content...'
-      if int(parent_id)==0:
-        loNewNode.parent_id = None
-      else:
+
+      if data_label!='':
+        loNewNode.data_label = data_label
+      if data_content!='':
+        loNewNode.data_content = data_content
+
+      if int(parent_id)!=0:
         loNewNode.parent_id = parent_id
 
       pm.DBSession.flush()
       flash(_('Documents re-indexed'), 'info')
       redirect(lurl('/document/%s'%(back_to_node_id)))
 
+    @expose()
+    def toggle_share_status(self, node_id):
+      loCurrentUser   = pld.PODStaticController.getCurrentUser()
+      loApiController = pld.PODUserFilteredApiController(loCurrentUser.user_id)
+      loNode = loApiController.getNode(node_id)
+      if loNode.owner_id==loCurrentUser.user_id:
+        loNode.is_shared = not loNode.is_shared
+      # FIXME - DA. - 2014-05-06
+      # - if root node, then exception
+      # - this redirect is done in order to be adapted to comment share status toggle
+      redirect(lurl('/document/%s#tab-comments'%(loNode._oParent.node_id)))

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/lib/dbapi.py

 
   def createDummyNode(self):
     loNewNode = self.createNode()
-    loNewNode.data_label   = 'New document'
-    loNewNode.data_content = 'insert content...'
+    loNewNode.data_label   = ''
+    loNewNode.data_content = ''
     return loNewNode
 
 
   def getNode(self, liNodeId):
     liOwnerIdList = self._getUserIdListForFiltering()
-    if liNodeId==0:
-      return DBSession.query(pbmd.PBNode).options(joinedload_all("_lAllChildren")).filter(pbmd.PBNode.owner_id.in_(liOwnerIdList)).first()
-    else:
+    if liNodeId!=0:
       return DBSession.query(pbmd.PBNode).options(joinedload_all("_lAllChildren")).filter(pbmd.PBNode.node_id==liNodeId).filter(pbmd.PBNode.owner_id.in_(liOwnerIdList)).one()
+    return None
 
 
   def getLastModifiedNodes(self, piMaxNodeNb):

pboard/pboard/lib/helpers.py

       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/model/data.py

 import bs4
 from sqlalchemy import Table, ForeignKey, Column, Sequence
 from sqlalchemy.types import Unicode, Integer, DateTime, Text, LargeBinary
+import sqlalchemy.types as sqlat
 from sqlalchemy.orm import relation, synonym, relationship
 from sqlalchemy.orm import backref
 import sqlalchemy.orm as sqlao
 
 import tg
 from pboard.model import DeclarativeBase, metadata, DBSession
+from pboard.model import auth as pma
 
 # This is the association table for the many-to-many relationship between
 # groups and permissions.
       PBNodeStatus.StatusList['closed'],
       PBNodeStatus.StatusList['deleted']
     ]
-    
-    PBNodeStatus.StatusList.values()
+
     
   @classmethod
   def getStatusItem(cls, psStatusId):
     return len(self._lStaticChildList)
 
   __tablename__ = 'pod_nodes'
+
   node_id          = Column(Integer, Sequence('pod_nodes__node_id__sequence'), primary_key=True)
   parent_id        = Column(Integer, ForeignKey('pod_nodes.node_id'), nullable=True, default=None)
   node_depth       = Column(Integer, unique=False, nullable=False, default=0)
   created_at = Column(DateTime, unique=False, nullable=False)
   updated_at = Column(DateTime, unique=False, nullable=False)
 
+  """
+    if 1, the document is available for other users logged into pod.
+    default is 0 (private document)
+  """
+  is_shared = Column(sqlat.Boolean, unique=False, nullable=False, default=False)
+  """
+    if 1, the document is available through a public - but obfuscated, url
+    default is 0 (document not publicly available)
+  """
+  is_public = Column(sqlat.Boolean, unique=False, nullable=False, default=False)
+  """
+    here is the hash allowing to get the document publicly
+  """
+  public_url_key = Column(Unicode(1024), unique=False, nullable=False, default='')
+
   data_label   = Column(Unicode(1024), unique=False, nullable=False, default='')
   data_content = Column(Text(),        unique=False, nullable=False, default='')
   
 
   _oParent = relationship('PBNode', remote_side=[node_id], backref='_lAllChildren')
   rights = relation('Rights', secondary=group_node_table, backref='nodes')
+  _oOwner = relationship('User', remote_side=[pma.User.user_id], backref='_lAllNodes')
 
   def getChildrenOfType(self, plNodeTypeList, poKeySortingMethod=None, pbDoReverseSorting=False):
     """return all children nodes of type 'data' or 'node' or 'folder'"""
   def getChildNb(self):
     return self.getChildNbOfType([PBNodeType.Data])
 
-  def getChildren(self):
+  def getChildren(self, pbIncludeDeleted=False):
     """return all children nodes of type 'data' or 'node' or 'folder'"""
-    return self.getChildrenOfType([PBNodeType.Node, PBNodeType.Folder, PBNodeType.Data])
+    # return self.getChildrenOfType([PBNodeType.Node, PBNodeType.Folder, PBNodeType.Data])
+    items = self.getChildrenOfType([PBNodeType.Node, PBNodeType.Folder, PBNodeType.Data])
+    items2 = list()
+    for item in items:
+      if pbIncludeDeleted==True or item.node_status!='deleted':
+        items2.append(item)
+    return items2
 
   def getContacts(self):
     """return all children nodes of type 'data' or 'node' or 'folder'"""
           break
       return PBNodeStatus.getStatusItem(lsRealStatusId)
 
-  def getTruncatedLabel(self, piCharNb):
-    lsTruncatedLabel = ''
+  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
+    note: if the node is a file and the data_label is empty, the file name is returned
+    """
+    lsTruncatedLabel = self.data_label
+
+    # 2014-05-06 - D.A. - HACK
+    # if the node is a file and label empty, then use the filename as data_label
+    if self.node_type==PBNodeType.File and lsTruncatedLabel=='':
+      lsTruncatedLabel = self.data_file_name
+
     liMaxLength = int(piCharNb)
-    if len(self.data_label)>liMaxLength:
-      lsTruncatedLabel = self.data_label[0:liMaxLength-1]+'…'
-    else:
-      lsTruncatedLabel = self.data_label
+    if liMaxLength>0 and len(lsTruncatedLabel)>liMaxLength:
+      lsTruncatedLabel = lsTruncatedLabel[0:liMaxLength-1]+'…'
+
     return lsTruncatedLabel
 
   def getTruncatedContentAsText(self, piCharNb):
 
 
 
-"""from sqlalchemy.orm import mapper
-mapper(
-  PBNode,
-  pod_node_table,
-  properties = {'_lAllChildren' : relationship(PBNode, backref=backref('_oParent', remote_side=PBNode.parent_id)) }
-)"""
-
-
-
-"""    children = relationship('TreeNode',
-
-                        # cascade deletions
-                        cascade="all",
-
-                        # many to one + adjacency list - remote_side
-                        # is required to reference the 'remote' 
-                        # column in the join condition.
-                        backref=backref("parent", remote_side='TreeNode.id'),
-
-                        # children will be represented as a dictionary
-                        # on the "name" attribute.
-                        collection_class=attribute_mapped_collection('name'),
-                    ) 
-"""
-
 # This is the association table for the many-to-many relationship between groups and nodes
 group_node_table = Table('pod_group_node', metadata,
         Column('group_id', Integer, ForeignKey('pod_group.group_id',
         Column('node_id', Integer, ForeignKey('pod_nodes.node_id',
             onupdate="CASCADE", ondelete="CASCADE"), primary_key=True),
         Column('rights', Integer)
-)
+)

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"
       $('#voiceBtn').hide();
     }
   };
+  
   function showErrorAlert (reason, detail) {
     var msg='';
     if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
 
   $(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() {
       $("#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");
       $('#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({
       });
     });
 
-/*
-    // 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

+<%inherit file="local:templates.master"/>
+<%namespace name="POD" file="pboard.templates.pod"/>
+<%namespace name="DOC" file="pboard.templates.document-widgets"/>
+
+<%def name="AccessManagementTab(poNode)">
+  ######
+  ##
+  ## THIS WIDGET IS INTENDED TO BE USED ONE TIME ONLY IN A PAGE
+  ##
+  <h4>${_('Share options')}</h4> 
+  <p>
+    This document is
+    % if poNode.is_shared==False:
+      <span class="label label-info">
+        <i class="fa fa-user"></i>
+        ${_('private')}
+      </span>
+    % else:
+      <span class="label label-info">
+        <i class="fa fa-group"></i>
+        ${_('collaborative')}
+      </span>
+    % endif
+  </p>
+  <p>
+    % if poNode.is_shared==True or poNode.is_shared==False:
+      ${_('People working on it are:')}
+######
+##
+## FIXME - SHOW LIST OF GROUPS ALLOWED TO WORK ON THE DOCUMENT
+##
+    <table class="table table-striped table-hover table-condensed">
+      <thead>
+        <tr>
+          <th><i class="fa fa-group"></i> ${_('Groups')}</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tr>
+        <td>Recherche et Développement</td>
+        <td>
+          <span class="label label-success" title="${_('Read access')}">R</span>
+          <span class="label label-warning" title="${_('Write access')}">W</span>
+        </td>
+      </tr>
+      <thead>
+        <tr>
+          <th><i class="fa fa-user"></i> ${_('Users')}</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tr>
+        <td>Damien Accorsi</td>
+        <td>
+          <span class="label label-success">R</span>
+        </td>
+      </tr>
+      <tr>
+        <td>Sylvain Ferot</td>
+        <td>
+          <span class="label label-success">R</span>
+          <span class="label label-warning">W</span>
+        </td>
+      </tr>
+    </table>
+    
+    % endif
+  <p>
+
+######
+##
+## 2014-05-06 - D.A. We do not share documents on internet yet.
+##
+##  <p>
+##    % if poNode.is_public==False:
+##      ${_('This document is not shared on internet')|n}
+##    % else:
+##      ${_('This document is <span class="label label-warning"><i class="fa fa-globe"></i><span>shared</span></span> on internet')|n}.
+##      ${_('The associated url is:')} <a href="FIXME">${poNode.public_url_key}</a>
+##    % endif
+##  </p>
+  <!-- Button to trigger modal -->
+  <a href="#edit-document-share-properties" role="button" class="btn btn-success" data-toggle="modal">
+    <i class="fa fa-edit"></i>
+    ${_('Edit share options')}
+  </a>
+     
+  <!-- Modal -->
+  <div
+    id="edit-document-share-properties"
+    class="modal hide"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="myModalLabel"
+    aria-hidden="true">
+    
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+      <h3 id="myModalLabel">Document sharing options</h3>
+    </div>
+    <div class="modal-body">
+
+      <form id='document-share-form' method="GET" action="${tg.url('/api/set_access_management?node_id=%d'%poNode.node_id)}">
+        <fieldset>
+          <label class="checkbox">
+            <input name="is_shared" type="checkbox" id="document-share-selector" ${('', 'checked')[poNode.is_shared]}/>
+            ${_('Share document with collaborators.')} <i class="fa fa-group"></i>
+          </label>
+          <div id="document-share-people-selector">
+            <p>
+              ${_('Select read and write access for each group or people...')}</p>
+            <script>
+            function updateRights(psUserId) {
+              var ACCESS_NONE = '';
+              var ACCESS_READ = 'R';
+              var ACCESS_WRITE = 'RW';
+              
+              var nodeIdForSelectedUser = 'user-'+psUserId+'-value';
+              var widget = $('#'+nodeIdForSelectedUser);
+              var oldValue = widget.val();
+              var newValue = '';
+              if(oldValue==ACCESS_NONE) {
+                newValue = ACCESS_READ;
+                newHtml = '<span class="label label-success">R</span>';
+              } else if(oldValue==ACCESS_READ) {
+                newValue = ACCESS_WRITE;
+                newHtml = '<span class="label label-success">R</span> <span class="label label-warning">W</span>';
+              } else if (oldValue==ACCESS_WRITE) {
+                newValue = ACCESS_NONE;
+                newHtml = '';
+              } else {
+                newValue = ACCESS_READ;
+                newHtml = '<span class="label label-success">R</span>';
+              }
+              
+              widget.val(newValue);
+              visibleid = 'user-'+psUserId+'-rights';
+              $("#"+visibleid).html(newHtml);
+            }
+            </script>
+            
+            <table class="table table-striped table-hover table-condensed">
+              <thead>
+                <tr>
+                  <th></th>
+                  <th>${_('Group')}</th>
+                  <th>${_('Access')}</th>
+                </tr>
+              </thead>
+    ######
+    ##
+    ## FIXME - SET A DYNAMIC SELECT LIST HERE
+    ##
+              % for loCurrentUser in ((3, 'Research and Development'), (4, 'Sylvain Ferot'), (5, 'Damien Accorsi')):
+              <tr id='user-${loCurrentUser[0]}-rights-row'>
+                <td>
+                  <a
+                    class="btn btn-mini"
+                    onclick="updateRights(${loCurrentUser[0]})"
+                  >
+                    <i class="fa fa-key"></i>
+                  </a>
+                </td>
+                <td class='pod-highlightable-access-management-cell'>
+                  ${loCurrentUser[1]}
+                  <input
+                    type="hidden"
+                    id="user-${loCurrentUser[0]}-value"
+                    name="user[${loCurrentUser[0]}]"
+                    value=""
+                  />
+                </td>
+                <td id="user-${loCurrentUser[0]}-rights" class="pod-right-cell"></td>
+              </tr>
+              % endfor
+            </table>
+          </div>
+        </fieldset>
+######
+##
+## 2014-05-06 - D.A. The documents are not yet sharable through internet
+##
+##        <fieldset>
+##          <label class="checkbox">
+##            <input name="is_public" type="checkbox" id="document-public-selector" ${('', 'checked')[poNode.is_public]}/>
+##            ${_('Internet shared document')}
+##            <i class="fa fa-globe"></i>
+##          </label>
+##          <label id="document-public-key-selector">
+##            ${_('Key')}
+##            <div class="input-append">
+##              <input name="url_public_key" id="document-public-key" type="text">
+##              <span id="document-public-key-refresh-button" class="add-on btn" title="${_('Regenerate key')}">
+##                <i class="fa fa-refresh"></i>
+##              </span>
+##            </div>
+##            <p><a id='document-public-key-url' href="">http://share.pod.com/document/azefnzeioguneriugnreiugnre</a></p>
+##          </label>
+
+        </fieldset>
+####
+## Button replaced by modal dialog button
+##        <button type="submit" class="btn btn-success">
+##          <i class="fa fa-check"></i>
+##          ${_('Save')}
+##        </button>
+      </form>
+    </div>
+    <div class="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="document-share-form-submit-button">
+      <i class="fa fa-check"></i> ${_('Save changes')}
+    </button>
+    </div>
+    <script>
+##
+## 2014-05-06 - D.A. - Documents are not yet sharable through internet
+##
+##        function refreshDocumentPublicKey(psNewPublicKey) {
+##          var lsNewUrl = 'http://share.pod.com/document/'+psNewPublicKey;
+##          $('#document-public-key').val(psNewPublicKey);
+##          $('#document-public-key-url').attr('href', lsNewUrl);
+##          $('#document-public-key-url').text(lsNewUrl);
+##        }
+      
+      function toggleDocumentSharePeopleSelector(pbShowIt) {
+        if (pbShowIt) {
+          $('#document-share-people-selector').show();
+          // $('#document-share-people-selector input').removeAttr("disabled");
+        } else {
+          $('#document-share-people-selector').hide();
+          // $('#document-share-people-selector input').prop('disabled', 'disabled');
+        }
+      }
+
+##
+## 2014-05-06 - D.A. - Documents are not yet sharable through internet
+##
+##        function toggleDocumentPublicKeyGenerator(pbShowIt) {
+##          if (pbShowIt) {
+##            $('#document-public-key-selector input').removeAttr("disabled");
+##            $('#document-public-key-refresh-button').removeProp('disabled');
+##            $('#document-public-key-refresh-button').removeClass('btn-disabled');
+##            $('#document-public-key-selector a').show();
+##            $('#document-public-key-refresh-button').on("click").click(function () {
+##              refreshDocumentPublicKey(generateStringId()); // New random 32-char id
+##            });
+##            if($('#document-public-key-selector input').val()=='') {
+##              refreshDocumentPublicKey(generateStringId());
+##            }
+##          } else {
+##            $('#document-public-key-refresh-button').prop('disabled', true);
+##            $('#document-public-key-refresh-button').addClass('btn-disabled');
+##            $('#document-public-key-selector input').prop('disabled', 'disabled');
+##            $('#document-public-key-refresh-button').off("click");
+##            $('#document-public-key-selector a').hide();
+##          }
+##        }
+##
+##
+##
+
+      // Callbacks setup
+      $('#document-share-selector').change(function () {
+        var checkedValue = $('#document-share-selector').prop("checked");
+        toggleDocumentSharePeopleSelector(checkedValue);
+      });
+
+##        $('#document-public-selector').change(function () {
+##          var checkedValue = $('#document-public-selector').prop("checked");
+##          toggleDocumentPublicKeyGenerator(checkedValue);
+##        });
+
+      // Submit access-management modal dialog form
+      $('#document-share-form-submit-button').click(function(){
+        $('#document-share-form')[0].submit();
+      });
+
+      // Initial setup
+      // Activate or disactivate users selector according
+      // to current state of the is_shared property
+      //
+      // FIXME - 2014-05-06 - This is not working (should be done at document.ready time)
+      // note: putting this in a document.ready callback does not work.
+      //
+      $('#document-share-form')[0].reset();
+      toggleDocumentSharePeopleSelector($('#document-share-selector').prop("checked"));
+##        toggleDocumentPublicKeyGenerator($('#document-public-selector').prop("checked"));  
+##        
+##        refreshDocumentPublicKey($('#document-public-key').val()); // First init
+
+    </script>
+  </div>
+</%def>
+
+<%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
+
+  <div>
+    % if len(poNode.getFiles())>0:
+      % for loFile in poNode.getFiles():
+        <p style="list-style-type:none; margin-bottom: 0.5em;">
+          <i class="fa fa-paperclip"></i>
+          <a
+            href="${tg.url('/document/%i'%loFile.node_id)}"
+            title="${_('View the attachment')}: ${loFile.getTruncatedLabel(-1)}"
+          >
+            ${loFile.getTruncatedLabel(50)}
+          </a>
+          <a
+            class="pull-right"
+            href="${tg.url('/api/get_file_content/%s'%(loFile.node_id))}"
+            title="${_('View the attachment')}"
+          >
+            <i class="fa fa-download"></i>
+          </a>
+        </p>
+      % endfor
+    % 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

 <%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>
   % 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">
-  % 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")}
         <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>
       <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>
 
           <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 ">
       </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>
 <%def name="BreadCrumb(poNode)">
   <ul class="breadcrumb span12">
     <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>
+      <a href="${tg.url('/document/')}">Documents</a>
     </li>
-    % endfor
-    <li class="active">${poNode.data_label}</li>
+    % if poNode!=None:
+      % for breadcrumb_node in poNode.getBreadCrumbNodes():
+      <li>
+        <span class="divider">/</span>
+        <a href="${tg.url('/document/%s'%(breadcrumb_node.node_id))}">${breadcrumb_node.getTruncatedLabel(30)}</a>
+      </li>
+      % endfor
+      <li class="active">
+        <span class="divider">/</span>
+        ${poNode.data_label}
+      </li>
+    % endif
   </ul>
 </%def>
 
     <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)}
   <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="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="#${h.ID.AddDocumentModalForm()}" role="button" class="btn btn-success" data-toggle="modal">
+          <i class="fa fa-plus"></i>
+          ${_('Create a new document')}
+        </a>
+      </p>
+  
+      ${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>
+  </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>
+      <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="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
+      <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>
+      <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>

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">
-        <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 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 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>
     </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="">
           ${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: 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>
                 <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">
-                  <p><strong>Sub-documents</strong></p> 
-                % 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>
-                  </p>
-                % else:
-                  <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>
-                  </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">
-                  <p><strong>Calendar</strong></p> 
-                % 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">
-                  <p><strong>${_('Address book')}</strong></p> 
-                % 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">
-                  <p><strong>${_('Comment thread')}</strong></p> 
-                % 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">
-                    % 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>
-                    % endfor
-                  </table>
-                % endif
-                </div>
-                ################################
-                ##
-                ## PANEL SHOWING LIST OF FILES
-                ##
-                ################################
-                <div class="tab-pane" id="files">
-                  <p><strong>${_('Attachments')}</strong></p> 
-                % 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">
-                  blabla
-                </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>
       </div>
+      % endif
     </div>
   </div>
-
+</div>

pboard/pboard/templates/master.mak

 
 <%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>
             </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>
+
+###
+##
+## 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>
+</%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>
 </%def>
       % 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')"
             >
 
 </%def>
 
+<%def name="AddDocumentModalFormId(poNode)">add-document-modal-form-${poNode.node_id if poNode!=None else ''}</%def>