From 120bc2af115f904dc07b74fa00fd61ca46218832 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 5 Aug 2021 15:57:14 +0200
Subject: [PATCH] Examine dashboard search adjustments (#10735)

---
 .../forms/umbsearchfilter.directive.js        | 21 +++++++
 .../components/application/umb-search.less    |  2 +-
 .../src/less/utilities/_spacing.less          |  8 +++
 .../blockpicker/blockpicker.html              |  2 +-
 .../components/forms/umb-search-filter.html   |  2 +
 .../settings/examinemanagement.controller.js  |  2 +-
 .../dashboard/settings/examinemanagement.html | 55 ++++++++++++-------
 7 files changed, 68 insertions(+), 24 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js
index 2e9f15913c..5eb22dcecd 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js
@@ -40,6 +40,8 @@
 
         vm.$onInit = onInit;
         vm.change = change;
+        vm.keyDown = keyDown;
+        vm.blur = blur;
 
         function onInit() {
             vm.inputId = vm.inputId || "umb-search-filter_" + String.CreateGuid();
@@ -63,6 +65,23 @@
                 }, 0);
             }
         }
+
+        function blur() {
+            if (vm.onBlur) {
+                vm.onBlur();
+            }
+        }
+
+        function keyDown(evt) {
+            //13: enter
+            switch (evt.keyCode) {
+                case 13:
+                    if (vm.onSearch) {
+                        vm.onSearch();
+                    }
+                    break;
+            }
+        }
     }
 
     var component = {
@@ -76,6 +95,8 @@
             text: "@",
             labelKey: "@?",
             onChange: "&?",
+            onSearch: "&?",
+            onBlur: "&?",
             autoFocus: "<?",
             preventSubmitOnEnter: "<?",
             cssClass: "@?"
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-search.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-search.less
index 2f9430ef41..30c50b71b3 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-search.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-search.less
@@ -33,7 +33,7 @@
     height: 70px;
 }
 
-.umb-search-input.umb-search-input {
+.umb-search-input {
     width: 100%;
     height: 70px;
     border: none;
diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less b/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less
index d2968696dc..ada33c2d63 100644
--- a/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less
+++ b/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less
@@ -40,6 +40,14 @@
     margin-left: auto; 
     margin-right: auto;
 }
+
+.my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.mt-auto { margin-top: auto; }
+.mb-auto { margin-bottom: auto; }
 .ml-auto { margin-left: auto; }
 .mr-auto { margin-right: auto; }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.html
index b72de0960d..273599343d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockpicker/blockpicker.html
@@ -18,7 +18,7 @@
 
                 <div class="umb-control-group" ng-if="vm.model.filter === true" style="margin-bottom: 20px;">
                     <umb-search-filter
-                        input-id="icon-search"
+                        input-id="block-search"
                         model="vm.filter.searchTerm"
                         label-key="placeholders_filter"
                         text="Type to filter..."
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-search-filter.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-search-filter.html
index ab21654f91..6a17f33c50 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-search-filter.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-search-filter.html
@@ -5,6 +5,8 @@
         <input type="text"
                id="{{vm.inputId}}"
                ng-change="vm.change()"
+               ng-keydown="vm.keyDown($event)"
+               ng-blur="vm.blur($event)"
                ng-model="vm.model"
                class="umb-search-filter__input"
                placeholder="{{vm.text}}"
diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagement.controller.js b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagement.controller.js
index 97f8b6bd79..91c349d546 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagement.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagement.controller.js
@@ -1,4 +1,4 @@
-function ExamineManagementController($scope, $http, $q, $timeout, $location, umbRequestHelper, localizationService, overlayService, editorService) {
+function ExamineManagementController($http, $q, $timeout, umbRequestHelper, localizationService, overlayService, editorService) {
 
     var vm = this;
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagement.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagement.html
index e009bd2f40..f74edc3524 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagement.html
+++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagement.html
@@ -23,8 +23,10 @@
                         <div class="umb-panel-group__details-status" ng-repeat="indexer in vm.indexerDetails">
 
                             <div class="umb-panel-group__details-status-icon-container">
-                                <i class="umb-panel-status-icon" aria-hidden="true"
-                                   ng-class="{'icon-check color-green' : indexer.isHealthy, 'icon-delete color-red' : !indexer.isHealthy}"></i>
+                                <umb-icon icon="{{indexer.isHealthy ? 'icon-check' : 'icon-delete'}}"
+                                          class="umb-panel-status-icon mt1"
+                                          ng-class="{'icon-check color-green' : indexer.isHealthy, 'icon-delete color-red' : !indexer.isHealthy}">
+                                </umb-icon>
                             </div>
 
                             <div class="umb-panel-group__details-status-content">
@@ -59,7 +61,7 @@
                         <div class="umb-panel-group__details-status" ng-repeat="searcher in vm.searcherDetails">
 
                             <div class="umb-panel-group__details-status-icon-container">
-                                <i class="umb-panel-status-icon icon-info" aria-hidden="true"></i>
+                                <umb-icon icon="icon-info" class="icon-info umb-panel-status-icon mt1"></umb-icon>
                             </div>
 
                             <div class="umb-panel-group__details-status-content">
@@ -116,15 +118,19 @@
                                         <div class="umb-panel-group__details-status-action">
                                             <ng-form name="searchTools">
 
-                                                <div class="row form-search">
-                                                    <div class="inner-addon left-addon flex">
-                                                        <umb-icon icon="icon-search" class="icon icon-search"></umb-icon>
+                                                <div class="row">
+                                                    <div class="flex">
 
-                                                        <input type="text" class="search-query"
-                                                               placeholder="@placeholders_search"
-                                                               localize="placeholder"
-                                                               ng-model="vm.searchText" no-dirty-check
-                                                               ng-keypress="vm.search(vm.selectedSearcher, $event)" />
+                                                        <div class="flex-auto">
+                                                            <umb-search-filter
+                                                                input-id="examine-search"
+                                                                model="vm.searchText"
+                                                                on-search="vm.search(vm.selectedIndex, $event)"
+                                                                label-key="placeholders_filter"
+                                                                text="Type to filter..."
+                                                                css-class="w-100">
+                                                            </umb-search-filter>
+                                                        </div>
 
                                                         <umb-button disabled="vm.selectedSearcher.isProcessing"
                                                                     type="button"
@@ -220,8 +226,10 @@
                             <div class="umb-panel-group__details-status">
 
                                 <div class="umb-panel-group__details-status-icon-container">
-                                    <i class="umb-panel-status-icon" aria-hidden="true"
-                                       ng-class="{'icon-check color-green' : vm.selectedIndex.isHealthy, 'icon-delete color-red' : !vm.selectedIndex.isHealthy}"></i>
+                                    <umb-icon icon="{{vm.selectedIndex.isHealthy ? 'icon-check' : 'icon-delete'}}"
+                                              class="umb-panel-status-icon mt1"
+                                              ng-class="{'icon-check color-green' : vm.selectedIndex.isHealthy, 'icon-delete color-red' : !vm.selectedIndex.isHealthy}">
+                                    </umb-icon>
                                 </div>
 
                                 <div class="umb-panel-group__details-status-content">
@@ -256,14 +264,19 @@
                                         <div class="umb-panel-group__details-status-action">
                                             <ng-form name="searchTools">
 
-                                                <div class="row form-search">
-                                                    <div class="inner-addon left-addon flex">
-                                                        <umb-icon icon="icon-search" class="icon icon-search"></umb-icon>
-                                                        <input type="text" class="search-query"
-                                                               placeholder="@placeholders_search"
-                                                               localize="placeholder"
-                                                               ng-model="vm.searchText" no-dirty-check
-                                                               ng-keypress="vm.search(vm.selectedIndex, $event)" />
+                                                <div class="row">
+                                                    <div class="flex">
+
+                                                        <div class="flex-auto">
+                                                            <umb-search-filter
+                                                                input-id="examine-search"
+                                                                model="vm.searchText"
+                                                                on-search="vm.search(vm.selectedIndex, $event)"
+                                                                label-key="placeholders_filter"
+                                                                text="Type to filter..."
+                                                                css-class="w-100">
+                                                            </umb-search-filter>
+                                                        </div>
 
                                                         <umb-button disabled="vm.selectedIndex.isProcessing"
                                                                     type="button"