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

Merge remote-tracking branch 'origin/hotfix/v2.6.1' into bugfix/Bug69117

Browse Source
This commit is contained in:
Viktor Fomin 2024-07-26 11:27:16 +03:00
commit 3e8c79c287
11 changed files with 98 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/MainTextFolderInfo.tsx
View File

@ -54,23 +54,23 @@ const HistoryMainTextFolderInfo = ({
if (!parentTitle) return null;
const isRoom = parentType === 0;
const isFromRoom = fromParentType === 0;
const isFolder = parentType === 0;
const isFromFolder = fromParentType === 0;
const destination = isRoom
const destination = isFolder
? t("FeedLocationLabel", { folderTitle: parentTitle })
: t("FeedLocationRoomLabel", { folderTitle: parentTitle });
const sourceDestination = isFromRoom
const sourceDestination = isFromFolder
? t("FeedLocationLabelFrom", { folderTitle: fromParentTitle })
: t("FeedLocationRoomLabel", { folderTitle: parentTitle });
const className = !isFromRoom ? "folder-label" : "source-folder-label";
const className = isFromFolder ? "source-folder-label" : "folder-label";
return (
<StyledHistoryBlockMessage className="message">
<span className={className}>
{!isFromRoom ? destination : sourceDestination}
{isFromFolder ? sourceDestination : destination}
</span>
</StyledHistoryBlockMessage>
);

8
packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableHeader.js
View File

@ -61,6 +61,8 @@ class GroupsTableHeader extends React.Component {
];
const columns = props.getColumns(defaultColumns);
const tableColumns = columns.map((c) => c.enable && c.key);
this.setTableColumns(tableColumns);
this.state = { columns };
}
@ -77,7 +79,7 @@ class GroupsTableHeader extends React.Component {
this.setState({ columns });
const tableColumns = columns.map((c) => c.enable && c.key);
localStorage.setItem(`${TABLE_COLUMNS}=${this.props.userId}`, tableColumns);
this.setTableColumns(tableColumns);
const event = new Event(Events.CHANGE_COLUMN);
window.dispatchEvent(event);
@ -103,6 +105,10 @@ class GroupsTableHeader extends React.Component {
navigate(`${location.pathname}?${newFilter.toUrlParams()}`);
};
setTableColumns = (tableColumns) => {
localStorage.setItem(`${TABLE_COLUMNS}=${this.props.userId}`, tableColumns);
};
render() {
const { columns } = this.state;
const {

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

@ -102,6 +102,8 @@ class InsideGroupTableHeader extends React.Component {
});
const columns = props.getColumns(defaultColumns);
const tableColumns = columns.map((c) => c.enable && c.key);
this.setTableColumns(tableColumns);
this.state = { columns };
}
@ -118,7 +120,7 @@ class InsideGroupTableHeader extends React.Component {
this.setState({ columns });
const tableColumns = columns.map((c) => c.enable && c.key);
localStorage.setItem(`${TABLE_COLUMNS}=${this.props.userId}`, tableColumns);
this.setTableColumns(tableColumns);
const event = new Event(Events.CHANGE_COLUMN);
@ -156,6 +158,10 @@ class InsideGroupTableHeader extends React.Component {
navigate(`${location.pathname}?${newFilter.toUrlParams()}`);
};
setTableColumns = (tableColumns) => {
localStorage.setItem(`${TABLE_COLUMNS}=${this.props.userId}`, tableColumns);
};
render() {
const { columns } = this.state;
const {

2
packages/client/src/store/AccountsHotkeysStore.ts
View File

@ -28,7 +28,7 @@ import { makeAutoObservable } from "mobx";
import { isMobile } from "@docspace/shared/utils";
import { checkDialogsOpen } from "@docspace/shared/utils/checkDialogsOpen";
import { TUser, TUserGroup } from "@docspace/shared/api/people/types";
import { TABLE_HEADER_HEIGHT } from "@docspace/shared/components/table/Table.constants";
import { TABLE_HEADER_HEIGHT } from "@docspace/shared/utils/device";
type AccountsType = TUser | TUserGroup;

2
packages/client/src/store/HotkeyStore.js
View File

@ -37,7 +37,7 @@ import getFilesFromEvent from "@docspace/shared/components/drag-and-drop/get-fil
import config from "PACKAGE_FILE";
import { getCategoryUrl } from "SRC_DIR/helpers/utils";
import { encryptionUploadDialog } from "../helpers/encryptionUploadDialog";
import { TABLE_HEADER_HEIGHT } from "@docspace/shared/components/table/Table.constants";
import { TABLE_HEADER_HEIGHT } from "@docspace/shared/utils/device";
class HotkeyStore {
filesStore;

2
packages/doceditor/src/utils/index.ts
View File

@ -48,6 +48,8 @@ export const getBackUrl = (
} else {
backUrl = `/rooms/shared/${folderId}/filter?folder=${folderId}`;
}
} else if (rootFolderType === FolderType.Archive) {
backUrl = `/rooms/archived/${folderId}/filter?folder=${folderId}`;
} else {
if (
rootFolderType === FolderType.SHARE ||

31
packages/shared/components/table/Table.constants.ts
View File

@ -1,31 +0,0 @@
// (c) Copyright Ascensio System SIA 2009-2024
//
// This program is a free software product.
// You can redistribute it and/or modify it under the terms
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
// any third-party rights.
//
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
//
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
//
// The interactive user interfaces in modified source and object code versions of the Program must
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
//
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
// trademark law for use of our trademarks.
//
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
export const DEFAULT_MIN_COLUMN_SIZE = 110;
export const SETTINGS_SIZE = 24;
export const CONTAINER_MARGIN = 25;
export const MIN_SIZE_FIRST_COLUMN = 210;
export const TABLE_HEADER_HEIGHT = 40;

6
packages/shared/components/table/Table.utils.ts
View File

@ -24,7 +24,10 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import { SETTINGS_SIZE } from "./Table.constants";
export const MIN_SIZE_FIRST_COLUMN = 210;
export const DEFAULT_MIN_COLUMN_SIZE = 110;
export const SETTINGS_SIZE = 24;
export const HANDLE_OFFSET = 8;
export const getSubstring = (str: string) => +str.substring(0, str.length - 2);
@ -33,7 +36,6 @@ export const checkingForUnfixedSize = (
defaultColumnSize: number,
) => {
return (
item !== "24px" && // TODO: SETTINGS_SIZE is not imported
item !== `${SETTINGS_SIZE}px` &&
item !== `${defaultColumnSize}px` &&
item !== "0px"

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

@ -38,16 +38,17 @@ import {
import { TTableColumn, TableHeaderProps } from "./Table.types";
import { TableSettings } from "./sub-components/TableSettings";
import { TableHeaderCell } from "./sub-components/TableHeaderCell";
import { checkingForUnfixedSize, getSubstring } from "./Table.utils";
import {
DEFAULT_MIN_COLUMN_SIZE,
MIN_SIZE_FIRST_COLUMN,
SETTINGS_SIZE,
HANDLE_OFFSET,
checkingForUnfixedSize,
getSubstring,
} from "./Table.utils";
import { isDesktop } from "../../utils";
const defaultMinColumnSize = 110;
const settingsSize = 24;
const minSizeFirstColumn = 210;
const handleOffset = 8;
class TableHeader extends React.Component<
class TableHeaderComponent extends React.Component<
TableHeaderProps,
{ hideColumns: boolean; columnIndex: null | number }
> {
@ -148,7 +149,7 @@ class TableHeader extends React.Component<
if (leftColumn) {
const minSize = leftColumn.dataset.minWidth
? leftColumn.dataset.minWidth
: defaultMinColumnSize;
: DEFAULT_MIN_COLUMN_SIZE;
if (leftColumn.getBoundingClientRect().width <= +minSize) {
if (colIndex < 0) return false;
@ -196,17 +197,17 @@ class TableHeader extends React.Component<
const defaultColumn = document.getElementById(`column_${colIndex}`);
if (!defaultColumn || defaultColumn.dataset.defaultSize) return;
if (column2Width + offset - handleOffset >= defaultMinColumnSize) {
widths[+columnIndex] = `${newWidth + handleOffset}px`;
widths[colIndex] = `${column2Width + offset - handleOffset}px`;
} else if (column2Width !== defaultMinColumnSize) {
if (column2Width + offset - HANDLE_OFFSET >= DEFAULT_MIN_COLUMN_SIZE) {
widths[+columnIndex] = `${newWidth + HANDLE_OFFSET}px`;
widths[colIndex] = `${column2Width + offset - HANDLE_OFFSET}px`;
} else if (column2Width !== DEFAULT_MIN_COLUMN_SIZE) {
const width =
getSubstring(widths[+columnIndex]) +
getSubstring(widths[+colIndex]) -
defaultMinColumnSize;
DEFAULT_MIN_COLUMN_SIZE;
widths[+columnIndex] = `${width}px`;
widths[colIndex] = `${defaultMinColumnSize}px`;
widths[colIndex] = `${DEFAULT_MIN_COLUMN_SIZE}px`;
} else {
if (colIndex === columns.length) return false;
this.moveToRight(widths, newWidth, colIndex + 1);
@ -240,7 +241,7 @@ class TableHeader extends React.Component<
)?.defaultSize;
const widthColumns =
containerWidth - settingsSize - (defaultSizeColumn || 0);
containerWidth - SETTINGS_SIZE - (defaultSizeColumn || 0);
const newColumnSize = defaultSize || widthColumns / allColumnsLength;
@ -258,9 +259,9 @@ class TableHeader extends React.Component<
};
if (
(indexOfMaxSize === 0 && newSizeMaxColumn < minSizeFirstColumn) ||
(indexOfMaxSize !== 0 && newSizeMaxColumn < defaultMinColumnSize) ||
newColumnSize < defaultMinColumnSize ||
(indexOfMaxSize === 0 && newSizeMaxColumn < MIN_SIZE_FIRST_COLUMN) ||
(indexOfMaxSize !== 0 && newSizeMaxColumn < DEFAULT_MIN_COLUMN_SIZE) ||
newColumnSize < DEFAULT_MIN_COLUMN_SIZE ||
enableColumnsLength === 1
)
return ResetColumnsSize();
@ -288,14 +289,14 @@ class TableHeader extends React.Component<
const minSize = column.dataset.minWidth
? column.dataset.minWidth
: defaultMinColumnSize;
: DEFAULT_MIN_COLUMN_SIZE;
if (newWidth <= +minSize - handleOffset) {
if (newWidth <= +minSize - HANDLE_OFFSET) {
const currentWidth = getSubstring(widths[+columnIndex]);
// Move left
if (currentWidth !== +minSize) {
newWidth = +minSize - handleOffset;
newWidth = +minSize - HANDLE_OFFSET;
this.moveToRight(widths, newWidth);
} else this.moveToLeft(widths, newWidth);
} else {
@ -379,7 +380,7 @@ class TableHeader extends React.Component<
if (storageSize) {
const splitStorage = storageSize.split(" ");
if (getSubstring(splitStorage[0]) <= defaultMinColumnSize) {
if (getSubstring(splitStorage[0]) <= DEFAULT_MIN_COLUMN_SIZE) {
localStorage.removeItem(columnStorageName);
this.onResize();
return;
@ -417,7 +418,7 @@ class TableHeader extends React.Component<
.map((column) => getSubstring(column))
.reduce((x, y) => x + y);
const oldWidth = defaultWidth - defaultSize - settingsSize;
const oldWidth = defaultWidth - defaultSize - SETTINGS_SIZE;
let str = "";
let gridTemplateColumnsWithoutOverfilling: string[] = [];
@ -434,7 +435,7 @@ class TableHeader extends React.Component<
? storageInfoPanelSize.split(" ")
: tableContainer;
let containerMinWidth = containerWidth - defaultSize - settingsSize;
let containerMinWidth = containerWidth - defaultSize - SETTINGS_SIZE;
tableInfoPanelContainer.forEach((item, index) => {
const column = document.getElementById(`column_${index}`);
@ -446,12 +447,12 @@ class TableHeader extends React.Component<
if (
enable &&
(item !== `${defaultSize}px` || `${defaultSize}px` === `0px`) &&
item !== `${settingsSize}px`
item !== `${SETTINGS_SIZE}px`
) {
if (column?.dataset?.minWidth) {
containerMinWidth -= +column.dataset.minWidth;
} else {
containerMinWidth -= defaultMinColumnSize;
containerMinWidth -= DEFAULT_MIN_COLUMN_SIZE;
}
}
});
@ -471,11 +472,11 @@ class TableHeader extends React.Component<
if (column?.dataset?.minWidth && column?.dataset?.default) {
gridTemplateColumns.push(
`${containerWidth - defaultSize - settingsSize}px`,
`${containerWidth - defaultSize - SETTINGS_SIZE}px`,
);
} else if (
item === `${defaultSize}px` ||
item === `${settingsSize}px`
item === `${SETTINGS_SIZE}px`
) {
gridTemplateColumns.push(item);
} else {
@ -487,7 +488,7 @@ class TableHeader extends React.Component<
let hasGridTemplateColumnsWithoutOverfilling = false;
if (infoPanelVisible) {
if (!hideColumns) {
const contentWidth = containerWidth - defaultSize - settingsSize;
const contentWidth = containerWidth - defaultSize - SETTINGS_SIZE;
let enabledColumnsCount = 0;
@ -496,7 +497,7 @@ class TableHeader extends React.Component<
index !== 0 &&
item !== "0px" &&
item !== `${defaultSize}px` &&
item !== `${settingsSize}px`
item !== `${SETTINGS_SIZE}px`
) {
enabledColumnsCount += 1;
}
@ -507,10 +508,10 @@ class TableHeader extends React.Component<
.map((column) => getSubstring(column))
.reduce((x, y) => x + y) -
defaultSize -
settingsSize;
SETTINGS_SIZE;
if (
contentWidth - enabledColumnsCount * defaultMinColumnSize >
contentWidth - enabledColumnsCount * DEFAULT_MIN_COLUMN_SIZE >
getSubstring(tableInfoPanelContainer[0])
) {
const currentContentWidth =
@ -534,7 +535,7 @@ class TableHeader extends React.Component<
if (!enable) {
gridTemplateColumns.push("0px");
} else if (item !== `${settingsSize}px`) {
} else if (item !== `${SETTINGS_SIZE}px`) {
const percent =
enabledColumnsCount === 0
? 100
@ -546,17 +547,17 @@ class TableHeader extends React.Component<
const newItemWidth = defaultColumnSize
? `${defaultColumnSize}px`
: (currentContentWidth * percent) / 100 >
defaultMinColumnSize
DEFAULT_MIN_COLUMN_SIZE
? `${(currentContentWidth * percent) / 100}px`
: `${defaultMinColumnSize}px`;
: `${DEFAULT_MIN_COLUMN_SIZE}px`;
if (
(currentContentWidth * percent) / 100 <
defaultMinColumnSize &&
DEFAULT_MIN_COLUMN_SIZE &&
!defaultColumnSize
) {
overWidth +=
defaultMinColumnSize -
DEFAULT_MIN_COLUMN_SIZE -
(currentContentWidth * percent) / 100;
}
@ -575,10 +576,10 @@ class TableHeader extends React.Component<
index !== 0 &&
column !== "0px" &&
column !== `${defaultSize}px` &&
column !== `${settingsSize}px` &&
columnWidth > defaultMinColumnSize
column !== `${SETTINGS_SIZE}px` &&
columnWidth > DEFAULT_MIN_COLUMN_SIZE
) {
const availableWidth = columnWidth - defaultMinColumnSize;
const availableWidth = columnWidth - DEFAULT_MIN_COLUMN_SIZE;
if (availableWidth < Math.abs(overWidth)) {
overWidth = Math.abs(overWidth) - availableWidth;
@ -608,15 +609,15 @@ class TableHeader extends React.Component<
if (!enable) {
gridTemplateColumns.push("0px");
} else if (item !== `${settingsSize}px`) {
} else if (item !== `${SETTINGS_SIZE}px`) {
const newItemWidth = defaultColumnSize
? `${defaultColumnSize}px`
: index === 0
? `${
contentWidth -
enabledColumnsCount * defaultMinColumnSize
enabledColumnsCount * DEFAULT_MIN_COLUMN_SIZE
}px`
: `${defaultMinColumnSize}px`;
: `${DEFAULT_MIN_COLUMN_SIZE}px`;
gridTemplateColumns.push(newItemWidth);
} else {
@ -656,7 +657,7 @@ class TableHeader extends React.Component<
getSubstring(gridTemplateColumns[+index - colIndex]) +
getSubstring(item)
}px`;
} else if (item !== `${settingsSize}px`) {
} else if (item !== `${SETTINGS_SIZE}px`) {
const percent = (getSubstring(item) / oldWidth) * 100;
if (percent === 100) {
@ -673,30 +674,31 @@ class TableHeader extends React.Component<
let newItemWidth = defaultColumnSize
? `${defaultColumnSize}px`
: percent === 0
? `${defaultMinColumnSize}px`
? `${DEFAULT_MIN_COLUMN_SIZE}px`
: `${
((containerWidth - defaultSize - settingsSize) *
((containerWidth - defaultSize - SETTINGS_SIZE) *
percent) /
100
}px`;
const minWidth = column?.dataset?.minWidth;
const minSize = minWidth ? +minWidth : minSizeFirstColumn;
const minSize = minWidth ? +minWidth : MIN_SIZE_FIRST_COLUMN;
// Checking whether the first column is less than the minimum width
if (+index === 0 && getSubstring(newItemWidth) < minSize) {
overWidth += minSizeFirstColumn - getSubstring(newItemWidth);
newItemWidth = `${minSizeFirstColumn}px`;
overWidth += MIN_SIZE_FIRST_COLUMN - getSubstring(newItemWidth);
newItemWidth = `${MIN_SIZE_FIRST_COLUMN}px`;
}
// Checking whether columns are smaller than the minimum width
if (
+index !== 0 &&
!defaultColumnSize &&
getSubstring(newItemWidth) < defaultMinColumnSize
getSubstring(newItemWidth) < DEFAULT_MIN_COLUMN_SIZE
) {
overWidth += defaultMinColumnSize - getSubstring(newItemWidth);
newItemWidth = `${defaultMinColumnSize}px`;
overWidth +=
DEFAULT_MIN_COLUMN_SIZE - getSubstring(newItemWidth);
newItemWidth = `${DEFAULT_MIN_COLUMN_SIZE}px`;
}
gridTemplateColumns.push(newItemWidth);
@ -789,9 +791,11 @@ class TableHeader extends React.Component<
const column = document.getElementById(`column_${index}`);
const minWidth = column?.dataset?.minWidth;
const minSize = minWidth ? +minWidth : minSizeFirstColumn;
const minSize = minWidth ? +minWidth : MIN_SIZE_FIRST_COLUMN;
if ((index === 0 ? minSize : defaultMinColumnSize) !== getSubstring(item))
if (
(index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE) !== getSubstring(item)
)
countColumns += 1;
});
@ -803,21 +807,21 @@ class TableHeader extends React.Component<
const column = document.getElementById(`column_${index}`);
const minWidth = column?.dataset?.minWidth;
const minSize = minWidth ? +minWidth : minSizeFirstColumn;
const minSize = minWidth ? +minWidth : MIN_SIZE_FIRST_COLUMN;
const itemSubstring = getSubstring(item);
if ((index === 0 ? minSize : defaultMinColumnSize) === itemSubstring)
if ((index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE) === itemSubstring)
return;
const differenceWithMinimum =
itemSubstring - (index === 0 ? minSize : defaultMinColumnSize);
itemSubstring - (index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE);
if (differenceWithMinimum >= addWidth) {
newGridTemplateColumns[index] = `${itemSubstring - addWidth}px`;
} else {
newGridTemplateColumns[index] = `${
index === 0 ? minSize : defaultMinColumnSize
index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE
}px`;
}
});
@ -868,7 +872,7 @@ class TableHeader extends React.Component<
columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0;
const containerWidth =
container.clientWidth - defaultColumnSize - settingsSize;
container.clientWidth - defaultColumnSize - SETTINGS_SIZE;
const firstColumnPercent = enableColumns.length > 0 ? 40 : 100;
const percent = enableColumns.length > 0 ? 60 / enableColumns.length : 0;
@ -888,7 +892,7 @@ class TableHeader extends React.Component<
}
}
str += `${settingsSize}px`;
str += `${SETTINGS_SIZE}px`;
if (container) container.style.gridTemplateColumns = str;
if (this.headerRef && this.headerRef.current) {
@ -976,4 +980,6 @@ class TableHeader extends React.Component<
}
}
export default withTheme(TableHeader);
const TableHeader = withTheme(TableHeaderComponent);
export { TableHeader };

5
packages/shared/components/table/index.ts
View File

@ -24,13 +24,10 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import TableHeader from "./TableHeader";
export { TableHeader };
export { TableContainer } from "./TableContainer";
export { TableBody } from "./TableBody";
export { TableRow } from "./TableRow";
// export { TableHeader } from "./TableHeader";
export { TableHeader } from "./TableHeader";
export { TableGroupMenu } from "./TableGroupMenu";
export { TableCell } from "./sub-components/TableCell";

1
packages/shared/utils/device.ts
View File

@ -25,6 +25,7 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
export const INFO_PANEL_WIDTH = 400;
export const TABLE_HEADER_HEIGHT = 40;
export function checkIsSSR() {
return typeof window === "undefined";