diff --git a/frontend/src/public/components/UI/Avatar/Avatar.css b/frontend/src/public/components/UI/Avatar/Avatar.css index 4db8aa938..6138a8550 100644 --- a/frontend/src/public/components/UI/Avatar/Avatar.css +++ b/frontend/src/public/components/UI/Avatar/Avatar.css @@ -8,12 +8,18 @@ border-radius: 50%; align-items: center; justify-content: center; + flex-shrink: 0; &.is-group { color: var(--pneumatic-color-black72); } } +img.avatar { + max-width: none; + object-fit: cover; +} + .avatar_xxl { width: 80px; height: 80px; diff --git a/frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css b/frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css index ad9b88ca9..000f4fc70 100644 --- a/frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css +++ b/frontend/src/public/components/WorkflowCardUsers/WorkflowCardUsers.css @@ -4,14 +4,37 @@ } .card-user { - margin-left: -4px; - display: flex; + width: 20px; + height: 20px; + flex-shrink: 0; - &:first-child { - margin-left: 0; + img { + width: 100%; + height: 100%; + vertical-align: unset; + border-radius: 50%; + object-fit: cover; } } +.card-users > .card-user:not(:first-child) { + margin-left: -4px; +} + +.card-users button { + padding: 0; + width: 20px; + height: 20px; + cursor: pointer; + background: transparent; + border: none; + flex-shrink: 0; +} + +.card-users > button:not(:first-child) { + margin-left: -4px; +} + .card-users__more { margin-left: 8px; font-size: 13px; diff --git a/frontend/src/public/components/WorkflowCardUsers/utils/getPerformersAvatarsWidth.ts b/frontend/src/public/components/WorkflowCardUsers/utils/getPerformersAvatarsWidth.ts new file mode 100644 index 000000000..ace7de330 --- /dev/null +++ b/frontend/src/public/components/WorkflowCardUsers/utils/getPerformersAvatarsWidth.ts @@ -0,0 +1,10 @@ +const AVATAR_SIZE = 20; +const AVATAR_OVERLAP = 4; + +export const getPerformersAvatarsWidth = (performerCount: number): number => { + if (performerCount <= 0) { + return AVATAR_SIZE; + } + + return AVATAR_SIZE + (performerCount - 1) * (AVATAR_SIZE - AVATAR_OVERLAP); +}; diff --git a/frontend/src/public/components/Workflows/WorkflowLog/PopupCommentField/PopupCommentField.css b/frontend/src/public/components/Workflows/WorkflowLog/PopupCommentField/PopupCommentField.css index 164e7407a..bc32207a0 100644 --- a/frontend/src/public/components/Workflows/WorkflowLog/PopupCommentField/PopupCommentField.css +++ b/frontend/src/public/components/Workflows/WorkflowLog/PopupCommentField/PopupCommentField.css @@ -19,6 +19,7 @@ .comment-field__avatar-container { margin-right: 16px; align-self: flex-start; + flex-shrink: 0; @media (--mobile) { display: none; @@ -29,6 +30,7 @@ width: 40px; height: 40px; border-radius: 50%; + object-fit: cover; @media (--mobile) { width: 32px; diff --git a/frontend/src/public/components/Workflows/WorkflowLog/WorkflowLogEvents/WorkflowLogTaskComment/WorkflowLogTaskComment.css b/frontend/src/public/components/Workflows/WorkflowLog/WorkflowLogEvents/WorkflowLogTaskComment/WorkflowLogTaskComment.css index 751543ea6..fda1c4141 100644 --- a/frontend/src/public/components/Workflows/WorkflowLog/WorkflowLogEvents/WorkflowLogTaskComment/WorkflowLogTaskComment.css +++ b/frontend/src/public/components/Workflows/WorkflowLog/WorkflowLogEvents/WorkflowLogTaskComment/WorkflowLogTaskComment.css @@ -3,6 +3,7 @@ &__avatar { margin-right: 1.6rem; + flex-shrink: 0; @media (--mobile) { margin-right: 1rem; diff --git a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css index 326becebd..293fbcecf 100644 --- a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css +++ b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/PerformerColumn/PerformerColumns.css @@ -1,3 +1,4 @@ .performer-column-width { overflow: hidden; + max-width: 100%; } diff --git a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/WorkflowTableConstants.ts b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/WorkflowTableConstants.ts index 27e1b4054..63f1b8987 100644 --- a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/WorkflowTableConstants.ts +++ b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/Columns/Cells/WorkflowTableConstants.ts @@ -1,10 +1,14 @@ +import { getPerformersAvatarsWidth } from '../../../../../WorkflowCardUsers/utils/getPerformersAvatarsWidth'; + +const PERFORMER_COLUMN_DEFAULT_AVATARS = 5; + export const ETableViewFieldsWidth = { 'system-column-workflow': 376, 'system-column-templateName': 304, 'system-column-starter': 82, 'system-column-progress': 80, 'system-column-step': 304, - 'system-column-performer': 80, + 'system-column-performer': getPerformersAvatarsWidth(PERFORMER_COLUMN_DEFAULT_AVATARS), number: 80, text: 528, string: 192, @@ -23,7 +27,7 @@ export const EColumnWidthMinWidth = { 'system-column-starter': 82, 'system-column-progress': 80, 'system-column-step': 80, - 'system-column-performer': 80, + 'system-column-performer': getPerformersAvatarsWidth(PERFORMER_COLUMN_DEFAULT_AVATARS), number: 80, text: 80, string: 80, diff --git a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx index 17057e692..2727d056d 100644 --- a/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx +++ b/frontend/src/public/components/Workflows/WorkflowsTablePage/WorkflowsTable/WorkflowsTable.tsx @@ -31,6 +31,7 @@ import { useIsTableWiderThanScreen, useWorkflowsTableRef } from './WorkflowsTabl import styles from './WorkflowsTable.css'; import { EColumnWidthMinWidth, ETableViewFieldsWidth } from './Columns/Cells/WorkflowTableConstants'; +import { getPerformersAvatarsWidth } from '../../../WorkflowCardUsers/utils/getPerformersAvatarsWidth'; import { WorkflowsTableActions } from './WorkflowsTableActions'; import { useCheckDevice } from '../../../../hooks/useCheckDevice'; import { createResizeHandler } from './utils/resizeUtils'; @@ -224,6 +225,26 @@ export function WorkflowsTable({ workflowsList.items.length === 0 && String(lastLoadedTemplateIdForTable) === String(currentTemplateId)); + const maxPerformersCount = useMemo( + () => + workflowsList.items.reduce((max, workflow) => Math.max(max, workflow.selectedUsers?.length ?? 0), 0), + [workflowsList.items], + ); + + const performerColumnMinWidth = useMemo( + () => getPerformersAvatarsWidth(maxPerformersCount), + [maxPerformersCount], + ); + + const performerColumnWidth = useMemo( + () => + Math.max( + savedGlobalWidths['system-column-performer'] || ETableViewFieldsWidth['system-column-performer'], + performerColumnMinWidth, + ), + [performerColumnMinWidth, savedGlobalWidths], + ); + const columns: Column[] = useMemo(() => { if (shouldSkeletonOptionalTable) { return cashTableStructureRef.current; @@ -313,8 +334,8 @@ export function WorkflowsTable({ ), accessor: 'system-column-performer', Cell: ColumnCells.PerformerColumn, - width: savedGlobalWidths['system-column-performer'] || ETableViewFieldsWidth['system-column-performer'], - minWidth: EColumnWidthMinWidth['system-column-performer'], + width: performerColumnWidth, + minWidth: performerColumnMinWidth, columnType: 'system-column-performer', }, ] @@ -350,6 +371,8 @@ export function WorkflowsTable({ workflowStartersCounters, fieldsColumns.length, selectedFieldsSet, + performerColumnWidth, + performerColumnMinWidth, ]); const data = useMemo((): TableColumns[] => { @@ -377,21 +400,30 @@ export function WorkflowsTable({ }; useEffect(() => { - if (workflowsLoadingStatus === EWorkflowsLoadingStatus.Loaded) { - setColWidths((prev) => { - const newWidths = { ...prev }; - - columns.forEach((col) => { - const id = col.accessor as string; - if (!newWidths[id]) { - newWidths[id] = col.width as number; - } - }); - - return newWidths; - }); + if ( + workflowsLoadingStatus !== EWorkflowsLoadingStatus.Loaded && + workflowsLoadingStatus !== EWorkflowsLoadingStatus.LoadingNextPage + ) { + return; } - }, [columns.length, workflowsLoadingStatus]); + + setColWidths((prev) => { + const newWidths = { ...prev }; + + columns.forEach((col) => { + const id = col.accessor as string; + const colWidth = col.width as number; + + if (id === 'system-column-performer' && newWidths[id]) { + newWidths[id] = Math.max(newWidths[id], colWidth); + } else if (!newWidths[id]) { + newWidths[id] = colWidth; + } + }); + + return newWidths; + }); + }, [columns, workflowsLoadingStatus, performerColumnWidth]); const handleMouseDown = createResizeHandler(colWidths, setColWidths, currentUser?.id, templatesIdsFilter[0]);