Merge pull request #507 from ONLYOFFICE/bugfix/size-column

Bugfix/size column

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)`

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,
         },
       ];

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 (
     <>
       <TableCell
@@ -90,6 +93,10 @@ const RecentRowDataComponent = (props) => {
             !authorColumnIsEnabled ? { background: "none" } : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Author" ? "no-extra-space" : "",
+          )}
         >
           <AuthorCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -108,6 +115,10 @@ const RecentRowDataComponent = (props) => {
               : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Created" ? "no-extra-space" : "",
+          )}
         >
           <DateCell
             create
@@ -127,6 +138,10 @@ const RecentRowDataComponent = (props) => {
               : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "LastOpened" ? "no-extra-space" : "",
+          )}
         >
           <DateCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -143,6 +158,10 @@ const RecentRowDataComponent = (props) => {
             !modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Modified" ? "no-extra-space" : "",
+          )}
         >
           <DateCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -159,6 +178,10 @@ const RecentRowDataComponent = (props) => {
             !sizeColumnIsEnabled ? { background: "none" } : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Size" ? "no-extra-space" : "",
+          )}
         >
           <SizeCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -177,6 +200,10 @@ const RecentRowDataComponent = (props) => {
               : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Type" ? "no-extra-space" : "",
+          )}
         >
           <TypeCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -219,6 +246,7 @@ export default inject(({ tableStore }) => {
     typeColumnIsEnabled,
     quickButtonsColumnIsEnabled,
     lastOpenedColumnIsEnabled,
+    tableStorageName,
   } = tableStore;
 
   return {
@@ -229,5 +257,6 @@ export default inject(({ tableStore }) => {
     typeColumnIsEnabled,
     quickButtonsColumnIsEnabled,
     lastOpenedColumnIsEnabled,
+    tableStorageName,
   };
 })(observer(RecentRowDataComponent));

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 (
     <>
       <TableCell
@@ -92,6 +95,10 @@ const RoomsRowDataComponent = (props) => {
               : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Type" ? "no-extra-space" : "",
+          )}
         >
           <TypeCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -128,6 +135,10 @@ const RoomsRowDataComponent = (props) => {
               : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Owner" ? "no-extra-space" : "",
+          )}
         >
           <AuthorCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -146,6 +157,10 @@ const RoomsRowDataComponent = (props) => {
               : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Activity" ? "no-extra-space" : "",
+          )}
         >
           <DateCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -200,6 +215,7 @@ export default inject(({ currentQuotaStore, tableStore }) => {
     roomColumnTagsIsEnabled,
     roomColumnActivityIsEnabled,
     roomQuotaColumnIsEnable,
+    tableStorageName,
   } = tableStore;
 
   const { showStorageInfo } = currentQuotaStore;
@@ -211,5 +227,6 @@ export default inject(({ currentQuotaStore, tableStore }) => {
     roomColumnTagsIsEnabled,
     roomColumnActivityIsEnabled,
     showStorageInfo,
+    tableStorageName,
   };
 })(observer(RoomsRowDataComponent));

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 (
     <>
       <TableCell
@@ -89,6 +92,10 @@ const RowDataComponent = (props) => {
             !authorColumnIsEnabled ? { background: "none" } : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Author" ? "no-extra-space" : "",
+          )}
         >
           <AuthorCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -107,6 +114,10 @@ const RowDataComponent = (props) => {
               : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Created" ? "no-extra-space" : "",
+          )}
         >
           <DateCell
             create
@@ -124,6 +135,10 @@ const RowDataComponent = (props) => {
             !modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Modified" ? "no-extra-space" : "",
+          )}
         >
           <DateCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -140,6 +155,10 @@ const RowDataComponent = (props) => {
             !sizeColumnIsEnabled ? { background: "none" } : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Size" ? "no-extra-space" : "",
+          )}
         >
           <SizeCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -158,6 +177,10 @@ const RowDataComponent = (props) => {
               : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Type" ? "no-extra-space" : "",
+          )}
         >
           <TypeCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -199,6 +222,7 @@ export default inject(({ tableStore }) => {
     sizeColumnIsEnabled,
     typeColumnIsEnabled,
     quickButtonsColumnIsEnabled,
+    tableStorageName,
   } = tableStore;
 
   return {
@@ -208,5 +232,6 @@ export default inject(({ tableStore }) => {
     sizeColumnIsEnabled,
     typeColumnIsEnabled,
     quickButtonsColumnIsEnabled,
+    tableStorageName,
   };
 })(observer(RowDataComponent));

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 (
     <>
       <TableCell
@@ -92,6 +95,10 @@ const TrashRowDataComponent = (props) => {
             !roomColumnIsEnabled ? { background: "none" } : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Room" ? "no-extra-space" : "",
+          )}
         >
           <RoomCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -110,6 +117,10 @@ const TrashRowDataComponent = (props) => {
               : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "AuthorTrash" ? "no-extra-space" : "",
+          )}
         >
           <AuthorCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -128,6 +139,10 @@ const TrashRowDataComponent = (props) => {
               : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "CreatedTrash" ? "no-extra-space" : "",
+          )}
         >
           <DateCell
             create
@@ -145,6 +160,10 @@ const TrashRowDataComponent = (props) => {
             !erasureColumnIsEnabled ? { background: "none" } : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "Erasure" ? "no-extra-space" : "",
+          )}
         >
           <ErasureCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -163,6 +182,10 @@ const TrashRowDataComponent = (props) => {
               : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "SizeTrash" ? "no-extra-space" : "",
+          )}
         >
           <SizeCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -181,6 +204,10 @@ const TrashRowDataComponent = (props) => {
               : dragStyles.style
           }
           {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            lastColumn === "TypeTrash" ? "no-extra-space" : "",
+          )}
         >
           <TypeCell
             sideColor={theme.filesSection.tableView.row.sideColor}
@@ -223,6 +250,7 @@ export default inject(({ tableStore }) => {
     sizeTrashColumnIsEnabled,
     typeTrashColumnIsEnabled,
     quickButtonsColumnIsEnabled,
+    tableStorageName,
   } = tableStore;
 
   return {
@@ -233,5 +261,6 @@ export default inject(({ tableStore }) => {
     sizeTrashColumnIsEnabled,
     typeTrashColumnIsEnabled,
     quickButtonsColumnIsEnabled,
+    tableStorageName,
   };
 })(observer(TrashRowDataComponent));

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) {
+    if (newWidth <= +minSize - handleOffset) {
-      const columnChanged = this.moveToLeft(widths, newWidth);
+      const currentWidth = getSubstring(widths[+columnIndex]);
 
-      if (!columnChanged) {
+      // Move left
-        widths[+columnIndex] = widths[+columnIndex];
+      if (currentWidth !== +minSize) {
-      }
+        newWidth = +minSize - handleOffset;
+        this.moveToRight(widths, newWidth);
+      } else this.moveToLeft(widths, newWidth);
     } else {
       this.moveToRight(widths, newWidth);
     }

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;
+};