openstack/horizon
Code Issues Proposed changes

Merge "Magic Search Enablement"

Browse Source
This commit is contained in:
Jenkins 2015-03-20 17:59:15 +00:00 committed by Gerrit Code Review
commit 4990502a15
8 changed files with 125 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
horizon/static/angular/magic-search/magic-search.html Normal file
View File

@ -0,0 +1,50 @@
<!--! Magic Searchbar -->
<div class="magic-search" magic-overrides>
<div class="search-bar">
<i class="fi-filter fa fa-filter go"></i>
<div class="search-main-area">
<span class="item-list">
<span class="label radius secondary item"
ng-repeat="facet in currentSearch" ng-cloak="cloak">
<span>
{$ facet.label[0] $}:<b>{$ facet.label[1] $}</b>
</span>
<a class="remove" ng-click="removeFacet($index, $event)" title="{$ strings.remove $}">
<i class="fi-x fa fa-times"></i>
</a>
</span>
</span>
<span class="search-selected label" 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">
<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="">
<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>
<a ng-click="facetClicked($index, $event, facet.name)"
ng-show="isMatchLabel(facet.label)">
{$ facet.label[0] $}<span class="match">{$ facet.label[1] $}</span>{$ facet.label[2] $}
</a>
</li>
<li ng-repeat="option in filteredOptions" ng-show="facetSelected">
<a ng-click="optionClicked($index, $event, option.key)"
ng-show="!isMatchLabel(option.label)">
{$ option.label $}
</a>
<a ng-click="optionClicked($index, $event, option.key)"
ng-show="isMatchLabel(option.label)">
{$ option.label[0] $}<span class="match">{$ option.label[1] $}</span>{$ option.label[2] $}
</a>
</li>
</ul>
</div>
</div>
<a ng-click="clearSearch()" ng-show="currentSearch.length &gt; 0" title="{$ strings.cancel $}">
<i class="fi-x fa fa-times cancel"></i>
</a>
</div>
</div>

35
horizon/static/angular/magic-search/magic-search.js vendored Normal file
View File

@ -0,0 +1,35 @@
(function() {
'use strict';
angular.module('MagicSearch', ['ui.bootstrap'])
.directive('magicOverrides', function() {
return {
restrict: 'A',
controller: ['$scope', '$timeout',
function($scope, $timeout) {
// showMenu and hideMenu depend on foundation's dropdown. They need
// to be modified to work with another dropdown implemenation.
// For bootstrap, they are not needed at all.
$scope.showMenu = function() {
$timeout(function() {
$scope.isMenuOpen = true;
});
};
$scope.hideMenu = function() {
$timeout(function() {
$scope.isMenuOpen = false;
});
};
$scope.isMenuOpen = false;
// magic_search.js should absorb this code?
$scope.$on('facetsChanged', function() {
$timeout(function() {
$scope.currentSearch = [];
$scope.initSearch();
});
});
}
]
}; // end of return
}); // end of directive
})();

31
horizon/static/angular/magic-search/magic-search.scss Normal file
View File

@ -0,0 +1,31 @@
// Augments magic_search.scss with styles for bootstrap/Horizon.
.search-bar {
.search-entry {
.search-input {
padding: 1px 0px;
font: normal normal normal 12.6px/normal;
outline: none;
height: 24px;
width: 500px;
}
height: 24px;
position: relative;
}
.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;
}

1
horizon/static/angular/styles.scss
View File

@ -8,3 +8,4 @@
@import "modal-wait-spinner/modal-wait-spinner";
@import "metadata-tree/metadata-tree";
@import "metadata-display/metadata-display";
@import "magic-search/magic-search.scss";

3
horizon/templates/horizon/_scripts.html
View File

@ -53,6 +53,7 @@
<script src='{{ STATIC_URL }}angular/metadata-tree/metadata-tree.js'></script>
<script src='{{ STATIC_URL }}angular/metadata-tree/metadata-tree-service.js'></script>
<script src='{{ STATIC_URL }}angular/metadata-display/metadata-display.js'></script>
<script src='{{ STATIC_URL }}angular/magic-search/magic-search.js'></script>
<script src='{{ STATIC_URL }}horizon/lib/jquery/jquery.quicksearch.js'></script>
<script src="{{ STATIC_URL }}horizon/lib/jquery/jquery.tablesorter.js"></script>
@ -64,6 +65,8 @@
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js"></script>
<script src='{{ STATIC_URL }}horizon/lib/bootstrap_datepicker/bootstrap-datepicker.js'></script>
<script src="{{ STATIC_URL }}horizon/lib/magic_search/magic_search.js"></script>
<script src="{{ STATIC_URL }}horizon/lib/hogan.js"></script>
<script src='{{ STATIC_URL }}horizon/js/horizon.accordion_nav.js'></script>

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

@ -19,6 +19,7 @@
@import "components/network_topology";
@import "/angular/styles";
@import "/horizon/lib/magic_search/magic_search.scss";
/* new clearfix */
.clearfix:after {

3
openstack_dashboard/static_settings.py
View File

@ -34,6 +34,7 @@ import xstatic.pkg.jquery_quicksearch
import xstatic.pkg.jquery_tablesorter
import xstatic.pkg.jquery_ui
import xstatic.pkg.jsencrypt
import xstatic.pkg.magic_search
import xstatic.pkg.qunit
import xstatic.pkg.rickshaw
import xstatic.pkg.spin
@ -71,6 +72,8 @@ STATICFILES_DIRS = [
xstatic.main.XStatic(xstatic.pkg.jquery_tablesorter).base_dir),
('horizon/lib/jsencrypt',
xstatic.main.XStatic(xstatic.pkg.jsencrypt).base_dir),
('horizon/lib/magic_search',
xstatic.main.XStatic(xstatic.pkg.magic_search).base_dir),
('horizon/lib/qunit',
xstatic.main.XStatic(xstatic.pkg.qunit).base_dir),
('horizon/lib',

1
requirements.txt
View File

@ -55,6 +55,7 @@ XStatic-JQuery.quicksearch>=2.0.3.1 # MIT License
XStatic-JQuery.TableSorter>=2.0.5b.0 # MIT License
XStatic-jquery-ui>=1.10.1 # MIT License
XStatic-JSEncrypt>=2.0.0.2 # MIT License
XStatic-Magic-Search>=0.2.0.1 # Apache License
XStatic-QUnit>=1.14.0.2 # MIT License
XStatic-Rickshaw>=1.5.0 # BSD License (prior)
XStatic-smart-table>=1.4.5.3 # MIT License