github/datasette
1
0
Fork 0
mirror of https://github.com/simonw/datasette.git synced 2025-12-10 16:51:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

scale-in animation for column action menu, closes #1039

Browse source
This commit is contained in:
Simon Willison 2020-10-21 10:02:26 -07:00
commit bf82b3d6a6
2 changed files with 19 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

17
datasette/static/app.css
View file

@ -453,3 +453,20 @@ svg.dropdown-menu-icon {
position: relative; position: relative;
top: 1px; top: 1px;
} }
.anim-scale-in {
animation-name: scale-in;
animation-duration: 0.15s;
animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
}
@keyframes scale-in {
0% {
opacity: 0;
transform: scale(0.6);
}
100% {
opacity: 1;
transform: scale(1);
}
}

2
datasette/static/table.js
View file

@ -61,6 +61,7 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
} }
if (!target) { if (!target) {
menu.style.display = 'none'; menu.style.display = 'none';
menu.classList.remove('anim-scale-in');
} }
}); });
function iconClicked(ev) { function iconClicked(ev) {
@ -130,6 +131,7 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
menu.style.top = (menuTop + 6) + 'px'; menu.style.top = (menuTop + 6) + 'px';
menu.style.left = menuLeft + 'px'; menu.style.left = menuLeft + 'px';
menu.style.display = 'block'; menu.style.display = 'block';
menu.classList.add('anim-scale-in');
} }
var svg = document.createElement('div'); var svg = document.createElement('div');
svg.innerHTML = DROPDOWN_ICON_SVG; svg.innerHTML = DROPDOWN_ICON_SVG;