diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js index 2793a0ec57..7f906ddcc0 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js @@ -10,62 +10,62 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se templateUrl: 'views/components/application/umb-sections.html', link: function (scope, element, attr, ctrl) { - var sectionItemsWidth = []; - var evts = []; - var maxSections = 7; + var sectionItemsWidth = []; + var evts = []; + var maxSections = 7; //setup scope vars - scope.maxSections = maxSections; - scope.overflowingSections = 0; + scope.maxSections = maxSections; + scope.overflowingSections = 0; scope.sections = []; scope.currentSection = appState.getSectionState("currentSection"); scope.showTray = false; //appState.getGlobalState("showTray"); scope.stickyNavigation = appState.getGlobalState("stickyNavigation"); scope.needTray = false; - function loadSections(){ - sectionService.getSectionsForUser() - .then(function (result) { - scope.sections = result; - // store the width of each section so we can hide/show them based on browser width - // we store them because the sections get removed from the dom and then we - // can't tell when to show them gain - $timeout(function(){ - $("#applications .sections li").each(function(index) { - sectionItemsWidth.push($(this).outerWidth()); - }); - }); - calculateWidth(); - }); - } - - function calculateWidth(){ - $timeout(function(){ - //total width minus room for avatar, search, and help icon - var windowWidth = $(window).width()-200; - var sectionsWidth = 0; - scope.totalSections = scope.sections.length; - scope.maxSections = maxSections; - scope.overflowingSections = 0; - scope.needTray = false; - - // detect how many sections we can show on the screen - for (var i = 0; i < sectionItemsWidth.length; i++) { - var sectionItemWidth = sectionItemsWidth[i]; - sectionsWidth += sectionItemWidth; + function loadSections() { + sectionService.getSectionsForUser() + .then(function (result) { + scope.sections = result; + // store the width of each section so we can hide/show them based on browser width + // we store them because the sections get removed from the dom and then we + // can't tell when to show them gain + $timeout(function () { + $("#applications .sections li").each(function (index) { + sectionItemsWidth.push($(this).outerWidth()); + }); + }); + calculateWidth(); + }); + } - if(sectionsWidth > windowWidth) { - scope.needTray = true; - scope.maxSections = i - 1; - scope.overflowingSections = scope.maxSections - scope.totalSections; - break; - } - } - }); - } + function calculateWidth() { + $timeout(function () { + //total width minus room for avatar, search, and help icon + var windowWidth = $(window).width() - 200; + var sectionsWidth = 0; + scope.totalSections = scope.sections.length; + scope.maxSections = maxSections; + scope.overflowingSections = 0; + scope.needTray = false; + + // detect how many sections we can show on the screen + for (var i = 0; i < sectionItemsWidth.length; i++) { + var sectionItemWidth = sectionItemsWidth[i]; + sectionsWidth += sectionItemWidth; + + if (sectionsWidth > windowWidth) { + scope.needTray = true; + scope.maxSections = i - 1; + scope.overflowingSections = scope.maxSections - scope.totalSections; + break; + } + } + }); + } //Listen for global state changes - evts.push(eventsService.on("appState.globalState.changed", function(e, args) { + evts.push(eventsService.on("appState.globalState.changed", function (e, args) { if (args.key === "showTray") { scope.showTray = args.value; } @@ -74,44 +74,44 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se } })); - evts.push(eventsService.on("appState.sectionState.changed", function(e, args) { + evts.push(eventsService.on("appState.sectionState.changed", function (e, args) { if (args.key === "currentSection") { scope.currentSection = args.value; } })); - evts.push(eventsService.on("app.reInitialize", function(e, args) { + evts.push(eventsService.on("app.reInitialize", function (e, args) { //re-load the sections if we're re-initializing (i.e. package installed) loadSections(); })); //ensure to unregister from all events! - scope.$on('$destroy', function () { - for (var e in evts) { - eventsService.unsubscribe(evts[e]); - } - }); + scope.$on('$destroy', function () { + for (var e in evts) { + eventsService.unsubscribe(evts[e]); + } + }); - //on page resize - window.onresize = calculateWidth; + //on page resize + window.onresize = calculateWidth; - scope.sectionClick = function (event, section) { + scope.sectionClick = function (event, section) { - if (event.ctrlKey || - event.shiftKey || - event.metaKey || // apple - (event.button && event.button === 1) // middle click, >IE9 + everyone else - ) { - return; - } + if (event.ctrlKey || + event.shiftKey || + event.metaKey || // apple + (event.button && event.button === 1) // middle click, >IE9 + everyone else + ) { + return; + } if (scope.userDialog) { closeUserDialog(); - } - + } - navigationService.hideSearch(); - navigationService.showTree(section.alias); + + navigationService.hideSearch(); + navigationService.showTree(section.alias); //in some cases the section will have a custom route path specified, if there is one we'll use it if (section.routePath) { @@ -123,22 +123,22 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se $location.path(path); } navigationService.clearSearch(); - - }; - scope.sectionDblClick = function(section){ - navigationService.reloadSection(section.alias); - }; + }; - scope.trayClick = function () { - if (appState.getGlobalState("showTray") === true) { - navigationService.hideTray(); - } else { - navigationService.showTray(); - } - }; + scope.sectionDblClick = function (section) { + navigationService.reloadSection(section.alias); + }; - loadSections(); + scope.trayClick = function () { + if (appState.getGlobalState("showTray") === true) { + navigationService.hideTray(); + } else { + navigationService.showTray(); + } + }; + + loadSections(); } }; diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js index ac4fce8d44..f75abeb43f 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js @@ -208,9 +208,23 @@ Use this directive to construct a header inside the main editor window. function link(scope, el, attr, ctrl) { + var maxApps = 2; + scope.vm = {}; scope.vm.dropdownOpen = false; scope.vm.currentVariant = ""; + scope.vm.inputWidth = ""; + scope.maxSections = maxApps; + scope.overflowingApps = 0; + scope.navigationOverflow = []; + + + var moreButton = { + alias: "more", + name: "More", + icon: "icon-thumbnails-small", + view: "views/content/apps/info/info.html" + }; function onInit() { setCurrentVariant(); @@ -293,6 +307,7 @@ Use this directive to construct a header inside the main editor window. } } + var directive = { transclude: true, restrict: 'E', diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigation.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigation.directive.js index 6a8896b609..b19b2e25c4 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigation.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigation.directive.js @@ -5,12 +5,30 @@ function link(scope, el, attr, ctrl) { + + scope.showNavigation = true; + scope.showMore = false; + scope.showTray = false; + scope.overflow = []; + scope.currentApps = 0; + + scope.clickNavigationItem = function (selectedItem) { - setItemToActive(selectedItem); - runItemAction(selectedItem); - eventsService.emit("app.tabChange", selectedItem); + console.log(scope.something); + + if (selectedItem.alias !== "more") { + runItemAction(selectedItem); + eventsService.emit("app.tabChange", selectedItem); + setItemToActive(selectedItem); + } else { + if (scope.showTray === false) { + scope.showTray = true; + } else { + scope.showTray = false; + } + } }; function runItemAction(selectedItem) { @@ -39,11 +57,28 @@ if (scope.navigation.length <= 1) { scope.showNavigation = false; } + scope.currentApps = scope.navigation.length; + + var maxApps =4; + var navLenght = scope.navigation.length - 1; + + + var appsToPop = navLenght - maxApps; + + if (navLenght > maxApps) { + + for (var i = 0; i < appsToPop +1; i++) { + var v = scope.navigation.pop(); + scope.overflow.push(v); + } + scope.showMore = true; + + } } activate(); - + } var directive = { @@ -51,7 +86,8 @@ replace: true, templateUrl: 'views/components/editor/umb-editor-navigation.html', scope: { - navigation: "=" + navigation: "=", + something: "=" }, link: link }; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html index c9955ce86f..0ce9e10224 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html @@ -12,7 +12,7 @@
+ title="{{$parent.icon}}">
@@ -20,8 +20,7 @@
-
- +
+ navigation="navigation" + something="something" + navigationOverflow ="navigationOverflow">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html index df64055d1e..4404fabb77 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation.html @@ -1,14 +1,51 @@ diff --git a/src/Umbraco.Web/Models/Mapping/ContentAppResolver.cs b/src/Umbraco.Web/Models/Mapping/ContentAppResolver.cs index e3ecacb056..f9793e985e 100644 --- a/src/Umbraco.Web/Models/Mapping/ContentAppResolver.cs +++ b/src/Umbraco.Web/Models/Mapping/ContentAppResolver.cs @@ -27,6 +27,14 @@ namespace Umbraco.Web.Models.Mapping View = "views/content/apps/info/info.html" }; + private readonly ContentApp _moreApp = new ContentApp + { + Alias = "more", + Name = "More", + Icon = "icon-thumbnails-small", + View = "views/content/apps/info/info.html" + }; + private readonly IDataTypeService _dataTypeService; private readonly PropertyEditorCollection _propertyEditorCollection; @@ -48,7 +56,8 @@ namespace Umbraco.Web.Models.Mapping apps.Add(_contentApp); apps.Add(_infoApp); - + apps.Add(_moreApp); + return apps; } }