motion added for umb-editor-navigation-item anchor-dropdown

src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js

@@ -13,6 +13,7 @@
             
             var scrollableNode = appRootNode.closest(".umb-scrollable");
             scrollableNode.addEventListener("scroll", onScroll);
+            scrollableNode.addEventListener("mousehweel", cancelScrollTween);
             
             function onScroll(event) {
                 
@@ -21,7 +22,6 @@
                 for(var i in $scope.content.tabs) {
                     var group = $scope.content.tabs[i];
                     var node = propertyGroupNodesDictionary[group.id];
-                    //console.log(node.offsetTop, node.offsetTop + node.clientHeight)
                     if (viewFocusY >= node.offsetTop && viewFocusY <= node.offsetTop + node.clientHeight) {
                         setActiveAnchor(group);
                         return;
@@ -29,6 +29,7 @@
                 }
                 
             }
+            
             function setActiveAnchor(tab) {
                 if (tab.active !== true) {
                     var i = $scope.content.tabs.length;
@@ -55,15 +56,34 @@
             function scrollTo(id) {
                 var y = getScrollPositionFor(id);
                 if (getScrollPositionFor !== null) {
-                    scrollableNode.scrollTo(0, y);
+                    
+                    var viewportHeight = scrollableNode.clientHeight;
+                    var from = scrollableNode.scrollTop;
+                    var to = Math.min(y, scrollableNode.scrollHeight - viewportHeight);
+                    
+                    var animeObject = {_y: from};
+                    $scope.scrollTween = anime({
+                        targets: animeObject,
+                        _y: to,
+                        easing: 'easeOutExpo',
+                        duration: 200 + Math.min(Math.abs(to-from)/viewportHeight*100, 400),
+                        update: () => {
+                            scrollableNode.scrollTo(0, animeObject._y);
+                        }
+                    });
+
                 }
             }
             function jumpTo(id) {
                 var y = getScrollPositionFor(id);
                 if (getScrollPositionFor !== null) {
+                    cancelScrollTween();
                     scrollableNode.scrollTo(0, y);
                 }
             }
+            function cancelScrollTween() {
+                $scope.scrollTween.pause();
+            }
             
             $scope.registerPropertyGroup = function(element, appAnchor) {
                 propertyGroupNodesDictionary[appAnchor] = element;

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditornavigationitem.directive.js

@@ -17,14 +17,8 @@ Use this directive to render tab content. For an example see: {@link umbraco.dir
         
         var vm = this;
         
-        vm.showDropdown = false;
-        
         vm.clicked = function() {
             vm.onOpen({item:vm.item});
-            
-            //vm.mouseOver();// help touch users get the dropdown.
-            clearTimeout(vm.mouseOutDelay);
-            vm.showDropdown = true;
         };
         
         vm.anchorClicked = function(anchor, $event) {
@@ -34,32 +28,10 @@ Use this directive to render tab content. For an example see: {@link umbraco.dir
             $event.preventDefault();
         };
         
-        vm.mouseOver = function() {
-            clearTimeout(vm.mouseOutDelay);
-            vm.showDropdown = true;
-            $scope.$digest();
-        }
-        
-        var hideDropdown = function() {
-            vm.showDropdown = false;
-            $scope.$digest();
-        }
-        var hideDropdownBind = hideDropdown.bind(vm);
-        
-        vm.mouseOut = function() {
-            clearTimeout(vm.mouseOutDelay);
-            vm.mouseOutDelay = setTimeout(hideDropdownBind, 500);
-        }
-        
-        
-        
         var componentNode = $element[0];
         
         componentNode.classList.add('umb-sub-views-nav-item');
         
-        componentNode.addEventListener('mouseover', vm.mouseOver.bind(vm));
-        componentNode.addEventListener('mouseout', vm.mouseOut.bind(vm));
-        
     }
     
     angular

src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less

@@ -104,7 +104,7 @@
 
 
 .umb-sub-views-nav-item__anchor_dropdown {// inherits from .dropdown-menu
-    display: none;
+    display: block;
     margin: 0;
     overflow: hidden;
     
@@ -112,9 +112,9 @@
     left: 50%;
     transform: translateX(-50%);
     
-    &.show {
-        display: block;
-    }
+    visibility:hidden;
+    opacity: 0;
+    transition: visibility 0s 500ms, opacity 250ms 250ms;
 }
 .umb-sub-views-nav-item__anchor_dropdown li a {
     border-left: 4px solid transparent;
@@ -123,6 +123,13 @@
     border-left-color: @ui-selected-border;
 }
 
+.umb-sub-views-nav-item:hover .umb-sub-views-nav-item__anchor_dropdown {
+    visibility:visible;
+    opacity: 1;
+    transition: visibility 0s 0s, opacity 20ms 0s;
+}
+
+
 
 // --------------------------------
 // item__more, appears when there is not enough room for the visible items.