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

Improvements to table column cog menu display, closes #2263

Browse source 
- Repositions if menu would cause a horizontal scrollbar
- Arrow tip on menu now attempts to align with cog icon on column
This commit is contained in:
Simon Willison 2024-02-19 13:40:48 -08:00
commit 392ca2e24c
1 changed files with 11 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

11
datasette/static/table.js
View file

@ -217,6 +217,17 @@ const initDatasetteTable = function (manager) {
menuList.appendChild(menuItem); menuList.appendChild(menuItem);
}); });
// Measure width of menu and adjust position if too far right
const menuWidth = menu.offsetWidth;
const windowWidth = window.innerWidth;
if (menuLeft + menuWidth > windowWidth) {
menu.style.left = windowWidth - menuWidth - 20 + "px";
}
// Align menu .hook arrow with the column cog icon
const hook = menu.querySelector('.hook');
const icon = th.querySelector('.dropdown-menu-icon');
const iconRect = icon.getBoundingClientRect();
hook.style.left = (iconRect.left - menuLeft + 1) + 'px';
} }
var svg = document.createElement("div"); var svg = document.createElement("div");