register search in appState + launch when click search icon

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js

@@ -55,6 +55,11 @@
                 });
             }));
 
+            scope.searchClick = function() {
+                var showSearch = appState.getSearchState("show");
+                appState.setSearchState("show", !showSearch);
+            };
+
             // toggle the help dialog by raising the global app state to toggle the help drawer
             scope.helpClick = function () {
                 var showDrawer = appState.getDrawerState("showDrawer");

src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js

@@ -74,6 +74,11 @@ function appState(eventsService) {
         showMenu: null
     };
 
+    var searchState = {
+        //Whether the search is being shown or not
+        show: null
+    };
+
     var drawerState = {
         //this view to show
         view: null,
@@ -221,6 +226,36 @@ function appState(eventsService) {
             setState(menuState, key, value, "menuState");
         },
 
+        /**
+         * @ngdoc function
+         * @name umbraco.services.angularHelper#getSearchState
+         * @methodOf umbraco.services.appState
+         * @function
+         *
+         * @description
+         * Returns the current search state value by key - we do not return an object here - we do NOT want this
+         * to be publicly mutable and allow setting arbitrary values
+         *
+         */
+        getSearchState: function (key) {
+            return getState(searchState, key, "searchState");
+        },
+        
+        /**
+         * @ngdoc function
+         * @name umbraco.services.angularHelper#setSearchState
+         * @methodOf umbraco.services.appState
+         * @function
+         *
+         * @description
+         * Sets a section state value by key
+         *
+         */
+        setSearchState: function (key, value) {
+            console.log("set serach state");
+            setState(searchState, key, value, "searchState");
+        },
+
         /**
          * @ngdoc function
          * @name umbraco.services.angularHelper#getDrawerState

src/Umbraco.Web.UI.Client/src/controllers/main.controller.js

@@ -15,6 +15,8 @@ function MainController($scope, $location, appState, treeService, notificationsS
     $scope.touchDevice = appState.getGlobalState("touchDevice");
     $scope.editors = [];
     $scope.overlay = {};
+    $scope.drawer = {};
+    $scope.search = {};
     
     $scope.removeNotification = function (index) {
         notificationsService.remove(index);
@@ -114,9 +116,15 @@ function MainController($scope, $location, appState, treeService, notificationsS
         };
     }));
 
+    // events for search
+    evts.push(eventsService.on("appState.searchState.changed", function (e, args) {
+        if (args.key === "show") {
+            $scope.search.show = args.value;
+        }
+    }));
+
     // events for drawer
     // manage the help dialog by subscribing to the showHelp appState
-    $scope.drawer = {};
     evts.push(eventsService.on("appState.drawerState.changed", function (e, args) {
         // set view
         if (args.key === "view") {
@@ -156,6 +164,7 @@ function MainController($scope, $location, appState, treeService, notificationsS
         $scope.backdrop = args;
     }));
 
+    // event for infinite editors
     evts.push(eventsService.on("appState.editors.add", function (name, args) {
         $scope.editors = args.editors;
     }));

src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml

@@ -88,7 +88,7 @@
         <!-- 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>
+        <umb-search ng-if="search.show"></umb-search>
 
     </div>