Examine dashboard search adjustments (#10735)

umbraco · Aug 5, 2021 · 120bc2a · 120bc2a
1 parent 4513a85
commit 120bc2a
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 24 deletions.
diff --git a/...Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js b/...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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"