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
2016-03-15 11:52:26 -07:00
parent 1ab89631b9
commit 1a58b6d441
7 changed files with 78 additions and 54 deletions

View File

@@ -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();