fix: кнопки действий маршрута вровень со стрелками у строки с комментарием
Стрелки шага объединены на строку участника и его комментария и стояли по центру пары, а кнопки действий — по центру одной строки, из-за чего расходились по высоте. Ячейка действий теперь тоже накрывает комментарий. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -211,7 +211,8 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
|
||||
|
||||
// Комментарий занимает всю ширину между объединёнными колонками «Шаг» и
|
||||
// стрелок: «Согласующий» + «Должность» + те необязательные колонки, что
|
||||
// сейчас показаны. Колонку действий не захватывает — в ней своя пустая ячейка.
|
||||
// сейчас показаны. Колонку действий не захватывает — её ячейка из строки
|
||||
// участника объединена и на строку комментария (rowSpan у .matrixActions).
|
||||
const optionalColumns = [hasDepartment, hasOrganization, hasStatuses, hasDates, hasSla];
|
||||
const commentColSpan = 2 + optionalColumns.filter(Boolean).length;
|
||||
const hasActionsCol = editable || hasRemovable;
|
||||
@@ -337,8 +338,11 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
{/* Кнопки — на участника вместе с его комментарием, как номер
|
||||
шага и стрелки: иначе стрелки стоят по центру пары строк,
|
||||
а кнопки — по центру одной, и они расходятся по высоте. */}
|
||||
{hasActionsCol && (
|
||||
<td className={styles.matrixActions}>
|
||||
<td className={styles.matrixActions} rowSpan={r.comment ? 2 : 1}>
|
||||
{editable && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -379,14 +383,13 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
|
||||
</tr>
|
||||
{/* Комментарий — отдельной строкой во всю ширину под участником:
|
||||
в узкой колонке «Согласующий» текст ломался по слову на строку.
|
||||
Ячейки «Шаг» и стрелок её не повторяют — их накрывает rowSpan
|
||||
(см. block.span); колонка действий — пустая ячейка. */}
|
||||
Ячейки «Шаг», стрелок и действий её не повторяют — их накрывает
|
||||
rowSpan из строки участника. */}
|
||||
{r.comment && (
|
||||
<tr ref={registerRow(commentRowKey(rowKeys[i]))} className={commentClassNames.join(' ')}>
|
||||
<td colSpan={commentColSpan} className={styles.commentCell}>
|
||||
<ApprovalComment text={r.comment} status={r.status} />
|
||||
</td>
|
||||
{hasActionsCol && <td />}
|
||||
</tr>
|
||||
)}
|
||||
</React.Fragment>
|
||||
|
||||
@@ -159,9 +159,10 @@
|
||||
|
||||
// Строка участника, под которой идёт его комментарий (см. ApprovalComment):
|
||||
// разделитель между ними убираем, иначе комментарий читается как отдельная
|
||||
// запись маршрута. Ячейки «Шаг» и стрелок не трогаем — они объединены на весь
|
||||
// шаг (rowSpan), и их нижняя граница — это граница всего шага.
|
||||
.rowWithComment > td:not(.matrixStepCol):not(.matrixMoveCol) {
|
||||
// запись маршрута. Объединённые ячейки (rowSpan) не трогаем: «Шаг» и стрелки
|
||||
// накрывают весь шаг, действия — участника с комментарием, и их нижняя
|
||||
// граница — это граница всей записи.
|
||||
.rowWithComment > td:not(.matrixStepCol):not(.matrixMoveCol):not(.matrixActions) {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
@@ -388,11 +389,6 @@
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
// Пустая ячейка под колонкой действий на телефоне дала бы лишний отступ.
|
||||
.commentRow > td:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.matrixActions,
|
||||
.matrixMoveCol {
|
||||
justify-content: flex-start;
|
||||
|
||||
Reference in New Issue
Block a user