diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js index 9d76c2076f..daab0555d0 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -55,6 +55,7 @@ class FilesTableHeader extends React.Component { showStorageInfo, isArchiveFolder, isIndexing, + indexColumnSize, } = this.props; const defaultColumns = []; @@ -363,7 +364,7 @@ class FilesTableHeader extends React.Component { key: "Index", title: "#", enable: this.props.indexColumnIsEnabled, - minWidth: 70, + minWidth: indexColumnSize, resizable: false, isShort: true, }); @@ -438,10 +439,12 @@ class FilesTableHeader extends React.Component { isArchiveFolder, isIndexEditingMode, showStorageInfo, + indexColumnSize, } = this.props; if ( isArchiveFolder !== prevProps.isArchiveFolder || + indexColumnSize !== prevProps.indexColumnSize || isIndexEditingMode !== prevProps.isIndexEditingMode || isRooms !== prevProps.isRooms || isTrashFolder !== prevProps.isTrashFolder || @@ -625,6 +628,7 @@ export default inject( headerBorder, roomsFilter, setRoomsFilter, + indexColumnSize, } = filesStore; const { isRecentTab, isArchiveFolder, isTrashFolder } = treeFoldersStore; const withContent = canShare; @@ -727,6 +731,8 @@ export default inject( showStorageInfo, isArchiveFolder, isIndexEditingMode, + + indexColumnSize, }; }, )( diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js index 6395b577ac..725b0be662 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js @@ -66,6 +66,7 @@ const FilesTableRow = (props) => { isRooms, isTrashFolder, isIndexEditingMode, + isIndexing, isHighlight, hideColumns, onDragOver, @@ -76,6 +77,7 @@ const FilesTableRow = (props) => { onEditIndex, isIndexUpdated, } = props; + const { acceptBackground, background } = theme.dragAndDrop; const element = ( @@ -187,6 +189,7 @@ const FilesTableRow = (props) => { isThirdPartyFolder={item.isThirdPartyFolder} onDoubleClick={isIndexEditingMode ? () => {} : onDoubleClick} checked={checkedProps || isIndexUpdated} + isIndexing={isIndexing} isIndexUpdated={isIndexUpdated} showHotkeyBorder={showHotkeyBorder} title={ diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/IndexCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/IndexCell.js index dc71262bbe..5e90096369 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/IndexCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/IndexCell.js @@ -36,7 +36,7 @@ const IndexCell = ({ t, item, sideColor }) => { fontSize="12px" fontWeight={600} title={order} - truncate + style={{ marginRight: 0 }} > {order} diff --git a/packages/shared/components/table/TableHeader.tsx b/packages/shared/components/table/TableHeader.tsx index 7973f4fbca..6f52c2fd32 100644 --- a/packages/shared/components/table/TableHeader.tsx +++ b/packages/shared/components/table/TableHeader.tsx @@ -1208,6 +1208,9 @@ class TableHeader extends React.Component< const defaultSize = columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0; + const shortSize = + columns.find((col) => col.isShort && col.enable)?.minWidth || 0; + // TODO: Fixed columns size if something went wrong if (storageSize) { const splitStorage = storageSize.split(" "); @@ -1258,11 +1261,16 @@ class TableHeader extends React.Component< const containerWidth = +container.clientWidth; + const indexColumnDifference = shortSize + ? Number(tableContainer[0].split("px")[0]) - shortSize + : 0; + const oldWidth = tableContainer .map((column) => getSubstring(column)) .reduce((x, y) => x + y) - defaultSize - + indexColumnDifference - settingsSize; let str = ""; @@ -1518,6 +1526,9 @@ class TableHeader extends React.Component< +index === tableContainer.length - 1 || (column ? column.dataset.enable === "true" : item !== "0px"); const defaultColumnSize = column && column.dataset.defaultSize; + const shortColumSize = + column?.dataset?.shortColum && column.dataset.minWidth; + const isSettingColumn = Number(index) === tableContainer.length - 1; const isQuickButtonColumn = Number(index) === tableContainer.length - 2; @@ -1542,6 +1553,8 @@ class TableHeader extends React.Component< }px`; } else if (isSettingColumn && !isIndexEditingMode) { gridTemplateColumns.push(`${settingsSize}px`); + } else if (shortColumSize) { + gridTemplateColumns.push(`${shortColumSize}px`); } else if (item !== `${settingsSize}px` || isIndexEditingMode) { const percent = (getSubstring(item) / oldWidth) * 100;