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

Merge pull request #578 from ONLYOFFICE/feature/move-quick-buttons

Browse Source 
Feature/move quick buttons
This commit is contained in:
Alexey Safronov 2024-08-12 19:43:35 +04:00 committed by GitHub
commit cfcc10e98e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 35 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -136,9 +136,7 @@ const StyledTableRow = styled(TableRow)`
`}
}
.table-container_element-wrapper,
.table-container_quick-buttons-wrapper {
padding-inline-end: 0;
.table-container_element-wrapper {
}
.table-container_element-wrapper,
@ -236,7 +234,7 @@ const StyledTableRow = styled(TableRow)`
.no-extra-space {
p {
margin-inline-end: 0 !important;
margin-inline-end: 8px !important;
}
}
`;
@ -306,7 +304,10 @@ const StyledBadgesContainer = styled.div`
`;
const StyledQuickButtonsContainer = styled.div`
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
flex-grow: 1;
.badges {
display: flex;
@ -315,11 +316,7 @@ const StyledQuickButtonsContainer = styled.div`
}
.badge {
padding: 12px 7px;
}
.badge:last-child {
margin-inline-end: 3px;
padding: 12px 8px;
}
.lock-file {

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

@ -109,17 +109,10 @@ class FilesTableHeader extends React.Component {
onChange: this.onColumnChange,
onClick: this.onRoomsFilter,
},
{
key: "QuickButtons",
title: "",
enable: this.props.roomColumnQuickButtonsIsEnabled,
defaultSize: 52,
resizable: false,
},
];
showStorageInfo &&
columns.splice(columns.length - 1, 0, {
columns.splice(columns.length, 0, {
key: "Storage",
title:
isDefaultRoomsQuotaSet && !isArchiveFolder
@ -199,13 +192,6 @@ class FilesTableHeader extends React.Component {
// onClick: this.onFilter,
onChange: this.onColumnChange,
},
{
key: "QuickButtons",
title: "",
enable: this.props.quickButtonsColumnIsEnabled,
defaultSize: 52,
resizable: false,
},
];
defaultColumns.push(...columns);
} else if (isRecentTab) {
@ -278,13 +264,6 @@ class FilesTableHeader extends React.Component {
// onClick: this.onFilter,
onChange: this.onColumnChange,
},
{
key: "QuickButtons",
title: "",
enable: this.props.quickButtonsColumnIsEnabled,
defaultSize: 52,
resizable: false,
},
];
defaultColumns.push(...columns);
} else {
@ -348,13 +327,6 @@ class FilesTableHeader extends React.Component {
// onClick: this.onFilter,
onChange: this.onColumnChange,
},
{
key: "QuickButtons",
title: "",
enable: this.props.quickButtonsColumnIsEnabled,
defaultSize: 52,
resizable: false,
},
];
defaultColumns.push(...columns);
}
@ -639,14 +611,12 @@ export default inject(
sizeTrashColumnIsEnabled,
typeColumnIsEnabled,
typeTrashColumnIsEnabled,
quickButtonsColumnIsEnabled,
lastOpenedColumnIsEnabled,
roomColumnNameIsEnabled,
roomColumnTypeIsEnabled,
roomColumnTagsIsEnabled,
roomColumnOwnerIsEnabled,
roomColumnQuickButtonsIsEnabled,
roomColumnActivityIsEnabled,
roomQuotaColumnIsEnable,
@ -690,14 +660,12 @@ export default inject(
sizeTrashColumnIsEnabled,
typeColumnIsEnabled,
typeTrashColumnIsEnabled,
quickButtonsColumnIsEnabled,
lastOpenedColumnIsEnabled,
roomColumnNameIsEnabled,
roomColumnTypeIsEnabled,
roomColumnTagsIsEnabled,
roomColumnOwnerIsEnabled,
roomColumnQuickButtonsIsEnabled,
roomColumnActivityIsEnabled,
roomQuotaColumnIsEnable,

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

@ -33,10 +33,7 @@ import AuthorCell from "./AuthorCell";
import DateCell from "./DateCell";
import SizeCell from "./SizeCell";
import { classNames, getLastColumn } from "@docspace/shared/utils";
import {
StyledBadgesContainer,
StyledQuickButtonsContainer,
} from "../StyledTable";
import { StyledBadgesContainer } from "../StyledTable";
const RecentRowDataComponent = (props) => {
const {
@ -45,7 +42,6 @@ const RecentRowDataComponent = (props) => {
modifiedColumnIsEnabled,
sizeColumnIsEnabled,
typeColumnIsEnabled,
quickButtonsColumnIsEnabled,
lastOpenedColumnIsEnabled,
dragStyles,
@ -58,7 +54,6 @@ const RecentRowDataComponent = (props) => {
inProgress,
showHotkeyBorder,
badgesComponent,
quickButtonsComponent,
tableStorageName,
} = props;
@ -213,26 +208,6 @@ const RecentRowDataComponent = (props) => {
) : (
<div />
)}
{quickButtonsColumnIsEnabled ? (
<TableCell
style={
!quickButtonsColumnIsEnabled
? { background: "none" }
: dragStyles.style
}
{...selectionProp}
className={classNames(
selectionProp?.className,
"table-container_quick-buttons-wrapper",
)}
>
<StyledQuickButtonsContainer>
{quickButtonsComponent}
</StyledQuickButtonsContainer>
</TableCell>
) : (
<div />
)}
</>
);
};
@ -244,7 +219,6 @@ export default inject(({ tableStore }) => {
modifiedColumnIsEnabled,
sizeColumnIsEnabled,
typeColumnIsEnabled,
quickButtonsColumnIsEnabled,
lastOpenedColumnIsEnabled,
tableStorageName,
} = tableStore;
@ -255,7 +229,6 @@ export default inject(({ tableStore }) => {
modifiedColumnIsEnabled,
sizeColumnIsEnabled,
typeColumnIsEnabled,
quickButtonsColumnIsEnabled,
lastOpenedColumnIsEnabled,
tableStorageName,
};

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

@ -41,7 +41,6 @@ const RoomsRowDataComponent = (props) => {
const {
roomColumnTypeIsEnabled,
roomColumnOwnerIsEnabled,
roomColumnQuickButtonsIsEnabled,
roomColumnTagsIsEnabled,
roomColumnActivityIsEnabled,
roomQuotaColumnIsEnable,
@ -63,6 +62,11 @@ const RoomsRowDataComponent = (props) => {
} = props;
const lastColumn = getLastColumn(tableStorageName);
const quickButtonsComponentNode = (
<StyledQuickButtonsContainer>
{quickButtonsComponent}
</StyledQuickButtonsContainer>
);
return (
<>
@ -85,6 +89,7 @@ const RoomsRowDataComponent = (props) => {
<StyledBadgesContainer showHotkeyBorder={showHotkeyBorder}>
{badgesComponent}
</StyledBadgesContainer>
{lastColumn === "Name" ? quickButtonsComponentNode : <></>}
</TableCell>
{roomColumnTypeIsEnabled ? (
@ -104,6 +109,7 @@ const RoomsRowDataComponent = (props) => {
sideColor={theme.filesSection.tableView.row.sideColor}
{...props}
/>
{lastColumn === "Type" ? quickButtonsComponentNode : <></>}
</TableCell>
) : (
<div />
@ -122,6 +128,7 @@ const RoomsRowDataComponent = (props) => {
sideColor={theme.filesSection.tableView.row.sideColor}
{...props}
/>
{lastColumn === "Tags" ? quickButtonsComponentNode : <></>}
</TableCell>
) : (
<div />
@ -144,6 +151,7 @@ const RoomsRowDataComponent = (props) => {
sideColor={theme.filesSection.tableView.row.sideColor}
{...props}
/>
{lastColumn === "Owner" ? quickButtonsComponentNode : <></>}
</TableCell>
) : (
<div />
@ -166,6 +174,7 @@ const RoomsRowDataComponent = (props) => {
sideColor={theme.filesSection.tableView.row.sideColor}
{...props}
/>
{lastColumn === "Activity" ? quickButtonsComponentNode : <></>}
</TableCell>
) : (
<div />
@ -178,31 +187,11 @@ const RoomsRowDataComponent = (props) => {
type="room"
isReadOnly={!item?.security?.EditRoom}
/>
{lastColumn === "Storage" ? quickButtonsComponentNode : <></>}
</TableCell>
) : (
<div />
))}
{roomColumnQuickButtonsIsEnabled ? (
<TableCell
style={
!roomColumnQuickButtonsIsEnabled
? { background: "none" }
: dragStyles.style
}
{...selectionProp}
className={classNames(
selectionProp?.className,
"table-container_quick-buttons-wrapper",
)}
>
<StyledQuickButtonsContainer>
{quickButtonsComponent}
</StyledQuickButtonsContainer>
</TableCell>
) : (
<div />
)}
</>
);
};
@ -211,7 +200,6 @@ export default inject(({ currentQuotaStore, tableStore }) => {
const {
roomColumnTypeIsEnabled,
roomColumnOwnerIsEnabled,
roomColumnQuickButtonsIsEnabled,
roomColumnTagsIsEnabled,
roomColumnActivityIsEnabled,
roomQuotaColumnIsEnable,
@ -223,7 +211,6 @@ export default inject(({ currentQuotaStore, tableStore }) => {
roomQuotaColumnIsEnable,
roomColumnTypeIsEnabled,
roomColumnOwnerIsEnabled,
roomColumnQuickButtonsIsEnabled,
roomColumnTagsIsEnabled,
roomColumnActivityIsEnabled,
showStorageInfo,

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

@ -45,8 +45,6 @@ const RowDataComponent = (props) => {
modifiedColumnIsEnabled,
sizeColumnIsEnabled,
typeColumnIsEnabled,
quickButtonsColumnIsEnabled,
dragStyles,
selectionProp,
value,
@ -62,6 +60,11 @@ const RowDataComponent = (props) => {
} = props;
const lastColumn = getLastColumn(tableStorageName);
const quickButtonsComponentNode = (
<StyledQuickButtonsContainer>
{quickButtonsComponent}
</StyledQuickButtonsContainer>
);
return (
<>
@ -84,6 +87,7 @@ const RowDataComponent = (props) => {
<StyledBadgesContainer showHotkeyBorder={showHotkeyBorder}>
{badgesComponent}
</StyledBadgesContainer>
{lastColumn === "Name" ? quickButtonsComponentNode : <></>}
</TableCell>
{authorColumnIsEnabled ? (
@ -101,6 +105,7 @@ const RowDataComponent = (props) => {
sideColor={theme.filesSection.tableView.row.sideColor}
{...props}
/>
{lastColumn === "Author" ? quickButtonsComponentNode : <></>}
</TableCell>
) : (
<div />
@ -124,6 +129,7 @@ const RowDataComponent = (props) => {
sideColor={theme.filesSection.tableView.row.sideColor}
{...props}
/>
{lastColumn === "Created" ? quickButtonsComponentNode : <></>}
</TableCell>
) : (
<div />
@ -144,6 +150,7 @@ const RowDataComponent = (props) => {
sideColor={theme.filesSection.tableView.row.sideColor}
{...props}
/>
{lastColumn === "Modified" ? quickButtonsComponentNode : <></>}
</TableCell>
) : (
<div />
@ -164,6 +171,7 @@ const RowDataComponent = (props) => {
sideColor={theme.filesSection.tableView.row.sideColor}
{...props}
/>
{lastColumn === "Size" ? quickButtonsComponentNode : <></>}
</TableCell>
) : (
<div />
@ -186,26 +194,7 @@ const RowDataComponent = (props) => {
sideColor={theme.filesSection.tableView.row.sideColor}
{...props}
/>
</TableCell>
) : (
<div />
)}
{quickButtonsColumnIsEnabled ? (
<TableCell
style={
!quickButtonsColumnIsEnabled
? { background: "none" }
: dragStyles.style
}
{...selectionProp}
className={classNames(
selectionProp?.className,
"table-container_quick-buttons-wrapper",
)}
>
<StyledQuickButtonsContainer>
{quickButtonsComponent}
</StyledQuickButtonsContainer>
{lastColumn === "Type" ? quickButtonsComponentNode : <></>}
</TableCell>
) : (
<div />
@ -221,7 +210,6 @@ export default inject(({ tableStore }) => {
modifiedColumnIsEnabled,
sizeColumnIsEnabled,
typeColumnIsEnabled,
quickButtonsColumnIsEnabled,
tableStorageName,
} = tableStore;
@ -231,7 +219,6 @@ export default inject(({ tableStore }) => {
modifiedColumnIsEnabled,
sizeColumnIsEnabled,
typeColumnIsEnabled,
quickButtonsColumnIsEnabled,
tableStorageName,
};
})(observer(RowDataComponent));

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

@ -33,10 +33,7 @@ import AuthorCell from "./AuthorCell";
import DateCell from "./DateCell";
import SizeCell from "./SizeCell";
import { classNames, getLastColumn } from "@docspace/shared/utils";
import {
StyledBadgesContainer,
StyledQuickButtonsContainer,
} from "../StyledTable";
import { StyledBadgesContainer } from "../StyledTable";
import ErasureCell from "./ErasureCell";
import RoomCell from "./RoomCell";
@ -48,8 +45,6 @@ const TrashRowDataComponent = (props) => {
erasureColumnIsEnabled,
sizeTrashColumnIsEnabled,
typeTrashColumnIsEnabled,
quickButtonsColumnIsEnabled,
dragStyles,
selectionProp,
value,
@ -60,7 +55,6 @@ const TrashRowDataComponent = (props) => {
inProgress,
showHotkeyBorder,
badgesComponent,
quickButtonsComponent,
tableStorageName,
} = props;
@ -217,26 +211,6 @@ const TrashRowDataComponent = (props) => {
) : (
<div />
)}
{quickButtonsColumnIsEnabled ? (
<TableCell
style={
!quickButtonsColumnIsEnabled
? { background: "none" }
: dragStyles.style
}
{...selectionProp}
className={classNames(
selectionProp?.className,
"table-container_quick-buttons-wrapper",
)}
>
<StyledQuickButtonsContainer>
{quickButtonsComponent}
</StyledQuickButtonsContainer>
</TableCell>
) : (
<div />
)}
</>
);
};
@ -249,7 +223,6 @@ export default inject(({ tableStore }) => {
erasureColumnIsEnabled,
sizeTrashColumnIsEnabled,
typeTrashColumnIsEnabled,
quickButtonsColumnIsEnabled,
tableStorageName,
} = tableStore;
@ -260,7 +233,6 @@ export default inject(({ tableStore }) => {
erasureColumnIsEnabled,
sizeTrashColumnIsEnabled,
typeTrashColumnIsEnabled,
quickButtonsColumnIsEnabled,
tableStorageName,
};
})(observer(TrashRowDataComponent));

12
packages/client/src/store/TableStore.js
View File

@ -55,7 +55,6 @@ class TableStore {
roomColumnTypeIsEnabled = false;
roomColumnTagsIsEnabled = true;
roomColumnOwnerIsEnabled = false;
roomColumnQuickButtonsIsEnabled = true;
roomColumnActivityIsEnabled = true;
roomQuotaColumnIsEnable = false;
@ -67,7 +66,6 @@ class TableStore {
modifiedColumnIsEnabled = true;
sizeColumnIsEnabled = true;
typeColumnIsEnabled = true;
quickButtonsColumnIsEnabled = true;
lastOpenedColumnIsEnabled = true;
authorTrashColumnIsEnabled = true;
@ -143,10 +141,6 @@ class TableStore {
this.typeColumnIsEnabled = enable;
};
setQuickButtonsColumn = (enable) => {
this.quickButtonsColumnIsEnabled = enable;
};
setAuthorTrashColumn = (enable) => (this.authorTrashColumnIsEnabled = enable);
setCreatedTrashColumn = (enable) =>
(this.createdTrashColumnIsEnabled = enable);
@ -232,7 +226,6 @@ class TableStore {
this.setErasureColumn(splitColumns.includes("Erasure"));
this.setSizeTrashColumn(splitColumns.includes("SizeTrash"));
this.setTypeTrashColumn(splitColumns.includes("TypeTrash"));
this.setQuickButtonsColumn(splitColumns.includes("QuickButtons"));
return;
}
@ -241,7 +234,6 @@ class TableStore {
this.setCreatedColumn(splitColumns.includes("Created"));
this.setSizeColumn(splitColumns.includes("Size"));
this.setTypeColumn(splitColumns.includes("Type"));
this.setQuickButtonsColumn(splitColumns.includes("QuickButtons"));
this.setLastOpenedColumn(splitColumns.includes("LastOpened"));
}
};
@ -315,10 +307,6 @@ class TableStore {
this.setTypeTrashColumn(!this.typeTrashColumnIsEnabled);
return;
case "QuickButtons":
this.setQuickButtonsColumn(!this.quickButtonsColumnIsEnabled);
return;
case "Owner":
this.setRoomColumnOwner(!this.roomColumnOwnerIsEnabled);
return;

2
packages/shared/components/icon-button/IconButton.tsx
View File

@ -64,7 +64,7 @@ const IconButton = ({
const [currentIconName, setCurrentIconName] = React.useState(iconName);
const [currentIconColor, setCurrentIconColor] = React.useState<
string | undefined
>(iconName);
>(color);
const onMouseEnterAction = (e: React.MouseEvent) => {
if (isDisabled) return;

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

@ -426,7 +426,7 @@ class TableHeaderComponent extends React.Component<
if (!container) return;
const containerWidth = +container.clientWidth;
const containerWidth = container.getBoundingClientRect().width;
const defaultWidth = tableContainer
.map((column) => getSubstring(column))

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

@ -179,7 +179,7 @@ export const getLastColumn = (tableStorageName: string) => {
(column) => column !== "false" && column !== "QuickButtons",
);
if (filterColumns.length > 1) return filterColumns[filterColumns.length - 1];
if (filterColumns.length > 0) return filterColumns[filterColumns.length - 1];
return null;
};