From 34ca7a420a4a6775abdd0fd0989dc9e04c7f91f4 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 19 Sep 2018 11:31:41 +0200 Subject: [PATCH 01/17] 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 @@ + +
+ + + + + +
\ 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 @@ + + Date: Wed, 19 Sep 2018 14:24:21 +0200 Subject: [PATCH 02/17] add styling for search results + basic wire up of search service --- .../application/umbsearch.directive.js | 31 +++++++++- .../components/application/umb-search.less | 58 ++++++++++++++++++- .../components/application/umb-search.html | 38 +++++++----- 3 files changed, 106 insertions(+), 21 deletions(-) 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 index 96d1bb5eb9..5f15da9d65 100644 --- 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 @@ -13,17 +13,19 @@ } }; - function umbSearchController($scope, backdropService) { + function umbSearchController($scope, backdropService, searchService) { var vm = this; - vm.searchResults = []; - vm.$onInit = onInit; vm.search = search; vm.closeSearch = closeSearch; function onInit() { + + vm.searchResults = []; + vm.hasResults = false; + console.log("init search thingy"); backdropService.open(); } @@ -43,6 +45,29 @@ */ function search(searchQuery) { console.log(searchQuery); + if(searchQuery.length > 0) { + var search = {"term": searchQuery}; + searchService.searchAll(search).then(function(result){ + + //result is a dictionary of group Title and it's results + var filtered = {}; + _.each(result, function (value, key) { + if (value.results.length > 0) { + filtered[key] = value; + } + }); + + vm.searchResults = filtered; + // check if search has results + vm.hasResults = Object.keys(vm.searchResults).length > 0; + console.log("results", vm.searchResults); + console.log("has results", vm.hasResults); + }); + + } else { + vm.searchResults = []; + vm.hasResults = false; + } } } 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 index 22f2c62712..462e8e0e10 100644 --- 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 @@ -1,12 +1,14 @@ +/* + Search wrapper +*/ .umb-search { position: fixed; z-index: @zindexUmbOverlay; width: 660px; max-width: 90%; - height: 70px; // transition: opacity 60ms ease-in-out; - transform: translate(-50%, -50%); + transform: translate(-50%, 0); left: 50%; top: 20%; border-radius: @baseBorderRadius; @@ -15,6 +17,9 @@ box-shadow: 0 10px 20px rgba(0,0,0,.12),0 6px 6px rgba(0,0,0,.14); } +/* + Search field +*/ .umb-search-input.umb-search-input { width: 100%; height: 70px; @@ -22,4 +27,53 @@ padding: 20px; border-radius: @baseBorderRadius; font-size: 22px; + margin-bottom: 0; +} + +/* + Search results +*/ +.umb-search-results { + max-height: 50vh; + overflow-y: auto; +} + +.umb-search-group__title { + background: @gray-10; + padding: 3px 20px; +} + +.umb-search-items { + list-style: none; + margin: 0; + padding-top: 4px; + padding-bottom: 4px; +} + +.umb-search-item > a { + padding: 6px 20px; + display: flex; +} + +.umb-search-item > a:hover, +.umb-search-item > a:focus { + background-color: @gray-10; + text-decoration: none; + outline: none; +} + +.umb-search-result__icon { + font-size: 18px; + margin-right: 8px; + color: @gray-1; +} + +.umb-search-result__meta { + display: flex; + flex-direction: column; +} + +.umb-search-result__description { + color: @gray-5; + font-size: 13px; } \ 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 index a5ffb4a7a3..2b27890633 100644 --- 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 @@ -4,24 +4,30 @@ - - + +
+
+
{{key}}
+ +
+
\ No newline at end of file From 5b4c27313325d185cf5ac96626fb986eee9a18fb Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 19 Sep 2018 14:50:29 +0200 Subject: [PATCH 03/17] Add search icon + focus indention --- .../components/application/umb-search.less | 14 +++++++++++++- .../components/application/umb-search.html | 19 +++++++++++-------- 2 files changed, 24 insertions(+), 9 deletions(-) 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 index 462e8e0e10..81249d1aee 100644 --- 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 @@ -20,11 +20,18 @@ /* Search field */ + +.umb-search-input-icon { + font-size: 22px; + color: @gray-7; + padding-left: 20px; +} + .umb-search-input.umb-search-input { width: 100%; height: 70px; border: none; - padding: 20px; + padding: 20px 20px 20px 15px; border-radius: @baseBorderRadius; font-size: 22px; margin-bottom: 0; @@ -62,6 +69,11 @@ outline: none; } +.umb-search-item > a:focus { + padding-left: 25px; + transition: padding 60ms ease-in-out; +} + .umb-search-result__icon { font-size: 18px; margin-right: 8px; 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 index 2b27890633..2e425b762e 100644 --- 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 @@ -1,14 +1,17 @@
- +
+ + +
From bf3234c8b2bb7353c774aa8f6cc16bc77e8c41e2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 19 Sep 2018 15:13:55 +0200 Subject: [PATCH 04/17] register search in appState + launch when click search icon --- .../application/umbappheader.directive.js | 5 +++ .../src/common/services/appstate.service.js | 35 +++++++++++++++++++ .../src/controllers/main.controller.js | 11 +++++- .../Umbraco/Views/Default.cshtml | 2 +- 4 files changed, 51 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js index 461101a66c..3ddb7af0e1 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js +++ b/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"); diff --git a/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js b/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js index 085ba52b7e..d68f351ef3 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js +++ b/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 diff --git a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js index 24318cce02..f4517dd41a 100644 --- a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js +++ b/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; })); diff --git a/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml index 7214c362d2..f26ba39143 100644 --- a/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml +++ b/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml @@ -88,7 +88,7 @@ - +
From 402f724396d9d2a672c783df255c0b55fb5c52a9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 19 Sep 2018 15:17:22 +0200 Subject: [PATCH 05/17] make sure the close the overlay when the component gets destroyed. --- .../directives/components/application/umbsearch.directive.js | 5 +++++ 1 file changed, 5 insertions(+) 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 index 5f15da9d65..091a361a0d 100644 --- 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 @@ -18,6 +18,7 @@ var vm = this; vm.$onInit = onInit; + vm.$onDestroy = onDestroy; vm.search = search; vm.closeSearch = closeSearch; @@ -30,6 +31,10 @@ backdropService.open(); } + function onDestroy() { + backdropService.close(); + } + /** * Used to proxy a callback */ From ff6509be349ffc5552117c83ded378cc599d345d Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 19 Sep 2018 15:17:41 +0200 Subject: [PATCH 06/17] use our own auto focus - it works better --- .../src/views/components/application/umb-search.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 2e425b762e..55b1b91d18 100644 --- 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 @@ -10,7 +10,7 @@ ng-model-options="{ debounce: 200 }" ng-change="vm.search(vm.searchQuery)" placeholder="Search..." - autofocus /> + umb-auto-focus />
From b2fa7ea475216d8ba8a0ea7048ab6cdd3d567caa Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 19 Sep 2018 16:01:12 +0200 Subject: [PATCH 07/17] close on outside click and escape --- .../application/umbsearch.directive.js | 17 +++++++++-------- .../src/controllers/main.controller.js | 4 ++++ .../components/application/umb-search.html | 2 +- src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml | 2 +- 4 files changed, 15 insertions(+), 10 deletions(-) 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 index 091a361a0d..de6d3b27a0 100644 --- 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 @@ -20,14 +20,12 @@ vm.$onInit = onInit; vm.$onDestroy = onDestroy; vm.search = search; + vm.handleKeyUp = handleKeyUp; vm.closeSearch = closeSearch; function onInit() { - vm.searchResults = []; vm.hasResults = false; - - console.log("init search thingy"); backdropService.open(); } @@ -35,6 +33,13 @@ backdropService.close(); } + function handleKeyUp(event) { + // esc + if(event.keyCode === 27) { + closeSearch(); + } + } + /** * Used to proxy a callback */ @@ -49,11 +54,9 @@ * @param {string} searchQuery */ function search(searchQuery) { - console.log(searchQuery); if(searchQuery.length > 0) { var search = {"term": searchQuery}; searchService.searchAll(search).then(function(result){ - //result is a dictionary of group Title and it's results var filtered = {}; _.each(result, function (value, key) { @@ -61,12 +64,10 @@ filtered[key] = value; } }); - + // bind to view model vm.searchResults = filtered; // check if search has results vm.hasResults = Object.keys(vm.searchResults).length > 0; - console.log("results", vm.searchResults); - console.log("has results", vm.hasResults); }); } else { diff --git a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js index f4517dd41a..a10943c17e 100644 --- a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js +++ b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js @@ -43,6 +43,10 @@ function MainController($scope, $location, appState, treeService, notificationsS eventsService.emit("app.closeDialogs", event); }; + $scope.closeSearch = function() { + appState.setSearchState("show", false); + }; + var evts = []; //when a user logs out or timesout 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 index 55b1b91d18..903680458c 100644 --- 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 @@ -1,5 +1,5 @@ -
+
diff --git a/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml index f26ba39143..83fc836841 100644 --- a/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml +++ b/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml @@ -88,7 +88,7 @@ - +
From 6a630e413f942312a969739e23fe70434baae6f2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 19 Sep 2018 16:04:09 +0200 Subject: [PATCH 08/17] use correct subtitle --- .../src/views/components/application/umb-search.html | 3 --- 1 file changed, 3 deletions(-) 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 index 903680458c..dc9fff7f19 100644 --- 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 @@ -22,10 +22,7 @@ {{result.name}} - /path/to/something/here - From 74c4e68efccf6d4070e34f2eab54083917499fb9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 20 Sep 2018 11:27:39 +0200 Subject: [PATCH 09/17] close search when item is clicked --- .../directives/components/application/umbsearch.directive.js | 5 +++++ 1 file changed, 5 insertions(+) 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 index de6d3b27a0..77f1291234 100644 --- 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 @@ -20,6 +20,7 @@ vm.$onInit = onInit; vm.$onDestroy = onDestroy; vm.search = search; + vm.clickItem = clickItem; vm.handleKeyUp = handleKeyUp; vm.closeSearch = closeSearch; @@ -33,6 +34,10 @@ backdropService.close(); } + function clickItem(item) { + closeSearch(); + } + function handleKeyUp(event) { // esc if(event.keyCode === 27) { From d9731728de918d7438188562625db3135c5a0efc Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 20 Sep 2018 11:28:14 +0200 Subject: [PATCH 10/17] remove console log --- .../src/common/services/appstate.service.js | 1 - .../src/views/components/application/umb-search.html | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js b/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js index d68f351ef3..d1ac3d39cf 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js @@ -252,7 +252,6 @@ function appState(eventsService) { * */ setSearchState: function (key, value) { - console.log("set serach state"); setState(searchState, key, value, "searchState"); }, 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 index dc9fff7f19..499a932353 100644 --- 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 @@ -18,7 +18,7 @@
{{key}}
From 2ef524b6e3022fd78ead16d3f036ab37913fcfcd Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 20 Sep 2018 14:17:14 +0200 Subject: [PATCH 14/17] remove old search controller --- .../src/controllers/search.controller.js | 158 ------------------ 1 file changed, 158 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/controllers/search.controller.js diff --git a/src/Umbraco.Web.UI.Client/src/controllers/search.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/search.controller.js deleted file mode 100644 index bec3e97543..0000000000 --- a/src/Umbraco.Web.UI.Client/src/controllers/search.controller.js +++ /dev/null @@ -1,158 +0,0 @@ -/** - * @ngdoc controller - * @name Umbraco.SearchController - * @function - * - * @description - * Controls the search functionality in the site - * - */ -function SearchController($scope, searchService, $log, $location, navigationService, $q) { - - $scope.searchTerm = null; - $scope.searchResults = []; - $scope.isSearching = false; - $scope.selectedResult = -1; - - $scope.navigateResults = function (ev) { - //38: up 40: down, 13: enter - - switch (ev.keyCode) { - case 38: - iterateResults(true); - break; - case 40: - iterateResults(false); - break; - case 13: - if ($scope.selectedItem) { - $location.path($scope.selectedItem.editorPath); - navigationService.hideSearch(); - } - break; - } - }; - - var group = undefined; - var groupNames = []; - var groupIndex = -1; - var itemIndex = -1; - $scope.selectedItem = undefined; - - $scope.clearSearch = function () { - $scope.searchTerm = null; - }; - function iterateResults(up) { - //default group - if (!group) { - - for (var g in $scope.groups) { - if ($scope.groups.hasOwnProperty(g)) { - groupNames.push(g); - - } - } - - //Sorting to match the groups order - groupNames.sort(); - - group = $scope.groups[groupNames[0]]; - groupIndex = 0; - } - - if (up) { - if (itemIndex === 0) { - if (groupIndex === 0) { - gotoGroup(Object.keys($scope.groups).length - 1, true); - } else { - gotoGroup(groupIndex - 1, true); - } - } else { - gotoItem(itemIndex - 1); - } - } else { - if (itemIndex < group.results.length - 1) { - gotoItem(itemIndex + 1); - } else { - if (groupIndex === Object.keys($scope.groups).length - 1) { - gotoGroup(0); - } else { - gotoGroup(groupIndex + 1); - } - } - } - } - - function gotoGroup(index, up) { - groupIndex = index; - group = $scope.groups[groupNames[groupIndex]]; - - if (up) { - gotoItem(group.results.length - 1); - } else { - gotoItem(0); - } - } - - function gotoItem(index) { - itemIndex = index; - $scope.selectedItem = group.results[itemIndex]; - } - - //used to cancel any request in progress if another one needs to take it's place - var canceler = null; - - $scope.$watch("searchTerm", _.debounce(function (newVal, oldVal) { - $scope.$apply(function () { - $scope.hasResults = false; - if ($scope.searchTerm) { - if (newVal !== null && newVal !== undefined && newVal !== oldVal) { - - //Resetting for brand new search - group = undefined; - groupNames = []; - groupIndex = -1; - itemIndex = -1; - - $scope.isSearching = true; - navigationService.showSearch(); - $scope.selectedItem = undefined; - - //a canceler exists, so perform the cancelation operation and reset - if (canceler) { - canceler.resolve(); - canceler = $q.defer(); - } - else { - canceler = $q.defer(); - } - - searchService.searchAll({ term: $scope.searchTerm, canceler: canceler }).then(function (result) { - - //result is a dictionary of group Title and it's results - var filtered = {}; - _.each(result, function (value, key) { - if (value.results.length > 0) { - filtered[key] = value; - } - }); - $scope.groups = filtered; - // check if search has results - $scope.hasResults = Object.keys($scope.groups).length > 0; - //set back to null so it can be re-created - canceler = null; - $scope.isSearching = false; - }); - } - } - else { - $scope.isSearching = false; - navigationService.hideSearch(); - $scope.selectedItem = undefined; - } - }); - }, 200)); - -} -//register it -angular.module('umbraco').controller("Umbraco.SearchController", SearchController); \ No newline at end of file From 54cc6f496809062ce3abd6cc1f5e5bec958ceece Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 25 Sep 2018 12:41:20 +0200 Subject: [PATCH 15/17] reset backdrop options on close --- .../src/common/services/backdrop.service.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js b/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js index e463845a1c..4f977cb1b2 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/backdrop.service.js @@ -58,8 +58,11 @@ * */ function close() { - args.element = null; - args.show = false; + args.opacity = null, + args.element = null, + args.elementPreventClick = false, + args.disableEventsOnClick = false, + args.show = false eventsService.emit("appState.backdrop", args); } From 2a784719ce0ebbb20fb905d8a7a46f2601528ec9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 25 Sep 2018 12:53:00 +0200 Subject: [PATCH 16/17] add focus to search when you click icon --- .../application/umbsearch.directive.js | 18 +++++++++++++----- .../components/application/umb-search.less | 3 +++ 2 files changed, 16 insertions(+), 5 deletions(-) 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 index 7affebefe5..7ff76d5670 100644 --- 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 @@ -24,12 +24,13 @@ vm.clearSearch = clearSearch; vm.handleKeyUp = handleKeyUp; vm.closeSearch = closeSearch; + vm.focusSearch = focusSearch; function onInit() { vm.searchQuery = ""; vm.searchResults = []; vm.hasResults = false; - vm.focusSearch = true; + focusSearch(); backdropService.open(); } @@ -48,12 +49,19 @@ * Clears the search query */ function clearSearch() { - vm.focusSearch = false; vm.searchQuery = ""; + vm.searchResults = []; + vm.hasResults = false; + focusSearch(); + } + + /** + * Add focus to the search field + */ + function focusSearch() { + vm.searchHasFocus = false; $timeout(function(){ - vm.focusSearch = true; - vm.searchResults = []; - vm.hasResults = false; + vm.searchHasFocus = true; }); } 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 index b65d08711b..a8fc9c7f8e 100644 --- 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 @@ -24,6 +24,9 @@ font-size: 22px; color: @gray-7; padding-left: 20px; + display: flex; + align-items: center; + height: 70px; } .umb-search-input.umb-search-input { From 598590c929d04e8759a39f8099457c9179050e35 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 25 Sep 2018 13:03:13 +0200 Subject: [PATCH 17/17] update correct html file --- .../src/views/components/application/umb-search.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index 11d29da384..56d9eae16c 100644 --- 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 @@ -2,7 +2,7 @@
- + + focus-when="{{vm.searchHasFocus}}" />