From 34ca7a420a4a6775abdd0fd0989dc9e04c7f91f4 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 19 Sep 2018 11:31:41 +0200
Subject: [PATCH] add basic UI scaffolding for search

---
 .../application/umbsearch.directive.js        | 52 +++++++++++++++++++
 src/Umbraco.Web.UI.Client/src/less/belle.less |  1 +
 .../components/application/umb-search.less    | 25 +++++++++
 .../components/application/umb-search.html    | 27 ++++++++++
 .../Umbraco/Views/Default.cshtml              |  2 +
 5 files changed, 107 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/application/umb-search.less
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js
new file mode 100644
index 0000000000..96d1bb5eb9
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js
@@ -0,0 +1,52 @@
+(function () {
+    'use strict';
+
+    /**
+     * A component to render the pop up search field
+     */
+    var umbSearch = {
+        templateUrl: 'views/components/application/umb-search.html',
+        controllerAs: 'vm',
+        controller: umbSearchController,
+        bindings: {
+            onClose: "&"
+        }
+    };
+    
+    function umbSearchController($scope, backdropService) {
+
+        var vm = this;
+
+        vm.searchResults = [];
+
+        vm.$onInit = onInit;
+        vm.search = search;
+        vm.closeSearch = closeSearch;
+
+        function onInit() {
+            console.log("init search thingy");
+            backdropService.open();
+        }
+
+        /**
+         * Used to proxy a callback
+         */
+        function closeSearch() {
+            if(vm.onClose) {
+                vm.onClose();
+            }
+        }
+
+        /**
+         * Used to search
+         * @param {string} searchQuery
+         */
+        function search(searchQuery) {
+            console.log(searchQuery);
+        }
+
+    }
+
+    angular.module('umbraco.directives').component('umbSearch', umbSearch);
+
+})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index b2f2f99dd5..37ba0366eb 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -84,6 +84,7 @@
 @import "components/application/umb-app-content.less";
 @import "components/application/umb-tour.less";
 @import "components/application/umb-backdrop.less";
+@import "components/application/umb-search.less";
 @import "components/application/umb-drawer.less";
 @import "components/application/umb-language-picker.less";
 @import "components/application/umb-dashboard.less";
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
new file mode 100644
index 0000000000..22f2c62712
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-search.less
@@ -0,0 +1,25 @@
+
+.umb-search {
+    position: fixed;
+    z-index: @zindexUmbOverlay;
+    width: 660px;
+    max-width: 90%;
+    height: 70px;
+    // transition: opacity 60ms ease-in-out;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    top: 20%;
+    border-radius: @baseBorderRadius;
+    background: @white;
+    position: fixed;
+    box-shadow: 0 10px 20px rgba(0,0,0,.12),0 6px 6px rgba(0,0,0,.14);
+}
+
+.umb-search-input.umb-search-input {
+    width: 100%;
+    height: 70px;
+    border: none;
+    padding: 20px;
+    border-radius: @baseBorderRadius;
+    font-size: 22px;
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html
new file mode 100644
index 0000000000..a5ffb4a7a3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html
@@ -0,0 +1,27 @@
+
+<div class="umb-search" on-outside-click="vm.closeSearch()">
+
+    <input 
+        class="umb-search-input" 
+        type="text" 
+        ng-model="vm.searchQuery" 
+        ng-change="vm.search(vm.searchQuery)" 
+        placeholder="Search..." 
+        autofocus />
+    
+    <ul class="umb-search-results" ng-if="vm.searchResults.length > 0">
+        <li class="umb-search-results_item">
+            <strong>Result 1</strong>
+            <small class="umb-search-results_item-description">/result-1/</small>
+        </li>
+        <li class="umb-search-results_item">
+            <strong>Result 2</strong>
+            <small class="umb-search-results_item-description">/result-2/</small>
+        </li>
+        <li class="umb-search-results_item">
+            <strong>Result 3</strong>
+            <small class="umb-search-results_item-description">/result-3/</small>
+        </li>
+    </ul>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml
index dea4c52bc5..7214c362d2 100644
--- a/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml
+++ b/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml
@@ -88,6 +88,8 @@
         <!-- help dialog controller by the help button - this also forces the backoffice UI to shift 400px  -->
         <umb-drawer data-element="drawer" ng-if="drawer.show" model="drawer.model" view="drawer.view"></umb-drawer>
 
+        <umb-search></umb-search>
+
     </div>
 
     <umb-backdrop ng-if="backdrop.show"