ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-16 22:28:13 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Search] Clear icon working

Browse Source 
Clicking on the clear icon now clears
the input text in the search bar.
This commit is contained in:
slhale
2015-08-12 12:46:01 -07:00
parent a76e54483a
commit dd993c81a7
4 changed files with 154 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
platform/commonUI/general/res/css/tree.css
View File

@ -276,120 +276,129 @@ ul.tree {
padding-right: 5px; padding-right: 5px;
top: 23px; top: 23px;
margin-top: 10px; } margin-top: 10px; }
/* line 36, ../sass/search/_search.scss */ /* line 34, ../sass/search/_search.scss */
.search-holder .search .search-bar { .search-holder .search {
width: 100%; position: relative; }
margin-top: 4px; } /* line 37, ../sass/search/_search.scss */
/* line 43, ../sass/search/_search.scss */ .search-holder .search .search-bar {
.search-holder .search .search-bar .search-input {
position: relative;
top: -4px;
width: 100%; width: 100%;
padding-right: 16px; } margin-top: 4px; }
/* line 52, ../sass/search/_search.scss */ /* line 44, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-icon { .search-holder .search .search-bar .search-input {
color: #737373; position: relative;
font-size: 12px; top: -4px;
margin-left: 3px; width: 100%;
width: 0; padding-right: 16px; }
height: 0; /* line 53, ../sass/search/_search.scss */
margin-top: -19px; .search-holder .search .search-bar .search-icon {
transition: visibility .15s, opacity .15s; } color: #737373;
/* line 67, ../sass/search/_search.scss */ font-size: 12px;
.search-holder .search .search-bar .search-icon.content { margin-left: 3px;
width: 0;
height: 0;
margin-top: -19px;
transition: visibility .15s, opacity .15s; }
/* line 68, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-icon.content {
visibility: hidden;
opacity: 0; }
/* line 75, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-input:focus + div.search-icon {
visibility: hidden; visibility: hidden;
opacity: 0; } opacity: 0; }
/* line 74, ../sass/search/_search.scss */ /* line 81, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-input:focus + div.search-icon { .search-holder .search .search-bar .clear-icon {
visibility: hidden; position: absolute;
opacity: 0; } display: block;
/* line 80, ../sass/search/_search.scss */ cursor: pointer;
.search-holder .search .search-bar .clear-icon { color: #737373;
color: #737373; font-size: 6px;
font-size: 6px; padding: 4px;
float: right; right: 0px;
margin-right: 2px; top: -1px;
margin-top: -2px; margin-right: 2px;
padding: 4px; visibility: hidden; }
cursor: crosshair; } /* line 99, ../sass/search/_search.scss */
/* line 98, ../sass/search/_search.scss */ .search-holder .search .search-bar .clear-icon.content {
.search-holder .search .search-scroll { visibility: visible; }
top: 25px; /* line 105, ../sass/search/_search.scss */
overflow-y: auto; .search-holder .search .search-scroll {
padding-right: 5px; } top: 25px;
/* line 106, ../sass/search/_search.scss */ overflow-y: auto;
.search-holder .search .search-scroll .results .search-result-item { padding-right: 5px; }
-moz-transition: background-color 0.25s; /* line 113, ../sass/search/_search.scss */
-o-transition: background-color 0.25s; .search-holder .search .search-scroll .results .search-result-item {
-webkit-transition: background-color 0.25s; -moz-transition: background-color 0.25s;
transition: background-color 0.25s; -o-transition: background-color 0.25s;
margin-bottom: 2px; -webkit-transition: background-color 0.25s;
border-radius: 2px; transition: background-color 0.25s;
padding-top: 4px; margin-bottom: 2px;
padding-bottom: 2px; } border-radius: 2px;
/* line 120, ../sass/search/_search.scss */ padding-top: 4px;
.search-holder .search .search-scroll .results .search-result-item .label { padding-bottom: 2px; }
margin-left: 6px; } /* line 127, ../sass/search/_search.scss */
/* line 124, ../sass/search/_search.scss */ .search-holder .search .search-scroll .results .search-result-item .label {
.search-holder .search .search-scroll .results .search-result-item .label .title-label {
display: inline-block;
position: absolute;
left: 29px;
right: 5px;
font-size: .8em;
line-height: 17px;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
/* line 146, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected {
background: #005177;
color: #fff; }
/* line 150, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected .view-control {
color: #0099cc; }
/* line 153, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
color: #fff; }
/* line 160, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
background: #404040;
color: #cccccc; }
/* line 163, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
display: block; }
/* line 166, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
color: #33ccff; }
/* line 174, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon {
position: relative; }
/* line 176, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading {
pointer-events: none;
margin-left: 6px; }
/* line 180, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading .title-label {
font-style: italic;
font-size: .9em;
opacity: 0.5;
margin-left: 26px;
line-height: 24px; }
/* line 190, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading .wait-spinner {
margin-left: 6px; } margin-left: 6px; }
/* line 195, ../sass/search/_search.scss */ /* line 131, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon:not(.loading) { .search-holder .search .search-scroll .results .search-result-item .label .title-label {
cursor: pointer; } display: inline-block;
/* line 200, ../sass/search/_search.scss */ position: absolute;
.search-holder .search .search-scroll .load-more-button { left: 29px;
margin-top: 5px; right: 5px;
margin-bottom: 5px; font-size: .8em;
position: relative; line-height: 17px;
left: 25%; width: auto;
width: 50%; overflow: hidden;
white-space: nowrap; text-overflow: ellipsis;
height: 20px; white-space: nowrap; }
line-height: 11px; /* line 153, ../sass/search/_search.scss */
font-size: 0.7em; } .search-holder .search .search-scroll .results .search-result-item.selected {
background: #005177;
color: #fff; }
/* line 157, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected .view-control {
color: #0099cc; }
/* line 160, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
color: #fff; }
/* line 167, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
background: #404040;
color: #cccccc; }
/* line 170, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
display: block; }
/* line 173, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
color: #33ccff; }
/* line 181, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon {
position: relative; }
/* line 183, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading {
pointer-events: none;
margin-left: 6px; }
/* line 187, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading .title-label {
font-style: italic;
font-size: .9em;
opacity: 0.5;
margin-left: 26px;
line-height: 24px; }
/* line 197, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading .wait-spinner {
margin-left: 6px; }
/* line 202, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon:not(.loading) {
cursor: pointer; }
/* line 207, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-more-button {
margin-top: 5px;
margin-bottom: 5px;
position: relative;
left: 25%;
width: 50%;
white-space: nowrap;
height: 20px;
line-height: 11px;
font-size: 0.7em; }

25
platform/commonUI/general/res/sass/search/_search.scss
View File

@ -32,6 +32,7 @@
margin-top: 10px; margin-top: 10px;
.search { .search {
position: relative;
.search-bar { .search-bar {
$heightAdjust: 4px; $heightAdjust: 4px;
@ -78,20 +79,26 @@
} }
.clear-icon { .clear-icon {
position: absolute;
display: block;
cursor: pointer;
color: $colorItemFg; color: $colorItemFg;
font-size: 6px; font-size: 6px;
float: right;
margin-right: 2px;
margin-top: -2px;
padding: 4px; padding: 4px;
&.content { right: 0px;
// Make button visible only when there is text input top: -1px;
} margin-right: 2px;
//temp // Icon is visible only when there is text input
cursor: crosshair; visibility: hidden;
&.content {
visibility: visible;
}
} }
} }

10
platform/search/res/templates/search.html
View File

@ -24,23 +24,28 @@
<!-- Search bar --> <!-- Search bar -->
<div class="search-bar"> <div class="search-bar">
<!-- Input field --> <!-- Input field -->
<input class="search-input" <input class="search-input"
type="text" type="text"
ng-model="ngModel.input" ng-model="ngModel.input"
ng-keyup="controller.search()" ng-keyup="controller.search()"
id="searchInput" /> id="searchInput" />
<!-- Search icon --> <!-- Search icon -->
<!-- ui symbols for search are 'd' and 'M' --> <!-- ui symbols for search are 'd' and 'M' -->
<div class="ui-symbol search-icon" <div class="ui-symbol search-icon"
ng-class="{content: controller.hasInput()}"> ng-class="{content: controller.hasInput()}">
M M
</div> </div>
<!-- Clear button/icon 'x' -->
<!-- Clear icon/button 'x' -->
<a class="ui-symbol clear-icon" <a class="ui-symbol clear-icon"
ng-class="{content: controller.hasInput()}"> ng-class="{content: controller.hasInput()}"
ng-click="controller.clear()">
x x
</a> </a>
</div> </div>
<!-- This div exists to determine scroll bar location --> <!-- This div exists to determine scroll bar location -->
@ -72,4 +77,5 @@
</div> </div>
</div> </div>
</div> </div>

8
platform/search/src/controllers/SearchController.js
View File

@ -118,6 +118,14 @@ define(function () {
*/ */
hasInput: function () { hasInput: function () {
return !($scope.ngModel.input === "" || $scope.ngModel.input === undefined); return !($scope.ngModel.input === "" || $scope.ngModel.input === undefined);
},
/**
* Clears the input text.
*/
clear: function () {
$scope.ngModel.input = '';
$scope.ngModel.search = false;
} }
}; };
} }