Pop-up info message panel for Checkin Checkout actions with info for the user. Panel fades away after a short time if not closed.

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

config/alfresco/templates/webscripts/org/alfresco/portlets/myspaces.get.html.ftl

@@ -104,6 +104,10 @@
          MySpaces.Home="${home.nodeRef}";
       </script>
    </div>
+   <div id="spaceMessagePanel" class="spaceMessagePanel">
+      <div style="margin:2px;float:right"><img src="${url.context}/images/icons/close_portlet_panel.gif" style="cursor:pointer;" width="16" height="16" onclick="MySpaces.closeMessage();"></div>
+      <div class="spaceMessagePanelLabel"></div>
+   </div>
    <div class="spaceFooter">
       <#-- the count value is retrieved and set dynamically from the AJAX webscript output above -->
       <span class="spaceFooterText">Showing <span id="spaceCount">0</span> items(s)</span>
@@ -479,6 +483,28 @@ a.spaceBreadcrumbLink:link, a.spaceBreadcrumbLink:visited, a.spaceBreadcrumbLink
    -moz-border-radius: 5px;
 }
 
+.spaceMessagePanel
+{
+   position: absolute;
+   border: 1px solid #65696C;
+   background-color: #7E8387;
+   width: 250px;
+   *width: 260px;
+   height: 72px;
+   padding: 8px;
+   margin-left: 440px;
+   display: none;
+   z-index: 1;
+   -moz-border-radius: 7px;
+}
+
+.spaceMessagePanelLabel
+{
+   color: white;
+   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
+   font-size: 12px;
+}
+
 #docUpdatePanel
 {
    position: absolute;

source/web/scripts/ajax/myspaces.js

@@ -20,6 +20,10 @@ var MySpaces = {
       {
          MySpaces.removeModal();
          
+         var messagePanel = $('spaceMessagePanel');
+         messagePanel.setStyle('opacity', 0);
+         messagePanel.setStyle('display', 'block');
+         
          // show AJAX loading overlay
          $('spacePanelOverlayAjax').setStyle('visibility', 'visible');
          $('spacePanel').setStyle('visibility', 'hidden');
@@ -680,6 +684,7 @@ var MySpaces = {
                if (response.responseText.indexOf("OK:") == 0)
                {
                   MySpaces.refreshList();
+                  MySpaces.displayMessage("A working copy for the checked out item 'Working Copy of " + name + "' has been created.");
                }
                else
                {
@@ -714,6 +719,7 @@ var MySpaces = {
                if (response.responseText.indexOf("OK:") == 0)
                {
                   MySpaces.refreshList();
+                  MySpaces.displayMessage("Item 'Working Copy of " + name + "' has been checked in.");
                }
                else
                {
@@ -848,14 +854,83 @@ var MySpaces = {
       MySpaces.start();
    },
    
+   /**
+    * Apply a semi-transparent modal overlay skin to the main panel area
+    */
    applyModal: function()
    {
       $("spacePanelOverlay").setStyle('opacity', MySpaces.OVERLAY_OPACITY);
    },
    
+   /**
+    * Remove the modal overlay skin from the main panel area
+    */
    removeModal: function()
    {
       $("spacePanelOverlay").setStyle('opacity', 0);
+   },
+   
+   /**
+    * 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.
+    * 
+    * @param message    Message text to display
+    */
+   displayMessage: function(message)
+   {
+      var panel = $("spaceMessagePanel");
+      if ($defined(panel.timeout))
+      {
+         clearTimeout(panel.timeout);
+         panel.timeout = null;
+      }
+      
+      panel.setStyle("opacity", 0);
+      panel.setStyle("margin-top", -90);
+      
+      panel.getChildren()[1].setHTML(message);
+      
+      panel.fxMessage = new Fx.Styles(
+         panel, 
+         {
+            duration: 2000,
+            transition: Fx.Transitions.sineInOut
+         });
+      panel.fxMessage.start({'margin-top': -70, 'opacity': [0, 0.75]});
+      
+      panel.timeout = window.setTimeout(this.fadeOutMessage, 8000);
+   },
+   
+   /**
+    * Timer callback function to fade out the message panel
+    */
+   fadeOutMessage: function()
+   {
+      var panel = $("spaceMessagePanel");
+      panel.timeout = null;
+      
+      var fxMessage = new Fx.Styles(
+         panel, 
+         {
+            duration: 1000,
+            transition: Fx.Transitions.sineInOut
+         });
+      fxMessage.start({'margin-top': -90, 'opacity': [0]});
+   },
+   
+   /**
+    * Close the message panel immediately when the user clicks the close icon
+    */
+   closeMessage: function()
+   {
+      var panel = $("spaceMessagePanel");
+      if ($defined(panel.timeout))
+      {
+         clearTimeout(panel.timeout);
+         panel.timeout = null;
+      }
+      panel.fxMessage.stop();
+      panel.setStyle("opacity", 0);
    }
 };