Merge "Magic Search now inherits from Bootstrap Theme"
This commit is contained in:
Jenkins
Gerrit Code Review
commit
073ce8c5fd
@ -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>
|
||||
@ -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 > 0" title="{$ ::strings.cancel $}">
|
||||
</span>
|
||||
</span>
|
||||
<a class="magic-search-clear" ng-click="clearSearch()" ng-show="currentSearch.length > 0" title="{$ ::strings.cancel $}">
|
||||
<i class="fi-x fa fa-times cancel"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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,5 +1,6 @@
|
||||
@import "icons";
|
||||
@import "components/hamburger";
|
||||
@import "components/magic_search";
|
||||
@import "components/sidebar";
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
hz-magic-search-bar {
|
||||
.input-group {
|
||||
& > st-magic-search.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user