From f0a310d6d7d6fffa9070b7370a12b043522d9b58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 28 Nov 2019 17:41:28 +0100
Subject: [PATCH 1/4] using btn-outline for create button in listivew

---
 src/Umbraco.Web.UI.Client/src/less/buttons.less       |  8 +++++---
 .../src/less/components/umb-layout-selector.less      | 11 +++++++----
 .../src/views/components/umb-layout-selector.html     |  2 +-
 .../src/views/propertyeditors/listview/listview.html  |  6 +++---
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less
index 85532f4231..df81d7df44 100644
--- a/src/Umbraco.Web.UI.Client/src/less/buttons.less
+++ b/src/Umbraco.Web.UI.Client/src/less/buttons.less
@@ -261,10 +261,11 @@ input[type="button"] {
 .btn-outline {
   border: 1px solid;
   border-color: @gray-7;
-  background: @white;
+  background: transparent;
   color: @blueExtraDark;
   padding: 5px 13px;
-  transition: all .2s linear;
+  transition: border-color .12s linear, color .12s linear;
+  font-weight: 600;
 }
 
 .btn-outline:hover,
@@ -272,7 +273,8 @@ input[type="button"] {
 .btn-outline:active {
   border-color: @ui-light-type-hover;
   color: @ui-light-type-hover;
-  background: @white;
+  background: transparent;
+  transition: border-color .12s linear, color .12s linear;
 }
 
 // Cross-browser Jank
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less
index cdc6cfcb63..edc8cd77d5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less
@@ -6,7 +6,8 @@
 .umb-layout-selector__active-layout {
    background: transparent;
    box-sizing: border-box;
-   border: 1px solid @inputBorder;
+   border: 1px solid @ui-action-discreet-border;
+   color: @ui-action-discreet-type;
    cursor: pointer;
    height: 30px;
    width: 30px;
@@ -17,7 +18,8 @@
 }
 
 .umb-layout-selector__active-layout:hover {
-   border-color: @inputBorderFocus;
+   border-color: @ui-action-discreet-border-hover;
+   color: @ui-action-discreet-type-hover;
 }
 
 .umb-layout-selector__dropdown {
@@ -31,6 +33,7 @@
    flex-direction: column;
    transform: translate(-50%,0);
    left: 50%;
+   border-radius: 3px;
 }
 
 .umb-layout-selector__dropdown-item {
@@ -46,11 +49,11 @@
 }
 
 .umb-layout-selector__dropdown-item:hover {
-   border: 1px solid @gray-8;
+   border: 1px solid @ui-action-discreet-border;
 }
 
 .umb-layout-selector__dropdown-item.-active {
-   border: 1px solid @blue;
+   border: 1px solid @ui-action-discreet-border-hover;
 }
 
 .umb-layout-selector__dropdown-item-icon,
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html
index c6c841f8b1..1fa917a07f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html
@@ -1,6 +1,6 @@
 <div class="umb-layout-selector" ng-show="vm.showLayoutSelector">
 
-   <button type="button" aria-expanded="{{vm.layoutDropDownIsOpen}}" class="umb-layout-selector__active-layout" ng-click="vm.toggleLayoutDropdown()" prevent-default>
+   <button type="button" aria-expanded="{{vm.layoutDropDownIsOpen}}" class="umb-layout-selector__active-layout umb-outline" ng-click="vm.toggleLayoutDropdown()" prevent-default>
       <i class="{{ vm.activeLayout.icon }}" aria-hidden="true"></i>
       <span class="sr-only">
           <localize key="visuallyHiddenTexts_activeListLayout">Active layout:</localize>&nbsp;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
index 304f3f3fbc..dae4bf6ccc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
@@ -14,14 +14,14 @@
 
                     <!-- Renders when it's only possible to create one specific document type for, which no blueprint exists-->
                    <div class="btn-group" ng-show="createAllowedButtonSingle">
-                       <button type="button" class="btn btn-white" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
+                       <button type="button" class="btn btn-outline" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
                            <localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
                        </button>
                    </div>
 
                    <!-- Renders when it's only possible to create one specific document type for which a blueprint exits-->
                    <div class="btn-group" ng-show="createAllowedButtonSingleWithBlueprints" deep-blur="leaveDropdown()">
-                       <button type="button" class="btn btn-white dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()" prevent-default>
+                       <button type="button" class="btn btn-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()" prevent-default>
                            <span>
                                <localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
                            </span>
@@ -46,7 +46,7 @@
 
                    <!-- Renders when it's possible to create multiple document types and blueprints for one or more of the document types-->
                    <div class="btn-group" ng-show="createAllowedButtonMultiWithBlueprints" deep-blur="leaveDropdown()">
-                       <button type="button" class="btn btn-white dropdown-toggle" aria-expanded="{{page.createDropdownOpen === undefined ? false : page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()">
+                       <button type="button" class="btn btn-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen === undefined ? false : page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()">
                            <localize key="actions_create">Create</localize>
                            <span class="caret" aria-hidden="true"></span>
                        </button>

From 201c31395cf8cf9d3d6e7df0a4627a9d2af74563 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 2 Dec 2019 14:48:17 +0100
Subject: [PATCH 2/4] componentizing mini-search

---
 src/Umbraco.Web.UI.Client/src/less/belle.less |  1 +
 .../src/less/components/umb-mini-search.less  | 40 +++++++++++++++++
 .../umb-mini-search/umb-mini-search.html      | 16 +++++++
 .../umbminisearch.component.js                | 43 +++++++++++++++++++
 .../listview/listview.controller.js           | 26 +++--------
 .../propertyeditors/listview/listview.html    | 19 ++------
 6 files changed, 110 insertions(+), 35 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umbminisearch.component.js

diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 391fafb3fa..15d54b615f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/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";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
new file mode 100644
index 0000000000..5b94fc0f24
--- /dev/null
+++ b/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;
+    }
+
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html
new file mode 100644
index 0000000000..b2cfe66d8b
--- /dev/null
+++ b/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>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umbminisearch.component.js b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umbminisearch.component.js
new file mode 100644
index 0000000000..074d29bbd7
--- /dev/null
+++ b/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();
+        };
+
+    }
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
index be9ad6816d..fe83a4d451 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
+++ b/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;
     };
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
index dae4bf6ccc..c566323493 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
+++ b/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)">

From 988f8890fed4c33426aeb2bf15151c04930b4076 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 2 Dec 2019 14:48:43 +0100
Subject: [PATCH 3/4] minor change for mini-search component

---
 .../src/less/components/umb-mini-search.less  |  4 +++
 .../umb-mini-search/umb-mini-search.html      | 30 +++++++++----------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
index 5b94fc0f24..ac15b3dcf8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
@@ -1,5 +1,6 @@
 .umb-mini-search {
     position: relative;
+    display: block;
 
     .icon {
         position: absolute;
@@ -33,6 +34,9 @@
         background-color: white;
         color: @ui-action-discreet-border-hover;
         border-color: @ui-action-discreet-border-hover;
+    }
+    
+    input:focus, &:focus-within input, &.--has-value input {
         width: 190px;
         padding-left:30px;
     }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html
index b2cfe66d8b..20ce87f0eb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html
@@ -1,16 +1,14 @@
-<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>
+<ng-form class="umb-mini-search" ng-class="{'--has-value': vm.model !== null && vm.model !== ''}" novalidate>
+    <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>
+</ng-form>

From 43f63497d039bad1a829c1e1cadad5828f26b2c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Mon, 2 Dec 2019 14:49:14 +0100
Subject: [PATCH 4/4] visual corrections for listview and grid

---
 src/Umbraco.Web.UI.Client/src/less/listview.less            | 4 ++++
 .../src/views/components/umb-content-grid.html              | 2 +-
 .../src/views/components/umb-mini-list-view.html            | 6 +++---
 .../src/views/components/umb-table.html                     | 4 ++--
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/listview.less b/src/Umbraco.Web.UI.Client/src/less/listview.less
index 975dbdbd4a..b724688a32 100644
--- a/src/Umbraco.Web.UI.Client/src/less/listview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/listview.less
@@ -1,6 +1,10 @@
 // Listview
 // -------------------------
 
+.umb-listview {
+    min-height: 100px;
+}
+
 .umb-listview table {
 	border: 1px solid @gray-8;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
index 93fa590f68..8865d084e1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
@@ -1,7 +1,7 @@
 <div class="umb-content-grid">
 
    <div
-      class="umb-content-grid__item"
+      class="umb-content-grid__item umb-outline"
       ng-repeat="item in content"
       ng-class="{'-selected': item.selected}"
       ng-click="clickItem(item, $event, $index)">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
index f11df6042e..33a28af014 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
@@ -1,7 +1,7 @@
 <div class="umb-minilistview">
 
-    <div class="umb-mini-list-view umb-animated" 
-        ng-class="{'umb-mini-list-view--forward': listViewAnimation === 'in', 'umb-mini-list-view--backwards': listViewAnimation === 'out'}" 
+    <div class="umb-mini-list-view umb-animated"
+        ng-class="{'umb-mini-list-view--forward': listViewAnimation === 'in', 'umb-mini-list-view--backwards': listViewAnimation === 'out'}"
         ng-repeat="miniListView in miniListViews">
 
         <div class="umb-mini-list-view__title">
@@ -60,7 +60,7 @@
                 </div>
 
                 <!-- Items -->
-                <div class="umb-table-row cursor-pointer"
+                <div class="umb-table-row cursor-pointer umb-outline"
                     ng-repeat="child in miniListView.children"
                     ng-click="selectNode(child)"
                     ng-class="{'-selected':child.selected, 'not-allowed':!child.allowed}">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
index df817c1657..ae19ab175f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
@@ -2,7 +2,7 @@
     <div class="umb-table" ng-if="vm.items">
         <!-- Listviews head section -->
         <div class="umb-table-head">
-            <div class="umb-table-row">
+            <div class="umb-table-row umb-outline">
                 <div class="umb-table-cell">
 
                     <button type="button" class="umb-table__action" ng-show="vm.allowSelectAll" ng-click="vm.selectAll()">
@@ -37,7 +37,7 @@
         </div>
         <!-- Listview body section -->
         <div class="umb-table-body">
-            <div class="umb-table-row -selectable"
+            <div class="umb-table-row -selectable umb-outline"
                  ng-repeat="item in vm.items track by $index"
                  ng-class="{'-selected':item.selected, '-light':!item.published && item.updater != null}"
                  ng-click="vm.selectItem(item, $index, $event)">