Add a small opacity animation on info panel async blocs to avoid heavy blinking.

Author: cdujeu

core/src/plugins/action.share/class.ShareCenter.js

@@ -869,7 +869,10 @@ Class.create("ShareCenter", {
     },
 
     loadInfoPanel : function(container, node){
-        container.down('#ajxp_shared_info_panel .infoPanelTable').update('<div class="infoPanelRow">\
+
+        var mainCont = container.down("#ajxp_shared_info_panel .infoPanelTable");
+        mainCont.addClassName('infopanel_loading');
+        mainCont.update('<div class="infoPanelRow">\
             <div class="infoPanelLabel">'+MessageHash['share_center.55']+'</div>\
             <div class="infoPanelValue"><span class="icon-spinner"></span></div>\
             </div>\
@@ -879,7 +882,7 @@ Class.create("ShareCenter", {
 
             if(jsonData.error){
 
-                container.down("#ajxp_shared_info_panel .infoPanelTable").update('<div class="share_info_panel_main_legend"><span class="icon-warning-sign"></span> '+jsonData["label"]+'</div>');
+                mainCont.update('<div class="share_info_panel_main_legend"><span class="icon-warning-sign"></span> '+jsonData["label"]+'</div>');
 
             }else if(node.isLeaf() && !jsonData['repositoryId']){
 
@@ -917,7 +920,7 @@ Class.create("ShareCenter", {
                     }
                 }
 
-                container.down('#ajxp_shared_info_panel .infoPanelTable').update('\
+                mainCont.update('\
                     <div class="share_info_panel_main_legend">'+MessageHash["share_center.140"+(jsonData['is_expired']?'b':'')]+ '</div>\
                     <div class="infoPanelRow">\
                         <div class="infoPanelLabel">'+MessageHash['share_center.59']+'</div>\
@@ -936,13 +939,12 @@ Class.create("ShareCenter", {
                 ');
 
                 if(linksCount > 1){
-                    container.down('#ajxp_shared_info_panel .infoPanelTable').insert({bottom:'<div class="infoPanelRow">\
+                    mainCont.insert({bottom:'<div class="infoPanelRow">\
                         <div class="infoPanelLabel" colspan="2" style="text-align: center;font-style: italic;">'+MessageHash['share_center.'+(linksCount>2?'104':'105')].replace('%s', linksCount-1)+'</div>\
                     </div>'});
                 }
 
             }else{
-                var mainCont = container.down("#ajxp_shared_info_panel .infoPanelTable");
                 var entries = [];
                 $A(jsonData.entries).each(function(entry){
                     entries.push(entry.LABEL + ' ('+ entry.RIGHT +')');
@@ -1001,6 +1003,7 @@ Class.create("ShareCenter", {
                 t.observe("blur", function(e){ pydio.UI.enableShortcuts();});
                 t.observe("click", function(event){event.target.select();});
             });
+            mainCont.addClassName("infopanel_loading_finished");
             container.up("div[ajxpClass]").ajxpPaneObject.resize();
         }, true);
     },

core/src/plugins/core.conf/standard_conf_actions.xml

@@ -649,6 +649,7 @@
                         <div class="panelHeader">#{shared_string}</div>
                         <div id="ajxp_workspace_info_panel_content"></div>
                         <script>
+                            $("ajxp_workspace_info_panel").addClassName("infopanel_loading");
                             bufferCallback("ajxp_load_repo_info_timer", 300,function(){
                                 if(!$('ajxp_workspace_info_panel_content') || !$('ajxp_workspace_info_panel_content').visible()){
                                     return;
@@ -657,6 +658,7 @@
                                 var conn = new Connexion();
                                 conn.setParameters({get_action:'load_repository_info'});
                                 conn.onComplete = function(transport){
+                                    $("ajxp_workspace_info_panel").addClassName("infopanel_loading_finished");
                                     if(transport.responseJSON && $('ajxp_workspace_info_panel_content')){
                                         var data = transport.responseJSON;
                                         if(!data['core.users']['external']){

core/src/plugins/core.notifications/class.NotificationLoader.js

@@ -297,6 +297,8 @@ Class.create("NotificationLoader", {
 
     loadInfoPanel : function(container, node){
         var label= MessageHash['notification_center.'+(node.isLeaf()?'11': (node.isRoot()?'9': '10'))];
+        var mainContainer = container.down("#ajxp_activity_panel");
+        mainContainer.addClassName("infopanel_loading");
         container.down("#ajxp_activity_panel").update('<div class="panelHeader" style="display: none;">'+label+'</div><div id="activity_results">Nothing</div>');
         var resultPane = container.down("#activity_results");
         if(node.isLeaf()) resultPane.addClassName('leaf_activity');
@@ -327,6 +329,9 @@ Class.create("NotificationLoader", {
             }});
         var pane = container.up('[ajxpClass="InfoPanel"]');
         fRp._rootNode.observe("loaded", function(){
+            if(!mainContainer.hasClassName("infopanel_loading_finished")){
+                mainContainer.addClassName("infopanel_loading_finished");
+            }
             if(pane && pane.ajxpPaneObject){
                 window.setTimeout(function(){
                     pane.ajxpPaneObject.resize();

core/src/plugins/gui.ajax/res/themes/orbit/css/ajaxplorer.css

@@ -3339,6 +3339,14 @@ div.tabulatorContainer div#display_toolbar{
     line-height: 1.5em;
 }
 
+.infopanel_loading{
+    opacity: 0;
+    transition: opacity ease 0.2s;
+}
+.infopanel_loading_finished{
+    opacity: 1;
+}
+
 span.toggleHeader{
     display: inline-block;
     overflow: hidden;