pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[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:
Alanna Scott 2016-08-17 08:05:47 -07:00 committed by Maxime Beauchemin
parent a029eaa451
commit 379cf6cbd9
8 changed files with 131 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
caravel/assets/javascripts/explore/explore.jsx
View File

@ -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';

13
caravel/assets/stylesheets/caravel.css
View File

@ -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;
}

2
caravel/assets/stylesheets/dashboard.css
View File

@ -102,7 +102,7 @@ div.widget .chart-controls {
}
.dashboard .title .favstar {
font-size: 24px;
font-size: 20px;
}
.chart-header .header {

32
caravel/assets/stylesheets/explore.css
View File

@ -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;
}

3
caravel/assets/stylesheets/less/bootswatch.less
View File

@ -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;
}

7
caravel/templates/caravel/dashboard.html
View File

@ -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" >

189
caravel/templates/caravel/explore.html
View File

@ -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>&nbsp;
</a>
<span class="btn btn-default" id="standalone" title="{{ _("Generate an embeddable iframe") }}" data-toggle="tooltip">
<i class="fa fa-code"></i>&nbsp;
</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">&nbsp;</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>&nbsp;
</a>
<span class="btn btn-default" id="standalone" title="{{ _("Generate an embeddable iframe") }}" data-toggle="tooltip">
<i class="fa fa-code"></i>&nbsp;
</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">

2
caravel/templates/caravel/welcome.html
View File

@ -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 %}