BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-10 01:09:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(tiles): draggable column and row dividers

Browse Source 
The grid now places every tile explicitly (grid-column / grid-row, reading
order) with a 6px divider track between columns and between rows, instead of
relying on DOM order and a gap. Track sizes are fractions (grid-template fr
values) that reset to equal whenever the column or row count changes.

Dragging a divider trades size between the two tracks either side, each kept
at the minimum tile size (the pure dragTrackFractions in constants.js, always
computed from the fractions the drag started with, so it cannot drift). The
affected tiles reflow locally at most once per animation frame, with no PTY
resize; each hears exactly one fit (one PTY resize) at pointer-up, and tiles
in other tracks hear nothing. Pointer capture keeps the drag on the divider,
the body locks the resize cursor and text selection for its duration, and
closing the grid or removing a tile mid-drag tears it down, as the split's
divider does. A zoomed grid shows no dividers.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer
2026-10-06 17:59:16 +02:00
parent b4618bb853
commit 65e8271fbe
7 changed files with 518 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/styles.css
+61 -1
View File
@@ -19386,7 +19386,9 @@ html[data-session-list="sidebar"][data-sidebar="collapsed"] .btn-sidebar-toggle
flex: 1;
min-width: 0;
min-height: 0;
gap: 4px;
/* No gap: the divider tracks between columns and rows are the spacing
(tile-grid.js TILE_DIVIDER_PX; the padding is TILE_GRID_PADDING_PX). */
gap: 0;
padding: 4px;
background: var(--bg-dark);
}
@@ -19501,6 +19503,64 @@ html[data-session-list="sidebar"][data-sidebar="collapsed"] .btn-sidebar-toggle
outline: none;
}
/* Column and row dividers: their own grid tracks, dragged to trade size
between neighbours. The line only shows on hover or while dragging. */
.tile-divider {
position: relative;
z-index: 1;
touch-action: none;
}
.tile-divider--col {
cursor: col-resize;
}
.tile-divider--row {
cursor: row-resize;
}
.tile-divider::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
background: transparent;
}
.tile-divider--col::after {
width: 2px;
}
.tile-divider--row::after {
height: 2px;
}
.tile-divider:hover::after,
.tile-divider.dragging::after {
background: var(--accent, #4a9eff);
}
.tile-grid.tile-grid--zoomed .tile-divider {
display: none;
}
/* While a divider drags: the resize cursor everywhere and no text selection
(mirrors body.split-pane-resizing). */
body.tile-grid-resizing,
body.tile-grid-resizing * {
user-select: none !important;
}
body.tile-grid-resizing--col,
body.tile-grid-resizing--col * {
cursor: col-resize !important;
}
body.tile-grid-resizing--row,
body.tile-grid-resizing--row * {
cursor: row-resize !important;
}
/* Zoom (tmux-style): one tile fills the grid; the others stay connected but
hidden, so they measure nothing and send no resize. */
.tile-grid.tile-grid--zoomed .tile:not(.tile--zoomed) {