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

add tree language selector + load in languages

Browse Source
This commit is contained in:
Mads Rasmussen
2018-04-10 13:56:14 +02:00
parent 9233a9f08a
commit e1394a18e5
5 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
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");
@@ -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!

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 {

9
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,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 {

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