make anchor-dropdown appear on click

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

@@ -3,31 +3,58 @@
     
     function UmbEditorNavigationItemController($scope, $element, $attrs) {
         
+        
+        var componentNode = $element[0];
+        componentNode.classList.add('umb-sub-views-nav-item');
+        
+        var timerId = null;
+        
+        function openAnchorDropdown() {
+            clearTimeout(timerId);
+            componentNode.classList.add('--open-anchor-dropdown');
+            componentNode.addEventListener('mouseout', requestCloseAnchorDropdown);
+        }
+        function requestCloseAnchorDropdown() {
+            componentNode.removeEventListener('mouseout', requestCloseAnchorDropdown);
+            componentNode.addEventListener('mouseover', cancelCloseAnchorDropdown);
+            timerId = setTimeout(doCloseAnchorDropdown, 500);
+        }
+        function cancelCloseAnchorDropdown() {
+            clearTimeout(timerId);
+            componentNode.removeEventListener('mouseover', cancelCloseAnchorDropdown);
+            componentNode.addEventListener('mouseout', requestCloseAnchorDropdown);
+        }
+        function doCloseAnchorDropdown() {
+            componentNode.classList.remove('--open-anchor-dropdown');
+        }
+        
+        
         var vm = this;
         
         vm.clicked = function() {
-            vm.onOpen({item:vm.item});
+            if (vm.item.active !== true) {
+                vm.onOpen({item:vm.item});
+            }
+            openAnchorDropdown();
         };
         
+        
+        
         vm.anchorClicked = function(anchor, $event) {
             vm.onOpenAnchor({item:vm.item, anchor:anchor});
             $event.stopPropagation();
             $event.preventDefault();
         };
         
-        // needed to make sure that we update what anchors are active.
-        vm.mouseOver = function() {
-            $scope.$digest();
-        }
+        $scope.$watch('item.active', function(newValue, oldValue) {
+            if(oldValue !== newValue && newValue === false) {
+                closeAnchorDropdown();
+            }
+        })
         
-        var componentNode = $element[0];
-        
-        componentNode.classList.add('umb-sub-views-nav-item');
-        componentNode.addEventListener('mouseover', vm.mouseOver);
-
         //ensure to unregister from all dom-events
         $scope.$on('$destroy', function () {
-            componentNode.removeEventListener("mouseover", vm.mouseOver);
+            componentNode.removeEventListener("mouseout", closeAnchorDropdown);
         });
         
     }

src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less

@@ -56,8 +56,8 @@
    margin-top: -9px;
    z-index: 100;
    border-radius: 40px;
-   border: 2px solid @btnBorder;
-   border-left-color: @green;
+   border: 2px solid @ui-option-disabled-type;
+   border-left-color: @ui-option-type;
    opacity: 1;
    animation: rotating 0.4s linear infinite;
    transition: opacity 0.25s ease;
@@ -84,6 +84,12 @@
    font-size: 20px;
    transition: opacity 0.25s ease;
 }
+.umb-button__success {
+   color: @ui-option-type;
+}
+.umb-button__error {
+   color: @red;
+}
 
 .umb-button__success.-hidden,
 .umb-button__error.-hidden {

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

@@ -117,7 +117,7 @@
     
     visibility:hidden;
     opacity: 0;
-    transition: visibility 0s 500ms, opacity 250ms 250ms;
+    transition: opacity 20ms;
 }
 .umb-sub-views-nav-item__anchor_dropdown li a {
     border-left: 4px solid transparent;
@@ -126,10 +126,9 @@
     border-left-color: @ui-selected-border;
 }
 
-.umb-sub-views-nav-item:hover .umb-sub-views-nav-item__anchor_dropdown {
+.umb-sub-views-nav-item.--open-anchor-dropdown .umb-sub-views-nav-item__anchor_dropdown {
     visibility:visible;
     opacity: 1;
-    transition: visibility 0s 0s, opacity 20ms 0s;
 }