openstack/deb-horizon
Code Issues Proposed changes

Magic Search now inherits from Bootstrap Theme

Browse Source 
The magic search css was not themeable out of the box.  Also, we were
overriding almost every style in it with our own.  This causes
unneccessary complexity in the css; we should just not include it and
provide css that uses theme variables.

Partially-Implements: blueprint horizon-theme-css-reorg

Change-Id: I116e32b64bd6ba4c8f3e65fd1e145387f3071663
This commit is contained in:
Diana Whitten 2015-10-07 14:25:02 -07:00
parent 0175b62c66
commit fc8538c8de
7 changed files with 124 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
horizon/static/framework/widgets/magic-search/hz-magic-search-bar.html
View File

@ -1,14 +1,19 @@
<div class="form-group has-feedback magic-search-bar">
<div class="input-group input-group-sm">
<div class="input-group">
<span class="input-group-addon">
<span class="fa fa-search"></span>
</span>
<st-magic-search>
<st-magic-search class="form-control">
<magic-search
template="/static/framework/widgets/magic-search/magic-search.html"
strings="filterStrings"
facets="{{ filterFacets }}">
</magic-search>
</st-magic-search>
<span ng-if="showSettings" class="input-group-btn" ng-click="searchSettingsCallback()">
<button class="btn btn-default" type="button">
<span class="fa fa-cog fa-lg"></span>
</button>
</span>
</div>
</div>

16
horizon/static/framework/widgets/magic-search/magic-search.html
View File

@ -2,9 +2,9 @@
<div class="magic-search" magic-overrides>
<div class="search-bar">
<i class="fi-filter fa fa-search go"></i>
<div class="search-main-area">
<span class="search-main-area">
<span class="item-list">
<span class="label radius secondary item"
<span class="radius secondary item"
ng-repeat="facet in currentSearch" ng-cloak="cloak" ng-class="{'server-side-item': facet.isServer}">
<i data-toggle="tooltip" title="{$ ::strings.serverFacet $}"
ng-class="{'fa fa-server': facet.isServer}"></i>
@ -18,14 +18,14 @@
</a>
</span>
</span>
<span class="search-selected label" ng-cloak="" ng-show="facetSelected">
<span class="search-selected" ng-cloak="" ng-show="facetSelected">
{$ facetSelected.label[0] $}:
</span>
<!-- For bootstrap, the dropdown attribute is moved from input up to div. -->
<div class="search-entry" dropdown is-open="isMenuOpen">
<span class="search-entry" dropdown is-open="isMenuOpen">
<input class="search-input" type="text" dropdown-toggle
placeholder="{$ strings.prompt $}" autocomplete="off" />
<ul id="facet-drop" class="f-dropdown dropdown-menu" data-dropdown-content="">
<ul class="facet-drop f-dropdown dropdown-menu" data-dropdown-content="">
<li ng-repeat="facet in filteredObj" ng-show="!facetSelected">
<a ng-click="facetClicked($index, $event, facet.name)"
ng-show="!isMatchLabel(facet.label)">{$ ::facet.label $}</a>
@ -45,9 +45,9 @@
</a>
</li>
</ul>
</div>
</div>
<a ng-click="clearSearch()" ng-show="currentSearch.length &gt; 0" title="{$ ::strings.cancel $}">
</span>
</span>
<a class="magic-search-clear" ng-click="clearSearch()" ng-show="currentSearch.length &gt; 0" title="{$ ::strings.cancel $}">
<i class="fi-x fa fa-times cancel"></i>
</a>
</div>

182
horizon/static/framework/widgets/magic-search/magic-search.scss
View File

@ -1,109 +1,125 @@
// Augments magic_search.scss with styles for bootstrap/Horizon.
// Replaces magic_search.scss with styles for bootstrap/Horizon.
.search-bar {
min-width: $magic-search-min-width;
border-color: $magic-search-border-color;
border-radius: $magic-search-border-radius;
margin-bottom: $magic-search-margin-bottom;
padding: $magic-search-margin-padding;
/*-----------------------------------------
Magic Search bar
----------------------------------------- */
.search-entry {
.search-input {
padding: 1px 0px;
font: normal normal normal 12.6px/normal;
outline: none;
height: 24px;
}
height: 24px;
position: relative;
}
// Helper variable
$magic-search-padding: ceil($input-height-base - $font-size-small * $line-height-base - $padding-small-vertical * 2)/2;
.item-list {
.item {
background-color: $gray-light;
a {
color: $brand-danger;
}
}
.server-side-item {
background-color: $gray-lighter;
}
}
hz-magic-search-bar {
.fa-filter {
padding-left: 5px;
font-size: larger;
}
.fa-times {
font-size: larger;
cursor: pointer;
}
.label {
font-size: 100%;
font-weight: normal;
}
}
.search-main-area {
padding-left: 10px;
}
.hz-magic-search-bar {
.magic-search-bar {
.input-group {
width: 100%;
.fa-search {
cursor: auto;
& > st-magic-search.form-control {
padding: 0 $padding-xs-horizontal 0 0;
min-height: $input-height-base + 2;
height: 100%;
}
}
// Specificity Required
.form-group .input-group .input-group-addon {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.input-group-btn {
// Notes:
// * We may need a better solution than this if we
// ever want to support button groups that are
// small or large, or a state other than default.
// But, until then, this does the trick for our
// standard use case!
// * If this seems odds, its because Bootstrap button
// groups don't allow the trailing button to grow in
// height so we have to make the whole span look like
// the button instead. This can be confusing: the
// click event needs to live on the span now, not the button.
border-radius: 0 $border-radius-base $border-radius-base 0;
border: 1px solid $btn-default-border;
border-left: none;
cursor: pointer;
outline: 0;
background-image: none;
&:active {
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
button {
&,
&:hover {
background-color: transparent;
border: none;
box-shadow: none;
}
&:active {
@include box-shadow(none);
}
}
}
.search-bar {
border-color: #cccccc;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-bottom: 0;
display: table;
width: 100%;
height: $line-height-computed;
i.cancel {
top: 0.45em;
// Layout
.magic-search-clear,
.search-main-area {
display: table-cell;
}
.search-main-area {
margin-left: 0;
padding-left: 0.2em;
padding-bottom: $magic-search-padding;
}
.item-list {
.item {
padding-right: 0.3em;
padding-top: 0.3em;
.fi-filter {
display: none;
}
.remove {
padding-left: 0.3em;
}
// Input Text Box
.search-input {
border: none;
width: 250px;
margin: $magic-search-padding + 2 0 0 $magic-search-padding + 2;
&:focus {
outline: none;
}
}
// Token
.item {
font-size: $font-size-small;
border-radius: $border-radius-base;
display: inline-block;
background-color: $gray-lighter;
padding: $padding-small-vertical 0 $padding-small-vertical $padding-small-horizontal;
margin: $magic-search-padding 0 0 $padding-xs-horizontal;
.remove {
padding: 0 $padding-small-vertical;
color: $brand-danger;
}
}
// Pre-Token Label
.search-selected {
padding-right: 0.3em;
color: $gray-light;
padding-left: $padding-small-vertical;
}
.search-entry {
height: inherit;
li {
cursor: pointer;
}
.search-input {
min-width: 260px;
@include search-placeholder {
font-weight: normal;
color: $placeholder-text-color;
}
}
// Search Bar Clear Icon
.magic-search-clear {
font-size: $font-size-base;
color: $gray;
width: $font-size-base;
vertical-align: middle;
text-align: center;
}
}
}

1
openstack_dashboard/static/dashboard/scss/horizon.scss
View File

@ -13,7 +13,6 @@
// Vendor Components
@import "/bootstrap/scss/bootstrap";
@import "/horizon/lib/font-awesome/scss/font-awesome.scss";
@import "/horizon/lib/magic_search/magic_search.scss";
// Main Page Layout
@import "layout";

4
openstack_dashboard/themes/default/bootstrap/_variables.scss
View File

@ -90,7 +90,7 @@ $icon-font-svg-id: "glyphicons_halflingsregular" !default;
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
//## Define common padding and border radius sizes and more.
$padding-base-vertical: 6px !default;
$padding-base-horizontal: 12px !default;
@ -198,7 +198,7 @@ $input-border-focus: #66afe9 !default;
$input-color-placeholder: $gray-light !default;
//** Default `.form-control` height
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2.5) !default;
//** Large `.form-control` height
$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
//** Small `.form-control` height

1
openstack_dashboard/themes/material/static/horizon/_styles.scss
View File

@ -1,5 +1,6 @@
@import "icons";
@import "components/hamburger";
@import "components/magic_search";
@import "components/sidebar";

7
openstack_dashboard/themes/material/static/horizon/components/_magic_search.scss Normal file
View File

@ -0,0 +1,7 @@
hz-magic-search-bar {
.input-group {
& > st-magic-search.form-control {
box-shadow: none;
}
}
}