Fix GraphsViewer resizing issues. There's a deeper D3 issue to be fixed.

pydio · Oct 16, 2014 · 20d1316 · 20d1316
1 parent 9ea9bcd
commit 20d1316
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/core/src/plugins/editor.ajxp_graphs/class.GraphsViewer.js b/core/src/plugins/editor.ajxp_graphs/class.GraphsViewer.js
@@ -157,7 +157,7 @@ Class.create("GraphsViewer", AbstractEditor, {
         div.update('');
         if(qData['AXIS']){
             var height = 300;
-            var legendY = 270;
+            var legendY = 280;
             if(qData["DIRECTION"] && qData["DIRECTION"] == "horizontal"){
                 height = 600;
             }else if(qData["DIAGRAM"] && qData["DIAGRAM"] == "pie"){
@@ -206,7 +206,7 @@ Class.create("GraphsViewer", AbstractEditor, {
             }
             chart.addLegend("5%", legendY, "90%", 40, "center");
             chart.draw();
-            div.insert({top:('<div class="innerTitle">'+qData['LABEL']+'</div>')});
+            div.insert({top:('<table class="innerTitle"><tr><td>'+qData['LABEL']+'</td></tr></table>')});
             this.updateLinks(chart, queryName, jsonData);
             this.charts.set(queryName, chart);
         }else if(qData["FIGURE"]){
@@ -218,17 +218,21 @@ Class.create("GraphsViewer", AbstractEditor, {
 
     updateChart : function(chart, queryName, jsonData){
         chart.data = jsonData["data"];
-        chart.draw(1000);
+        var qType = this.getQueryByName(queryName)['DIAGRAM'];
+        if(Prototype.Browser.Gecko && (qType == 'bar' || qType == 'plot')){
+            chart.setMargins(80, 20, 40, 145);
+        }
+        chart.draw(500);
         this.updateLinks(chart, queryName, jsonData);
     },
 
     updateLinks : function(chart, queryName, jsonData){
 
-        var container = this.element.down('#' + queryName+'_container');
-        var linkCont = container.down('.chart_links');
+        var container = this.element.down('#' + queryName+'_container').down('tr');
+        var linkCont = container.down('td.chart_links');
         if(!linkCont){
-            linkCont = new Element('div', {className:'chart_links', style:'float: right;margin: 10px 20px;min-width: 190px;text-align: right;'});
-            container.insert({top:linkCont});
+            linkCont = new Element('td', {className:'chart_links', style:'text-align: right;'});
+            container.insert(linkCont);
         }else{
             linkCont.update('');
         }
@@ -248,7 +252,7 @@ Class.create("GraphsViewer", AbstractEditor, {
                     //}
                 }.bind(this));
                 linkCont.insert(input);
-                linkCont.insert('<span> '+this.defaultLinksUnits+'</span>');
+                linkCont.insert('<span> '+this.defaultLinksUnits+' </span>');
                 return;
             }
             var linkData = jsonData['links'].detect(function(l){
@@ -288,7 +292,7 @@ Class.create("GraphsViewer", AbstractEditor, {
                 label = "icon-fast-forward";
                 break;
         }
-        var link = new Element('a').update("<a class='"+label+"' style='display:inline-block; margin: 0 5px;"+(linkActive?"cursor:pointer;color:#399C9B;":"color:#CCCCCC;")+"'></a>");
+        var link = new Element('a').update("<a class='"+label+"' style='display:inline-block; margin: 0 1px;"+(linkActive?"cursor:pointer;color:#399C9B;":"color:#CCCCCC;")+"'></a>");
         if(!Object.isString(linkData)){
             link.observe("click", function(){
                 this.loadData(queryName, chart, linkData['cursor'], linkData['count']);
@@ -317,8 +321,14 @@ Class.create("GraphsViewer", AbstractEditor, {
             //chart.setStyle('width')
         });
         this.charts.each(function(pair){
-            pair.value.draw(500);
-        });
+            var queryName = pair.key;
+            var chart = pair.value;
+            var qType = this.getQueryByName(queryName)['DIAGRAM'];
+            if(Prototype.Browser.Gecko && !Prototype.Browser.IE10plus && (!qType || qType == 'bar' || qType == 'area')){
+                chart.setMargins(80, 20, 40, 145);
+            }
+            chart.draw(500);
+        }.bind(this));
         this.element.fire("editor:resize", size);
     },
 

diff --git a/core/src/plugins/editor.ajxp_graphs/res/css/graphsViewer.css b/core/src/plugins/editor.ajxp_graphs/res/css/graphsViewer.css
@@ -58,4 +58,20 @@ div.cumulated_figure div.figure {
 
 svg text {
     font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif !important;
+}
+
+.tabbed_editor table.innerTitle {
+    border-bottom: 1px solid #6F7B88;
+    text-align: left;
+    color: #4C555F;
+    font-size: 15px;
+    margin: 10px !important;
+    padding: 8px !important;
+    letter-spacing: 1px;
+    width: 94%;
+}
+
+.tabbed_editor table.innerTitle td.chart_links{
+    letter-spacing: 0;
+    font-size: 13px;
 }
diff --git a/core/src/plugins/gui.ajax/res/js/lib/prototype/prototype.js b/core/src/plugins/gui.ajax/res/js/lib/prototype/prototype.js
@@ -16,7 +16,7 @@ var Prototype = {
     return {
       IE:             !!window.attachEvent && !isOpera,
       IE10:           ua.indexOf('MSIE 10') > -1,
-      IE10plus:       ua.indexOf('MSIE 10') > -1 || ua.indexOf('MSIE 11') > -1 || ua.indexOf('MSIE 12') > -1 || ua.indexOf('MSIE 13') > -1,
+      IE10plus:       ua.indexOf('MSIE 10') > -1 || ua.indexOf('MSIE 11') > -1 || ua.indexOf('MSIE 12') > -1 || ua.indexOf('MSIE 13') > -1 || ua.indexOf('.NET4.0') > -1 ,
       Opera:          isOpera,
       WebKit:         ua.indexOf('AppleWebKit/') > -1,
       Gecko:          ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,