mirror of
https://github.com/apache/superset.git
synced 2024-09-17 19:19:38 -04:00
Polishing the CSS template feature
This commit is contained in:
parent
d276be8d50
commit
354ef9b4bb
1008
panoramix/static/lib/ace/mode-css.js
Normal file
1008
panoramix/static/lib/ace/mode-css.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -478,7 +478,7 @@ var px = (function() {
|
|||||||
});
|
});
|
||||||
var data = {
|
var data = {
|
||||||
positions: gridster.serialize(),
|
positions: gridster.serialize(),
|
||||||
css: $("#dash_css").val(),
|
css: editor.getValue(),
|
||||||
expanded_slices: expanded_slices,
|
expanded_slices: expanded_slices,
|
||||||
};
|
};
|
||||||
$.ajax({
|
$.ajax({
|
||||||
@ -489,13 +489,27 @@ var px = (function() {
|
|||||||
error: function() {alert("Error :(")},
|
error: function() {alert("Error :(")},
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var editor = ace.edit("dash_css");
|
||||||
|
editor.$blockScrolling = Infinity
|
||||||
|
|
||||||
|
editor.setTheme("ace/theme/crimson_editor");
|
||||||
|
editor.setOptions({
|
||||||
|
minLines: 16,
|
||||||
|
maxLines: Infinity,
|
||||||
|
});
|
||||||
|
editor.getSession().setMode("ace/mode/css");
|
||||||
|
|
||||||
$(".select2").select2({dropdownAutoWidth : true});
|
$(".select2").select2({dropdownAutoWidth : true});
|
||||||
$("#css_template").on("change", function() {
|
$("#css_template").on("change", function() {
|
||||||
var css = $(this).find('option:selected').data('css');
|
var css = $(this).find('option:selected').data('css');
|
||||||
|
editor.setValue(css);
|
||||||
$('#dash_css').val(css);
|
$('#dash_css').val(css);
|
||||||
$("#user_style").html(css);
|
$("#user_style").html(css);
|
||||||
|
});
|
||||||
})
|
$('#filters').click( function(){
|
||||||
|
alert(dashboard.readFilters());
|
||||||
|
});
|
||||||
$("a.closeslice").click(function() {
|
$("a.closeslice").click(function() {
|
||||||
var li = $(this).parents("li");
|
var li = $(this).parents("li");
|
||||||
gridster.remove_widget(li);
|
gridster.remove_widget(li);
|
||||||
@ -513,8 +527,9 @@ var px = (function() {
|
|||||||
$("table.slice_header").mouseout(function() {
|
$("table.slice_header").mouseout(function() {
|
||||||
$(this).find("td.icons nobr").hide();
|
$(this).find("td.icons nobr").hide();
|
||||||
});
|
});
|
||||||
$("#dash_css").on("keyup", function(){
|
editor.on("change", function(){
|
||||||
css = $(this).val();
|
css = editor.getValue();
|
||||||
|
$('#dash_css').val(css);
|
||||||
$("#user_style").html(css);
|
$("#user_style").html(css);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -23,24 +23,15 @@
|
|||||||
<h4 class="modal-title" id="myModalLabel">Dashboard CSS</h4>
|
<h4 class="modal-title" id="myModalLabel">Dashboard CSS</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<select id="css_template" class="select2">
|
<select id="css_template" class="select2" style="margin-bottom: 5px;">
|
||||||
|
<option value="" data-css="">-= CSS templates =-</option>
|
||||||
{% for t in templates %}
|
{% for t in templates %}
|
||||||
<option value="{{ t.id }}" data-css="{{t.css}}">
|
<option value="{{ t.id }}" data-css="{{t.css}}">
|
||||||
{{ t.template_name }}
|
{{ t.template_name }}
|
||||||
</option>
|
</option>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</select><br>
|
</select><br>
|
||||||
<textarea id="dash_css" rows="30" cols="60" style="margin-top: 5px;">
|
<textarea id="dash_css" rows="30" cols="60">{{ dashboard.css }}</textarea>
|
||||||
{%- if dashboard.css %}
|
|
||||||
{{- dashboard.css }}
|
|
||||||
{% else %}
|
|
||||||
/*
|
|
||||||
body {
|
|
||||||
background: #F00;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
{% endif %}
|
|
||||||
</textarea>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-default" data-dismiss="modal">
|
<button type="button" class="btn btn-default" data-dismiss="modal">
|
||||||
@ -65,7 +56,7 @@ body {
|
|||||||
<i class="fa fa-filter"></i>
|
<i class="fa fa-filter"></i>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" id="css" class="btn btn-default" data-toggle="modal" data-target="#css_modal">
|
<button type="button" id="css" class="btn btn-default" data-toggle="modal" data-target="#css_modal">
|
||||||
<i class="fa fa-css3"></i>
|
<i class="fa fa-css3" data-toggle="tooltip" title="CSS"></i>
|
||||||
</button>
|
</button>
|
||||||
<a id="editdash" class="btn btn-default" href="/dashboardmodelview/edit/{{ dashboard.id }}">
|
<a id="editdash" class="btn btn-default" href="/dashboardmodelview/edit/{{ dashboard.id }}">
|
||||||
<i class="fa fa-edit"></i>
|
<i class="fa fa-edit"></i>
|
||||||
@ -141,6 +132,7 @@ body {
|
|||||||
<script src="{{ url_for('static', filename=js) }}"></script>
|
<script src="{{ url_for('static', filename=js) }}"></script>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<script src="/static/lib/gridster/jquery.gridster.with-extras.min.js"></script>
|
<script src="/static/lib/gridster/jquery.gridster.with-extras.min.js"></script>
|
||||||
|
<script src="/static/lib/ace/ace.js"></script>
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
px.initDashboardView();
|
px.initDashboardView();
|
||||||
|
Loading…
Reference in New Issue
Block a user