ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-10 03:11:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Search] Adding clear text button

Browse Source 
It is in place, but clicking on it does nothing yet.
This commit is contained in:
slhale 2015-08-12 10:27:34 -07:00
parent 9dd520f17b
commit 3555f41f3e
3 changed files with 52 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -284,8 +284,9 @@ ul.tree {
.search-holder .search .search-bar .search-input { .search-holder .search .search-bar .search-input {
position: relative; position: relative;
top: -4px; top: -4px;
width: 100%; } width: 100%;
/* line 49, ../sass/search/_search.scss */ padding-right: 16px; }
/* line 52, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-icon { .search-holder .search .search-bar .search-icon {
color: #737373; color: #737373;
font-size: 12px; font-size: 12px;
@ -294,20 +295,27 @@ ul.tree {
height: 0; height: 0;
margin-top: -19px; margin-top: -19px;
transition: visibility .15s, opacity .15s; } transition: visibility .15s, opacity .15s; }
/* line 64, ../sass/search/_search.scss */ /* line 67, ../sass/search/_search.scss */
.search-holder .search .search-bar .search-icon.content { .search-holder .search .search-bar .search-icon.content {
visibility: hidden; visibility: hidden;
opacity: 0; } opacity: 0; }
/* line 71, ../sass/search/_search.scss */ /* 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 79, ../sass/search/_search.scss */ /* line 80, ../sass/search/_search.scss */
.search-holder .search .search-bar .clear-button {
color: #737373;
font-size: 6px;
float: right;
margin-right: 4px;
margin-top: 2px; }
/* line 94, ../sass/search/_search.scss */
.search-holder .search .search-scroll { .search-holder .search .search-scroll {
top: 25px; top: 25px;
overflow-y: auto; overflow-y: auto;
padding-right: 5px; } padding-right: 5px; }
/* line 87, ../sass/search/_search.scss */ /* line 102, ../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;
@ -317,10 +325,10 @@ ul.tree {
border-radius: 2px; border-radius: 2px;
padding-top: 4px; padding-top: 4px;
padding-bottom: 2px; } padding-bottom: 2px; }
/* line 101, ../sass/search/_search.scss */ /* line 116, ../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 105, ../sass/search/_search.scss */ /* line 120, ../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;
@ -332,47 +340,47 @@ ul.tree {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
/* line 127, ../sass/search/_search.scss */ /* line 142, ../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 131, ../sass/search/_search.scss */ /* line 146, ../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 134, ../sass/search/_search.scss */ /* line 149, ../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 141, ../sass/search/_search.scss */ /* line 156, ../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 144, ../sass/search/_search.scss */ /* line 159, ../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 147, ../sass/search/_search.scss */ /* line 162, ../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 155, ../sass/search/_search.scss */ /* line 170, ../sass/search/_search.scss */
.search-holder .search .search-scroll .load-icon { .search-holder .search .search-scroll .load-icon {
position: relative; } position: relative; }
/* line 157, ../sass/search/_search.scss */ /* line 172, ../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 161, ../sass/search/_search.scss */ /* line 176, ../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 171, ../sass/search/_search.scss */ /* line 186, ../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 176, ../sass/search/_search.scss */ /* line 191, ../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 181, ../sass/search/_search.scss */ /* line 196, ../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;

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

@ -44,11 +44,14 @@
position: relative; position: relative;
top: -$heightAdjust; top: -$heightAdjust;
width: 100%; width: 100%;
// For clear button
padding-right: 16px;
} }
.search-icon { .search-icon {
color: $colorItemFg; color: $colorItemFg;
font-size: 12px;//$iconWidth; font-size: 12px;
// Make the icon within the left edge of the input area // Make the icon within the left edge of the input area
margin-left: 3px; margin-left: 3px;
@ -68,12 +71,24 @@
} }
} }
.search-input:focus~div.search-icon { .search-input:focus + div.search-icon {
// Make icon invisible when the text input is focused // Make icon invisible when the text input is focused
//display: none;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }
.clear-button {
color: $colorItemFg;
font-size: 6px;
float: right;
margin-right: 4px;
margin-top: 2px;
&.content {
// Make button visible only when there is text input
}
}
} }
.search-scroll { .search-scroll {

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

@ -23,17 +23,21 @@
ng-controller="SearchController as controller"> ng-controller="SearchController as controller">
<!-- Search bar input --> <!-- Search bar input -->
<!-- ui symbols for search are 'd' and 'M' -->
<div class="search-bar"> <div class="search-bar">
<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" />
<!-- 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>
<a class="ui-symbol clear-button"
ng-class="{content: controller.hasInput()}">
x
</a>
<!--mct-control key="textfield" <!--mct-control key="textfield"
class="search-input" class="search-input"
ng-model="ngModel.input"> ng-model="ngModel.input">