mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
[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('./../caravel-select2.js');
|
||||||
|
|
||||||
require('../../node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js');
|
|
||||||
|
|
||||||
// css
|
// css
|
||||||
require('../../vendor/pygments.css');
|
require('../../vendor/pygments.css');
|
||||||
require('../../stylesheets/explore.css');
|
require('../../stylesheets/explore.css');
|
||||||
require('../../node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css');
|
|
||||||
|
|
||||||
let slice;
|
let slice;
|
||||||
|
|
||||||
@ -131,11 +128,6 @@ function initExploreView() {
|
|||||||
|
|
||||||
px.initFavStars();
|
px.initFavStars();
|
||||||
|
|
||||||
$('form .panel-heading').click(function () {
|
|
||||||
toggle_fieldset($(this), true);
|
|
||||||
$(this).css('cursor', 'pointer');
|
|
||||||
});
|
|
||||||
|
|
||||||
function copyURLToClipboard(url) {
|
function copyURLToClipboard(url) {
|
||||||
var textArea = document.createElement('textarea');
|
var textArea = document.createElement('textarea');
|
||||||
textArea.style.position = 'fixed';
|
textArea.style.position = 'fixed';
|
||||||
|
@ -52,14 +52,6 @@ input.form-control[type=text], input.form-control[type=search] {
|
|||||||
margin-left: 365px;
|
margin-left: 365px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.favstar {
|
|
||||||
margin-right: 10px;
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: pointer;
|
|
||||||
float: left;
|
|
||||||
margin-top: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slice_description{
|
.slice_description{
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
@ -207,3 +199,8 @@ div.widget .slice_container {
|
|||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel-title h5 {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
@ -102,7 +102,7 @@ div.widget .chart-controls {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dashboard .title .favstar {
|
.dashboard .title .favstar {
|
||||||
font-size: 24px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-header .header {
|
.chart-header .header {
|
||||||
|
@ -9,29 +9,6 @@
|
|||||||
background-color: #fff;
|
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 {
|
.navbar {
|
||||||
margin-bottom: 22px;
|
margin-bottom: 22px;
|
||||||
}
|
}
|
||||||
@ -39,3 +16,12 @@
|
|||||||
.query-and-save-btns-container {
|
.query-and-save-btns-container {
|
||||||
margin-bottom: 22px;
|
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 {
|
.panel > .panel-heading {
|
||||||
border-bottom: 1px solid #aaa;
|
border-bottom: 1px solid #aaa;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
margin: 10px 5px;
|
margin: 0 1em;
|
||||||
|
padding: 1em 0 .5em 0;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -74,8 +74,11 @@
|
|||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8">
|
<div class="col-md-8">
|
||||||
<span class="favstar" class_name="Dashboard" obj_id="{{ dashboard.id }}"></span>
|
<h2>
|
||||||
<h2>{{ dashboard.dashboard_title }}</h2>
|
{{ dashboard.dashboard_title }}
|
||||||
|
<span class="favstar" class_name="Dashboard" obj_id="{{ dashboard.id }}"></span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="btn-group pull-right" role="group" >
|
<div class="btn-group pull-right" role="group" >
|
||||||
|
@ -36,7 +36,11 @@
|
|||||||
></div>
|
></div>
|
||||||
|
|
||||||
<div class="panel panel-default">
|
<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 class="panel-body">
|
||||||
<div>
|
<div>
|
||||||
<!-- DATASOURCE -->
|
<!-- DATASOURCE -->
|
||||||
@ -62,13 +66,14 @@
|
|||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
{% if fieldset.label %}
|
{% if fieldset.label %}
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<span class="legend_label">{{ fieldset.label }}</span>
|
<div class="panel-title">
|
||||||
{% if fieldset.description %}
|
{{ fieldset.label }}
|
||||||
<i class="fa fa-question-circle-o" data-toggle="tooltip"
|
{% if fieldset.description %}
|
||||||
data-placement="bottom"
|
<i class="fa fa-question-circle-o" data-toggle="tooltip"
|
||||||
title="{{ fieldset.description }}"></i>
|
data-placement="bottom"
|
||||||
{% endif %}
|
title="{{ fieldset.description }}"></i>
|
||||||
<!-- <span class="collapser"> [-]</span> -->
|
{% endif %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
@ -96,11 +101,13 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
<div id="filter_panel" class="panel panel-default">
|
<div id="filter_panel" class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<span class="legend_label">{{ _("Filters") }}</span>
|
<div class="panel-title">
|
||||||
<i class="fa fa-question-circle-o" data-toggle="tooltip"
|
{{ _("Filters") }}
|
||||||
data-placement="bottom"
|
<i class="fa fa-question-circle-o" data-toggle="tooltip"
|
||||||
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>
|
data-placement="bottom"
|
||||||
<!--<span class="collapser"> [-]</span>-->
|
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>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div id="flt0" style="display: none;">
|
<div id="flt0" style="display: none;">
|
||||||
@ -126,11 +133,15 @@
|
|||||||
{% if form.having_col_0 %}
|
{% if form.having_col_0 %}
|
||||||
<div id="having_panel" class="panel panel-default">
|
<div id="having_panel" class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
<span class="legend_label">Result Filters ("having" filters)</span>
|
<div class="panel-title">
|
||||||
<i class="fa fa-info-circle" data-toggle="tooltip"
|
Result Filters ("having" filters)
|
||||||
data-placement="bottom"
|
<i
|
||||||
title="{{_("The filters to apply after post-aggregation.")}} {{_("Leave the value field empty to filter empty strings or nulls")}}"></i>
|
class="fa fa-info-circle"
|
||||||
<span class="collapser"> [-]</span>
|
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>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div id="having0" style="display: none;">
|
<div id="having0" style="display: none;">
|
||||||
@ -171,72 +182,88 @@
|
|||||||
<div class="col-offset">
|
<div class="col-offset">
|
||||||
{% block messages %}{% endblock %}
|
{% block messages %}{% endblock %}
|
||||||
{% include 'appbuilder/flash.html' %}
|
{% include 'appbuilder/flash.html' %}
|
||||||
<div class="slice-name__container">
|
<div class="panel panel-default">
|
||||||
{% if slice %}
|
<div class="panel-heading">
|
||||||
<span class="favstar" class_name="Slice" obj_id="{{ slice.id }}"></span>
|
<div class="row">
|
||||||
<div class="slice-name__text">{{ slice.slice_name }} </div>
|
{% if slice %}
|
||||||
<a
|
<div class="col-md-6">
|
||||||
href="/slicemodelview/edit/{{ slice.id }}"
|
<div class="panel-title">
|
||||||
data-toggle="tooltip"
|
<h5>
|
||||||
title="Edit Description"
|
{{ slice.slice_name }}
|
||||||
class="edit-slice-description-icon"
|
<small class="star-edit-icons">
|
||||||
>
|
<span class="favstar" obj_id="{{ slice.id }}"></span>
|
||||||
{% if slice.description %}
|
<span>
|
||||||
<i
|
<a
|
||||||
class="fa fa-question-circle-o"
|
href="/slicemodelview/edit/{{ slice.id }}"
|
||||||
data-toggle="tooltip"
|
data-toggle="tooltip"
|
||||||
data-placement="bottom"
|
title="Edit Description"
|
||||||
title="{{ slice.description }}">
|
class="edit-slice-description-icon"
|
||||||
</i>
|
>
|
||||||
|
{% 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 %}
|
{% 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>
|
||||||
</div>
|
<div class="panel-body">
|
||||||
<div
|
<div
|
||||||
id="{{ viz.token }}"
|
id="{{ viz.token }}"
|
||||||
class="widget viz slice {{ viz.viz_type }}"
|
class="widget viz slice {{ viz.viz_type }}"
|
||||||
data-slice="{{ viz.json_data }}"
|
data-slice="{{ viz.json_data }}"
|
||||||
style="height: 700px;">
|
style="height: 700px;">
|
||||||
<img src="{{ url_for("static", filename="assets/images/loading.gif") }}" class="loading" alt="loading">
|
<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 id="{{ viz.token }}_con" class="slice_container" style="height: 100%; width: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal fade" id="query_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
<div class="modal fade" id="query_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||||
|
@ -13,6 +13,7 @@
|
|||||||
<div class="cal-heatmap-panel">
|
<div class="cal-heatmap-panel">
|
||||||
<div id="cal-heatmap"></div>
|
<div id="cal-heatmap"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<br/>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
@ -37,6 +38,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr/>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user