From e1394a18e5afc7b1d806d5c190441294ba338c00 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 10 Apr 2018 13:56:14 +0200 Subject: [PATCH 1/5] add tree language selector + load in languages --- .../src/controllers/navigation.controller.js | 30 +++++++++++++++++-- .../src/less/application/grid.less | 2 ++ .../application/umb-language-picker.less | 9 ++++-- .../src/less/variables.less | 1 + .../application/umb-navigation.html | 19 ++++-------- 5 files changed, 42 insertions(+), 19 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js index 8387db6a0b..fb37020a7d 100644 --- a/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js +++ b/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js @@ -9,7 +9,7 @@ * * @param {navigationService} navigationService A reference to the navigationService */ -function NavigationController($scope, $rootScope, $location, $log, $routeParams, $timeout, appState, navigationService, keyboardService, dialogService, historyService, eventsService, sectionResource, angularHelper) { +function NavigationController($scope, $rootScope, $location, $log, $routeParams, $timeout, appState, navigationService, keyboardService, dialogService, historyService, eventsService, sectionResource, angularHelper, languageResource) { //TODO: Need to think about this and an nicer way to acheive what this is doing. //the tree event handler i used to subscribe to the main tree click events @@ -31,6 +31,10 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams, $scope.menuDialogTitle = null; $scope.menuActions = []; $scope.menuNode = null; + $scope.languages = []; + $scope.selectedLanguage = {}; + $scope.page = {}; + $scope.page.languageSelectorIsOpen = false; $scope.currentSection = appState.getSectionState("currentSection"); $scope.showNavigation = appState.getGlobalState("showNavigation"); @@ -115,8 +119,28 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams, //when the application is ready and the user is authorized setup the data evts.push(eventsService.on("app.ready", function(evt, data) { $scope.authenticated = true; + + // load languages + languageResource.getAll().then(function(languages) { + $scope.languages = languages; + + // select the default language + $scope.languages.forEach(function(language) { + if(language.isDefault) { + $scope.selectLanguage(language); + } + }); + + }); + })); + $scope.selectLanguage = function(language, languages) { + $scope.selectedLanguage = language; + // close the language selector + $scope.page.languageSelectorIsOpen = false; + }; + //this reacts to the options item in the tree //todo, migrate to nav service $scope.searchShowMenu = function (ev, args) { @@ -155,8 +179,8 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams, } }; - $scope.toggleTreeLanguageSelector = function() { - $scope.treeLanguageSelectorIsOpen = !$scope.treeLanguageSelectorIsOpen; + $scope.toggleLanguageSelector = function() { + $scope.page.languageSelectorIsOpen = !$scope.page.languageSelectorIsOpen; }; //ensure to unregister from all events! diff --git a/src/Umbraco.Web.UI.Client/src/less/application/grid.less b/src/Umbraco.Web.UI.Client/src/less/application/grid.less index ae20cc2ed8..4448bf2192 100644 --- a/src/Umbraco.Web.UI.Client/src/less/application/grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/application/grid.less @@ -104,6 +104,8 @@ body.umb-drawer-is-visible #mainwrapper{ right: 0px; border-right: 1px solid @gray-9; z-index: 100; + display: flex; + flex-direction: column; } #dialog { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less index d1a8bed432..5baeaf8dc4 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less @@ -1,15 +1,17 @@ .umb-language-picker { position: relative; - z-index: 1; + z-index: @zindexDropdown; } .umb-language-picker__toggle { display: flex; align-items: center; justify-content: space-between; - padding: 15px 20px; + padding: 0 20px; cursor: pointer; border-bottom: 1px solid @gray-9; + height: 50px; + box-sizing: border-box; } .umb-language-picker__toggle:hover { @@ -24,9 +26,10 @@ .umb-language-picker__dropdown { width: 100%; background: @white; - box-shadow: 0 5px 5px rgba(0,0,0,.2); + box-shadow: 0 3px 6px rgba(0,0,0,.16); box-sizing: border-box; position: absolute; + border-radius: 0 0 3px 3px; } .umb-language-picker__dropdown a { diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index c9a99406ed..eae5799459 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -252,6 +252,7 @@ // ------------------------- // Used for a bird's eye view of components dependent on the z-axis // Try to avoid customizing these :) +@zIndexTree: 100; @zindexDropdown: 1000; @zindexPopover: 1010; @zindexTooltip: 1030; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html index 6dc47eac71..ff0d287847 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html @@ -5,22 +5,15 @@
-
From b30f414c15926c18a4fa29887fd99ba266860c4f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 10 Apr 2018 13:56:44 +0200 Subject: [PATCH 2/5] remove padding in dropdown + node language dropdown --- src/Umbraco.Web.UI.Client/src/less/components/editor.less | 4 ++-- src/Umbraco.Web.UI.Client/src/less/navs.less | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less index ba0fae2058..ccb3b271b2 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less @@ -181,8 +181,8 @@ a.umb-editor-header__close-split-view:hover { font-size: 14px; flex: 1; cursor: pointer; - padding-top: 6px; - padding-bottom: 6px; + padding-top: 6px !important; + padding-bottom: 6px !important; border-left: 2px solid transparent; } diff --git a/src/Umbraco.Web.UI.Client/src/less/navs.less b/src/Umbraco.Web.UI.Client/src/less/navs.less index 0bd6104d6a..0fa57669a5 100644 --- a/src/Umbraco.Web.UI.Client/src/less/navs.less +++ b/src/Umbraco.Web.UI.Client/src/less/navs.less @@ -235,6 +235,8 @@ .dropdown-menu { border-radius: @dropdownBorderRadius; box-shadow: 0 5px 20px rgba(0,0,0,.3); + padding-top: 0; + padding-bottom: 0; } // fix dropdown with checkbox + long text in label From b869e095e60709984e55e2642b2c9aed4a89e7fd Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 10 Apr 2018 14:34:40 +0200 Subject: [PATCH 3/5] don't show the dropdown if there is only one language --- .../src/views/components/application/umb-navigation.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html index ff0d287847..5eee7cfec9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html @@ -5,7 +5,7 @@
-
+
{{selectedLanguage.name}}
  From d9e433b3ea9afa7f710a826c76ec134e1b3d47e3 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 10 Apr 2018 15:36:06 +0200 Subject: [PATCH 4/5] emit and listen for events when languages are created/deleted --- .../src/controllers/navigation.controller.js | 13 +++++++++++++ .../src/views/languages/edit.controller.js | 8 +++++++- .../src/views/languages/overview.controller.js | 9 ++++++++- 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js index fb37020a7d..6330f5a30a 100644 --- a/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js +++ b/src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js @@ -102,6 +102,19 @@ function NavigationController($scope, $rootScope, $location, $log, $routeParams, } })); + // Listen for language updates + evts.push(eventsService.on("editors.languages.languageDeleted", function(e, args) { + languageResource.getAll().then(function(languages) { + $scope.languages = languages; + }); + })); + + evts.push(eventsService.on("editors.languages.languageCreated", function(e, args) { + languageResource.getAll().then(function(languages) { + $scope.languages = languages; + }); + })); + //This reacts to clicks passed to the body element which emits a global call to close all dialogs evts.push(eventsService.on("app.closeDialogs", function(event) { if (appState.getGlobalState("stickyNavigation")) { diff --git a/src/Umbraco.Web.UI.Client/src/views/languages/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/languages/edit.controller.js index ce6df0d351..5ec62ec177 100644 --- a/src/Umbraco.Web.UI.Client/src/views/languages/edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/languages/edit.controller.js @@ -1,7 +1,7 @@ (function () { "use strict"; - function LanguagesEditController($scope, $timeout, $location, $routeParams, navigationService, notificationsService, localizationService, languageResource, contentEditingHelper, formHelper) { + function LanguagesEditController($scope, $timeout, $location, $routeParams, navigationService, notificationsService, localizationService, languageResource, contentEditingHelper, formHelper, eventsService) { var vm = this; @@ -81,6 +81,12 @@ vm.page.saveButtonState = "success"; notificationsService.success(localizationService.localize("speechBubbles_languageSaved")); + // emit event when language is created + if($routeParams.create) { + var args = { language: lang }; + eventsService.emit("editors.languages.languageCreated", args); + } + back(); }, function (err) { diff --git a/src/Umbraco.Web.UI.Client/src/views/languages/overview.controller.js b/src/Umbraco.Web.UI.Client/src/views/languages/overview.controller.js index bf9856ae50..de05ac7079 100644 --- a/src/Umbraco.Web.UI.Client/src/views/languages/overview.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/languages/overview.controller.js @@ -1,7 +1,7 @@ (function () { "use strict"; - function LanguagesOverviewController($location, $timeout, navigationService, notificationsService, localizationService, languageResource) { + function LanguagesOverviewController($location, $timeout, navigationService, notificationsService, localizationService, languageResource, eventsService) { var vm = this; @@ -58,8 +58,15 @@ language.deleteButtonState = "busy"; languageResource.deleteById(language.id).then(function () { + + // emit event + var args = { language: language }; + eventsService.emit("editors.languages.languageDeleted", args); + + // remove from list var index = vm.languages.indexOf(language); vm.languages.splice(index, 1); + }, function (err) { language.deleteButtonState = "error"; From cc2a90a697a27496f7f892c94172c4b8f311ec73 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 10 Apr 2018 15:36:26 +0200 Subject: [PATCH 5/5] set max-height on language dropdown --- .../src/less/components/application/umb-language-picker.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less index 5baeaf8dc4..81eb3ab59d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less @@ -30,6 +30,8 @@ box-sizing: border-box; position: absolute; border-radius: 0 0 3px 3px; + max-height: 200px; + overflow: scroll; } .umb-language-picker__dropdown a {