changes to global search filter:
- Added clear button to clear input
- changed submit to resize based on content
Change-Id: Ida69f961effc261dc44319ba8710d9b4349ba847
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/directives/log-search-control.html b/app/common/directives/log-search-control.html
index 09a393b..0e4136e 100644
--- a/app/common/directives/log-search-control.html
+++ b/app/common/directives/log-search-control.html
@@ -2,5 +2,8 @@
<div class="content__search">
<label for="content__search-input">Event Log Search</label>
<input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
- <input id="content__search-submit" type="submit" class="btn btn-primary" value="Filter" ng-click="doSearchOnClick()"/>
+ <div class="search-submit__wrapper">
+ <button class="clear-input" ng-click="customSearch = ''">✕</button>
+ <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
+ </div>
</div>
\ No newline at end of file
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
index e93bff0..d4b9e14 100644
--- a/app/common/styles/elements/content-search.scss
+++ b/app/common/styles/elements/content-search.scss
@@ -30,12 +30,22 @@
opacity: .6;
}
- #content__search-submit {
- position: absolute;
+ .clear-input {
display: inline-block;
- width: 100px;
- top: .5em;
+ height: 30px;
+ width: 20px;
+ color: $darkgrey;
+ padding: 0;
+ margin-right: .5em;
+ }
+ .search-submit__wrapper {
+ position: absolute;
+ width: auto;
+ top: .4em;
right: 5px;
+ }
+ .content__search-submit {
+ display: inline-block;
padding: 1em 2em .9em;
min-height: 20px;
text-align: center;
@@ -43,6 +53,7 @@
font-weight: 700;
font-size: .8em;
border: 0;
+ width: auto;
&:hover {
cursor: pointer;
}
diff --git a/app/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index b646a46..51a9a1a 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -13,7 +13,10 @@
<div class="content__search">
<label for="content__search-input">Search</label> <input id="content__search-input" type="text"
ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
- <input id="content__search-submit" type="submit" class="btn btn-primary" value="Filter" ng-click="doSearchOnClick()"/>
+ <div class="search-submit__wrapper">
+ <button class="clear-input" ng-click="customSearch = ''">✕</button>
+ <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
+ </div>
</div>
</section>
diff --git a/app/server-health/controllers/sensors-overview-controller.html b/app/server-health/controllers/sensors-overview-controller.html
index abd3348..a310b9d 100644
--- a/app/server-health/controllers/sensors-overview-controller.html
+++ b/app/server-health/controllers/sensors-overview-controller.html
@@ -14,7 +14,10 @@
<div class="content__search">
<label for="content__search-input">Sensors Search</label>
<input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
- <input id="content__search-submit" type="submit" class="btn btn-primary" value="Filter" ng-click="doSearchOnClick()"/>
+ <div class="search-submit__wrapper">
+ <button class="clear-input" ng-click="customSearch = ''">✕</button>
+ <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
+ </div>
</div>
<div class="toggle-filter">
<p class="content-label">FILTER BY SEVERITY</p>