Skip to content

Commit

Permalink
[ui] design review changes - default/primary btn colors (#1008)
Browse files Browse the repository at this point in the history 
* change primary colors and inverse nav

* use primary small bans

* only use primary for query btn
  • Loading branch information
Alanna Scott authored Aug 25, 2016
1 parent f800ff1 commit de39923
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 38 deletions.
4 changes: 2 additions & 2 deletions caravel/assets/javascripts/explore/components/QueryAndSaveBtns.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ const propTypes = {
};

export default function QueryAndSaveBtns({ canAdd, onQuery }) {
const saveClasses = classnames('btn btn-default', {
const saveClasses = classnames('btn btn-default btn-sm', {
'disabled disabledButton': canAdd !== 'True',
});

return (
<div className="btn-group query-and-save">
<button type="button" className="btn btn-default" onClick={onQuery}>
<button type="button" className="btn btn-primary btn-sm" onClick={onQuery}>
<i className="fa fa-bolt"></i>Query
</button>
<button
Expand Down
20 changes: 13 additions & 7 deletions caravel/assets/stylesheets/less/cosmo/bootswatch.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,22 @@
}
}

// Buttons ====================================================================

.btn {
padding: 8px 12px 6px 12px;
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
background: transparent;
border-bottom: 3px solid @brand-primary;
margin-bottom: -3px;
}
.btn-default:hover {
background-color: #efefef;
border-color: #bbb;

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
background: transparent;
}

// Buttons ====================================================================


// Typography =================================================================

body {
Expand Down
20 changes: 10 additions & 10 deletions caravel/assets/stylesheets/less/cosmo/variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
@gray-light: lighten(@gray-base, 70%); //
@gray-lighter: lighten(@gray-base, 90%); // #eee

@brand-primary: #515152;
@brand-primary: #45A5FF;
@brand-success: #4AC15F;
@brand-info: #2AB7CA;
@brand-info: lighten(#2AB7CA, 15%);
@brand-warning: #FED766;
@brand-danger: #FE4A49;

Expand Down Expand Up @@ -102,9 +102,9 @@
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small: 1.5;

@border-radius-base: 0;
@border-radius-large: 0;
@border-radius-small: 0;
@border-radius-base: 2px;
@border-radius-large: 2px;
@border-radius-small: 2px;

//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
Expand Down Expand Up @@ -146,11 +146,11 @@

@btn-primary-color: #fff;
@btn-primary-bg: @brand-primary;
@btn-primary-border: @btn-primary-bg;
@btn-primary-border: @brand-primary;

@btn-default-color: @gray-dark;
@btn-default-bg: #fff;
@btn-default-border: @gray-light;
@btn-default-color: #fff;
@btn-default-bg: @gray-dark;
@btn-default-border: @gray-dark;

@btn-success-color: @btn-primary-color;
@btn-success-bg: @brand-success;
Expand Down Expand Up @@ -501,7 +501,7 @@
@state-success-border: darken(spin(@state-success-bg, -10), 5%);

@state-info-text: darken(@brand-info, 22%);
@state-info-bg: lighten(@brand-info, 40%);
@state-info-bg: lighten(@brand-info, 20%);
@state-info-border: darken(spin(@state-info-bg, -10), 7%);

@state-warning-text: darken(@brand-warning, 30%);
Expand Down
14 changes: 7 additions & 7 deletions caravel/templates/caravel/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,25 +83,25 @@ <h1>
</div>
<div class="col-md-4">
<div class="btn-group pull-right" role="group" >
<button type="button" id="refresh_dash" class="btn btn-default" data-toggle="tooltip" title="Force refresh the whole dashboard">
<button type="button" id="refresh_dash" class="btn btn-default btn-sm" data-toggle="tooltip" title="Force refresh the whole dashboard">
<i class="fa fa-refresh"></i>
</button>
<button type="button" id="add-slice" class="btn btn-default {{ "disabled disabledButton" if not dash_save_perm }}" data-toggle="modal" data-target="#add_slice_modal">
<button type="button" id="add-slice" class="btn btn-default btn-sm {{ "disabled disabledButton" if not dash_save_perm }}" data-toggle="modal" data-target="#add_slice_modal">
<i class="fa fa-plus" data-toggle="tooltip" title="Add a new slice to the dashboard"></i>
</button>
<button type="button" id="refresh_dash_periodic" class="btn btn-default" data-toggle="modal" data-target="#refresh_modal">
<button type="button" id="refresh_dash_periodic" class="btn btn-default btn-sm" data-toggle="modal" data-target="#refresh_modal">
<i class="fa fa-clock-o" data-toggle="tooltip" title="Decide how frequent should the dashboard refresh"></i>
</button>
<button type="button" id="filters" class="btn btn-default" data-toggle="tooltip" title="View the list of active filters">
<button type="button" id="filters" class="btn btn-default btn-sm" data-toggle="tooltip" title="View the list of active filters">
<i class="fa fa-filter"></i>
</button>
<button type="button" id="css" class="btn btn-default {{ "disabled disabledButton" if not dash_edit_perm }} " data-toggle="modal" data-target="#css_modal">
<button type="button" id="css" class="btn btn-default btn-sm{{ "disabled disabledButton" if not dash_edit_perm }} " data-toggle="modal" data-target="#css_modal">
<i class="fa fa-css3" data-toggle="tooltip" title="Edit the dashboard's CSS"></i>
</button>
<a id="editdash" class="btn btn-default {{ "disabled disabledButton" if not dash_edit_perm }} " href="/dashboardmodelview/edit/{{ dashboard.id }}" title="Edit this dashboard's property" data-toggle="tooltip" >
<a id="editdash" class="btn btn-default btn-sm{{ "disabled disabledButton" if not dash_edit_perm }} " href="/dashboardmodelview/edit/{{ dashboard.id }}" title="Edit this dashboard's property" data-toggle="tooltip" >
<i class="fa fa-edit"></i>
</a>
<button type="button" id="savedash" class="btn btn-default {{ "disabled disabledButton" if not dash_save_perm }}" data-toggle="tooltip" title="Save the current positioning and CSS">
<button type="button" id="savedash" class="btn btn-default btn-sm {{ "disabled disabledButton" if not dash_save_perm }}" data-toggle="tooltip" title="Save the current positioning and CSS">
<i class="fa fa-save"></i>
</button>
</div>
Expand Down
24 changes: 12 additions & 12 deletions caravel/templates/caravel/explore.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,34 +225,34 @@ <h2>untitled</h2>
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">
<a role="button" tabindex="0" class="btn btn-default btn-sm" 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">
<span class="btn btn-default btn-sm" 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">
<span class="btn btn-default btn-sm" 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">
<span class="btn btn-default btn-sm {{ "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"
class="btn btn-default btn-sm disabled view_query"
data-toggle="modal"
data-target="#query_modal">
<span data-toggle="tooltip" title="{{ _("View database query") }}">
{{ _("query") }}
</span>
</span>
<span
class="btn btn-warning btn-sm notbtn"
id="timer"
title="{{ _("Query timer") }}"
data-toggle="tooltip">
{{ _("0 sec") }}
</span>
</div>
</div>
</div>
Expand Down

0 comments on commit de39923

Please sign in to comment.