mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
fix overflow scroll bars on all dashboard charts. make dashboard chart 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.
This commit is contained in:
Chris Williams
parent
1ab89631b9
commit
1a58b6d441
@ -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();
|
||||
|
||||
@ -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 () {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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">×</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 @@
|
||||
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 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
@ -130,7 +137,3 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block tail_js %}
|
||||
<script src="/static/assets/javascripts/dist/dashboard.entry.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user