diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js index c91683be83..6b7b129809 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js @@ -871,6 +871,8 @@ $scope.app = app; + $scope.$broadcast("editors.apps.appChanged", { app: app }); + if (infiniteMode) { createInfiniteModeButtons($scope.content); } else { @@ -883,13 +885,15 @@ * @param {any} app */ $scope.appAnchorChanged = function (app, anchor) { - + /* + // This is how it should be done — but because of the current architecture, i had to give the responsibilty to 'activate' the content-app to the menu, cause thats the only place you currently can change the active content-app. + // proposal. Make sure that the content-app-menu dosnt do anything. Just make it callback when menu-item are clicked, then make the controller of the view handle what to be done. Then the controller should broadcast a local event, notifying that the current content-app has been changed. + // read more on this issue: https://github.com/umbraco/Umbraco-CMS/issues/4467 if ($scope.app !== app) { - console.log("Change app") // TODO: Not working..!!!!!!!! $scope.appChanged(app); } - + */ //send an event downwards $scope.$broadcast("editors.apps.appAnchorChanged", { app: app, anchor: anchor }); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js index f288d8681d..c2d2ce5fa9 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js @@ -2,7 +2,7 @@ 'use strict'; /** This directive is used to render out the current variant tabs and properties and exposes an API for other directives to consume */ - function tabbedContentDirective() { + function tabbedContentDirective($timeout) { function link($scope, $element, $attrs) { @@ -36,12 +36,30 @@ } tab.active = true; } + function getActiveAnchor() { + var i = $scope.content.tabs.length; + while(i--) { + if ($scope.content.tabs[i].active === true) + return $scope.content.tabs[i]; + } + return false; + } + function getScrollPositionFor(id) { + if (propertyGroupNodesDictionary[id]) { + return propertyGroupNodesDictionary[id].offsetTop - 20;// currently only relative to closest relatively positioned parent + } + return null; + } function scrollTo(id) { console.log("scrollTo", id); - - if (propertyGroupNodesDictionary[id]) { - let y = propertyGroupNodesDictionary[id].offsetTop - 20;// currently only relative to closest relatively positioned parent - + var y = getScrollPositionFor(id); + if (getScrollPositionFor !== null) { + scrollableNode.scrollTo(0, y); + } + } + function jumpTo(id) { + var y = getScrollPositionFor(id); + if (getScrollPositionFor !== null) { scrollableNode.scrollTo(0, y); } } @@ -50,6 +68,14 @@ propertyGroupNodesDictionary[appAnchor] = element; } + $scope.$on("editors.apps.appChanged", function($event, $args) { + // if app changed to this app, then we want to scroll to the current anchor + if($args.app.alias === "umbContent") { + var activeAnchor = getActiveAnchor(); + $timeout(jumpTo.bind(null, [activeAnchor.id])); + } + }); + $scope.$on("editors.apps.appAnchorChanged", function($event, $args) { if($args.app.alias === "umbContent") { setActiveAnchor($args.anchor); @@ -84,7 +110,8 @@ if (newValue === true) { $scope.content.isDirty = true; } - }); + } + ); } var directive = { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontent.directive.js index 9eb4ddee15..5556308e06 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontent.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontent.directive.js @@ -80,16 +80,20 @@ * @param {any} item */ function selectApp(item) { - // disable the name field if the active content app is not "Content" or "Info" - vm.nameDisabled = false; - if(item && item.alias !== "umbContent" && item.alias !== "umbInfo") { - vm.nameDisabled = true; - } // call the callback if any is registered if(vm.onSelectApp) { vm.onSelectApp({"app": item}); } } + + $scope.$on("editors.apps.appChanged", function($event, $args) { + var app = $args.app; + // disable the name field if the active content app is not "Content" or "Info" + vm.nameDisabled = false; + if(app && app.alias !== "umbContent" && app.alias !== "umbInfo") { + vm.nameDisabled = true; + } + }); /** * Used to proxy a callback diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontenteditors.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontenteditors.directive.js index 0995a13707..bd21cca541 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontenteditors.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbvariantcontenteditors.directive.js @@ -318,9 +318,6 @@ * @param {any} app This is the model of the selected app */ function selectApp(app) { - if(app && app.alias) { - activeAppAlias = app.alias; - } if(vm.onSelectApp) { vm.onSelectApp({"app": app}); } @@ -331,6 +328,14 @@ vm.onSelectAppAnchor({"app": app, "anchor": anchor}); } } + + + $scope.$on("editors.apps.appChanged", function($event, $args) { + var app = $args.app; + if(app && app.alias) { + activeAppAlias = app.alias; + } + }); } 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 34810f17dd..31976118fd 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 @@ -32,6 +32,9 @@ if(scope.onAnchorSelect) { scope.onAnchorSelect({"item": item, "anchor": anchor}); } + if (item.active !== true) { + scope.openNavigationItem(item); + } }; scope.toggleDropdown = function () { diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js index abb685807b..8ebee7d15c 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js @@ -48,7 +48,7 @@ Use this directive to render tab content. For an example see: {@link umbraco.dir vm.mouseOut = function() { clearTimeout(vm.mouseOutDelay); - vm.mouseOutDelay = setTimeout(hideDropdownBind, 1000); + vm.mouseOutDelay = setTimeout(hideDropdownBind, 500); } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less index faa4ff40b0..673de62b36 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less @@ -1,5 +1,6 @@ .umb-sub-views-nav-item { position: relative; + display: block; } .umb-sub-views-nav-item > a { text-align: center; @@ -36,6 +37,9 @@ } } +.umb-sub-views-nav-item > a:active { + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); +} .umb-sub-views-nav-item > a:focus { outline: none; } @@ -101,6 +105,12 @@ .umb-sub-views-nav-item__anchor_dropdown {// inherits from .dropdown-menu display: none; + margin: 0; + + // center align horizontal + left: 50%; + transform: translateX(-50%); + &.show { display: block; } @@ -111,9 +121,8 @@ .umb-sub-views-nav-item__anchor_dropdown li.is-active a { border-left-color: @ui-selected-border; } -.umb-sub-views-nav-item__anchor_dropdown li:hover.is-active a { - border-left-color: @ui-selected-border-hover; -} + +.umb-sub-views-nav-item // -------------------------------- diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html index 848985239c..90408e00cc 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html @@ -11,7 +11,7 @@