Fix styles and naming

galaxyproject · Feb 11, 2018 · b098ba7 · b098ba7
1 parent 77813a7
commit b098ba7
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 113 deletions.
diff --git a/client/galaxy/scripts/mvc/visualization/chart/components/screenshot.js b/client/galaxy/scripts/mvc/visualization/chart/components/screenshot.js
@@ -4,7 +4,7 @@ function createPNG(options) {
     if (options.$el.find("svg").length > 0) {
         _svg2png(options);
     } else {
-        _canvas2png(options.$el.find(".charts-viewport-canvas"));
+        _canvas2png(options.$el.find(".charts-viewer-canvas"));
     }
 }
 
@@ -99,10 +99,10 @@ function createPDF(options) {
         svg: xml.string
     };
     var $el = $("body");
-    var form = $el.find("#viewport-form");
+    var form = $el.find("#viewer-form");
     if (form.length === 0) {
         form = $("<form>", {
-            id: "viewport-form",
+            id: "viewer-form",
             method: "post",
             action: "http://export.highcharts.com/",
             display: "none"

diff --git a/client/galaxy/scripts/mvc/visualization/chart/views/editor.js b/client/galaxy/scripts/mvc/visualization/chart/views/editor.js
@@ -14,17 +14,11 @@ export default Backbone.View.extend({
         this.app = app;
         this.chart = this.app.chart;
         this.description = new Description(this.app);
-        this.message = new Ui.Message({ cls: "ui-margin-bottom" });
-
-        // input field for chart title
         this.title = new Ui.Input({
-            placeholder: "Chart title",
             onchange: () => {
                 this.chart.set("title", this.title.value());
             }
         });
-
-        // create tabs
         this.tabs = new Tabs.View({});
         this.tabs.add({
             id: "settings",
@@ -50,23 +44,11 @@ export default Backbone.View.extend({
                 $el: new Groups(this.app).$el
             });
         }
-
-        // set elements
         this.setElement("<div class='charts-editor'/>");
-        //this.$el.append(this.message.$el);
         this.$el.append(this.description.$el);
         this.$el.append(this.tabs.$el);
-        this.message.update({persistent: true, message: 'hey'});
-    },
-
-    /** Show editor */
-    show: function() {
-        this.$el.show();
-        this.chart_backup = this.chart.serialize();
-    },
-
-    /** Hide editor */
-    hide: function() {
-        this.$el.hide();
+        this.listenTo(this.chart, "load", () => {
+            this.title.value(this.chart.get("title"));
+        });
     }
 });
diff --git a/client/galaxy/scripts/mvc/visualization/chart/views/viewer.js b/client/galaxy/scripts/mvc/visualization/chart/views/viewer.js
@@ -12,7 +12,7 @@ export default Backbone.View.extend({
         this.options = options;
         this.setElement(
             $("<div/>")
-                .addClass("charts-viewport")
+                .addClass("charts-viewer")
                 .append(
                     $("<div/>")
                         .addClass("info")
@@ -31,7 +31,7 @@ export default Backbone.View.extend({
             });
         });
         this.chart.on("set:state", function() {
-            var $container = self.$(".charts-viewport-container");
+            var $container = self.$(".charts-viewer-container");
             var $info = self.$info;
             var $icon = self.$icon;
             var $text = self.$text;
@@ -67,14 +67,14 @@ export default Backbone.View.extend({
     _createContainer: function(tag, n) {
         tag = tag || "div";
         n = n || 1;
-        this.$(".charts-viewport-container").remove();
+        this.$(".charts-viewer-container").remove();
         this.targets = [];
         for (var i = 0; i < n; i++) {
             var container_id = Utils.uid();
             var container_el = $("<div/>")
-                .addClass("charts-viewport-container")
+                .addClass("charts-viewer-container")
                 .width(parseInt(100 / n) + "%")
-                .append($("<" + tag + " class='charts-viewport-canvas' />").attr("id", container_id));
+                .append($("<" + tag + " class='charts-viewer-canvas' />").attr("id", container_id));
             this.$el.append(container_el);
             this.targets.push(container_id);
         }

diff --git a/client/galaxy/style/less/charts.less b/client/galaxy/style/less/charts.less
@@ -25,6 +25,36 @@
         width: 70%;
         overflow: hidden;
         padding: 10px 5px 10px 10px;
+        .charts-viewer {
+            height: inherit;
+            min-height: 50px;
+            .info {
+                position: absolute;
+                margin: 40px 20px 50px 10px;
+            }
+            .text {
+                position: relative;
+                margin-left: 5px;
+                top: -1px;
+                font-size: 1.0em;
+                display: inline;
+            }
+            .icon {
+                font-size: 1.2em;
+                display: inline-block;
+            }
+            .charts-viewer-container {
+                float: left;
+                display: block;
+                height: 100%;
+            }
+            .charts-viewer-canvas {
+                display: block;
+                width: 100%;
+                min-height: 100px;
+                height: inherit;
+            }
+        }
     }
     .charts-right {
         float: left;
@@ -43,6 +73,23 @@
             flex: 1;
             overflow: auto;
             padding: 10px 10px 10px 5px;
+            .charts-description {
+                margin-bottom: 20px;
+                .charts-description-image-td {
+                    vertical-align: top;
+                }
+                .charts-description-image {
+                    width: 50px;
+                    height: 43px;
+                    margin-right: 10px;
+                }
+                .charts-description-title {
+                    font-weight: bold;
+                }
+                .charts-description-text {
+                    word-break: break-word;
+                }
+            }
             .portlet-content {
                 padding: 0px;
             }
@@ -71,88 +118,4 @@
     .charts-right {
         display: none;
     }
-}
-
-.charts-viewer {
-    overflow: auto;
-}
-
-.charts-viewer .ui-message {
-    position: absolute;
-    width: calc(100% - 20px);
-    z-index: 1001;
-}
-
-.charts-description {
-    margin-bottom: 20px;
-}
-.charts-description-image-td {
-    vertical-align: top;
-}
-
-.charts-description-image {
-    width: 50px;
-    height: 43px;
-    margin-right: 10px;
-}
-
-.charts-description-title {
-    font-weight: bold;
-}
-
-.charts-description-text {
-    word-break: break-word;
-}
-
-.charts-tooltip {
-    position: absolute;
-    text-align: center;
-    padding: 3px 5px 3px 5px;
-    font: 12px sans-serif;
-    background: white;
-    border: 1px solid gray;
-    border-radius: 4px;
-    pointer-events: none;
-}
-
-.charts-tooltip-first {
-    font-weight: bold;
-    text-align: left;
-    padding-right: 5px;
-}  
-
-.charts-viewport {
-    height: inherit;
-    min-height: 50px;
-}
-
-.charts-viewport .info {
-	position: absolute;
-	margin: 40px 20px 50px 10px;
-}
-
-.charts-viewport .text {
-    position: relative;
-    margin-left: 5px;
-    top: -1px;
-    font-size: 1.0em;
-    display: inline;
-}
-
-.charts-viewport .icon {
-    font-size: 1.2em;
-    display: inline-block;
-}
-
-.charts-viewport .charts-viewport-container {
-    float: left;
-    display: block;
-    height: 100%;
-}
-
-.charts-viewport .charts-viewport-canvas {
-    display: block;
-    width: 100%;
-    min-height: 100px;
-    height: inherit;
 }
diff --git a/static/style/blue/base.css b/static/style/blue/base.css