Merge pull request #2577 from umbraco/temp-U4-11176

fixes: U4-11176 Language Selector for the main content tree
umbraco · Apr 11, 2018 · f9dcfbb · f9dcfbb
2 parents 7d947af + cc2a90a
commit f9dcfbb
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 23 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
@@ -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");
@@ -98,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")) {
@@ -115,8 +132,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 +192,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
@@ -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
@@ -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,12 @@
 .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;
+    max-height: 200px;
+    overflow: scroll;
 }
 
 .umb-language-picker__dropdown a {

diff --git 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
@@ -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

diff --git 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
@@ -5,22 +5,15 @@
 
         <div ng-swipe-left="nav.hideNavigation()" class="navigation-inner-container">
 
-            <!--
-            <div ng-if="currentSection === 'content'" class="umb-language-picker">
-                
-                <div class="umb-language-picker__toggle" ng-click="toggleTreeLanguageSelector()">
-                    <div>English (United States)</div>
-                    <ins class="umb-language-picker__expand" ng-class="{'icon-navigation-down': !treeLanguageSelectorIsOpen, 'icon-navigation-up': treeLanguageSelectorIsOpen}" class="icon-navigation-right">&nbsp;</ins>                
+            <div class="umb-language-picker" ng-if="currentSection === 'content' && languages.length > 1" on-outside-click="page.languageSelectorIsOpen = false">
+                <div class="umb-language-picker__toggle" ng-click="toggleLanguageSelector()">
+                    <div>{{selectedLanguage.name}}</div>
+                    <ins class="umb-language-picker__expand" ng-class="{'icon-navigation-down': !page.languageSelectorIsOpen, 'icon-navigation-up': page.languageSelectorIsOpen}" class="icon-navigation-right">&nbsp;</ins>                
                 </div>
-
-                <div class="umb-language-picker__dropdown" ng-if="treeLanguageSelectorIsOpen">
-                    <a href="">Spanish (Spain)</a>
-                    <a href="">French (France)</a>
-                    <a href="">Danish</a>
-                    <a href="">German (Germany)</a>
+                <div class="umb-language-picker__dropdown" ng-if="page.languageSelectorIsOpen">
+                    <a ng-click="selectLanguage(language)" ng-repeat="language in languages" href="">{{language.name}}</a>
                 </div>
             </div>
-            -->
 
             <!-- the tree -->
             <div id="tree" ng-if="authenticated">

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