fix overflow scroll bars on all dashboard charts. make dashboard char…

…t control toggle interaction nicer. make sure user-stylesheets are applied last. remove ace css editor error/warning parsing. make filters look nicer in dashboards. fix some linting.
apache · Mar 15, 2016 · 1a58b6d · 1a58b6d
1 parent 1ab8963
commit 1a58b6d
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 54 deletions.
diff --git a/panoramix/assets/javascripts/dashboard.js b/panoramix/assets/javascripts/dashboard.js
@@ -149,7 +149,8 @@ var Dashboard = function (dashboardData) {
       editor.setTheme("ace/theme/crimson_editor");
       editor.setOptions({
         minLines: 16,
-        maxLines: Infinity
+        maxLines: Infinity,
+        useWorker: false
       });
       editor.getSession().setMode("ace/mode/css");
 
@@ -159,8 +160,10 @@ var Dashboard = function (dashboardData) {
       $("#css_template").on("change", function () {
         var css = $(this).find('option:selected').data('css');
         editor.setValue(css);
+
         $('#dash_css').val(css);
-        $("#user_style").html(css);
+        injectCss("dashboard-template", css);
+
       });
       $('#filters').click(function () {
         alert(dashboard.readFilters());
@@ -170,19 +173,51 @@ var Dashboard = function (dashboardData) {
         gridster.remove_widget(li);
       });
 
-      $(".slice_info").click(function () {
-        var widget = $(this).parents('.widget');
-        var slice_description = widget.find('.slice_description');
-        slice_description.slideToggle(500, function () {
-          widget.find('.refresh').click();
-        });
+      $("li.widget").click(function (e) {
+        var $this = $(this);
+        var $target = $(e.target);
+
+        if ($target.hasClass("slice_info")) {
+          $this.find(".slice_description").slideToggle(0, function () {
+            $this.find('.refresh').click();
+          });
+        } else if ($target.hasClass("controls-toggle")) {
+          $this.find(".chart-controls").toggle();
+        }
       });
 
       editor.on("change", function () {
         var css = editor.getValue();
         $('#dash_css').val(css);
-        $("#user_style").html(css);
+        injectCss("dashboard-template", css);
       });
+
+      var css = $('.dashboard').data('css');
+      injectCss("dashboard-template", css);
+
+      // Injects the passed css string into a style sheet with the specified className
+      // If a stylesheet doesn't exist with the passed className, one will be injected into <head>
+      function injectCss(className, css) {
+
+        var head  = document.head || document.getElementsByTagName('head')[0];
+        var style = document.querySelector('.' + className);
+
+        if (!style) {
+          if (className.split(' ').length > 1) {
+            throw new Error("This method only supports selections with a single class name.");
+          }
+          style = document.createElement('style');
+          style.className = className;
+          style.type = 'text/css';
+          head.appendChild(style);
+        }
+
+        if (style.styleSheet) {
+          style.styleSheet.cssText = css;
+        } else {
+          style.innerHTML = css;
+        }
+      }
     }
   });
   dashboard.init();

diff --git a/panoramix/assets/javascripts/featured.js b/panoramix/assets/javascripts/featured.js
@@ -1,9 +1,8 @@
 var $ = window.$ = require('jquery');
 var jQuery = window.jQuery = $;
-var px = require('./modules/panoramix.js');
 
 require('datatables');
-require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css')
+require('../node_modules/datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css');
 require('bootstrap');
 
 $(document).ready(function () {

diff --git a/panoramix/assets/javascripts/modules/panoramix.js b/panoramix/assets/javascripts/modules/panoramix.js
@@ -217,7 +217,7 @@ var px = (function () {
           others += widget.find('.slice_description').height() + 25;
         }
         others += widget.find('.chart-header').height();
-        return widget.height() - others;
+        return widget.height() - others - 10;
       },
       bindResizeToWindowResize: function () {
         var resizeTimer;

diff --git a/panoramix/assets/javascripts/panoramix-select2.js b/panoramix/assets/javascripts/panoramix-select2.js
@@ -1,5 +1,5 @@
 require('../node_modules/select2/select2.css');
 require('../node_modules/select2-bootstrap-css/select2-bootstrap.min.css');
-require('../node_modules/jquery-ui/themes/base/jquery-ui.css')
+require('../node_modules/jquery-ui/themes/base/jquery-ui.css');
 require('select2');
 require('../vendor/select2.sortable.js');
diff --git a/panoramix/assets/stylesheets/panoramix.css b/panoramix/assets/stylesheets/panoramix.css
@@ -15,17 +15,6 @@ input.form-control {
     margin-left: 365px;
 }
 
-.modal-content.css {
-    transition: opacity 0.5s ease;
-    opacity: 0.5;
-    border-color: black;
-}
-
-.modal-content.css:hover {
-    transition: opacity 0.5s ease;
-    opacity: 1;
-}
-
 .slice_description{
     padding: 8px;
     margin: 5px;
@@ -39,7 +28,7 @@ input.form-control {
     cursor: pointer;
 }
 
-.padded{
+.padded {
     padding: 10px;
 }
 
@@ -48,9 +37,6 @@ input.form-control {
     overflow: auto;
 }
 
-.slice_container {
-    //height: 100%;
-}
 .container-fluid {
     text-align: left;
 }
@@ -199,7 +185,7 @@ img.loading {
   margin: 5px;
   border: 1px solid #ccc;
   box-shadow: 2px 1px 5px -2px #aaa;
-  overflow: auto;
+  overflow: hidden;
   background-color: #fff;
 }
 .dashboard .gridster .dragging,
@@ -239,19 +225,16 @@ li.widget .chart-header {
   padding: 5px;
   background-color: #f1f1f1;
 }
+
+li.widget .chart-header a {
+  margin-left: 5px;
+}
+
 li.widget .chart-controls {
-  opacity: 0;
-  height: 0;
+  display: none;
   background-color: #f1f1f1;
 }
-li.widget .chart-header:hover .chart-controls {
-  opacity: 1;
-  height: auto;
-  transition: all 0.5s ease;
-}
-li.widget .chart-controls a {
-  margin-right: 5px;
-}
+
 li.widget .slice_container {
   overflow: auto;
 }
diff --git a/panoramix/assets/visualizations/filter_box.css b/panoramix/assets/visualizations/filter_box.css
@@ -1,4 +1,8 @@
-.select2-highlighted>.filter_box {
+.select2-highlighted > .filter_box {
     background-color: transparent;
     border: 1px dashed black;
 }
+
+.dashboard .filter_box .slice_container > div {
+  padding-top: 0;
+}
diff --git a/panoramix/templates/panoramix/dashboard.html b/panoramix/templates/panoramix/dashboard.html
@@ -1,14 +1,12 @@
 {% extends "panoramix/basic.html" %}
 
-{% block head_css %}
-    {{ super() }}
-    <style id="user_style" type="text/css">
-      {{ dashboard.css or '' }}
-    </style>
+{% block head_js %}
+  {{ super() }}
+  <script src="/static/assets/javascripts/dist/dashboard.entry.js"></script>
 {% endblock %}
 
 {% block body %}
-<div class="dashboard container-fluid" data-dashboard="{{ dashboard.json_data }}">
+<div class="dashboard container-fluid" data-dashboard="{{ dashboard.json_data }}" data-css="{{ dashboard.css }}">
 
 <!-- Modal -->
 <div class="modal fade" id="css_modal" tabindex="-1" role="dialog">
@@ -17,10 +15,11 @@
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="myModalLabel">Dashboard CSS</h4>
+        <h6><strong>Styling applies to this dashboard only</strong></h6>
       </div>
       <div class="modal-body">
         <select id="css_template" class="select2" style="margin-bottom: 5px;">
-          <option value="" data-css="">-= CSS templates =-</option>
+          <option value="" data-css="">CSS template</option>
           {% for t in templates %}
             <option value="{{ t.id }}" data-css="{{t.css}}">
               {{ t.template_name }}
@@ -81,14 +80,21 @@ <h2>
             data-sizey="{{ pos.size_y or 4 }}">
 
             <div class="row chart-header">
+
               <div class="col-md-12 text-center header">
                 {{ slice.slice_name }}
                 {% if slice.description %}
-                  <i class="fa fa-info-circle slice_info" slice_id="{{ slice.id }}"></i>
+                  <a title="Toggle chart description">
+                    <i class="fa fa-info-circle slice_info" slice_id="{{ slice.id }}"></i>
+                  </a>
                 {% endif %}
+                <a title="Toggle chart controls">
+                  <i class="fa fa-ellipsis-h controls-toggle"></i>
+                </a>
               </div>
-              <div class="row text-center">
-                <div class="chart-controls col-md-12">
+
+              <div class="row text-center chart-controls">
+                <div class="col-md-12">
                   <a title="Move chart">
                     <i class="fa fa-arrows drag"></i>
                   </a>
@@ -106,6 +112,7 @@ <h2>
                   </a>
                 </div>
               </div>
+
             </div>
 
             <div class="row">
@@ -130,7 +137,3 @@ <h2>
 </div>
 </div>
 {% endblock %}
-
-{% block tail_js %}
-  <script src="/static/assets/javascripts/dist/dashboard.entry.js"></script>
-{% endblock %}