okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added animation to context menus

Browse source
This commit is contained in:
booploops 2021-12-15 18:13:42 -08:00
parent 2837c9d57e
commit dc575faa76
2 changed files with 43 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
resources/cider-ui/index.js
View file

@ -22,16 +22,24 @@ var CiderContextMenu = {
var menuBackground = document.createElement("div"); var menuBackground = document.createElement("div");
var menu = document.createElement("div"); var menu = document.createElement("div");
menu.classList.add("context-menu-body"); menu.classList.add("context-menu-body");
menu.classList.add("context-menu-open");
menuBackground.classList.add("context-menu"); menuBackground.classList.add("context-menu");
menu.style.left = 0 + "px"; menu.style.left = 0 + "px";
menu.style.top = 0 + "px"; menu.style.top = 0 + "px";
menu.style.position = "absolute"; menu.style.position = "absolute";
menu.style.zIndex = "99909"; menu.style.zIndex = "99909";
menu.addEventListener("animationend", function () {
menu.classList.remove("context-menu-open");
}, {once: true});
// when menubackground is clicked, remove it // when menubackground is clicked, remove it
menuBackground.addEventListener("click", function () { menuBackground.addEventListener("click", function () {
menuBackground.style.pointerEvents = "none";
menu.classList.add("context-menu-close");
menu.addEventListener("animationend", function () {
menuBackground.remove(); menuBackground.remove();
menu.remove(); menu.remove();
}, {once: true});
}); });
// add menu to menuBackground // add menu to menuBackground

33
resources/cider-ui/style.less
View file

@ -461,9 +461,42 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
padding: 6px; padding: 6px;
border-radius: 6px; border-radius: 6px;
box-shadow: var(--mediaItemShadow-Shadow); box-shadow: var(--mediaItemShadow-Shadow);
&.context-menu-open {
animation-duration: .10s;
animation-name: contextMenuIn;
animation-iteration-count: 1;
animation-easings: var(--appleEase);
}
&.context-menu-close {
animation-duration: .10s;
animation-name: contextMenuOut;
animation-iteration-count: 1;
animation-easings: var(--appleEase);
}
} }
} }
@keyframes contextMenuIn {
0% {
transform: scale(0.9);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes contextMenuOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0;
}
}
.app-sidebar-content::-webkit-scrollbar { .app-sidebar-content::-webkit-scrollbar {
display: none; display: none;