Usability updates for MySpaces and Doclist portlets

git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@6249 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261
2025-08-07 17:49:17 +00:00 · 2007-07-13 16:59:01 +00:00
parent e10fb4c065
commit 4136af3cde
10 changed files with 247 additions and 49 deletions
--- a/config/alfresco/templates/client/doclist_preview_panel.ftl
+++ b/config/alfresco/templates/client/doclist_preview_panel.ftl
@@ -28,7 +28,7 @@
 <#if node.isLocked >
               <td class="docAction docActionEditDetails docActionLocked">Edit Details</td>
 <#else>
-               <td class="docAction docActionEditDetails" onclick="window.open('${url.context}/command/ui/editcontentprops?container=plain&amp;noderef=${node.nodeRef}', '_blank');">Edit Details</td>
+               <td class="docAction docActionEditDetails" onclick="openWindowCallback('${url.context}/command/ui/editcontentprops?container=plain&amp;noderef=${node.nodeRef}', MyDocs.editDetailsCallback);">Edit Details</td>
 </#if>
            </tr>
            <tr>
--- a/config/alfresco/templates/client/myspaces_preview_panel.ftl
+++ b/config/alfresco/templates/client/myspaces_preview_panel.ftl
@@ -43,7 +43,7 @@
 <#if node.isLocked >
               <td class="spaceAction docActionEditDetails docActionLocked">Edit Details</td>
 <#else>
-               <td class="spaceAction docActionEditDetails" onclick="window.open('${url.context}/command/ui/editcontentprops?container=plain&amp;noderef=${node.nodeRef}', '_blank');">Edit Details</td>
+               <td class="spaceAction docActionEditDetails" onclick="openWindowCallback('${url.context}/command/ui/editcontentprops?container=plain&amp;noderef=${node.nodeRef}', MySpaces.editDetailsCallback);">Edit Details</td>
 </#if>
            </tr>
            <tr>
--- a/config/alfresco/templates/webscripts/org/alfresco/portlets/doclist.get.html.ftl
+++ b/config/alfresco/templates/webscripts/org/alfresco/portlets/doclist.get.html.ftl
@@ -50,7 +50,7 @@
            <th><a id="docFilter3" class="docfilterLink <#if filter=3>docfilterLinkSelected</#if>" href="#" onclick="MyDocs.filter(3); return false;">PDF Documents</a></th>
            <th><a id="docFilter4" class="docfilterLink <#if filter=4>docfilterLinkSelected</#if>" href="#" onclick="MyDocs.filter(4); return false;">Recently Modified</a></th>
            <td align=right>
-               <a href="#" onclick="MyDocs.start(); return false;" class="refreshViewLink"><img src="${url.context}/images/icons/reset.gif" border="0" width="16" height="16" style="vertical-align:-25%;padding-right:4px">Refresh</a>
+               <a href="#" onclick="MyDocs.refreshList(); return false;" class="refreshViewLink"><img src="${url.context}/images/icons/reset.gif" border="0" width="16" height="16" style="vertical-align:-25%;padding-right:4px">Refresh</a>
            </td>
         </tr>
      </table>
--- a/config/alfresco/templates/webscripts/org/alfresco/portlets/doclistpanel.get.html.ftl
+++ b/config/alfresco/templates/webscripts/org/alfresco/portlets/doclistpanel.get.html.ftl
@@ -16,7 +16,7 @@
           (filter=3 && d.mimetype="application/pdf") ||
           (filter=4 && (dateCompare(d.properties["cm:modified"],date,weekms) == 1 || dateCompare(d.properties["cm:created"], date, weekms) == 1))>
      <#assign count=count+1>
-      <div class="docRow docRow${(count % 2 = 0)?string("Odd", "Even")}">
+      <div class="docRow docRow${(count % 2 = 0)?string("Odd", "Even")}" id="${d.id}">
         <div class="docIcon">
            <a href="${url.context}${d.url}" target="new"><img class="docIconImage" alt="" width="16" height="16" src="${url.context}${d.icon16?replace(".gif",".png")}" border=0></a>
         </div>
--- a/config/alfresco/templates/webscripts/org/alfresco/portlets/myspaces.get.html.ftl
+++ b/config/alfresco/templates/webscripts/org/alfresco/portlets/myspaces.get.html.ftl
@@ -2,7 +2,7 @@

 <script type="text/javascript" src="/alfresco/scripts/ajax/yahoo/yahoo/yahoo-min.js"></script>
 <script type="text/javascript" src="/alfresco/scripts/ajax/yahoo/connection/connection-min.js"></script>
-<script type="text/javascript" src="/alfresco/scripts/ajax/mootools.v1.11.js"></script>
+<script type="text/javascript" src="/alfresco/scripts/ajax/mootools.v1.11-mjh.js"></script>
 <script type="text/javascript" src="/alfresco/scripts/ajax/common.js"></script>
 <script type="text/javascript" src="/alfresco/scripts/ajax/summary-info.js"></script>
 <script type="text/javascript" src="/alfresco/scripts/ajax/myspaces.js"></script>
@@ -86,7 +86,7 @@
            <th><a class="spacefilterLink <#if filter=3>spacefilterLinkSelected</#if>" href="#" onclick="MySpaces.filter(3); return false;">My Items</a></th>
            <th><a class="spacefilterLink <#if filter=4>spacefilterLinkSelected</#if>" href="#" onclick="MySpaces.filter(4); return false;">Recently Modified</a></th>
            <td align=right>
-               <a href="#" onclick="MySpaces.start(); return false;" class="refreshViewLink"><img src="${url.context}/images/icons/reset.gif" border="0" width="16" height="16" class="spaceImageIcon">Refresh</a>
+               <a href="#" onclick="MySpaces.refreshList(); return false;" class="refreshViewLink"><img src="${url.context}/images/icons/reset.gif" border="0" width="16" height="16" class="spaceImageIcon">Refresh</a>
            </td>
         </tr>
      </table>
--- a/config/alfresco/templates/webscripts/org/alfresco/portlets/myspacespanel.get.html.ftl
+++ b/config/alfresco/templates/webscripts/org/alfresco/portlets/myspacespanel.get.html.ftl
@@ -9,7 +9,7 @@
         (args.f="3" && (d.properties.creator == user || d.properties.modifier == user)) ||
         (args.f="4" && (dateCompare(d.properties["cm:modified"],date,weekms) == 1 || dateCompare(d.properties["cm:created"], date, weekms) == 1)))>
   <#assign count=count+1>
-   <div class="spaceRow spaceRow${(count % 2 = 0)?string("Odd", "Even")}">
+   <div class="spaceRow spaceRow${(count % 2 = 0)?string("Odd", "Even")}" id="${d.id}">
      <div class="spaceIcon">
         <#if d.isDocument>
            <a href="${url.context}${d.url}" target="new" onclick="event.cancelBubble=true"><img class="spaceIconImage" alt="" width="16" height="16" src="${url.context}${d.icon16?replace(".gif",".png")}" border=0></a>
--- a/source/web/jsp/close.jsp
+++ b/source/web/jsp/close.jsp
@@ -1 +1,7 @@
-<script>window.close();</script>
+<script type="text/javascript">
+	if ((window.opener) && (window.opener.alfrescoCallback))
+	{
+		window.opener.alfrescoCallback();
+	}
+	window.close();
+</script>
--- a/source/web/scripts/ajax/common.js
+++ b/source/web/scripts/ajax/common.js
@@ -506,3 +506,39 @@ function uploadCompleteHelper(id, args)
                   upload.path.replace(/.*[\/\\]([^\/\\]+)/, "$1"),
                   args.error != "${UPLOAD_ERROR}" ? args.error : null);
 }
+
+var openWindowCallbackFn = null;
+
+function openWindowCallback(url, callback)
+{
+   // Store the callback function for later
+   openWindowCallbackFn = callback;
+   // Register our "well known" callback function
+   window.alfrescoCallback = openWindowOnCallback;
+   // Use a named window so that only one dialog is active at a time
+   window.open(url, 'alfrescoDialog', 'width=1024,height=768');
+}
+   
+function openWindowOnCallback(fromTimeout)
+{
+   if (typeof(fromTimeout)=='undefined')
+   {
+      window.setTimeout("openWindowOnCallback(true)", 10);
+   }
+   else
+   {
+      // Clear out the global callback function
+      window.alfrescoCallback = null;
+      // Try the callback function
+      try
+      {
+         openWindowCallbackFn();
+      }
+      catch (e)
+      {
+      }
+      openWindowCallbackFn = null;
+   }
+}
+
+
--- a/source/web/scripts/ajax/doclist.js
+++ b/source/web/scripts/ajax/doclist.js
@@ -10,6 +10,7 @@ var MyDocs = {
   Filter: null,
   Home: null,
   Query: null,
+   FxAll: null,

   start: function()
   {
@@ -56,10 +57,18 @@ var MyDocs = {
      // hide the ajax wait panel and show the main doc panel
      $('docPanel').setStyle('visibility', 'visible');
      $('docPanelOverlayAjax').setStyle('visibility', 'hidden');
+
+      if (MyDocs.postInit)
+      {
+         MyDocs.postInit();
+         MyDocs.postInit = null;
+      }
   },

   parseDocPanels: function()
   {
+      MyDocs.FxAll = [];
+
      var docs = $$('#docPanel .docRow');
      var items = $$('#docPanel .docItem');
      var infos = $$('#docPanel .docInfo');
@@ -115,6 +124,14 @@ var MyDocs = {
         }
      });

+      // Store all the effects so we can globally stop them later
+      MyDocs.FxAll.push(fxItem);
+      MyDocs.FxAll.push(fxDetail);
+      MyDocs.FxAll.push(fxInfo);
+      MyDocs.FxAll.push(fxIcon);
+      MyDocs.FxAll.push(fxResource);
+      MyDocs.FxAll.push(fxImage);
+
      docs.each(function(doc, i)
      {
         var item = items[i],
@@ -230,6 +247,9 @@ var MyDocs = {
               animResource = {},
               resourceHeight = resource.getStyle('height').toInt();
            
+            // make sure item title is highlighted
+            doc.addClass('docItemSelected');
+
            if (!doc.isOpen)
            {
               if (!resource.isLoaded)
@@ -449,28 +469,6 @@ var MyDocs = {
      });
   },

-   /**
-    * Update the view filter
-    */
-   filter: function(filter)
-   {
-      if (this.popupPanel != null) return;
-
-      $$('.docfilterLink').each(function(filterLink, i)
-      {
-         if (i == filter)
-         {
-            filterLink.addClass("docfilterLinkSelected");
-         }
-         else
-         {
-            filterLink.removeClass("docfilterLinkSelected");
-         }
-      });
-      MyDocs.Filter = filter;
-      MyDocs.start();
-   },
-
   /**
    * Delete a document item
    */
@@ -478,7 +476,7 @@ var MyDocs = {
   {
      if (confirm("Are you sure you want to delete: " + name))
      {
-         $("docPanelOverlay").setStyle('opacity', MyDocs.OVERLAY_OPACITY);
+         MyDocs.applyModal();
         
         // ajax call to delete item
         YAHOO.util.Connect.asyncRequest(
@@ -489,18 +487,18 @@ var MyDocs = {
               {
                  if (response.responseText.indexOf("OK:") == 0)
                  {
-                     MyDocs.start();
+                     MyDocs.refreshList();
                  }
                  else
                  {
                     alert("Error during delete of item: " + response.responseText);
-                     $("docPanelOverlay").setStyle('opacity', 0);
+                     MyDocs.removeModal();
                  }
               },
               failure: function(response)
               {
                  alert("Error during delete of item: " + response.responseText);
-                  $("docPanelOverlay").setStyle('opacity', 0);
+                  MyDocs.removeModal();
               }
            }, 
            "noderef=" + noderef
@@ -513,7 +511,7 @@ var MyDocs = {
    */
   checkoutItem: function(name, noderef)
   {
-      $("docPanelOverlay").setStyle('opacity', MyDocs.OVERLAY_OPACITY);
+      MyDocs.applyModal();

      // ajax call to delete item
      YAHOO.util.Connect.asyncRequest(
@@ -524,18 +522,18 @@ var MyDocs = {
            {
               if (response.responseText.indexOf("OK:") == 0)
               {
-                  MyDocs.start();
+                  MyDocs.refreshList();
               }
               else
               {
                  alert("Error during check out of item: " + response.responseText);
-                  $("docPanelOverlay").setStyle('opacity', 0);
+                  MyDocs.removeModal();
               }
            },
            failure: function(response)
            {
               alert("Error during check out of item: " + response.responseText);
-               $("docPanelOverlay").setStyle('opacity', 0);
+               MyDocs.removeModal();
            }
         }, 
         "noderef=" + noderef
@@ -547,7 +545,7 @@ var MyDocs = {
    */
   checkinItem: function(name, noderef)
   {
-      $("docPanelOverlay").setStyle('opacity', MyDocs.OVERLAY_OPACITY);
+      MyDocs.applyModal();

      // ajax call to delete item
      YAHOO.util.Connect.asyncRequest(
@@ -558,18 +556,18 @@ var MyDocs = {
            {
               if (response.responseText.indexOf("OK:") == 0)
               {
-                  MyDocs.start();
+                  MyDocs.refreshList();
               }
               else
               {
                  alert("Error during check in of item: " + response.responseText);
-                  $("docPanelOverlay").setStyle('opacity', 0);
+                  MyDocs.removeModal();
               }
            },
            failure: function(response)
            {
               alert("Error during check in of item: " + response.responseText);
-               $("docPanelOverlay").setStyle('opacity', 0);
+               MyDocs.removeModal();
            }
         }, 
         "noderef=" + noderef
@@ -643,7 +641,7 @@ var MyDocs = {
   {
      if (error == null)
      {
-         MyDocs.start();
+         MyDocs.refreshList();
      }
      else
      {
@@ -669,8 +667,104 @@ var MyDocs = {
      {
         this.fxOverlay.start(0);
      }
-   }
+   },
   
+   /**
+    * Update the view filter
+    */
+   filter: function(filter)
+   {
+      if (this.popupPanel != null) return;
+
+      $$('.docfilterLink').each(function(filterLink, i)
+      {
+         if (i == filter)
+         {
+            filterLink.addClass("docfilterLinkSelected");
+         }
+         else
+         {
+            filterLink.removeClass("docfilterLinkSelected");
+         }
+      });
+      MyDocs.Filter = filter;
+      MyDocs.refreshList(true);
+   },
+
+   /**
+    * Refresh the main data list contents within the docPanel container
+    */
+   refreshList: function(reopenActive)
+   {
+      // do we want to remember which panel was open?
+      if (reopenActive)
+      {
+         // do we have an open panel?
+         var openPanel = $E('#docPanel .docItemSelected');
+         var openPanelId = null;
+         if (openPanel != null)
+         {
+            openPanelId = openPanel.id;
+            // Re-open the panel if the id still exists
+            MyDocs.postInit = function()
+            {
+               if ($(openPanelId))
+               {
+                  $(openPanelId).fireEvent("click");
+   
+                  // scroll the open panel into view               
+                  var fxScroll = new Fx.Scroll($('docPanel'),
+                  {
+                     duration: MyDocs.ANIM_LENGTH,
+                     transition: Fx.Transitions.linear
+                  });
+                  fxScroll.toElement($(openPanelId));
+               }
+            }
+         }
+      }
+
+      // empty the main panel div and restart by reloading the panel contents
+      var docPanel = $('docPanel');
+      docPanel.setStyle('visibility', 'hidden');
+      // show the ajax wait panel
+      $('docPanelOverlayAjax').setStyle('visibility', 'visible');
+      
+      // Stop all the animation effects
+      MyDocs.FxAll.each(function(fx, i)
+      {
+         fx.stop();
+      });
+      
+      docPanel.empty();
+      docPanel.removeEvents('mouseleave');
+      MyDocs.start();
+   },
+   
+   /**
+    * Apply a semi-transparent modal overlay skin to the main panel area
+    */
+   applyModal: function()
+   {
+      $("docPanelOverlay").setStyle('opacity', MyDocs.OVERLAY_OPACITY);
+   },
+   
+   /**
+    * Remove the modal overlay skin from the main panel area
+    */
+   removeModal: function()
+   {
+      $("docPanelOverlay").setStyle('opacity', 0);
+   },
+   
+   /**
+    * Called when the Edit Details dialog returns
+    */
+   editDetailsCallback: function()
+   {
+      // Refresh the inner panel
+      MyDocs.refreshList(true);
+   }
 };

 window.addEvent('load', MyDocs.start);
--- a/source/web/scripts/ajax/myspaces.js
+++ b/source/web/scripts/ajax/myspaces.js
@@ -13,6 +13,7 @@ var MySpaces = {
   ServiceContext: null,
   popupPanel: null,
   ScriptUrlEncoder: null,
+   FxAll: null,
   
   start: function()
   {
@@ -77,6 +78,12 @@ var MySpaces = {
      // hide the ajax wait panel and show the main spaces panel
      $('spacePanelOverlayAjax').setStyle('visibility', 'hidden');
      $('spacePanel').setStyle('visibility', 'visible');
+
+      if (MySpaces.postInit)
+      {
+         MySpaces.postInit();
+         MySpaces.postInit = null;
+      }
   },

   /**
@@ -85,6 +92,8 @@ var MySpaces = {
    */
   parseSpacePanels: function()
   {
+      MySpaces.FxAll = [];
+      
      var spaces = $$('#spacePanel .spaceRow');
      var items = $$('#spacePanel .spaceItem');
      var infos = $$('#spacePanel .spaceInfo');
@@ -94,9 +103,13 @@ var MySpaces = {
      var imgs64 = $$('#spacePanel .spaceIconImage64');
      var resources = $$('#spacePanel .spaceResource');
      var fxItem = new Fx.Elements(items, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      MySpaces.FxAll.push(fxItem);
      var fxDetail = new Fx.Elements(details, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      MySpaces.FxAll.push(fxDetail);
      var fxInfo = new Fx.Elements(infos, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      MySpaces.FxAll.push(fxInfo);
      var fxIcon = new Fx.Elements(icons, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      MySpaces.FxAll.push(fxIcon);
      var fxResource = new Fx.Elements(resources,
      {
         wait: false,
@@ -126,6 +139,7 @@ var MySpaces = {
            });
         }
      });
+      MySpaces.FxAll.push(fxResource);
      var fxImage = new Fx.Elements(imgs,
      {
         wait: false,
@@ -139,7 +153,8 @@ var MySpaces = {
            });
         }
      });
-
+      MySpaces.FxAll.push(fxImage);
+      
      spaces.each(function(space, i)
      {
         var item = items[i],
@@ -255,6 +270,9 @@ var MySpaces = {
               animResource = {},
               resourceHeight = resource.getStyle('height').toInt();
            
+            // make sure item title is highlighted
+            space.addClass('spaceItemSelected');
+
            if (!space.isOpen)
            {
               if (!resource.isLoaded)
@@ -295,12 +313,12 @@ var MySpaces = {
               // open up this space's resources
               // flag this space as open
               space.isOpen = true;
-               
+
               // slide and fade in the resources panel
               animResource[i] = {
                  'height': [resourceHeight, resource.defHeight + MySpaces.RESOURCE_PANEL_HEIGHT],
                  'opacity': [resource.getStyle('opacity'), 1]};
-   
+               
               // close other open space and toggle this one if it's already open
               spaces.each(function(otherSpace, j)
               {
@@ -836,19 +854,54 @@ var MySpaces = {
         }
      });
      MySpaces.Filter = filter;
-      MySpaces.refreshList();
+      MySpaces.refreshList(true);
   },

   /**
    * Refresh the main data list contents within the spacePanel container
    */
-   refreshList: function()
+   refreshList: function(reopenActive)
   {
+      // do we want to remember which panel was open?
+      if (reopenActive)
+      {
+         // do we have an open panel?
+         var openPanel = $E('#spacePanel .spaceItemSelected');
+         var openPanelId = null;
+         if (openPanel != null)
+         {
+            openPanelId = openPanel.id;
+            // Re-open the panel if the id still exists
+            MySpaces.postInit = function()
+            {
+               if ($(openPanelId))
+               {
+                  $(openPanelId).fireEvent("click");
+   
+                  // scroll the open panel into view               
+                  var fxScroll = new Fx.Scroll($('spacePanel'),
+                  {
+                     duration: MySpaces.ANIM_LENGTH,
+                     transition: Fx.Transitions.linear
+                  });
+                  fxScroll.toElement($(openPanelId));
+               }
+            }
+         }
+      }
+
      // empty the main panel div and restart by reloading the panel contents
      var spacePanel = $('spacePanel');
      spacePanel.setStyle('visibility', 'hidden');
      // show the ajax wait panel
      $('spacePanelOverlayAjax').setStyle('visibility', 'visible');
+      
+      // Stop all the animation effects
+      MySpaces.FxAll.each(function(fx, i)
+      {
+         fx.stop();
+      });
+      
      spacePanel.empty();
      spacePanel.removeEvents('mouseleave');
      MySpaces.start();
@@ -870,6 +923,15 @@ var MySpaces = {
      $("spacePanelOverlay").setStyle('opacity', 0);
   },
   
+   /**
+    * Called when the Edit Details dialog returns
+    */
+   editDetailsCallback: function()
+   {
+      // The edit details dialog window has closed
+      MySpaces.refreshList(true);
+   },
+   
   /**
    * Display a message bubble of helpful info to the user. Calling this function in quick 
    * succession will cause previous message to be lost as the new ones are displayed.