feat(database): column resize, context menu, SVG icons, move New Page to bottom
FlowDeck CI / test (push) Failing after 4s
FlowDeck CI / docker (push) Has been skipped

- Column resize: drag handle between headers to resize column width
- SVG outline icons per property type in header (Aa, #, ☰, 📅, ☑, 🔗, ✉, 📞)
- Header context menu on click: Show page icon toggle, AI Autofill, Filter,
  Sort (asc/desc), Group, Calculate (None/Count/Percent), Freeze, Wrap,
  Insert left/right
- Submenus for AI Autofill, Sort, Calculate with nested options
- New Page button moved below last data row (bottom of table)
- New rows inserted at end of table
This commit is contained in:
2026-07-22 16:02:31 -04:00
parent ea81e85848
commit 461492eede
3 changed files with 417 additions and 158 deletions
+88
View File
@@ -3858,6 +3858,94 @@ button.breadcrumb-current { max-width: 260px; }
}
.db-btn-create:hover { opacity: 0.9; }
/* ── Column Resize Handle ── */
.db-col-resize-handle {
position: absolute;
top: 0; right: 0;
width: 5px; height: 100%;
cursor: col-resize;
z-index: 2;
transition: background 0.1s;
}
.db-col-resize-handle:hover,
.db-col-resize-handle:active {
background: var(--accent, #2383E2);
}
/* ── Column Header Context Menu ── */
.db-col-menu {
position: fixed;
min-width: 240px;
max-width: 320px;
background: var(--bg-modal);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.14);
z-index: 800;
padding: 4px 0;
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-primary);
}
.db-col-menu-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
font-weight: 600;
}
.db-col-menu-icon { display: flex; align-items: center; color: var(--text-dim); }
.db-col-menu-name { flex: 1; }
.db-col-menu-info { font-size: 11px; color: var(--text-dim); }
.db-col-menu-sep {
height: 1px;
background: var(--border);
margin: 4px 0;
}
.db-col-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
cursor: pointer;
transition: background 0.1s;
position: relative;
}
.db-col-menu-item:hover { background: var(--bg-hover); }
.db-col-menu-item.has-sub { justify-content: space-between; }
.db-col-menu-toggle { font-size: 11px; font-weight: 600; }
.db-col-menu-toggle.on { color: var(--accent, #2383E2); }
.db-col-menu-toggle.off { color: var(--text-dim); }
.db-col-menu-hint { font-size: 11px; color: var(--text-dim); margin-left: auto; margin-right: 4px; }
.db-col-menu-arrow { font-size: 14px; color: var(--text-dim); }
.db-col-menu-tag {
font-size: 10px;
background: var(--accent, #2383E2);
color: white;
padding: 1px 6px;
border-radius: 8px;
margin-left: auto;
}
.db-col-menu-sub {
border-left: 1px solid var(--border);
margin-left: 0;
}
.db-col-menu-sub .sub-item { padding-left: 28px; }
.db-col-menu-sub .sub-item.checked { font-weight: 600; }
.db-col-menu-subnote {
padding: 4px 12px 4px 28px;
font-size: 11px;
color: var(--text-dim);
line-height: 1.4;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.database-table-container { padding: 0 16px; }