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