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)`
|
const StyledDragAndDrop = styled(DragAndDrop)`
|
||||||
|
@ -111,7 +111,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
key: "QuickButtons",
|
key: "QuickButtons",
|
||||||
title: "",
|
title: "",
|
||||||
enable: this.props.roomColumnQuickButtonsIsEnabled,
|
enable: this.props.roomColumnQuickButtonsIsEnabled,
|
||||||
defaultSize: 75,
|
defaultSize: 52,
|
||||||
resizable: false,
|
resizable: false,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
@ -201,7 +201,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
key: "QuickButtons",
|
key: "QuickButtons",
|
||||||
title: "",
|
title: "",
|
||||||
enable: this.props.quickButtonsColumnIsEnabled,
|
enable: this.props.quickButtonsColumnIsEnabled,
|
||||||
defaultSize: 75,
|
defaultSize: 52,
|
||||||
resizable: false,
|
resizable: false,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
@ -280,7 +280,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
key: "QuickButtons",
|
key: "QuickButtons",
|
||||||
title: "",
|
title: "",
|
||||||
enable: this.props.quickButtonsColumnIsEnabled,
|
enable: this.props.quickButtonsColumnIsEnabled,
|
||||||
defaultSize: 75,
|
defaultSize: 52,
|
||||||
resizable: false,
|
resizable: false,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
@ -350,7 +350,7 @@ class FilesTableHeader extends React.Component {
|
|||||||
key: "QuickButtons",
|
key: "QuickButtons",
|
||||||
title: "",
|
title: "",
|
||||||
enable: this.props.quickButtonsColumnIsEnabled,
|
enable: this.props.quickButtonsColumnIsEnabled,
|
||||||
defaultSize: 75,
|
defaultSize: 52,
|
||||||
resizable: false,
|
resizable: false,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
@ -32,7 +32,7 @@ import TypeCell from "./TypeCell";
|
|||||||
import AuthorCell from "./AuthorCell";
|
import AuthorCell from "./AuthorCell";
|
||||||
import DateCell from "./DateCell";
|
import DateCell from "./DateCell";
|
||||||
import SizeCell from "./SizeCell";
|
import SizeCell from "./SizeCell";
|
||||||
import { classNames } from "@docspace/shared/utils";
|
import { classNames, getLastColumn } from "@docspace/shared/utils";
|
||||||
import {
|
import {
|
||||||
StyledBadgesContainer,
|
StyledBadgesContainer,
|
||||||
StyledQuickButtonsContainer,
|
StyledQuickButtonsContainer,
|
||||||
@ -59,8 +59,11 @@ const RecentRowDataComponent = (props) => {
|
|||||||
showHotkeyBorder,
|
showHotkeyBorder,
|
||||||
badgesComponent,
|
badgesComponent,
|
||||||
quickButtonsComponent,
|
quickButtonsComponent,
|
||||||
|
tableStorageName,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
const lastColumn = getLastColumn(tableStorageName);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<TableCell
|
<TableCell
|
||||||
@ -90,6 +93,10 @@ const RecentRowDataComponent = (props) => {
|
|||||||
!authorColumnIsEnabled ? { background: "none" } : dragStyles.style
|
!authorColumnIsEnabled ? { background: "none" } : dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Author" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<AuthorCell
|
<AuthorCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -108,6 +115,10 @@ const RecentRowDataComponent = (props) => {
|
|||||||
: dragStyles.style
|
: dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Created" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<DateCell
|
<DateCell
|
||||||
create
|
create
|
||||||
@ -127,6 +138,10 @@ const RecentRowDataComponent = (props) => {
|
|||||||
: dragStyles.style
|
: dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "LastOpened" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<DateCell
|
<DateCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -143,6 +158,10 @@ const RecentRowDataComponent = (props) => {
|
|||||||
!modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style
|
!modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Modified" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<DateCell
|
<DateCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -159,6 +178,10 @@ const RecentRowDataComponent = (props) => {
|
|||||||
!sizeColumnIsEnabled ? { background: "none" } : dragStyles.style
|
!sizeColumnIsEnabled ? { background: "none" } : dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Size" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<SizeCell
|
<SizeCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -177,6 +200,10 @@ const RecentRowDataComponent = (props) => {
|
|||||||
: dragStyles.style
|
: dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Type" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<TypeCell
|
<TypeCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -219,6 +246,7 @@ export default inject(({ tableStore }) => {
|
|||||||
typeColumnIsEnabled,
|
typeColumnIsEnabled,
|
||||||
quickButtonsColumnIsEnabled,
|
quickButtonsColumnIsEnabled,
|
||||||
lastOpenedColumnIsEnabled,
|
lastOpenedColumnIsEnabled,
|
||||||
|
tableStorageName,
|
||||||
} = tableStore;
|
} = tableStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -229,5 +257,6 @@ export default inject(({ tableStore }) => {
|
|||||||
typeColumnIsEnabled,
|
typeColumnIsEnabled,
|
||||||
quickButtonsColumnIsEnabled,
|
quickButtonsColumnIsEnabled,
|
||||||
lastOpenedColumnIsEnabled,
|
lastOpenedColumnIsEnabled,
|
||||||
|
tableStorageName,
|
||||||
};
|
};
|
||||||
})(observer(RecentRowDataComponent));
|
})(observer(RecentRowDataComponent));
|
||||||
|
@ -32,7 +32,7 @@ import TypeCell from "./TypeCell";
|
|||||||
import TagsCell from "./TagsCell";
|
import TagsCell from "./TagsCell";
|
||||||
import AuthorCell from "./AuthorCell";
|
import AuthorCell from "./AuthorCell";
|
||||||
import DateCell from "./DateCell";
|
import DateCell from "./DateCell";
|
||||||
import { classNames } from "@docspace/shared/utils";
|
import { classNames, getLastColumn } from "@docspace/shared/utils";
|
||||||
import { StyledBadgesContainer } from "../StyledTable";
|
import { StyledBadgesContainer } from "../StyledTable";
|
||||||
import { StyledQuickButtonsContainer } from "../StyledTable";
|
import { StyledQuickButtonsContainer } from "../StyledTable";
|
||||||
import SpaceQuota from "SRC_DIR/components/SpaceQuota";
|
import SpaceQuota from "SRC_DIR/components/SpaceQuota";
|
||||||
@ -59,8 +59,11 @@ const RoomsRowDataComponent = (props) => {
|
|||||||
badgesComponent,
|
badgesComponent,
|
||||||
quickButtonsComponent,
|
quickButtonsComponent,
|
||||||
item,
|
item,
|
||||||
|
tableStorageName,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
const lastColumn = getLastColumn(tableStorageName);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<TableCell
|
<TableCell
|
||||||
@ -92,6 +95,10 @@ const RoomsRowDataComponent = (props) => {
|
|||||||
: dragStyles.style
|
: dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Type" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<TypeCell
|
<TypeCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -128,6 +135,10 @@ const RoomsRowDataComponent = (props) => {
|
|||||||
: dragStyles.style
|
: dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Owner" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<AuthorCell
|
<AuthorCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -146,6 +157,10 @@ const RoomsRowDataComponent = (props) => {
|
|||||||
: dragStyles.style
|
: dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Activity" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<DateCell
|
<DateCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -200,6 +215,7 @@ export default inject(({ currentQuotaStore, tableStore }) => {
|
|||||||
roomColumnTagsIsEnabled,
|
roomColumnTagsIsEnabled,
|
||||||
roomColumnActivityIsEnabled,
|
roomColumnActivityIsEnabled,
|
||||||
roomQuotaColumnIsEnable,
|
roomQuotaColumnIsEnable,
|
||||||
|
tableStorageName,
|
||||||
} = tableStore;
|
} = tableStore;
|
||||||
|
|
||||||
const { showStorageInfo } = currentQuotaStore;
|
const { showStorageInfo } = currentQuotaStore;
|
||||||
@ -211,5 +227,6 @@ export default inject(({ currentQuotaStore, tableStore }) => {
|
|||||||
roomColumnTagsIsEnabled,
|
roomColumnTagsIsEnabled,
|
||||||
roomColumnActivityIsEnabled,
|
roomColumnActivityIsEnabled,
|
||||||
showStorageInfo,
|
showStorageInfo,
|
||||||
|
tableStorageName,
|
||||||
};
|
};
|
||||||
})(observer(RoomsRowDataComponent));
|
})(observer(RoomsRowDataComponent));
|
||||||
|
@ -32,7 +32,7 @@ import TypeCell from "./TypeCell";
|
|||||||
import AuthorCell from "./AuthorCell";
|
import AuthorCell from "./AuthorCell";
|
||||||
import DateCell from "./DateCell";
|
import DateCell from "./DateCell";
|
||||||
import SizeCell from "./SizeCell";
|
import SizeCell from "./SizeCell";
|
||||||
import { classNames } from "@docspace/shared/utils";
|
import { classNames, getLastColumn } from "@docspace/shared/utils";
|
||||||
import {
|
import {
|
||||||
StyledBadgesContainer,
|
StyledBadgesContainer,
|
||||||
StyledQuickButtonsContainer,
|
StyledQuickButtonsContainer,
|
||||||
@ -58,8 +58,11 @@ const RowDataComponent = (props) => {
|
|||||||
showHotkeyBorder,
|
showHotkeyBorder,
|
||||||
badgesComponent,
|
badgesComponent,
|
||||||
quickButtonsComponent,
|
quickButtonsComponent,
|
||||||
|
tableStorageName,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
const lastColumn = getLastColumn(tableStorageName);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<TableCell
|
<TableCell
|
||||||
@ -89,6 +92,10 @@ const RowDataComponent = (props) => {
|
|||||||
!authorColumnIsEnabled ? { background: "none" } : dragStyles.style
|
!authorColumnIsEnabled ? { background: "none" } : dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Author" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<AuthorCell
|
<AuthorCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -107,6 +114,10 @@ const RowDataComponent = (props) => {
|
|||||||
: dragStyles.style
|
: dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Created" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<DateCell
|
<DateCell
|
||||||
create
|
create
|
||||||
@ -124,6 +135,10 @@ const RowDataComponent = (props) => {
|
|||||||
!modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style
|
!modifiedColumnIsEnabled ? { background: "none" } : dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Modified" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<DateCell
|
<DateCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -140,6 +155,10 @@ const RowDataComponent = (props) => {
|
|||||||
!sizeColumnIsEnabled ? { background: "none" } : dragStyles.style
|
!sizeColumnIsEnabled ? { background: "none" } : dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Size" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<SizeCell
|
<SizeCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -158,6 +177,10 @@ const RowDataComponent = (props) => {
|
|||||||
: dragStyles.style
|
: dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Type" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<TypeCell
|
<TypeCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -199,6 +222,7 @@ export default inject(({ tableStore }) => {
|
|||||||
sizeColumnIsEnabled,
|
sizeColumnIsEnabled,
|
||||||
typeColumnIsEnabled,
|
typeColumnIsEnabled,
|
||||||
quickButtonsColumnIsEnabled,
|
quickButtonsColumnIsEnabled,
|
||||||
|
tableStorageName,
|
||||||
} = tableStore;
|
} = tableStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -208,5 +232,6 @@ export default inject(({ tableStore }) => {
|
|||||||
sizeColumnIsEnabled,
|
sizeColumnIsEnabled,
|
||||||
typeColumnIsEnabled,
|
typeColumnIsEnabled,
|
||||||
quickButtonsColumnIsEnabled,
|
quickButtonsColumnIsEnabled,
|
||||||
|
tableStorageName,
|
||||||
};
|
};
|
||||||
})(observer(RowDataComponent));
|
})(observer(RowDataComponent));
|
||||||
|
@ -32,7 +32,7 @@ import TypeCell from "./TypeCell";
|
|||||||
import AuthorCell from "./AuthorCell";
|
import AuthorCell from "./AuthorCell";
|
||||||
import DateCell from "./DateCell";
|
import DateCell from "./DateCell";
|
||||||
import SizeCell from "./SizeCell";
|
import SizeCell from "./SizeCell";
|
||||||
import { classNames } from "@docspace/shared/utils";
|
import { classNames, getLastColumn } from "@docspace/shared/utils";
|
||||||
import {
|
import {
|
||||||
StyledBadgesContainer,
|
StyledBadgesContainer,
|
||||||
StyledQuickButtonsContainer,
|
StyledQuickButtonsContainer,
|
||||||
@ -61,8 +61,11 @@ const TrashRowDataComponent = (props) => {
|
|||||||
showHotkeyBorder,
|
showHotkeyBorder,
|
||||||
badgesComponent,
|
badgesComponent,
|
||||||
quickButtonsComponent,
|
quickButtonsComponent,
|
||||||
|
tableStorageName,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
const lastColumn = getLastColumn(tableStorageName);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<TableCell
|
<TableCell
|
||||||
@ -92,6 +95,10 @@ const TrashRowDataComponent = (props) => {
|
|||||||
!roomColumnIsEnabled ? { background: "none" } : dragStyles.style
|
!roomColumnIsEnabled ? { background: "none" } : dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Room" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<RoomCell
|
<RoomCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -110,6 +117,10 @@ const TrashRowDataComponent = (props) => {
|
|||||||
: dragStyles.style
|
: dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "AuthorTrash" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<AuthorCell
|
<AuthorCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -128,6 +139,10 @@ const TrashRowDataComponent = (props) => {
|
|||||||
: dragStyles.style
|
: dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "CreatedTrash" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<DateCell
|
<DateCell
|
||||||
create
|
create
|
||||||
@ -145,6 +160,10 @@ const TrashRowDataComponent = (props) => {
|
|||||||
!erasureColumnIsEnabled ? { background: "none" } : dragStyles.style
|
!erasureColumnIsEnabled ? { background: "none" } : dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "Erasure" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<ErasureCell
|
<ErasureCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -163,6 +182,10 @@ const TrashRowDataComponent = (props) => {
|
|||||||
: dragStyles.style
|
: dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "SizeTrash" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<SizeCell
|
<SizeCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -181,6 +204,10 @@ const TrashRowDataComponent = (props) => {
|
|||||||
: dragStyles.style
|
: dragStyles.style
|
||||||
}
|
}
|
||||||
{...selectionProp}
|
{...selectionProp}
|
||||||
|
className={classNames(
|
||||||
|
selectionProp?.className,
|
||||||
|
lastColumn === "TypeTrash" ? "no-extra-space" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<TypeCell
|
<TypeCell
|
||||||
sideColor={theme.filesSection.tableView.row.sideColor}
|
sideColor={theme.filesSection.tableView.row.sideColor}
|
||||||
@ -223,6 +250,7 @@ export default inject(({ tableStore }) => {
|
|||||||
sizeTrashColumnIsEnabled,
|
sizeTrashColumnIsEnabled,
|
||||||
typeTrashColumnIsEnabled,
|
typeTrashColumnIsEnabled,
|
||||||
quickButtonsColumnIsEnabled,
|
quickButtonsColumnIsEnabled,
|
||||||
|
tableStorageName,
|
||||||
} = tableStore;
|
} = tableStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -233,5 +261,6 @@ export default inject(({ tableStore }) => {
|
|||||||
sizeTrashColumnIsEnabled,
|
sizeTrashColumnIsEnabled,
|
||||||
typeTrashColumnIsEnabled,
|
typeTrashColumnIsEnabled,
|
||||||
quickButtonsColumnIsEnabled,
|
quickButtonsColumnIsEnabled,
|
||||||
|
tableStorageName,
|
||||||
};
|
};
|
||||||
})(observer(TrashRowDataComponent));
|
})(observer(TrashRowDataComponent));
|
||||||
|
@ -44,6 +44,7 @@ const defaultMinColumnSize = 110;
|
|||||||
const settingsSize = 24;
|
const settingsSize = 24;
|
||||||
|
|
||||||
const minSizeFirstColumn = 210;
|
const minSizeFirstColumn = 210;
|
||||||
|
const handleOffset = 8;
|
||||||
|
|
||||||
class TableHeader extends React.Component<
|
class TableHeader extends React.Component<
|
||||||
TableHeaderProps,
|
TableHeaderProps,
|
||||||
@ -113,7 +114,7 @@ class TableHeader extends React.Component<
|
|||||||
? leftColumn.dataset.minWidth
|
? leftColumn.dataset.minWidth
|
||||||
: defaultMinColumnSize;
|
: defaultMinColumnSize;
|
||||||
|
|
||||||
if (leftColumn.clientWidth <= +minSize) {
|
if (leftColumn.getBoundingClientRect().width <= +minSize) {
|
||||||
if (colIndex < 0) return false;
|
if (colIndex < 0) return false;
|
||||||
this.moveToLeft(widths, newWidth, colIndex - 1);
|
this.moveToLeft(widths, newWidth, colIndex - 1);
|
||||||
return;
|
return;
|
||||||
@ -159,11 +160,17 @@ class TableHeader extends React.Component<
|
|||||||
const defaultColumn = document.getElementById(`column_${colIndex}`);
|
const defaultColumn = document.getElementById(`column_${colIndex}`);
|
||||||
if (!defaultColumn || defaultColumn.dataset.defaultSize) return;
|
if (!defaultColumn || defaultColumn.dataset.defaultSize) return;
|
||||||
|
|
||||||
const handleOffset = 8;
|
|
||||||
|
|
||||||
if (column2Width + offset - handleOffset >= defaultMinColumnSize) {
|
if (column2Width + offset - handleOffset >= defaultMinColumnSize) {
|
||||||
widths[+columnIndex] = `${newWidth + handleOffset}px`;
|
widths[+columnIndex] = `${newWidth + handleOffset}px`;
|
||||||
widths[colIndex] = `${column2Width + offset - 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 {
|
} else {
|
||||||
if (colIndex === columns.length) return false;
|
if (colIndex === columns.length) return false;
|
||||||
this.moveToRight(widths, newWidth, colIndex + 1);
|
this.moveToRight(widths, newWidth, colIndex + 1);
|
||||||
@ -237,7 +244,7 @@ class TableHeader extends React.Component<
|
|||||||
if (!column) return;
|
if (!column) return;
|
||||||
|
|
||||||
const columnSize = column.getBoundingClientRect();
|
const columnSize = column.getBoundingClientRect();
|
||||||
const newWidth = isRtl
|
let newWidth = isRtl
|
||||||
? columnSize.right - e.clientX
|
? columnSize.right - e.clientX
|
||||||
: e.clientX - columnSize.left;
|
: e.clientX - columnSize.left;
|
||||||
|
|
||||||
@ -248,12 +255,14 @@ class TableHeader extends React.Component<
|
|||||||
? column.dataset.minWidth
|
? column.dataset.minWidth
|
||||||
: defaultMinColumnSize;
|
: 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 {
|
} else {
|
||||||
this.moveToRight(widths, newWidth);
|
this.moveToRight(widths, newWidth);
|
||||||
}
|
}
|
||||||
|
@ -164,3 +164,19 @@ export const getTitleWithoutExtension = (
|
|||||||
? titleWithoutExst
|
? titleWithoutExst
|
||||||
: item.title;
|
: 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