refactor(labs): переработка панели управления Планиметрии

Было: 13 секций подряд (включая дублирующийся заголовок 'Построения'), 35 кнопок одним сплошным длинным списком, ширина 210px, шрифт .73rem — приходилось много скроллить, инструменты сложно находить.

Стало:
- Ширина 210px → 260px
- Sticky quick-bar сверху с 4 самыми частыми: Выбор / Точка / Отрезок / Круг (фиолетовая подсветка, всегда видна)
- Все остальные инструменты — в 7 collapsible-секциях <details>:
  - Линии (Прямая, Луч)
  - Фигуры (Треугольник, Четырёхугольник, Многоугольник, Параллелограмм, n-угольник + control)
  - Построения (Середина, Пересечение, ⊥ биссектриса, ∠ биссектриса, ∥ прямая, ⊥ прямая, Основание, Касательные, Диагонали, Описанная, Вписанная) — теперь без дублирующегося заголовка
  - Треугольник (Высота, Медиана, Центроид, Ортоцентр, Средняя линия, Фалес)
  - Преобразования (Симметрия, Перенос, Подобие + k-control)
  - Измерения и ГМТ (Длина, Угол, Площадь, ГМТ, Т. на отрезке, Т. на круге)
  - Метки (Штрихи, Дуги, Параллельность)
- Шрифт .73rem → .78rem
- Параметры/Объектов/Очистить/Задачник остались внизу без сворачивания
This commit is contained in:
Maxim Dolgolyov
2026-05-26 18:55:49 +03:00
parent 970276915c
commit 1528d4e46e
2 changed files with 285 additions and 207 deletions
+80
View File
@@ -1945,6 +1945,86 @@ canvas[data-draggable]:active { cursor: grabbing; }
.ptbl-reaction-eq { font-size: .78rem; font-weight: 600; font-family: 'Courier New', monospace; }
.ptbl-reaction-note { font-size: .68rem; color: rgba(255,255,255,0.3); font-style: italic; margin-top: 4px; }
/* ═══════════════════════════════════════════════════════════
GEOMETRY PANEL — modern layout (collapsible)
═══════════════════════════════════════════════════════════ */
.geo-panel-modern {
width: 260px !important;
padding: 10px 10px !important;
gap: 6px !important;
}
.geo-panel-modern .geo-tool-btn {
font-size: .78rem;
padding: 6px 8px;
}
/* sticky quick-access bar */
.geo-quick-bar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 6px;
margin-bottom: 8px;
background: rgba(155,93,229,0.08);
border: 1px solid rgba(155,93,229,0.25);
border-radius: 10px;
position: sticky;
top: 0;
z-index: 5;
}
.geo-quick-bar .geo-tool-btn {
padding: 6px 8px;
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.12);
font-size: .78rem;
}
/* accordion */
.geo-acc {
border: 1px solid var(--border);
border-radius: 9px;
margin-bottom: 5px;
background: rgba(255,255,255,0.02);
overflow: hidden;
}
.geo-acc > summary {
cursor: pointer;
list-style: none;
padding: 7px 11px 7px 27px;
font-family: 'Unbounded', sans-serif;
font-size: .72rem;
font-weight: 700;
color: var(--text);
letter-spacing: .04em;
text-transform: uppercase;
position: relative;
user-select: none;
transition: background .15s;
}
.geo-acc > summary:hover { background: rgba(255,255,255,0.04); }
.geo-acc > summary::-webkit-details-marker { display: none; }
.geo-acc > summary::before {
content: '';
position: absolute;
left: 11px;
top: 50%;
width: 0;
height: 0;
border-left: 4.5px solid currentColor;
border-top: 3.5px solid transparent;
border-bottom: 3.5px solid transparent;
transform: translateY(-50%);
transition: transform .18s;
opacity: .6;
}
.geo-acc[open] > summary::before {
transform: translateY(-50%) rotate(90deg);
}
.geo-acc-body {
padding: 8px 10px 10px;
border-top: 1px solid var(--border);
}
/* ═══════════════════════════════════════════════════════════
DYNAMICS PANEL — modern layout
═══════════════════════════════════════════════════════════ */