IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Bugfix/size column
This commit is contained in:
Ilya Oleshko 2024-06-26 13:38:00 +03:00 committed by GitHub
commit 947543bf3c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 148 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
View File

@ -323,6 +323,12 @@ const StyledTableRow = styled(TableRow)`
`}
}
`}
.no-extra-space {
p {
margin-right: 0px !important;
}
}
`;
const StyledDragAndDrop = styled(DragAndDrop)`

8
packages/client/src/pages/Home/Section/Body/TableView/TableHeader.js
View File

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

31
packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js
View File

@ -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));

19
packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js
View File

@ -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));

27
packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js
View File

@ -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));

31
packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js
View File

@ -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));

27
packages/shared/components/table/TableHeader.tsx
View File

@ -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);
}

16
packages/shared/utils/index.ts
View File

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