diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js index 1c70c17312..02b8418d14 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js @@ -323,6 +323,12 @@ const StyledTableRow = styled(TableRow)` `} } `} + + .no-extra-space { + p { + margin-right: 0px !important; + } + } `; const StyledDragAndDrop = styled(DragAndDrop)` 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 5123b02d70..0b64e54096 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js @@ -111,7 +111,7 @@ class FilesTableHeader extends React.Component { key: "QuickButtons", title: "", enable: this.props.roomColumnQuickButtonsIsEnabled, - defaultSize: 75, + defaultSize: 52, resizable: false, }, ]; @@ -201,7 +201,7 @@ class FilesTableHeader extends React.Component { key: "QuickButtons", title: "", enable: this.props.quickButtonsColumnIsEnabled, - defaultSize: 75, + defaultSize: 52, resizable: false, }, ]; @@ -280,7 +280,7 @@ class FilesTableHeader extends React.Component { key: "QuickButtons", title: "", enable: this.props.quickButtonsColumnIsEnabled, - defaultSize: 75, + defaultSize: 52, resizable: false, }, ]; @@ -350,7 +350,7 @@ class FilesTableHeader extends React.Component { key: "QuickButtons", title: "", enable: this.props.quickButtonsColumnIsEnabled, - defaultSize: 75, + defaultSize: 52, resizable: false, }, ]; diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js index 90323eaf1b..b8af6e6856 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js @@ -32,7 +32,7 @@ import TypeCell from "./TypeCell"; import AuthorCell from "./AuthorCell"; import DateCell from "./DateCell"; import SizeCell from "./SizeCell"; -import { classNames } from "@docspace/shared/utils"; +import { classNames, getLastColumn } from "@docspace/shared/utils"; import { StyledBadgesContainer, StyledQuickButtonsContainer, @@ -59,8 +59,11 @@ const RecentRowDataComponent = (props) => { showHotkeyBorder, badgesComponent, quickButtonsComponent, + tableStorageName, } = props; + const lastColumn = getLastColumn(tableStorageName); + return ( <> { !authorColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Author" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Created" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "LastOpened" ? "no-extra-space" : "", + )} > { !modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Modified" ? "no-extra-space" : "", + )} > { !sizeColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Size" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Type" ? "no-extra-space" : "", + )} > { typeColumnIsEnabled, quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, + tableStorageName, } = tableStore; return { @@ -229,5 +257,6 @@ export default inject(({ tableStore }) => { typeColumnIsEnabled, quickButtonsColumnIsEnabled, lastOpenedColumnIsEnabled, + tableStorageName, }; })(observer(RecentRowDataComponent)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js index 6d3cb0322f..bcc5ffc22c 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js @@ -32,7 +32,7 @@ import TypeCell from "./TypeCell"; import TagsCell from "./TagsCell"; import AuthorCell from "./AuthorCell"; import DateCell from "./DateCell"; -import { classNames } from "@docspace/shared/utils"; +import { classNames, getLastColumn } from "@docspace/shared/utils"; import { StyledBadgesContainer } from "../StyledTable"; import { StyledQuickButtonsContainer } from "../StyledTable"; import SpaceQuota from "SRC_DIR/components/SpaceQuota"; @@ -59,8 +59,11 @@ const RoomsRowDataComponent = (props) => { badgesComponent, quickButtonsComponent, item, + tableStorageName, } = props; + const lastColumn = getLastColumn(tableStorageName); + return ( <> { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Type" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Owner" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Activity" ? "no-extra-space" : "", + )} > { roomColumnTagsIsEnabled, roomColumnActivityIsEnabled, roomQuotaColumnIsEnable, + tableStorageName, } = tableStore; const { showStorageInfo } = currentQuotaStore; @@ -211,5 +227,6 @@ export default inject(({ currentQuotaStore, tableStore }) => { roomColumnTagsIsEnabled, roomColumnActivityIsEnabled, showStorageInfo, + tableStorageName, }; })(observer(RoomsRowDataComponent)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js index 8ccdd392fc..65d6583162 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js @@ -32,7 +32,7 @@ import TypeCell from "./TypeCell"; import AuthorCell from "./AuthorCell"; import DateCell from "./DateCell"; import SizeCell from "./SizeCell"; -import { classNames } from "@docspace/shared/utils"; +import { classNames, getLastColumn } from "@docspace/shared/utils"; import { StyledBadgesContainer, StyledQuickButtonsContainer, @@ -58,8 +58,11 @@ const RowDataComponent = (props) => { showHotkeyBorder, badgesComponent, quickButtonsComponent, + tableStorageName, } = props; + const lastColumn = getLastColumn(tableStorageName); + return ( <> { !authorColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Author" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Created" ? "no-extra-space" : "", + )} > { !modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Modified" ? "no-extra-space" : "", + )} > { !sizeColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Size" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Type" ? "no-extra-space" : "", + )} > { sizeColumnIsEnabled, typeColumnIsEnabled, quickButtonsColumnIsEnabled, + tableStorageName, } = tableStore; return { @@ -208,5 +232,6 @@ export default inject(({ tableStore }) => { sizeColumnIsEnabled, typeColumnIsEnabled, quickButtonsColumnIsEnabled, + tableStorageName, }; })(observer(RowDataComponent)); diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js index 8dd85c15a4..61e66530a5 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js @@ -32,7 +32,7 @@ import TypeCell from "./TypeCell"; import AuthorCell from "./AuthorCell"; import DateCell from "./DateCell"; import SizeCell from "./SizeCell"; -import { classNames } from "@docspace/shared/utils"; +import { classNames, getLastColumn } from "@docspace/shared/utils"; import { StyledBadgesContainer, StyledQuickButtonsContainer, @@ -61,8 +61,11 @@ const TrashRowDataComponent = (props) => { showHotkeyBorder, badgesComponent, quickButtonsComponent, + tableStorageName, } = props; + const lastColumn = getLastColumn(tableStorageName); + return ( <> { !roomColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Room" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "AuthorTrash" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "CreatedTrash" ? "no-extra-space" : "", + )} > { !erasureColumnIsEnabled ? { background: "none" } : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "Erasure" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "SizeTrash" ? "no-extra-space" : "", + )} > { : dragStyles.style } {...selectionProp} + className={classNames( + selectionProp?.className, + lastColumn === "TypeTrash" ? "no-extra-space" : "", + )} > { sizeTrashColumnIsEnabled, typeTrashColumnIsEnabled, quickButtonsColumnIsEnabled, + tableStorageName, } = tableStore; return { @@ -233,5 +261,6 @@ export default inject(({ tableStore }) => { sizeTrashColumnIsEnabled, typeTrashColumnIsEnabled, quickButtonsColumnIsEnabled, + tableStorageName, }; })(observer(TrashRowDataComponent)); diff --git a/packages/shared/components/table/TableHeader.tsx b/packages/shared/components/table/TableHeader.tsx index fd0227b56e..26d896fcf8 100644 --- a/packages/shared/components/table/TableHeader.tsx +++ b/packages/shared/components/table/TableHeader.tsx @@ -44,6 +44,7 @@ const defaultMinColumnSize = 110; const settingsSize = 24; const minSizeFirstColumn = 210; +const handleOffset = 8; class TableHeader extends React.Component< TableHeaderProps, @@ -113,7 +114,7 @@ class TableHeader extends React.Component< ? leftColumn.dataset.minWidth : defaultMinColumnSize; - if (leftColumn.clientWidth <= +minSize) { + if (leftColumn.getBoundingClientRect().width <= +minSize) { if (colIndex < 0) return false; this.moveToLeft(widths, newWidth, colIndex - 1); return; @@ -159,11 +160,17 @@ class TableHeader extends React.Component< const defaultColumn = document.getElementById(`column_${colIndex}`); if (!defaultColumn || defaultColumn.dataset.defaultSize) return; - const handleOffset = 8; - if (column2Width + offset - handleOffset >= defaultMinColumnSize) { widths[+columnIndex] = `${newWidth + handleOffset}px`; widths[colIndex] = `${column2Width + offset - handleOffset}px`; + } else if (column2Width !== defaultMinColumnSize) { + const width = + getSubstring(widths[+columnIndex]) + + getSubstring(widths[+colIndex]) - + defaultMinColumnSize; + + widths[+columnIndex] = `${width}px`; + widths[colIndex] = `${defaultMinColumnSize}px`; } else { if (colIndex === columns.length) return false; this.moveToRight(widths, newWidth, colIndex + 1); @@ -237,7 +244,7 @@ class TableHeader extends React.Component< if (!column) return; const columnSize = column.getBoundingClientRect(); - const newWidth = isRtl + let newWidth = isRtl ? columnSize.right - e.clientX : e.clientX - columnSize.left; @@ -248,12 +255,14 @@ class TableHeader extends React.Component< ? column.dataset.minWidth : defaultMinColumnSize; - if (newWidth <= +minSize) { - const columnChanged = this.moveToLeft(widths, newWidth); + if (newWidth <= +minSize - handleOffset) { + const currentWidth = getSubstring(widths[+columnIndex]); - if (!columnChanged) { - widths[+columnIndex] = widths[+columnIndex]; - } + // Move left + if (currentWidth !== +minSize) { + newWidth = +minSize - handleOffset; + this.moveToRight(widths, newWidth); + } else this.moveToLeft(widths, newWidth); } else { this.moveToRight(widths, newWidth); } diff --git a/packages/shared/utils/index.ts b/packages/shared/utils/index.ts index 7c41ffc1a8..cab623a058 100644 --- a/packages/shared/utils/index.ts +++ b/packages/shared/utils/index.ts @@ -164,3 +164,19 @@ export const getTitleWithoutExtension = ( ? titleWithoutExst : item.title; }; + +export const getLastColumn = (tableStorageName: string) => { + if (!tableStorageName) return; + + const storageColumns = localStorage.getItem(tableStorageName); + if (!storageColumns) return; + + const columns = storageColumns.split(","); + const filterColumns = columns.filter( + (column) => column !== "false" && column !== "QuickButtons", + ); + + if (filterColumns.length > 1) return filterColumns[filterColumns.length - 1]; + + return null; +};