From 8d1034db60fbc3d6f3e0b66a42499df28cf41a28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.com>
Date: Wed, 4 Aug 2021 19:01:20 +0200
Subject: [PATCH] Switch tab after a delay, plus tab droppable indication.

---
 .../components/umbgroupsbuilder.directive.js   | 18 ++++++++++++++++--
 .../src/less/components/umb-group-builder.less | 10 ++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
index 9bdb986604..0b9d5b33a3 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
@@ -143,11 +143,14 @@
                     }
                 };
 
+                scope.sortableRequestedTabTimeout = null;
                 scope.droppableOptionsTab = {
                     accept: '.umb-group-builder__property-sortable, .umb-group-builder__group-sortable',
                     tolerance : 'pointer',
                     over: (evt, ui) => {
 
+                        evt.target.classList.add("--droppableHover")
+
                         const hoveredTabAlias = evt.target.dataset.tabAlias || null;
 
                         // if group
@@ -164,8 +167,19 @@
                             }
                         }
 
-                        scope.openTabAlias = hoveredTabAlias;
-                        scope.$evalAsync();
+                        if(scope.sortableRequestedTabAlias !== hoveredTabAlias) {
+                            if(scope.sortableRequestedTabTimeout !== null) {
+                                $timeout.cancel(scope.sortableRequestedTabTimeout);
+                                scope.sortableRequestedTabTimeout = null;
+                            }
+                            scope.sortableRequestedTabAlias = hoveredTabAlias;
+                            scope.sortableRequestedTabTimeout = $timeout(() => {
+                                scope.openTabAlias = scope.sortableRequestedTabAlias;
+                            }, 1200)
+                        }
+                    },
+                    out: (evt, ui) => {
+                        evt.target.classList.remove("--droppableHover");
                     }
                 };
             }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
index 24476d87a5..4e65976db0 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
@@ -121,6 +121,16 @@
     }
   }
 
+  .ui-droppable-hover & {
+      
+    animation: umb-group-builder-tab--droppable-active 800ms ease-in-out alternate infinite;
+
+    @keyframes umb-group-builder-tab--droppable-active {
+        0%  { background-color: white }
+        50%   { background-color: @gray-12 }
+    }
+  }
+
   .badge {
     background-color: @red;
     animation-duration: 1.4s;