My Docs major updates to UI, working AJAX preview, still Firefox only

git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@5584 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261

config/alfresco/templates/client/doclist_preview_panel.ftl

@@ -0,0 +1,38 @@
+<#assign isImage=node.isDocument && (node.mimetype = "image/gif" || node.mimetype = "image/jpeg" || node.mimetype = "image/png")>
+<#assign isVideo=node.isDocument && node.mimetype?starts_with("video/")>
+
+<table width="100%" cellpadding="2" cellspacing="0" border="0">
+   <tr>
+      <td>
+         <div class="docMetapreview">
+      	   <#if node.isDocument && !isImage && !isVideo>
+      	      <#assign c=cropContent(node.properties.content, 512)>
+      	      <#if c?length != 0>
+                  ${c?html?replace('$', '<br>', 'rm')}<#if (c?length >= 512)>...</#if>
+      	      </#if>
+            <#elseif isImage>
+	            <a href="${url.context}${node.url}" target="new"><img src="${url.context}${node.url}" width=120 border=0></a>
+	         <#else>
+	            TBD - Video?
+      	   </#if>
+         </div>
+      </td>
+      <td width="24"></td>
+      <td width="300">
+         <table width="100%" cellpadding="0" cellspacing="0">
+            <tr class="">
+               <td class="docAction docActionCheckout">Checkout</td>
+               <td class="docAction docActionEditDetails">Edit Details</td>
+            </tr>
+            <tr class="">
+               <td class="docAction docActionUpdate">Update</td>
+               <td class="docAction docActionViewContent">View Content</td>
+            </tr>
+            <tr class="">
+               <td class="docAction docActionDelete">Delete</td>
+               <td class="docAction docActionMoreActions">More Actions...</td>
+            </tr>
+         </table>
+      </td>
+   </tr>
+</table>

config/alfresco/templates/webscripts/org/alfresco/portlets/doclist_get_html.ftl

@@ -64,32 +64,34 @@
             <#assign count=count+1>
             <div class="docRow">
                <div class="docIcon">
-                  <a href="${url.context}${d.url}" target="new"><img src="${url.context}${d.icon16}" border=0></a>
+                  <a href="${url.context}${d.url}" target="new"><img class="docIconImage" alt="document" width="16" height="16" src="${url.context}${d.icon16?replace(".gif",".png")}" border=0></a>
                </div>
                <div class="docRowTitle">
                   <div class="docItem">
                      ${d.name?html}
-                     <span class="docInfo" onclick="AlfNodeInfoMgr.toggle('${d.nodeRef}',this);">
+                     <span class="docInfo" onclick="event.cancelBubble=true; AlfNodeInfoMgr.toggle('${d.nodeRef}',this);">
                         <img src="${url.context}/images/icons/popup.gif" class="popupImage" width="16" height="16" />
                      </span>
                   </div>
                </div>
                <div class="docDetail">
-                  <table width=100% cellpadding='2' cellspacing='0' style="margin-left:48px;">
+                  <table cellpadding="2" cellspacing="0" border="0">
       	            <tr>
-      	               <td class="docMetaprop">Description:</td><td class="docMetadata"><#if d.properties.description?exists>${d.properties.description?html}</#if></td>
+      	               <td>
-      	               <td class="docMetaprop">Created:</td><td class="docMetadata">${d.properties.created?datetime}</td>
+      	                  <span class="docMetaprop">Description:</span>&nbsp;<span class="docMetadata"><#if d.properties.description?exists>${d.properties.description?html}<#else>&nbsp;</#if></span><br />
-      	            </tr>
+         	               <span class="docMetaprop">Modified:</span>&nbsp;<span class="docMetadata">${d.properties.modified?datetime}</span><br />
-      	            <tr>
+         	               <span class="docMetaprop">Modified By:</span>&nbsp;<span class="docMetadata">${d.properties.modifier}</span>
-      	               <td class="docMetaprop">Modified:</td><td class="docMetadata">${d.properties.modified?datetime}</td>
+      	               </td>
-      	               <td class="docMetaprop">Created By:</td><td class="docMetadata">${d.properties.creator}</td>
+      	               <td width="24">&nbsp;</td>
-      	            </tr>
+      	               <td>
-      	            <tr>
+      	                  <span class="docMetaprop">Created:</span>&nbsp;<span class="docMetadata">${d.properties.created?datetime}</span><br />
-      	               <td class="docMetaprop">Modified By:</td><td class="docMetadata">${d.properties.modifier}</td>
+         	               <span class="docMetaprop">Created By:</span>&nbsp;<span class="docMetadata">${d.properties.creator}</span><br />
-      	               <td class="docMetaprop">Size:</td><td class="docMetadata">${(d.size/1000)?string("0.##")} KB</td>
+      	                  <span class="docMetaprop">Size:</span>&nbsp;<span class="docMetadata">${(d.size/1000)?string("0.##")} KB</span>
+      	               </td>
       	            </tr>
       	         </table>
                </div>
+               <div class="docResource doclistAjaxWait" id="${d.nodeRef}"></div>
             </div>
             </#if>
          </#if>
@@ -143,6 +145,7 @@ a.filterLinkSelected:link, a.filterLinkSelected:visited
    overflow: auto;
    border-top: 1px solid #CCD4DB;
    border-bottom: 1px solid #CCD4DB;
+   visibility: hidden;
 }
 
 .docRow
@@ -177,7 +180,7 @@ a.filterLinkSelected:link, a.filterLinkSelected:visited
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #515D6B;
-   margin: 0 0 0 24;
+   margin: 0px 0px 0px 24px;
    padding: 0px 8px 6px 8px;
 }
 
@@ -189,13 +192,17 @@ a.filterLinkSelected:link, a.filterLinkSelected:visited
    padding-top: 4px;
 }
 
+.docInfo
+{
+   visibility: hidden;
+}
+
 .docDetail
 {
-   background-color: #CCE7F3;
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
-   margin: 0px;
+   margin: 0px 0px 0px 48px;
    display: none;
    overflow: hidden;
 }
@@ -207,6 +214,18 @@ a.filterLinkSelected:link, a.filterLinkSelected:visited
    border-top: 1px solid #0092DD !important;
 }
 
+.docResource
+{
+   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
+   font-size: 12px;
+   background-color: #bad7e4;
+   color: #000000;
+   margin: 0px 0px 0px 0px;
+   border-top: 1px dotted #0092dd;
+   visibility: hidden;
+   overflow: hidden;
+}
+
 .docMetadata
 {
    color: #515D6B;
@@ -217,6 +236,79 @@ a.filterLinkSelected:link, a.filterLinkSelected:visited
 {
    color: #515D6B;
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
-   font-weight: bold;
+   font-weight: bolder;
 }
+
+.docMetaPreview
+{
+   color: #515D6B;
+   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
+   overflow: hidden;
+   height: 140px;
+   width: 410px;
+   border: 1px solid #0092dd;
+}
+
+.docAction
+{
+   color: #515D6B;
+   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
+   font-size: 9pt;
+   font-weight: bolder;
+   background-color: #c3dce7;
+   background-repeat: no-repeat;
+   background-position: left;
+   width: 87px;
+   height: 28px;
+   border: 1px solid #fff;
+   float: left;
+   display: block;
+   padding: 10px 0px 0px 36px;
+   cursor: pointer;
+}
+
+.docActionCheckout
+{
+   background-image: url(../images/icons/doclist_action_checkout.png);
+   border-bottom: none;
+   border-right: none;
+}
+.docActionEditDetails
+{
+   background-image: url(../images/icons/doclist_action_edit.png);
+   border-bottom: none;
+}
+.docActionUpdate
+{
+   background-image: url(../images/icons/doclist_action_update.png);
+   border-bottom: none;
+   border-right: none;
+}
+.docActionViewContent
+{
+   background-image: url(../images/icons/doclist_action_view.png);
+   border-bottom: none;
+}
+.docActionDelete
+{
+   background-image: url(../images/icons/doclist_action_delete.png);
+   border-right: none;
+}
+.docActionMoreActions
+{
+   padding-left: 20px;
+   padding-right: 16px;
+}
+
+.docListAjaxWait
+{
+   background-image: url(../images/icons/ajax_anim.gif);
+   background-position: center;
+   background-repeat: no-repeat;
+   width: 699px;
+   height: 150px;
+   overflow: hidden;
+}
+ 
+
 </STYLE>

config/alfresco/templates/webscripts/org/alfresco/portlets/mytasks_get_html.ftl

@@ -88,7 +88,7 @@
                   <#if hasDue>
                      (Due: ${due?date})
                   </#if>
-                  <span class="taskInfo" onclick="TaskInfoMgr.toggle('${t.id}',this);">
+                  <span class="taskInfo" onclick="event.cancelBubble=true; TaskInfoMgr.toggle('${t.id}',this);">
                      <img src="${url.context}/images/icons/popup.gif" class="popupImage" width="16" height="16" />
                   </span>
                </div>

source/web/scripts/ajax/doclist.js

@@ -5,6 +5,7 @@ var MyDocs = {
       if ($('docPanel'))
       {
          MyDocs.parseDocPanels();
+         $('docPanel').setStyle('visibility', 'visible');
       }
    },
 
@@ -14,35 +15,101 @@ var MyDocs = {
       var items = $$('#docPanel .docItem');
       var infos = $$('#docPanel .docInfo');
       var details = $$('#docPanel .docDetail');
-      var fxDetail = new Fx.Elements(details, {wait: false, duration: 500, transition: Fx.Transitions.linear});
+      var icons = $$('#docPanel .docIcon');
-      var fxInfo = new Fx.Elements(infos, {wait: false, duration: 500, transition: Fx.Transitions.linear});
+      var imgs = $$('#docPanel .docIconImage');
+      var resources = $$('#docPanel .docResource');
+      var fxItem = new Fx.Elements(items, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxDetail = new Fx.Elements(details, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxInfo = new Fx.Elements(infos, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxIcon = new Fx.Elements(icons, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxResource = new Fx.Elements(resources,
+      {
+         wait: false,
+         duration: 500,
+         transition: Fx.Transitions.linear,
+         onComplete: function()
+         {
+            this.elements.each(function(resource, i)
+            {
+               if (resource.parentNode.isOpen)
+               {
+                  if (resource.isLoaded)
+                  {
+                     resource.needsOverflow = false;
+                     $E('.docMetapreview', resource).setStyle('overflow', 'auto');
+                  }
+                  else
+                  {
+                     // defer style change to ajax complete event
+                     resource.needsOverflow = true;
+                  }
+               }
+            });
+         }
+      });
+      var fxImage = new Fx.Elements(imgs,
+      {
+         wait: false,
+         duration: 300,
+         transition: Fx.Transitions.linear,
+         onComplete: function()
+         {
+            this.elements.each(function(img, i)
+            {
+               img.src = (img.getStyle('height').toInt() == 16) ? img.defSrc : img.bigSrc;
+            });
+         }
+      });
+
       docs.each(function(doc, i)
       {
-         var item = items[i];
+         var item = items[i],
-         var info = infos[i];
+            info = infos[i],
-         var detail = details[i];
+            detail = details[i],
+            img = imgs[i],
+            resource = resources[i];
 
          // animated elements defaults
+         item.defMarginLeft = item.getStyle('margin-left').toInt();
+         item.defFontSize = item.getStyle('font-size').toInt();;
          item.defBColor = (item.getStyle('background-color') == 'transparent') ? '' : item.getStyle('background-color');
          detail.defHeight = 0;
          detail.setStyle('opacity', 0);
          detail.setStyle('display', 'block');
          detail.setStyle('height', 0);
          info.setStyle('opacity', 0);
+         img.defSrc = img.src;
+         img.bigSrc = img.src.replace(/filetypes\//, 'filetypes64/').replace(/.gif/, '.png');
+         resource.defHeight = 0;
+         resource.setStyle('height', 0);
 
          // register 'mouseenter' (subclassed mouseover) event for each doc
          doc.addEvent('mouseenter', function(e)
          {
-            var animInfo = {},
+            var animItem = {},
-            animDetail = {};
+               animDetail = {},
+               animInfo = {};
+               animImage = {};
             // highlight the item title
             doc.addClass('docItemSelected');
+            // move the item title to the right
+            animItem[i] = {
+               'margin-left': [item.getStyle('margin-left').toInt(), 89],
+               'font-size': [item.getStyle('font-size').toInt(), 18]
+            };
             // fade in the info button
-            animInfo[i] = {'opacity': [0, 1]};
+            animInfo[i] = {'opacity': [info.getStyle('opacity'), 1]};
             // slide and fade in the details panel
             animDetail[i] = {
-               'height': [detail.getStyle('height').toInt(), detail.defHeight + 100],
+               'height': [detail.getStyle('height').toInt(), detail.defHeight + 64],
-               'opacity': [detail.getStyle('opacity'), 1]};
+               'opacity': [detail.getStyle('opacity'), 1]
+            };
+            // grow the doctype image
+            animImage[i] = {
+               'height': [img.getStyle('height').toInt(), 64],
+               'width': [img.getStyle('width').toInt(), 64]
+            };
+            img.src = img.bigSrc;
 
             // reset styles on all other docs
             docs.each(function(otherDoc, j)
@@ -50,10 +117,20 @@ var MyDocs = {
                var otherItem = items[j];
                var otherInfo = infos[j];
                var otherDetail = details[j];
-               if (otherDoc != doc)
+               var otherImg = imgs[j];
+               if ((otherDoc != doc) && (!otherDoc.isOpen))
                {
                   // reset selected class?
                   otherDoc.removeClass('docItemSelected');
+                  // move the title back to the left?
+                  var ml = otherItem.getStyle('margin-left').toInt();
+                  if (ml != otherItem.defMarginLeft)
+                  {
+                     animItem[j] = {
+                        'margin-left': [ml, otherItem.defMarginLeft],
+                        'font-size': [otherItem.getStyle('font-size').toInt(), otherItem.defFontSize]
+                     };
+                  }
                   // does this doc detail panel need resetting back to it's default height?
                   var h = otherDetail.getStyle('height').toInt();
                   if (h != otherDetail.defHeight)
@@ -68,32 +145,240 @@ var MyDocs = {
                   {
                      animInfo[j] = {'opacity': [o, 0]};
                   }
+                  // does the image need shrinking?
+                  var ih = otherImg.getStyle('height').toInt();
+                  if (ih != 16)
+                  {
+                     animImage[j] = {
+                        'height': [ih, 16],
+                        'width': [ih, 16]
+                     };
+                  }
                }
             });
-            fxInfo.start(animInfo);
+            fxItem.start(animItem);
             fxDetail.start(animDetail);
+            fxInfo.start(animInfo);
+            fxImage.start(animImage);
+         });
+
+         doc.addEvent('click', function(e)
+         {
+            var animItem = {},
+               animDetail = {},
+               animInfo = {};
+               animImage = {},
+               animResource = {},
+               resourceHeight = resource.getStyle('height').toInt();
+            
+            if (!doc.isOpen)
+            {
+               if (!resource.isLoaded)
+               {
+                  // fire off the ajax request to get the resources for this task
+                  YAHOO.util.Connect.asyncRequest(
+                     "POST",
+                     getContextPath() + '/ajax/invoke/NodeInfoBean.sendNodeInfo',
+                     { 
+                        success: function(response)
+                        {
+                           // remove the ajax waiting animation class
+                           resource.removeClass("doclistAjaxWait");
+                           // populate the resource div with the result
+                           resource.innerHTML = response.responseText;
+                           // flag this resource as loaded
+                           resource.isLoaded = true;
+                           // deferred from transition complete event
+                           if (resource.needsOverflow)
+                           {
+                              $E('.docMetapreview', resource).setStyle('overflow', 'auto');
+                           }
+                        },
+                        failure: function(response)
+                        {
+                           resource.innerHTML = "Sorry, preview currently unavailable.";
+                        },
+                        argument: [resource]
+                     }, 
+                     "noderef=" + resource.id + "&template=doclist_preview_panel.ftl"
+                  );
+               }
+               
+               // open up this document's resources
+               // flag this document as open
+               doc.isOpen = true;
+               
+               // slide and fade in the resources panel
+               animResource[i] = {
+                  'height': [resourceHeight, resource.defHeight + 150],
+                  'opacity': [resource.getStyle('opacity'), 1]};
+   
+               // close other open documents and toggle this one if it's already open
+               docs.each(function(otherDoc, j)
+               {
+                  var otherResource = resources[j],
+                     otherItem = items[j],
+                     otherInfo = infos[j],
+                     otherDetail = details[j],
+                     otherImg = imgs[j];
+                     
+                  if (otherDoc == doc)
+                  {
+                     // continue animations that may have been going on before the click
+                     // move the item title to the right
+                     animItem[j] = {
+                        'margin-left': [otherItem.getStyle('margin-left').toInt(), 89],
+                        'font-size': [otherItem.getStyle('font-size').toInt(), 18]
+                     };
+                     // fade in the info button
+                     animInfo[j] = {'opacity': [otherInfo.getStyle('opacity'), 1]};
+                     // slide and fade in the details panel
+                     animDetail[j] = {
+                        'height': [otherDetail.getStyle('height').toInt(), otherDetail.defHeight + 64],
+                        'opacity': [otherDetail.getStyle('opacity'), 1]
+                     };
+                     // grow the doctype image
+                     animImage[j] = {
+                        'height': [otherImg.getStyle('height').toInt(), 64],
+                        'width': [otherImg.getStyle('width').toInt(), 64]
+                     };
+                  }
+                  else
+                  {
+                     // close any other open documents
+                     otherDoc.isOpen = false;
+
+                     // reset selected class?
+                     otherDoc.removeClass('docItemSelected');
+                     // move the title back to the left?
+                     var ml = otherItem.getStyle('margin-left').toInt();
+                     if (ml != otherItem.defMarginLeft)
+                     {
+                        animItem[j] = {
+                           'margin-left': [ml, otherItem.defMarginLeft],
+                           'font-size': [otherItem.getStyle('font-size').toInt(), otherItem.defFontSize]
+                        };
+                     }
+                     // does this doc detail panel need resetting back to it's default height?
+                     var h = otherDetail.getStyle('height').toInt();
+                     if (h != otherDetail.defHeight)
+                     {
+                        animDetail[j] = {
+                           'height': [h, otherDetail.defHeight],
+                           'opacity': [otherDetail.getStyle('opacity'), 0]};
+                     }
+                     // does the info button need fading out
+                     var o = otherInfo.getStyle('opacity');
+                     if (o != 0)
+                     {
+                        animInfo[j] = {'opacity': [o, 0]};
+                     }
+                     // does the image need shrinking?
+                     var ih = otherImg.getStyle('height').toInt();
+                     if (ih != 16)
+                     {
+                        animImage[j] = {
+                           'height': [ih, 16],
+                           'width': [ih, 16]
+                        };
+                     }
+   
+                     // does this document resource panel need resetting back to it's default height?
+                     var otherHeight = otherResource.getStyle('height').toInt();
+                     if (otherHeight != otherResource.defHeight)
+                     {
+                        animResource[j] = {
+                           'height': [otherHeight, otherResource.defHeight],
+                           'opacity': [otherResource.getStyle('opacity'), 0]};
+                     }
+                     
+                     var otherMeta = $E('.docMetapreview', otherResource)
+                     if (otherMeta)
+                     {
+                        otherMeta.setStyle('overflow', 'hidden');
+                     }
+                  }
+               });
+            }
+            else
+            {
+               // close this document panel
+               // flag this document as closed
+               doc.isOpen = false;
+               
+               // reset resource panel back to it's default height
+               animResource[i] = {
+                  'height': [resourceHeight, resource.defHeight],
+                  'opacity': [resource.getStyle('opacity'), 0]};
+               
+               $E('.docMetapreview', resource).setStyle('overflow', 'hidden');
+            }
+            fxResource.start(animResource);
+            fxItem.start(animItem);
+            fxDetail.start(animDetail);
+            fxInfo.start(animInfo);
+            fxImage.start(animImage);
          });
       });
 
       $('docPanel').addEvent('mouseleave', function(e)
       {
          // handler for mouse leaving the entire doc panel
-         var animInfo = {},
+         var animItem = {},
-         animDetail = {};
+            animDetail = {},
+            animInfo = {},
+            animImage = {};
 
          docs.each(function(doc, i)
          {
-            var item = items[i];
+            var item = items[i],
-            var detail = details[i];
+               detail = details[i],
+               info = infos[i],
+               img = imgs[i];
 
-            doc.removeClass('docItemSelected');
+            if (doc.isOpen)
-            animDetail[i] = {
+            {
-               'height': [detail.getStyle('height').toInt(), detail.defHeight],
+               // continue animations that may have been going on before the click
-               'opacity': [detail.getStyle('opacity'), 0]};
+               // move the item title to the right
-            animInfo[i] = {'opacity': [infos[i].getStyle('opacity'), 0]};
+               animItem[i] = {
+                  'margin-left': [item.getStyle('margin-left').toInt(), 89],
+                  'font-size': [item.getStyle('font-size').toInt(), 18]
+               };
+               // fade in the info button
+               animInfo[i] = {'opacity': [info.getStyle('opacity'), 1]};
+               // slide and fade in the details panel
+               animDetail[i] = {
+                  'height': [detail.getStyle('height').toInt(), detail.defHeight + 64],
+                  'opacity': [detail.getStyle('opacity'), 1]
+               };
+               // grow the doctype image
+               animImage[i] = {
+                  'height': [img.getStyle('height').toInt(), 64],
+                  'width': [img.getStyle('width').toInt(), 64]
+               };
+            }
+            else
+            {
+               doc.removeClass('docItemSelected');
+               animItem[i] = {
+                  'margin-left': [item.getStyle('margin-left').toInt(), item.defMarginLeft],
+                  'font-size': [item.getStyle('font-size').toInt(), item.defFontSize]
+               };
+               animDetail[i] = {
+                  'height': [detail.getStyle('height').toInt(), detail.defHeight],
+                  'opacity': [detail.getStyle('opacity'), 0]
+               };
+               animInfo[i] = {'opacity': [infos[i].getStyle('opacity'), 0]};
+               animImage[i] = {
+                  'height': [img.getStyle('height').toInt(), 16],
+                  'width': [img.getStyle('width').toInt(), 16]
+               };
+            }
          });
-         fxInfo.start(animInfo);
+         fxItem.start(animItem);
          fxDetail.start(animDetail);
+         fxInfo.start(animInfo);
+         fxImage.start(animImage);
       });
    }
 };