diff --git a/panoramix/assets/javascripts/dashboard.js b/panoramix/assets/javascripts/dashboard.js index d1d86654681d6..3707702a1fbdb 100644 --- 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 + 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 index 688702c894212..8fa875098cbb4 100644 --- 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 index 00fc2a0544b61..fc28ec362b9ef 100644 --- 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 index 2118c9b55adbe..2b15435121ab7 100644 --- 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 index 16091773b427d..c970e179737e0 100644 --- 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 index e8b38904a14c2..15697836166da 100644 --- 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 index 9894cb0b8cbf6..27b20026677dc 100644 --- a/panoramix/templates/panoramix/dashboard.html +++ b/panoramix/templates/panoramix/dashboard.html @@ -1,14 +1,12 @@ {% extends "panoramix/basic.html" %} -{% block head_css %} - {{ super() }} - +{% block head_js %} + {{ super() }} + {% endblock %} {% block body %} -
+