add basic UI scaffolding for search

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);
+
+})();

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";

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;
+}

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>

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"