mirror of https://github.com/apache/superset.git
[ui] tweaks and improvements (#965)
* update panel headings, titles * remove panel heading collapser * style slice meta controls * fix favstar on dashboard * add space between heat map and list
This commit is contained in:
parent
a029eaa451
commit
379cf6cbd9
|
@ -18,12 +18,9 @@ require('bootstrap');
|
|||
|
||||
require('./../caravel-select2.js');
|
||||
|
||||
require('../../node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js');
|
||||
|
||||
// css
|
||||
require('../../vendor/pygments.css');
|
||||
require('../../stylesheets/explore.css');
|
||||
require('../../node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css');
|
||||
|
||||
let slice;
|
||||
|
||||
|
@ -131,11 +128,6 @@ function initExploreView() {
|
|||
|
||||
px.initFavStars();
|
||||
|
||||
$('form .panel-heading').click(function () {
|
||||
toggle_fieldset($(this), true);
|
||||
$(this).css('cursor', 'pointer');
|
||||
});
|
||||
|
||||
function copyURLToClipboard(url) {
|
||||
var textArea = document.createElement('textarea');
|
||||
textArea.style.position = 'fixed';
|
||||
|
|
|
@ -52,14 +52,6 @@ input.form-control[type=text], input.form-control[type=search] {
|
|||
margin-left: 365px;
|
||||
}
|
||||
|
||||
.favstar {
|
||||
margin-right: 10px;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
.slice_description{
|
||||
padding: 8px;
|
||||
margin: 5px;
|
||||
|
@ -207,3 +199,8 @@ div.widget .slice_container {
|
|||
padding: 5px 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.panel-title h5 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
|
@ -102,7 +102,7 @@ div.widget .chart-controls {
|
|||
}
|
||||
|
||||
.dashboard .title .favstar {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.chart-header .header {
|
||||
|
|
|
@ -9,29 +9,6 @@
|
|||
background-color: #fff;
|
||||
}
|
||||
|
||||
.slice-name__container {
|
||||
background-color: #fff;
|
||||
padding: 16px 20px 20px 20px;
|
||||
}
|
||||
.slice-name__text {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
border-bottom: 1px solid #aaa;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 42px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.edit-slice-description-icon {
|
||||
float: left;
|
||||
margin-top: -33px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.slice-meta {
|
||||
margin-top: -52px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
@ -39,3 +16,12 @@
|
|||
.query-and-save-btns-container {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.star-edit-icons {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.slice-meta-controls {
|
||||
margin-top: -5px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
|
|
@ -617,7 +617,8 @@ input[type="checkbox"],
|
|||
.panel > .panel-heading {
|
||||
border-bottom: 1px solid #aaa;
|
||||
background-color: #fff;
|
||||
margin: 10px 5px;
|
||||
margin: 0 1em;
|
||||
padding: 1em 0 .5em 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
|
@ -74,8 +74,11 @@
|
|||
<div class="title">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<span class="favstar" class_name="Dashboard" obj_id="{{ dashboard.id }}"></span>
|
||||
<h2>{{ dashboard.dashboard_title }}</h2>
|
||||
<h2>
|
||||
{{ dashboard.dashboard_title }}
|
||||
<span class="favstar" class_name="Dashboard" obj_id="{{ dashboard.id }}"></span>
|
||||
</h2>
|
||||
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="btn-group pull-right" role="group" >
|
||||
|
|
|
@ -36,7 +36,11 @@
|
|||
></div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Datasource & Chart Type</div>
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title">
|
||||
Datasource & Chart Type
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div>
|
||||
<!-- DATASOURCE -->
|
||||
|
@ -62,13 +66,14 @@
|
|||
<div class="panel panel-default">
|
||||
{% if fieldset.label %}
|
||||
<div class="panel-heading">
|
||||
<span class="legend_label">{{ fieldset.label }}</span>
|
||||
{% if fieldset.description %}
|
||||
<i class="fa fa-question-circle-o" data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="{{ fieldset.description }}"></i>
|
||||
{% endif %}
|
||||
<!-- <span class="collapser"> [-]</span> -->
|
||||
<div class="panel-title">
|
||||
{{ fieldset.label }}
|
||||
{% if fieldset.description %}
|
||||
<i class="fa fa-question-circle-o" data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="{{ fieldset.description }}"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="panel-body">
|
||||
|
@ -96,11 +101,13 @@
|
|||
{% endfor %}
|
||||
<div id="filter_panel" class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<span class="legend_label">{{ _("Filters") }}</span>
|
||||
<i class="fa fa-question-circle-o" data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="{{_("Filters are defined using comma delimited strings as in 'US,FR,Other'")}}. {{_("Leave the value field empty to filter empty strings or nulls")}}"></i>
|
||||
<!--<span class="collapser"> [-]</span>-->
|
||||
<div class="panel-title">
|
||||
{{ _("Filters") }}
|
||||
<i class="fa fa-question-circle-o" data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="{{_("Filters are defined using comma delimited strings as in 'US,FR,Other'")}}. {{_("Leave the value field empty to filter empty strings or nulls")}}">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="flt0" style="display: none;">
|
||||
|
@ -126,11 +133,15 @@
|
|||
{% if form.having_col_0 %}
|
||||
<div id="having_panel" class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<span class="legend_label">Result Filters ("having" filters)</span>
|
||||
<i class="fa fa-info-circle" data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="{{_("The filters to apply after post-aggregation.")}} {{_("Leave the value field empty to filter empty strings or nulls")}}"></i>
|
||||
<span class="collapser"> [-]</span>
|
||||
<div class="panel-title">
|
||||
Result Filters ("having" filters)
|
||||
<i
|
||||
class="fa fa-info-circle"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="{{_("The filters to apply after post-aggregation.")}} {{_("Leave the value field empty to filter empty strings or nulls")}}">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="having0" style="display: none;">
|
||||
|
@ -171,72 +182,88 @@
|
|||
<div class="col-offset">
|
||||
{% block messages %}{% endblock %}
|
||||
{% include 'appbuilder/flash.html' %}
|
||||
<div class="slice-name__container">
|
||||
{% if slice %}
|
||||
<span class="favstar" class_name="Slice" obj_id="{{ slice.id }}"></span>
|
||||
<div class="slice-name__text">{{ slice.slice_name }} </div>
|
||||
<a
|
||||
href="/slicemodelview/edit/{{ slice.id }}"
|
||||
data-toggle="tooltip"
|
||||
title="Edit Description"
|
||||
class="edit-slice-description-icon"
|
||||
>
|
||||
{% if slice.description %}
|
||||
<i
|
||||
class="fa fa-question-circle-o"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="{{ slice.description }}">
|
||||
</i>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="row">
|
||||
{% if slice %}
|
||||
<div class="col-md-6">
|
||||
<div class="panel-title">
|
||||
<h5>
|
||||
{{ slice.slice_name }}
|
||||
<small class="star-edit-icons">
|
||||
<span class="favstar" obj_id="{{ slice.id }}"></span>
|
||||
<span>
|
||||
<a
|
||||
href="/slicemodelview/edit/{{ slice.id }}"
|
||||
data-toggle="tooltip"
|
||||
title="Edit Description"
|
||||
class="edit-slice-description-icon"
|
||||
>
|
||||
{% if slice.description %}
|
||||
<i
|
||||
class="fa fa-question-circle-o"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
title="{{ slice.description }}">
|
||||
</i>
|
||||
{% endif %}
|
||||
<i class="fa fa-edit"></i>
|
||||
</a>
|
||||
</span>
|
||||
</small>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="slice-meta-controls pull-right">
|
||||
<span id="is_cached" class="label label-default" title="{{ _("Force refresh" )}}" data-toggle="tooltip">
|
||||
cached
|
||||
</span>
|
||||
<div class="btn-group results" role="group">
|
||||
<a role="button" tabindex="0" class="btn btn-default" id="shortner" data-toggle="popover" data-trigger="focus">
|
||||
<i class="fa fa-link" data-toggle="tooltip" title="{{ _("Short URL") }}"></i>
|
||||
</a>
|
||||
<span class="btn btn-default" id="standalone" title="{{ _("Generate an embeddable iframe") }}" data-toggle="tooltip">
|
||||
<i class="fa fa-code"></i>
|
||||
</span>
|
||||
<span class="btn btn-default " id="json" title="{{ _("Export to .json")}}" data-toggle="tooltip">
|
||||
<i class="fa fa-file-code-o"></i>
|
||||
.json
|
||||
</span>
|
||||
<span class="btn btn-default {{ "disabled disabledButton" if not can_download }}" id="csv" title="{{ _("Export to .csv format") }}" data-toggle="tooltip">
|
||||
<i class="fa fa-file-text-o"></i>.csv
|
||||
</span>
|
||||
<span
|
||||
class="btn btn-warning notbtn"
|
||||
id="timer"
|
||||
title="{{ _("Query timer") }}"
|
||||
data-toggle="tooltip">
|
||||
{{ _("0 sec") }}
|
||||
</span>
|
||||
<span
|
||||
class="btn btn-info disabled view_query"
|
||||
data-toggle="modal"
|
||||
data-target="#query_modal">
|
||||
<span data-toggle="tooltip" title="{{ _("View database query") }}">
|
||||
{{ _("query") }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<i class="fa fa-edit"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="slice-name__text"> </div>
|
||||
{% endif %}
|
||||
<div class="slice-meta pull-right">
|
||||
<span id="is_cached" class="label label-default" title="{{ _("Force refresh" )}}" data-toggle="tooltip">
|
||||
cached
|
||||
</span>
|
||||
<div class="btn-group results" role="group">
|
||||
<a role="button" tabindex="0" class="btn btn-default" id="shortner" data-toggle="popover" data-trigger="focus">
|
||||
<i class="fa fa-link" data-toggle="tooltip" title="{{ _("Short URL") }}"></i>
|
||||
</a>
|
||||
<span class="btn btn-default" id="standalone" title="{{ _("Generate an embeddable iframe") }}" data-toggle="tooltip">
|
||||
<i class="fa fa-code"></i>
|
||||
</span>
|
||||
<span class="btn btn-default " id="json" title="{{ _("Export to .json")}}" data-toggle="tooltip">
|
||||
<i class="fa fa-file-code-o"></i>
|
||||
.json
|
||||
</span>
|
||||
<span class="btn btn-default {{ "disabled disabledButton" if not can_download }}" id="csv" title="{{ _("Export to .csv format") }}" data-toggle="tooltip">
|
||||
<i class="fa fa-file-text-o"></i>.csv
|
||||
</span>
|
||||
<span
|
||||
class="btn btn-warning notbtn"
|
||||
id="timer"
|
||||
title="{{ _("Query timer") }}"
|
||||
data-toggle="tooltip">
|
||||
{{ _("0 sec") }}
|
||||
</span>
|
||||
<span
|
||||
class="btn btn-info disabled view_query"
|
||||
data-toggle="modal"
|
||||
data-target="#query_modal">
|
||||
<span data-toggle="tooltip" title="{{ _("View database query") }}">
|
||||
{{ _("query") }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="{{ viz.token }}"
|
||||
class="widget viz slice {{ viz.viz_type }}"
|
||||
data-slice="{{ viz.json_data }}"
|
||||
style="height: 700px;">
|
||||
<img src="{{ url_for("static", filename="assets/images/loading.gif") }}" class="loading" alt="loading">
|
||||
<div id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%"></div>
|
||||
<div class="panel-body">
|
||||
<div
|
||||
id="{{ viz.token }}"
|
||||
class="widget viz slice {{ viz.viz_type }}"
|
||||
data-slice="{{ viz.json_data }}"
|
||||
style="height: 700px;">
|
||||
<img src="{{ url_for("static", filename="assets/images/loading.gif") }}" class="loading" alt="loading">
|
||||
<div id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="query_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
<div class="cal-heatmap-panel">
|
||||
<div id="cal-heatmap"></div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default">
|
||||
|
@ -37,6 +38,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
{% endblock %}
|
||||
|
||||
|
|
Loading…
Reference in New Issue