Merge pull request #507 from ONLYOFFICE/bugfix/size-column
Bugfix/size column
This commit is contained in:
commit
947543bf3c
@ -323,6 +323,12 @@ const StyledTableRow = styled(TableRow)`
|
||||
`}
|
||||
}
|
||||
`}
|
||||
|
||||
.no-extra-space {
|
||||
p {
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledDragAndDrop = styled(DragAndDrop)`
|
||||
|
@ -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,
|
||||
},
|
||||
];
|
||||
|
@ -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));
|
||||
|
@ -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));
|
||||
|
@ -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));
|
||||
|
@ -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));
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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;
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user