From 4fa595edd9ca60b55d1155b51570b0626fd4b384 Mon Sep 17 00:00:00 2001
From: copilaurobert <copilaurobert@gmail.com>
Date: Tue, 21 Aug 2018 11:09:10 +0200
Subject: [PATCH] Content apps will now move into the tray based on window
 width

---
 .../editor/umbeditorheader.directive.js       |  1 -
 .../editor/umbeditornavigation.directive.js   | 61 ++++++++++++++++---
 .../components/editor/umb-editor-header.html  |  3 +-
 .../editor/umb-editor-navigation.html         |  2 +-
 4 files changed, 53 insertions(+), 14 deletions(-)

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 81eb38f00c..1d1c9d8f00 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,7 +208,6 @@ Use this directive to construct a header inside the main editor window.
 
         function link(scope, el, attr, ctrl) {
 
-            scope.contentAppsLimit = 2;
 
             scope.vm = {};
             scope.vm.dropdownOpen = false;
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 f5dc1f93ec..482b900a4a 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
@@ -1,14 +1,21 @@
 (function () {
     'use strict';
 
-    function EditorNavigationDirective(eventsService) {
+    function EditorNavigationDirective(eventsService, $timeout) {
 
         function link(scope, el, attr, ctrl) {
 
+
+            var maxApps = 3;
+            var contentAppsWidth = [];
+
             scope.showNavigation = true;
             scope.showMoreButton = false;
             scope.showTray = false;
 
+            scope.contentAppsLimit = maxApps;
+
+
             scope.moreButton = {
                 alias: "more",
                 active: false,
@@ -61,6 +68,15 @@
             }
 
             function activate() {
+
+                $timeout(function () {
+
+                    $("#contentApps li").each(function (index) {
+                        contentAppsWidth.push($(this).outerWidth());
+                    });
+                });
+
+
                 // hide navigation if there is only 1 item
                 if (scope.navigation.length <= 1) {
                     scope.showNavigation = false;
@@ -72,21 +88,47 @@
                     return;
                 }
 
-
-                if (scope.navigation.length > scope.contentAppsLimit) {
+                if (scope.contentAppsLimit < maxApps) {
                     scope.showMoreButton = true;
 
-                    calculateTrayLimit();
+                } else {
+                    scope.showMoreButton = false;
                 }
             }
 
-            function calculateTrayLimit() {
-                var navLength = scope.navigation.length;
-                var maxApps = scope.contentAppsLimit;
+            window.onresize = calculateWidth;
 
-                scope.contentAppsTrayLimit = maxApps - navLength;
+            function calculateWidth() {
+                $timeout(function () {
+                    //total width minus room for avatar, search and help icon
+                    var nameHeaderWidth = $(window).width() - 200;
+                    var appsWidth = 0;
+                    var totalApps = scope.navigation.length;
+
+                    // detect how many apps we can show on the screen and tray
+                    for (var i = 0; i < contentAppsWidth.length; i++) {
+                        var appItemWidth = contentAppsWidth[i];
+                        appsWidth += appItemWidth;
+
+                        // substract current content apps width to get a more accurate measurement of the name header width
+                        nameHeaderWidth -= appsWidth;
+
+                        if (appsWidth > nameHeaderWidth) {
+                            scope.contentAppsLimit = i - 1;
+                            scope.contentAppsTrayLimit = scope.contentAppsLimit - totalApps;
+                            break;
+                        } else {
+                            scope.contentAppsLimit = maxApps;
+                            scope.contentAppsTrayLimit = scope.contentAppsLimit - totalApps;
+                        }
+
+                    }
+                });
+
+                showMoreButton();
             }
 
+
             activate();
             showMoreButton();
         }
@@ -96,8 +138,7 @@
             replace: true,
             templateUrl: 'views/components/editor/umb-editor-navigation.html',
             scope: {
-                navigation: "=",
-                contentAppsLimit: "="
+                navigation: "="
             },
             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 6fa05112f6..0914346189 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
@@ -99,8 +99,7 @@
 
         <div ng-if="navigation && splitViewOpen !== true" style="margin-left: 20px;">
             <umb-editor-navigation data-element="editor-sub-views"
-                                   navigation="navigation"
-                                   content-apps-limit="contentAppsLimit">
+                                   navigation="navigation">
             </umb-editor-navigation>
         </div>
 
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 4ee8ca58e7..1bade4fe8f 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,4 +1,4 @@
-<ul class="umb-sub-views-nav" ng-show="showNavigation">
+<ul id="contentApps" class="umb-sub-views-nav" ng-show="showNavigation">
     <li ng-repeat="item in navigation | limitTo: contentAppsLimit ">
         <div ng-show="item.alias !== 'more'">
             <a data-element="sub-view-{{item.alias}}"