ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-12 07:52:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Search] Search icon

Browse Source 
Search icon now is not visible when text is
entered in the search bar, even when the bar
is not in focus.
This commit is contained in:
slhale 2015-08-11 13:18:05 -07:00
parent 11a45e4db0
commit 23bc246a48
4 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -296,15 +296,19 @@ ul.tree {
height: 0; height: 0;
margin-top: -19px; margin-top: -19px;
transition: visibility .15s, opacity .15s; } transition: visibility .15s, opacity .15s; }
/* line 68, ../sass/search/_search.scss */ /* line 67, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-icon.content {
visibility: hidden;
opacity: 0; }
/* line 74, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-input:focus ~ div.search-icon { .search-holder .search .search-bar .search-input:focus ~ div.search-icon {
visibility: hidden; visibility: hidden;
opacity: 0; } opacity: 0; }
/* line 76, ../sass/search/_search.scss */ /* line 82, ../sass/search/_search.scss */
.search-holder .search .search-scroll { .search-holder .search .search-scroll {
top: 25px; top: 25px;
overflow-y: auto; } overflow-y: auto; }
/* line 83, ../sass/search/_search.scss */ /* line 89, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item { .search-holder .search .search-scroll .results .search-result-item {
-moz-transition: background-color 0.25s; -moz-transition: background-color 0.25s;
-o-transition: background-color 0.25s; -o-transition: background-color 0.25s;
@ -314,10 +318,10 @@ ul.tree {
border-radius: 2px; border-radius: 2px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 2px; } padding-bottom: 2px; }
/* line 97, ../sass/search/_search.scss */ /* line 103, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item .label { .search-holder .search .search-scroll .results .search-result-item .label {
margin-left: 6px; } margin-left: 6px; }
/* line 101, ../sass/search/_search.scss */ /* line 107, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item .label .title-label { .search-holder .search .search-scroll .results .search-result-item .label .title-label {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -329,47 +333,47 @@ ul.tree {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
/* line 123, ../sass/search/_search.scss */ /* line 129, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected { .search-holder .search .search-scroll .results .search-result-item.selected {
background: #005177; background: #005177;
color: #fff; } color: #fff; }
/* line 127, ../sass/search/_search.scss */ /* line 133, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected .view-control { .search-holder .search .search-scroll .results .search-result-item.selected .view-control {
color: #0099cc; } color: #0099cc; }
/* line 130, ../sass/search/_search.scss */ /* line 136, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon { .search-holder .search .search-scroll .results .search-result-item.selected .label .type-icon {
color: #fff; } color: #fff; }
/* line 137, ../sass/search/_search.scss */ /* line 143, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover { .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover {
background: #404040; background: #404040;
color: #cccccc; } color: #cccccc; }
/* line 140, ../sass/search/_search.scss */ /* line 146, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger { .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
display: block; } display: block; }
/* line 143, ../sass/search/_search.scss */ /* line 149, ../sass/search/_search.scss */
.search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon { .search-holder .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
color: #33ccff; } color: #33ccff; }
/* line 151, ../sass/search/_search.scss */ /* line 157, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon { .search-holder .search .search-scroll .load-icon {
position: relative; } position: relative; }
/* line 153, ../sass/search/_search.scss */ /* line 159, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading { .search-holder .search .search-scroll .load-icon.loading {
pointer-events: none; pointer-events: none;
margin-left: 6px; } margin-left: 6px; }
/* line 157, ../sass/search/_search.scss */ /* line 163, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading .title-label { .search-holder .search .search-scroll .load-icon.loading .title-label {
font-style: italic; font-style: italic;
font-size: .9em; font-size: .9em;
opacity: 0.5; opacity: 0.5;
margin-left: 26px; margin-left: 26px;
line-height: 24px; } line-height: 24px; }
/* line 167, ../sass/search/_search.scss */ /* line 173, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon.loading .wait-spinner { .search-holder .search .search-scroll .load-icon.loading .wait-spinner {
margin-left: 6px; } margin-left: 6px; }
/* line 172, ../sass/search/_search.scss */ /* line 178, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon:not(.loading) { .search-holder .search .search-scroll .load-icon:not(.loading) {
cursor: pointer; } cursor: pointer; }
/* line 177, ../sass/search/_search.scss */ /* line 183, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-more-button { .search-holder .search .search-scroll .load-more-button {
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;

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

@ -63,6 +63,12 @@
// Text focus display transition // Text focus display transition
transition: visibility .15s, opacity .15s; transition: visibility .15s, opacity .15s;
&.content {
// Make icon invisible whenever there is text input
visibility: hidden;
opacity: 0;
}
} }
.search-input:focus~div.search-icon { .search-input:focus~div.search-icon {

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

@ -30,7 +30,8 @@
ng-model="ngModel.input" ng-model="ngModel.input"
ng-keyup="controller.search()" ng-keyup="controller.search()"
id="searchInput" /> id="searchInput" />
<div class="ui-symbol search-icon"> <div class="ui-symbol search-icon"
ng-class="{content: controller.hasInput()}">
M M
</div> </div>
<!--mct-control key="textfield" <!--mct-control key="textfield"

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

@ -110,6 +110,14 @@ define(function () {
} else { } else {
$scope.results = fullResults.hits.slice(0, numResults); $scope.results = fullResults.hits.slice(0, numResults);
} }
},
/**
* Determines if the search bar has any text inputted into it.
* Used as a helper for CSS styling.
*/
hasInput: function () {
return !($scope.ngModel.input === "" || $scope.ngModel.input === undefined);
} }
}; };
} }