Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ui] tweaks and improvements #965

Merged
merged 6 commits into from
Aug 17, 2016
Merged

[ui] tweaks and improvements #965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
05c628d
update panel headings, titles
Aug 17, 2016
698b5fd
remove panel heading collapser
Aug 17, 2016
2b35f18
style slice meta controls
Aug 17, 2016
aefab05
fix favstar on dashboard
Aug 17, 2016
26efed5
add space between heat map and list
Aug 17, 2016
2eaabb6
Merge branch 'master' into alanna-slice-title
Aug 17, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 0 additions & 8 deletions caravel/assets/javascripts/explore/explore.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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';
Expand Down
13 changes: 5 additions & 8 deletions caravel/assets/stylesheets/caravel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -207,3 +199,8 @@ div.widget .slice_container {
padding: 5px 10px;
margin-top: 15px;
}

.panel-title h5 {
margin-top: 0px;
margin-bottom: 10px;
}
2 changes: 1 addition & 1 deletion caravel/assets/stylesheets/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ div.widget .chart-controls {
}

.dashboard .title .favstar {
font-size: 24px;
font-size: 20px;
}

.chart-header .header {
Expand Down
32 changes: 9 additions & 23 deletions caravel/assets/stylesheets/explore.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,33 +9,19 @@
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;
}

.query-and-save-btns-container {
margin-bottom: 22px;
}

.star-edit-icons {
padding-left: 10px;
}

.slice-meta-controls {
margin-top: -5px;
margin-right: -5px;
}
3 changes: 2 additions & 1 deletion caravel/assets/stylesheets/less/bootswatch.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
7 changes: 5 additions & 2 deletions caravel/templates/caravel/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,11 @@ <h6><strong>Choose how frequent should the dashboard refresh</strong></h6>
<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" >
Expand Down
189 changes: 108 additions & 81 deletions caravel/templates/caravel/explore.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -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">
Expand Down Expand Up @@ -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;">
Expand All @@ -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;">
Expand Down Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion caravel/templates/caravel/welcome.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -37,6 +38,5 @@ <h5><i class="fa fa-search"></i></h5>
</div>
</div>
</div>
<hr/>
{% endblock %}