componentizing mini-search

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -132,6 +132,7 @@
 @import "components/umb-content-grid.less";
 @import "components/umb-contextmenu.less";
 @import "components/umb-layout-selector.less";
+@import "components/umb-mini-search.less";
 @import "components/tooltip/umb-tooltip.less";
 @import "components/tooltip/umb-tooltip-list.less";
 @import "components/overlays/umb-overlay-backdrop.less";

src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less

@@ -0,0 +1,40 @@
+.umb-mini-search {
+    position: relative;
+
+    .icon {
+        position: absolute;
+        padding: 5px 8px;
+        pointer-events: none;
+        top: 2px;
+        color: @ui-action-discreet-type;
+        transition: color .1s linear;
+    }
+
+    input {
+        width: 0px;
+        padding-left:24px;
+        margin-bottom: 0px;
+        background-color: transparent;
+        border-color: @ui-action-discreet-border;
+        transition: background-color .1s linear, border-color .1s linear, color .1s linear, width .1s ease-in-out, padding-left .1s ease-in-out;
+    }
+
+    &:focus-within, &:hover {
+        .icon {
+            color: @ui-action-discreet-type-hover;
+        }
+        input {
+            color: @ui-action-discreet-border-hover;
+            border-color: @ui-action-discreet-border-hover;
+        }
+    }
+
+    input:focus, &:focus-within input {
+        background-color: white;
+        color: @ui-action-discreet-border-hover;
+        border-color: @ui-action-discreet-border-hover;
+        width: 190px;
+        padding-left:30px;
+    }
+
+}

src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html

@@ -0,0 +1,16 @@
+<ng-form class="umb-mini-search" ng-class="vm.model !== null && vm.model !== ''" novalidate>
+    <div class="">
+        <i class="icon icon-search"></i>
+        <input
+            class="form-control search-input"
+            type="text"
+            localize="placeholder,label"
+            label="@general_typeToSearch"
+            placeholder="@general_typeToSearch"
+            ng-model="vm.model"
+            ng-change="vm.onChange()"
+            ng-keydown="vm.onKeyDown($event)"
+            prevent-enter-submit
+            no-dirty-check>
+    </div>
+</form>

src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umbminisearch.component.js

@@ -0,0 +1,43 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('umbraco')
+        .component('umbMiniSearch', {
+            templateUrl: 'views/components/umb-mini-search/umb-mini-search.html',
+            controller: UmbMiniSearchController,
+            controllerAs: 'vm',
+            bindings: {
+                model: "=",
+                onStartTyping: "&",
+                onSearch: "&"
+            }
+        });
+
+    function UmbMiniSearchController($scope) {
+        
+        var vm = this;
+        
+        var searchDelay = _.debounce(function () {
+            $scope.$apply(function () {
+                vm.onSearch();
+            });
+        }, 500);
+    
+        vm.onKeyDown = function (ev) {
+            //13: enter
+            switch (ev.keyCode) {
+                case 13:
+                    vm.onSearch();
+                    break;
+            }
+        };
+    
+        vm.onChange = function () {
+            vm.onStartTyping();
+            searchDelay();
+        };
+
+    }
+
+})();

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js

@@ -324,33 +324,19 @@ function listViewController($scope, $interpolate, $routeParams, $injector, $time
         });
     };
 
-    var searchListView = _.debounce(function () {
-        $scope.$apply(function () {
-            makeSearch();
-        });
-    }, 500);
+    
 
-    $scope.forceSearch = function (ev) {
-        //13: enter
-        switch (ev.keyCode) {
-            case 13:
-                makeSearch();
-                break;
-        }
-    };
-
-    $scope.enterSearch = function () {
-        $scope.viewLoaded = false;
-        searchListView();
-    };
-
-    function makeSearch() {
+    $scope.makeSearch = function() {
         if ($scope.options.filter !== null && $scope.options.filter !== undefined) {
             $scope.options.pageNumber = 1;
             $scope.reloadView($scope.contentId);
         }
     }
 
+    $scope.onSearchStartTyping = function() {
+        $scope.viewLoaded = false;
+    }
+
     $scope.selectedItemsCount = function () {
         return $scope.selection.length;
     };

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html

@@ -126,21 +126,10 @@
                </umb-editor-sub-header-section>
 
                <umb-editor-sub-header-section ng-show="(selection.length == 0)">
-                   <ng-form class="form-search -no-margin-bottom pull-right" novalidate>
-                       <div class="inner-addon left-addon">
-                           <i class="icon icon-search" ng-click="enterSearch($event)"></i>
-                           <input
-                               class="form-control search-input"
-                               type="text"
-                               localize="placeholder"
-                               placeholder="@general_typeToSearch"
-                               ng-model="options.filter"
-                               ng-change="enterSearch()"
-                               ng-keydown="forceSearch($event)"
-                               prevent-enter-submit
-                               no-dirty-check>
-                       </div>
-                   </ng-form>
+
+                    <umb-mini-search model="options.filter" on-search="makeSearch()" on-start-typing="onSearchStartTyping()">
+                    </umb-mini-search>
+
                </umb-editor-sub-header-section>
 
                <umb-editor-sub-header-section ng-show="(selection.length > 0)">