From b44494a093a7bbf012253b2029dee505d2d873af Mon Sep 17 00:00:00 2001 From: Shannon Date: Mon, 27 Jul 2015 16:38:39 +0200 Subject: [PATCH] Works on: U4-5308 Umbraco 7 Content Tree Width not resizable or scrollable --- .../common/directives/navresize.directive.js | 101 ++++++++++++++++++ .../src/common/services/appstate.service.js | 3 +- .../src/common/services/navigation.service.js | 21 +--- src/Umbraco.Web.UI.Client/src/less/grid.less | 14 +++ .../src/views/directives/umb-navigation.html | 4 +- 5 files changed, 124 insertions(+), 19 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/navresize.directive.js diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/navresize.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/navresize.directive.js new file mode 100644 index 0000000000..8f417effe5 --- /dev/null +++ b/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(); + } + }; + }); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js b/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js index 1177da323d..e51310f584 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/appstate.service.js +++ b/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 = { diff --git a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js index ba4a4b1488..f404419340 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js +++ b/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"); diff --git a/src/Umbraco.Web.UI.Client/src/less/grid.less b/src/Umbraco.Web.UI.Client/src/less/grid.less index f29f8063de..5871412ee2 100644 --- a/src/Umbraco.Web.UI.Client/src/less/grid.less +++ b/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;} diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html index c686e569e7..fcffaa1c38 100644 --- a/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html +++ b/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html @@ -5,9 +5,9 @@ -