From 49590e28e3b97e99131efae95dcd47d72aa45a9e Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 11 Mar 2016 12:21:20 -0800 Subject: [PATCH 1/2] refactor dashboard chart html, make several css improvements. --- panoramix/assets/javascripts/dashboard.js | 27 +++--- .../assets/javascripts/modules/panoramix.js | 2 +- panoramix/assets/stylesheets/panoramix.css | 31 +++++-- panoramix/assets/visualizations/nvd3_vis.css | 5 ++ panoramix/data/__init__.py | 4 +- panoramix/templates/panoramix/dashboard.html | 87 ++++++++++--------- 6 files changed, 94 insertions(+), 62 deletions(-) diff --git a/panoramix/assets/javascripts/dashboard.js b/panoramix/assets/javascripts/dashboard.js index 977296a4958ca..d1d86654681d6 100644 --- a/panoramix/assets/javascripts/dashboard.js +++ b/panoramix/assets/javascripts/dashboard.js @@ -52,11 +52,13 @@ var Dashboard = function (dashboardData) { }, refreshExcept: function (slice_id) { var immune = this.metadata.filter_immune_slices; - this.slices.forEach(function (slice) { - if (slice.data.slice_id !== slice_id && immune.indexOf(slice.data.slice_id) === -1) { - slice.render(); - } - }); + if (immune) { + this.slices.forEach(function (slice) { + if (slice.data.slice_id !== slice_id && immune.indexOf(slice.data.slice_id) === -1) { + slice.render(); + } + }); + } }, clearFilters: function (slice_id) { delete this.filters[slice_id]; @@ -86,6 +88,7 @@ var Dashboard = function (dashboardData) { initDashboardView: function () { dashboard = this; var gridster = $(".gridster ul").gridster({ + autogrow_cols: true, widget_margins: [10, 10], widget_base_dimensions: [100, 100], draggable: { @@ -95,7 +98,9 @@ var Dashboard = function (dashboardData) { enabled: true, stop: function (e, ui, element) { var slice_data = $(element).data('slice'); - dashboard.getSlice(slice_data.slice_id).resize(); + if (slice_data) { + dashboard.getSlice(slice_data.slice_id).resize(); + } } }, serialize_params: function (_w, wgd) { @@ -160,10 +165,11 @@ var Dashboard = function (dashboardData) { $('#filters').click(function () { alert(dashboard.readFilters()); }); - $("a.closeslice").click(function () { + $("a.remove-chart").click(function () { var li = $(this).parents("li"); gridster.remove_widget(li); }); + $(".slice_info").click(function () { var widget = $(this).parents('.widget'); var slice_description = widget.find('.slice_description'); @@ -171,12 +177,7 @@ var Dashboard = function (dashboardData) { widget.find('.refresh').click(); }); }); - $("table.slice_header").mouseover(function () { - $(this).find("td.icons nobr").show(); - }); - $("table.slice_header").mouseout(function () { - $(this).find("td.icons nobr").hide(); - }); + editor.on("change", function () { var css = editor.getValue(); $('#dash_css').val(css); diff --git a/panoramix/assets/javascripts/modules/panoramix.js b/panoramix/assets/javascripts/modules/panoramix.js index dff34242b4ce9..00fc2a0544b61 100644 --- a/panoramix/assets/javascripts/modules/panoramix.js +++ b/panoramix/assets/javascripts/modules/panoramix.js @@ -216,7 +216,7 @@ var px = (function () { if (slice_description.is(":visible")) { others += widget.find('.slice_description').height() + 25; } - others += widget.find('.slice_header').height(); + others += widget.find('.chart-header').height(); return widget.height() - others; }, bindResizeToWindowResize: function () { diff --git a/panoramix/assets/stylesheets/panoramix.css b/panoramix/assets/stylesheets/panoramix.css index 35f2ce07331ed..d53ae71ffd5ed 100644 --- a/panoramix/assets/stylesheets/panoramix.css +++ b/panoramix/assets/stylesheets/panoramix.css @@ -196,11 +196,10 @@ img.loading { .gridster li.widget{ list-style-type: none; border-radius: 0; - padding: 10px; margin: 5px; border: 1px solid #ccc; box-shadow: 2px 1px 5px -2px #aaa; - overflow: hidden; + overflow: auto; background-color: #fff; } .dashboard .gridster .dragging, @@ -224,17 +223,14 @@ img.loading { width: 100%; height: 100%; } -.dashboard table.slice_header { - width: 100%; - height: 20px; -} + .dashboard div.nvtooltip { z-index: 888; /* this lets tool tips go on top of other slices */ } .dashboard td.icons { width: 50px; } -.dashboard td.icons nobr { +.dashboard td.icons { display: none; } div.header { @@ -243,3 +239,24 @@ div.header { li.widget:hover { z-index: 1000; } + +li.widget .chart-header { + padding: 5px; + background-color: #f1f1f1; +} +li.widget .chart-controls { + opacity: 0; + height: 0; + 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/nvd3_vis.css b/panoramix/assets/visualizations/nvd3_vis.css index 4b5ca0a0dd3ab..80c452b4d6f7f 100644 --- a/panoramix/assets/visualizations/nvd3_vis.css +++ b/panoramix/assets/visualizations/nvd3_vis.css @@ -1,3 +1,8 @@ g.dashed path { stroke-dasharray: 5, 5; } + +.nvtooltip tr.highlight td { + font-weight: bold; + font-size: 15px !important; +} diff --git a/panoramix/data/__init__.py b/panoramix/data/__init__.py index 8fb79cfb8002e..08a0e95ebfbcc 100644 --- a/panoramix/data/__init__.py +++ b/panoramix/data/__init__.py @@ -327,7 +327,7 @@ def load_birth_names(): .navbar:hover { opacity: 1; } - .slice_header .header{ + .chart-header .header{ font-weight: normal; font-size: 12px; } @@ -375,7 +375,7 @@ def load_birth_names(): .navbar:hover { opacity: 1; } - .slice_header .header{ + .chart-header .header{ font-weight: normal; font-size: 12px; } diff --git a/panoramix/templates/panoramix/dashboard.html b/panoramix/templates/panoramix/dashboard.html index ac34516d18c95..9894cb0b8cbf6 100644 --- a/panoramix/templates/panoramix/dashboard.html +++ b/panoramix/templates/panoramix/dashboard.html @@ -70,52 +70,61 @@

{% for slice in dashboard.slices %} {% set pos = pos_dict.get(slice.id, {}) %} {% set viz = slice.viz %} +
  • - - - - - - - - -
    - - - - - -
    - - {{ slice.slice_name }} - {% if slice.description %} - - {% endif %} - -
    -     		- - - - -
    -
    -
    - {{ slice.description_markeddown | safe }} + id="slice_{{ slice.id }}" + slice_id="{{ slice.id }}" + class="widget {{ slice.viz.viz_type }}" + data-row="{{ pos.row or 1 }}" + data-col="{{ pos.col or loop.index }}" + data-sizex="{{ pos.size_x or 4 }}" + data-sizey="{{ pos.size_y or 4 }}"> + +
    +
    + {{ slice.slice_name }} + {% if slice.description %} + + {% endif %}
    +
    +
    + + + + + + + + + + + + + + + +
    +
    +
    + +
    +
    + {{ slice.description_markeddown | safe }} +
    +
    + +
    -
    +
    loading
    +
    • + {% endfor %} From b0fa4bc9241192dff85fbd3ef51fca0c81749808 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 11 Mar 2016 12:29:41 -0800 Subject: [PATCH 2/2] remove unused css --- panoramix/assets/stylesheets/panoramix.css | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/panoramix/assets/stylesheets/panoramix.css b/panoramix/assets/stylesheets/panoramix.css index d53ae71ffd5ed..16091773b427d 100644 --- a/panoramix/assets/stylesheets/panoramix.css +++ b/panoramix/assets/stylesheets/panoramix.css @@ -227,12 +227,7 @@ img.loading { .dashboard div.nvtooltip { z-index: 888; /* this lets tool tips go on top of other slices */ } -.dashboard td.icons { - width: 50px; -} -.dashboard td.icons { - display: none; -} + div.header { font-weight: bold; }