From 9fa6184b0adaf18906e425899dab11cd3c522e37 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Tue, 19 Jul 2016 15:23:22 -0700
Subject: [PATCH 1/3] [Frontend] Markup / Angular mods to Search

Fixes #1093
WIP: markup changes. Needs CSS mods effected in
#1047 as well.
---
 platform/search/res/templates/search.html | 87 +++++++++++++----------
 1 file changed, 51 insertions(+), 36 deletions(-)

diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html
index abad85e38a..c7d5e101e0 100644
--- a/platform/search/res/templates/search.html
+++ b/platform/search/res/templates/search.html
@@ -19,41 +19,56 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="l-flex-col flex-elem grows holder holder-search"  ng-controller="SearchController as controller">
-    <div class="search-bar flex-elem"
-         ng-controller="ClickAwayController as toggle"
-         ng-class="{ holder: !(ngModel.input === '' || ngModel.input === undefined) }">
-        <input class="search-input"
-               type="text"
-               ng-model="ngModel.input"
-               ng-keyup="controller.search()"/>
-        <a class="clear-icon"
-           ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
-           ng-click="ngModel.input = ''; controller.search()"></a>
-        <a class="menu-icon"
-           ng-click="toggle.toggle()"></a>
-        <mct-include key="'search-menu'"
-                     class="menu-element search-menu-holder"
-                     ng-class="{off: !toggle.isActive()}"
-                     ng-model="ngModel"
-                     ng-click="toggle.setState(true)">
-        </mct-include>
-    </div>
-    <div class="active-filter-display flex-elem holder"
-         ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}"
-         ng-controller="SearchMenuController as menuController">
-        <a class="clear-icon clear-filters-icon"
-           ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
-    </div>
-    <div class="search-results flex-elem holder grows vscroll"
-         ng-class="{ off: !(loading || results.length > 0), loading: loading }">
-        <mct-representation key="'search-item'"
-                            ng-repeat="result in results"
-                            mct-object="result.object"
-                            ng-model="ngModel"
-                            class="l-flex-row flex-elem grows">
-        </mct-representation>
-        <a class="load-more-button s-btn vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
-    </div>
+<div class="angular-w" ng-controller="SearchController as controller">
+    <div class="l-flex-col flex-elem grows holder holder-search" ng-controller="SearchMenuController as menuController">
+        <div class="search-bar flex-elem l-flex-row"
+             ng-controller="ClickAwayController as toggle"
+             ng-class="{ holder: !(ngModel.input === '' || ngModel.input === undefined) }">
 
+            <div class="holder flex-elem grows">
+                <input class="search-input"
+                       type="text"
+                       ng-model="ngModel.input"
+                       ng-keyup="controller.search()"/>
+                <a class="clear-icon clear-input icon-x-in-circle"
+                   ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
+                   ng-click="ngModel.input = ''; controller.search()"></a>
+                <a class="menu-icon context-available"
+                   ng-click="toggle.toggle()"></a>
+                <mct-include key="'search-menu'"
+                             class="menu-element search-menu-holder"
+                             ng-class="{off: !toggle.isActive()}"
+                             ng-model="ngModel"
+                             ng-click="toggle.setState(true)">
+                </mct-include>
+            </div>
+
+            <a class="holder s-btn flex-elem btn-cancel"
+               ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
+               ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
+                Cancel</a>
+        </div>
+
+        <div class="active-filter-display flex-elem holder"
+             ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}">
+            <a class="clear-filters icon-x-in-circle"
+               ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
+        </div>
+
+        <div class="holder results-msg" ng-model="ngModel"
+             ng-show="!loading && !results.length > 0 && ngModel.search">
+            No results found</div>
+
+        <div class="search-results flex-elem holder grows vscroll"
+             ng-class="{ off: !(loading || results.length > 0), loading: loading }">
+            <mct-representation key="'search-item'"
+                                ng-repeat="result in results"
+                                mct-object="result.object"
+                                ng-model="ngModel"
+                                class="l-flex-row flex-elem grows">
+            </mct-representation>
+            <a class="load-more-button s-btn vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
+        </div>
+
+    </div>
 </div>

From 06f2c74444ce5a3ff94d9f2be8b2cb8e3e3cc66b Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 2 Aug 2016 15:57:43 -0700
Subject: [PATCH 2/3] [Frontend] Minor search enhancements

Fixes #1093
Finessed and cleaned up filters display
element; added '# results found' element;
---
 .../commonUI/general/res/sass/search/_search.scss   |  7 +++----
 platform/search/res/templates/search.html           | 13 ++++++++-----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss
index 964a36a708..51c451147f 100644
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -126,16 +126,15 @@
 		$p: $interiorMargin;
 		box-sizing: border-box;
 		line-height: 130%;
-		//padding-left: $s * 2.25;
+		padding-left: $s * 2;
 		font-size: $s;
 
 		.clear-filters {
-			color: $colorInputIcon;
 			opacity: 1;
 			font-size: 0.9em;
             margin-right: $interiorMarginSm;
-			//position: absolute;
-			//left: 1px;
+			position: absolute;
+			left: 1px;
 			cursor: pointer;
 		}
 	}
diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html
index c7d5e101e0..04d3871f5d 100644
--- a/platform/search/res/templates/search.html
+++ b/platform/search/res/templates/search.html
@@ -43,7 +43,7 @@
                 </mct-include>
             </div>
 
-            <a class="holder s-btn flex-elem btn-cancel"
+            <a class="holder s-button flex-elem btn-cancel"
                ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
                ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
                 Cancel</a>
@@ -51,13 +51,16 @@
 
         <div class="active-filter-display flex-elem holder"
              ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}">
-            <a class="clear-filters icon-x-in-circle"
+            <a class="clear-filters icon-x-in-circle s-icon-button"
                ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
         </div>
 
-        <div class="holder results-msg" ng-model="ngModel"
-             ng-show="!loading && !results.length > 0 && ngModel.search">
-            No results found</div>
+        <div class="flex-elem holder results-msg" ng-model="ngModel" ng-show="!loading && ngModel.search">
+            {{
+                !results.length > 0? 'No results found':
+                    results.length + ' result' + (results.length > 1? 's':'') + ' found'
+            }}
+        </div>
 
         <div class="search-results flex-elem holder grows vscroll"
              ng-class="{ off: !(loading || results.length > 0), loading: loading }">

From f3bd88837f88312005124e6c3c17d7af7a7841a8 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 8 Aug 2016 17:51:39 -0700
Subject: [PATCH 3/3] Merge remote-tracking branch 'origin/master' into
 search1093-b

Conflicts:
	platform/search/res/templates/search.html
---
 platform/search/res/templates/search.html | 100 ++++++++++++----------
 1 file changed, 55 insertions(+), 45 deletions(-)

diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html
index 494b56841a..f589a1f4d5 100644
--- a/platform/search/res/templates/search.html
+++ b/platform/search/res/templates/search.html
@@ -19,52 +19,62 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="l-flex-col flex-elem grows holder holder-search"  ng-controller="SearchController as controller">
-    <div class="search-bar flex-elem"
-         ng-controller="ToggleController as toggle"
-         ng-class="{ holder: !(ngModel.input === '' || ngModel.input === undefined) }">
-        <input class="search-input"
-               type="text"
-               ng-model="ngModel.input"
-               ng-keyup="controller.search()"/>
-        <a class="clear-icon clear-input icon-x-in-circle"
-           ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
-           ng-click="ngModel.input = ''; controller.search()"></a>
-        <!-- To prevent double triggering of clicks on click away, render
-        non-clickable version of the button when menu active-->
-        <a ng-if="!toggle.isActive()" class="menu-icon context-available"
-           ng-click="toggle.toggle()"></a>
-        <a ng-if="toggle.isActive()" class="menu-icon context-available"></a>
+<div class="angular-w" ng-controller="SearchController as controller">
+    <div class="l-flex-col flex-elem grows holder holder-search" ng-controller="SearchMenuController as menuController">
+        <div class="search-bar flex-elem l-flex-row"
+             ng-controller="ToggleController as toggle"
+             ng-class="{ holder: !(ngModel.input === '' || ngModel.input === undefined) }">
+            <div class="holder flex-elem grows">
+                <input class="search-input"
+                       type="text"
+                       ng-model="ngModel.input"
+                       ng-keyup="controller.search()"/>
+                <a class="clear-icon clear-input icon-x-in-circle"
+                   ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
+                   ng-click="ngModel.input = ''; controller.search()"></a>
 
-        <mct-include key="'search-menu'"
-                     class="menu-element search-menu-holder"
-                     ng-class="{off: !toggle.isActive()}"
-                     ng-model="ngModel"
-                     parameters="{menuVisible: toggle.setState}">
-        </mct-include>
-    </div>
-    <div class="active-filter-display flex-elem holder"
-         ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}"
-         ng-controller="SearchMenuController as menuController">
-        <a class="clear-icon clear-filters icon-x-in-circle"
-           ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
-    </div>
+                <!-- To prevent double triggering of clicks on click away, render
+                non-clickable version of the button when menu active-->
+                <a ng-if="!toggle.isActive()" class="menu-icon context-available"
+                   ng-click="toggle.toggle()"></a>
+                <a ng-if="toggle.isActive()" class="menu-icon context-available"></a>
 
-    <div class="flex-elem holder results-msg" ng-model="ngModel" ng-show="!loading && ngModel.search">
-        {{
-        !results.length > 0? 'No results found':
-        results.length + ' result' + (results.length > 1? 's':'') + ' found'
-        }}
-    </div>
+                <mct-include key="'search-menu'"
+                             class="menu-element search-menu-holder"
+                             ng-class="{off: !toggle.isActive()}"
+                             ng-model="ngModel"
+                             parameters="{menuVisible: toggle.setState}">
+                </mct-include>
+            </div>
 
-    <div class="search-results flex-elem holder grows vscroll"
-         ng-class="{ off: !(loading || results.length > 0), loading: loading }">
-        <mct-representation key="'search-item'"
-                            ng-repeat="result in results"
-                            mct-object="result.object"
-                            ng-model="ngModel"
-                            class="l-flex-row flex-elem grows">
-        </mct-representation>
-        <a class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
+            <a class="holder s-button flex-elem btn-cancel"
+               ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
+               ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
+                Cancel</a>
+        </div>
+
+        <div class="active-filter-display flex-elem holder"
+             ng-class="{off: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}">
+            <a class="clear-filters icon-x-in-circle s-icon-button"
+               ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
+        </div>
+
+        <div class="flex-elem holder results-msg" ng-model="ngModel" ng-show="!loading && ngModel.search">
+            {{
+                !results.length > 0? 'No results found':
+                    results.length + ' result' + (results.length > 1? 's':'') + ' found'
+            }}
+        </div>
+
+        <div class="search-results flex-elem holder grows vscroll"
+             ng-class="{ off: !(loading || results.length > 0), loading: loading }">
+            <mct-representation key="'search-item'"
+                                ng-repeat="result in results"
+                                mct-object="result.object"
+                                ng-model="ngModel"
+                                class="l-flex-row flex-elem grows">
+            </mct-representation>
+            <a class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
+        </div>
     </div>
-</div>
+</div>
\ No newline at end of file