Works on: U4-5308 Umbraco 7 Content Tree Width not resizable or scrollable

src/Umbraco.Web.UI.Client/src/common/directives/navresize.directive.js

@@ -0,0 +1,101 @@
+/**
+* @ngdoc directive
+* @name umbraco.directives.directive:navResize
+* @restrict A
+ * 
+ * @description
+ * Handles how the navigation responds to window resizing and controls how the draggable resize panel works
+**/
+angular.module("umbraco.directives")
+    .directive('navResize', function (appState, eventsService) {
+        return {
+            restrict: 'A',
+            link: function (scope, element, attrs, ctrl) {
+
+                var minScreenSize = 1100;
+                var resizeEnabled = false;
+
+                function setTreeMode() {
+                    appState.setGlobalState("showNavigation", appState.getGlobalState("isTablet") === false);
+                }
+
+                function enableResize() {
+                    //only enable when the size is correct and it's not already enabled
+                    if (!resizeEnabled && appState.getGlobalState("isTablet") === false) {
+                        element.find(".navigation-inner-container").resizable(
+                        {
+                            containment: $("#mainwrapper"),
+                            autoHide: true,
+                            handles: 'e',
+                            resize: function(e, ui) {
+                                var wrapper = $("#mainwrapper");
+                                var contentPanel = $("#leftcolumn").next();
+                                var apps = $("#applications");
+                                var navOffeset = ui.element.next();
+                                var leftPanelWidth = ui.element.width() + apps.width();
+
+                                contentPanel.css({ left: leftPanelWidth });
+                                navOffeset.css({ "margin-left": ui.element.outerWidth() });
+                            },
+                            stop: function(e, ui) {
+                            }
+                        });
+
+                        resizeEnabled = true;
+                    }
+                }
+
+                function resetResize() {
+                    if (resizeEnabled) {
+                        var navInnerContainer = element.find(".navigation-inner-container");
+
+                        //kill the resize
+                        navInnerContainer.resizable("destroy");
+
+                        navInnerContainer.css("width", "");
+                        $("#leftcolumn").next().css("left", "");
+                        navInnerContainer.next().css("margin-left", "");
+
+                        resizeEnabled = false;
+                    }
+                }
+
+                var evts = [];
+
+                //Listen for global state changes
+                evts.push(eventsService.on("appState.globalState.changed", function (e, args) {
+                    if (args.key === "showNavigation") {
+                        if (args.value === false) {
+                            resetResize();
+                        }
+                        else {
+                            enableResize();
+                        }
+                    }
+                }));
+
+                $(window).bind("resize", function () {
+
+                    //set the global app state
+                    appState.setGlobalState("isTablet", ($(window).width() <= minScreenSize));
+
+                    setTreeMode();
+                });
+
+                //ensure to unregister from all events and kill jquery plugins
+                scope.$on('$destroy', function () {
+                    for (var e in evts) {
+                        eventsService.unsubscribe(evts[e]);                        
+                    }
+                    var navInnerContainer = element.find(".navigation-inner-container");
+                    navInnerContainer.resizable("destroy");
+                });
+
+
+                //init
+                //set the global app state
+                appState.setGlobalState("isTablet", ($(window).width() <= minScreenSize));
+                setTreeMode();
+            }
+        };
+    });

src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js

@@ -43,7 +43,8 @@ function appState(eventsService) {
         showTray: null,
         stickyNavigation: null,
         navMode: null,
-        isReady: null
+        isReady: null,
+        isTablet: null
     };
     
     var sectionState = {

src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js

@@ -17,21 +17,15 @@
  */
 function navigationService($rootScope, $routeParams, $log, $location, $q, $timeout, $injector, dialogService, umbModelMapper, treeService, notificationsService, historyService, appState, angularHelper) {
 
-    var minScreenSize = 1100;
+    
     //used to track the current dialog object
     var currentDialog = null;
-    //tracks the screen size as a tablet
-    var isTablet = false;
+    
     //the main tree event handler, which gets assigned via the setupTreeEvents method
     var mainTreeEventHandler = null;
     //tracks the user profile dialog
     var userDialog = null;
 
-    function setTreeMode() {
-        isTablet = ($(window).width() <= minScreenSize);
-        appState.setGlobalState("showNavigation", !isTablet);
-    }
-
     function setMode(mode) {
         switch (mode) {
         case 'tree':
@@ -80,7 +74,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
             appState.setGlobalState("stickyNavigation", false);
             appState.setGlobalState("showTray", false);
 
-            if (isTablet) {
+            if (appState.getGlobalState("isTablet") === true) {
                 appState.setGlobalState("showNavigation", false);
             }
 
@@ -93,8 +87,6 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
         /** initializes the navigation service */
         init: function() {
 
-            setTreeMode();
-            
             //keep track of the current section - initially this will always be undefined so 
             // no point in setting it now until it changes.
             $rootScope.$watch(function () {
@@ -103,10 +95,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
                 appState.setSectionState("currentSection", newVal);
             });
 
-            //TODO: This does not belong here - would be much better off in a directive
-            $(window).bind("resize", function() {
-                setTreeMode();
-            });
+            
         },
 
         /**
@@ -353,7 +342,7 @@ function navigationService($rootScope, $routeParams, $log, $location, $q, $timeo
          */
         hideTree: function() {
 
-            if (isTablet && !appState.getGlobalState("stickyNavigation")) {
+            if (appState.getGlobalState("isTablet") === true && !appState.getGlobalState("stickyNavigation")) {
                 //reset it to whatever is in the url
                 appState.setSectionState("currentSection", $routeParams.section);
                 setMode("default-hidesectiontree");

src/Umbraco.Web.UI.Client/src/less/grid.less

@@ -120,6 +120,7 @@ body {
     right: 0px;
     padding-top: 100px;
     border-right: 1px solid @grayLight;
+    z-index: 100;
 }
 
 #dialog {
@@ -167,6 +168,19 @@ body {
   border-radius: 0;
 }
 
+.ui-resizable-e { 
+    cursor: e-resize; 
+    width: 4px; 
+    right: -5px; 
+    top: 0; 
+    bottom: 0; 
+    background-color: @grayLighter;
+    border: solid 1px @grayLight;
+    position:absolute;
+    z-index:9999 !important;
+
+}
+
 @media (min-width: 1101px) {
   #contentwrapper {left: 440px;}
   #speechbubble {left: 360px;}

src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html

@@ -5,9 +5,9 @@
     </umb-sections>
 
     <!-- navigation container -->
-    <div id="navigation" ng-show="showNavigation" class="fill umb-modalcolumn" ng-animate="'slide'">
+    <div id="navigation" ng-show="showNavigation" class="fill umb-modalcolumn" ng-animate="'slide'" nav-resize>
 
-        <div ng-swipe-left="nav.hideNavigation()" class="navigation-inner-container span6" style="z-index: 100">
+        <div ng-swipe-left="nav.hideNavigation()" class="navigation-inner-container span6">
             
             <!-- the search -->
             <div ng-controller="Umbraco.SearchController" ng-if="authenticated">