yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch tab after a delay, plus tab droppable indication.

Browse Source
This commit is contained in:
Niels Lyngsø
2021-08-04 19:01:20 +02:00
parent ce9d38aad7
commit 8d1034db60
2 changed files with 26 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
View File

@@ -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");
}
};
}

10
src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
View File

@@ -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;