yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
fixes: U4-11176 Language Selector for the main content tree
This commit is contained in:
Robert
2018-04-11 09:35:30 +02:00
committed by GitHub
parent 7d947afdf0 cc2a90a697
commit f9dcfbbf95
9 changed files with 76 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/Umbraco.Web.UI.Client/src/controllers/navigation.controller.js
View File

@@ -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!

2
src/Umbraco.Web.UI.Client/src/less/application/grid.less
View File

@@ -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 {

11
src/Umbraco.Web.UI.Client/src/less/components/application/umb-language-picker.less
View File

@@ -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 {

4
src/Umbraco.Web.UI.Client/src/less/components/editor.less
View File

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

2
src/Umbraco.Web.UI.Client/src/less/navs.less
View File

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

1
src/Umbraco.Web.UI.Client/src/less/variables.less
View File

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

19
src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
View File

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

8
src/Umbraco.Web.UI.Client/src/views/languages/edit.controller.js
View File

@@ -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) {

9
src/Umbraco.Web.UI.Client/src/views/languages/overview.controller.js
View File

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