Merge branch 'release/v2.0.0' of github.com:ONLYOFFICE/DocSpace-client into release/v2.0.0
This commit is contained in:
commit
6bdf498323
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
|
||||
import TagHandler from "./handlers/TagHandler";
|
||||
import SetRoomParams from "./sub-components/SetRoomParams";
|
||||
@ -25,8 +25,23 @@ const EditRoomDialog = ({
|
||||
...fetchedRoomParams,
|
||||
});
|
||||
|
||||
const setRoomTags = (newTags) =>
|
||||
setRoomParams({ ...roomParams, tags: newTags });
|
||||
const prevRoomParams = useRef(
|
||||
Object.freeze({
|
||||
...roomParams,
|
||||
}),
|
||||
);
|
||||
|
||||
const compareRoomParams = (prevParams, currentParams) => {
|
||||
return (
|
||||
prevParams.title === currentParams.title &&
|
||||
prevParams.roomOwner.id === currentParams.roomOwner.id &&
|
||||
prevParams.tags.sort().toString() === currentParams.tags.sort().toString() &&
|
||||
((prevParams.icon.uploadedFile === "" && currentParams.icon.uploadedFile === null) ||
|
||||
prevParams.icon.uploadedFile === currentParams.icon.uploadedFile)
|
||||
);
|
||||
};
|
||||
|
||||
const setRoomTags = (newTags) => setRoomParams({ ...roomParams, tags: newTags });
|
||||
|
||||
const tagHandler = new TagHandler(roomParams.tags, setRoomTags, fetchedTags);
|
||||
|
||||
@ -50,11 +65,16 @@ const EditRoomDialog = ({
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (fetchedImage)
|
||||
if (fetchedImage) {
|
||||
setRoomParams({
|
||||
...roomParams,
|
||||
icon: { ...roomParams.icon, uploadedFile: fetchedImage },
|
||||
});
|
||||
prevRoomParams.current = {
|
||||
...roomParams,
|
||||
icon: { ...roomParams.icon, uploadedFile: fetchedImage },
|
||||
};
|
||||
}
|
||||
}, [fetchedImage]);
|
||||
|
||||
const onCloseAction = () => {
|
||||
@ -70,8 +90,7 @@ const EditRoomDialog = ({
|
||||
visible={visible}
|
||||
onClose={onCloseAction}
|
||||
isScrollLocked={isScrollLocked}
|
||||
withFooterBorder
|
||||
>
|
||||
withFooterBorder>
|
||||
<ModalDialog.Header>
|
||||
<DialogHeader isEdit />
|
||||
</ModalDialog.Header>
|
||||
@ -102,7 +121,7 @@ const EditRoomDialog = ({
|
||||
primary
|
||||
scale
|
||||
onClick={onEditRoom}
|
||||
isDisabled={isWrongTitle}
|
||||
isDisabled={isWrongTitle || compareRoomParams(prevRoomParams.current, roomParams)}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<Button
|
||||
|
@ -6,6 +6,7 @@ import Text from "@docspace/components/text";
|
||||
|
||||
import { parseAddresses } from "@docspace/components/utils/email";
|
||||
import { getAccessOptions } from "../utils";
|
||||
import { getUserRole } from "@docspace/common/utils";
|
||||
|
||||
import {
|
||||
StyledEditInput,
|
||||
@ -35,6 +36,7 @@ const Item = ({
|
||||
|
||||
const name = !!avatar ? (displayName !== "" ? displayName : email) : email;
|
||||
const source = !!avatar ? avatar : AtReactSvgUrl;
|
||||
const role = getUserRole(item);
|
||||
|
||||
const [edit, setEdit] = useState(false);
|
||||
const [inputValue, setInputValue] = useState(name);
|
||||
@ -168,7 +170,7 @@ const Item = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Avatar size="min" role="user" source={source} />
|
||||
<Avatar size="min" role={role} source={source} />
|
||||
{edit ? editBody : displayBody}
|
||||
</>
|
||||
);
|
||||
|
@ -95,7 +95,7 @@ const StyledSettingsComponent = styled.div`
|
||||
}
|
||||
|
||||
.link-learn-more {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
margin: 4px 0 16px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
@ -21,7 +21,10 @@ const ListHeader = styled.header`
|
||||
align-items: center;
|
||||
|
||||
@media ${tablet} {
|
||||
margin-top: -4px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
@media ${mobile} {
|
||||
margin-top: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -43,7 +43,7 @@ const HeaderContainer = styled.div`
|
||||
}
|
||||
|
||||
.arrow-button {
|
||||
margin-inline-end: 18.5px;
|
||||
margin-inline-end: 17px;
|
||||
|
||||
@media ${tablet} {
|
||||
padding-block: 8px;
|
||||
|
@ -12,7 +12,7 @@ import { Base } from "@docspace/components/themes";
|
||||
import HistoryRow from "./HistoryRow";
|
||||
|
||||
const StyledRowContainer = styled(RowContainer)`
|
||||
margin-top: 11px;
|
||||
margin-top: 12px;
|
||||
|
||||
.row-list-item {
|
||||
cursor: pointer;
|
||||
|
@ -12,8 +12,7 @@ import HistoryTableHeader from "./HistoryTableHeader";
|
||||
import { useViewEffect } from "@docspace/common/hooks";
|
||||
|
||||
const TableWrapper = styled(TableContainer)`
|
||||
margin-top: 2px;
|
||||
margin-left: 2px;
|
||||
margin-top: -2px;
|
||||
|
||||
.table-container_header {
|
||||
position: absolute;
|
||||
@ -30,13 +29,33 @@ const TableWrapper = styled(TableContainer)`
|
||||
|
||||
.table-list-item {
|
||||
cursor: pointer;
|
||||
|
||||
padding-left: 20px;
|
||||
|
||||
&:hover {
|
||||
background-color: ${(props) => (props.theme.isBase ? "#f3f4f4" : "#3D3D3D")};
|
||||
background-color: ${(props) => props.theme.filesSection.tableView.row.backgroundActive};
|
||||
|
||||
.table-container_cell {
|
||||
margin-top: -1px;
|
||||
border-top: ${(props) => `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
|
||||
|
||||
margin-left: -24px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.checkboxWrapper {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.table-container_row-context-menu-wrapper {
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-list-item:has(.selected-table-row) {
|
||||
background-color: ${(props) => (props.theme.isBase ? "#f3f4f4" : "#3D3D3D")};
|
||||
background-color: ${(props) => props.theme.filesSection.tableView.row.backgroundActive};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -26,7 +26,20 @@ const TableWrapper = styled(TableContainer)`
|
||||
margin-top: -1px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: ${(props) => (props.theme.isBase ? "#F8F9F9" : "#3D3D3D")};
|
||||
background-color: ${(props) => props.theme.filesSection.tableView.row.backgroundActive};
|
||||
|
||||
.table-container_cell {
|
||||
margin-top: -1px;
|
||||
border-top: ${(props) => `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
|
||||
|
||||
margin-left: -24px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.table-container_row-context-menu-wrapper {
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
@ -40,7 +40,7 @@ export const MainContainer = styled.div`
|
||||
max-width: 700px;
|
||||
|
||||
.link-learn-more {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
margin: 4px 0 16px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
@ -5,7 +5,6 @@ import React, { useState, useEffect } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import { isDesktop } from "@docspace/components/utils/device";
|
||||
import Text from "@docspace/components/text";
|
||||
import Link from "@docspace/components/link";
|
||||
import Box from "@docspace/components/box";
|
||||
@ -28,6 +27,7 @@ import {
|
||||
TableBody,
|
||||
TableDataCell,
|
||||
} from "./styled-active-sessions";
|
||||
import { DeviceType } from "@docspace/common/constants";
|
||||
|
||||
const removeIcon = (
|
||||
<ReactSVG className="remove-icon" src={RemoveSessionSvgUrl} />
|
||||
@ -52,7 +52,11 @@ const ActiveSessions = ({
|
||||
sessions,
|
||||
currentSession,
|
||||
setSessions,
|
||||
currentDeviceType,
|
||||
}) => {
|
||||
const isDesktop = currentDeviceType === DeviceType.desktop;
|
||||
const isMobile = currentDeviceType === DeviceType.mobile;
|
||||
|
||||
const [modalData, setModalData] = useState({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { interfaceDirection } = useTheme();
|
||||
@ -112,7 +116,7 @@ const ActiveSessions = ({
|
||||
return new Date(date).toLocaleString(locale);
|
||||
};
|
||||
const tableCell = (platform, browser) =>
|
||||
interfaceDirection === "rtl" && isDesktop() ? (
|
||||
interfaceDirection === "rtl" && !isMobile ? (
|
||||
<>
|
||||
<span className="session-browser">
|
||||
<span>{browser}</span>
|
||||
@ -157,7 +161,7 @@ const ActiveSessions = ({
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
{!isDesktop() ? (
|
||||
{!isDesktop ? (
|
||||
<Table>
|
||||
<TableBody>
|
||||
{sessions.map((session) => (
|
||||
@ -251,7 +255,7 @@ const ActiveSessions = ({
|
||||
};
|
||||
|
||||
export default inject(({ auth, setup }) => {
|
||||
const { culture } = auth.settingsStore;
|
||||
const { culture, currentDeviceType } = auth.settingsStore;
|
||||
const { user } = auth.userStore;
|
||||
const locale = (user && user.cultureName) || culture || "en";
|
||||
|
||||
@ -285,5 +289,6 @@ export default inject(({ auth, setup }) => {
|
||||
currentSession,
|
||||
getSessions,
|
||||
setSessions,
|
||||
currentDeviceType,
|
||||
};
|
||||
})(observer(withTranslation(["Profile", "Common"])(ActiveSessions)));
|
||||
|
@ -125,19 +125,6 @@ export const StyledInfo = styled.div`
|
||||
height: 36px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.language-combo-box {
|
||||
.combo-button {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -16px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -16px;
|
||||
`}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";
|
||||
import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/icons/17/vertical-dots.react.svg?url";
|
||||
import IconButton from "@docspace/components/icon-button";
|
||||
import ContextMenu from "@docspace/components/context-menu";
|
||||
|
||||
@ -33,7 +33,7 @@ const ContextButton = (props) => {
|
||||
onClick={onClick}
|
||||
iconName={VerticalDotsReactSvgUrl}
|
||||
id={props.id}
|
||||
size={15}
|
||||
size={17}
|
||||
isFill
|
||||
/>
|
||||
<ContextMenu
|
||||
|
@ -8,7 +8,7 @@ import { Base } from "@docspace/components/themes";
|
||||
import ToggleInfoPanelButton from "./toggle-infopanel-btn";
|
||||
import PlusButton from "./plus-btn";
|
||||
import ContextButton from "./context-btn";
|
||||
import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";
|
||||
import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/icons/17/vertical-dots.react.svg?url";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
${(props) =>
|
||||
@ -45,26 +45,27 @@ const StyledContainer = styled.div`
|
||||
}
|
||||
|
||||
.option-button {
|
||||
${(props) =>
|
||||
min-width: 17px;
|
||||
|
||||
/* ${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 16px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 16px;
|
||||
`}
|
||||
min-width: 15px;
|
||||
`} */
|
||||
|
||||
@media ${tablet} {
|
||||
/* @media ${tablet} {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 9px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 9px;
|
||||
`}
|
||||
}
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 9px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 9px;
|
||||
`}
|
||||
} */
|
||||
}
|
||||
|
||||
.trash-button {
|
||||
@ -237,7 +238,7 @@ const ControlButtons = ({
|
||||
zIndex={402}
|
||||
className="option-button"
|
||||
iconName={VerticalDotsReactSvgUrl}
|
||||
size={15}
|
||||
size={17}
|
||||
isFill
|
||||
getData={getContextOptionsFolder}
|
||||
isDisabled={false}
|
||||
|
@ -38,7 +38,6 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)`
|
||||
.info-panel-toggle {
|
||||
margin: auto;
|
||||
margin-top: 25%;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
}
|
||||
`}
|
||||
|
@ -191,7 +191,7 @@ class InfoPanelStore {
|
||||
|
||||
const currentFolderRoomId =
|
||||
this.selectedFolderStore.pathParts &&
|
||||
this.selectedFolderStore.pathParts[1].id;
|
||||
this.selectedFolderStore.pathParts[1]?.id;
|
||||
const prevRoomId = this.selectionParentRoom?.id;
|
||||
|
||||
if (!currentFolderRoomId || currentFolderRoomId === prevRoomId) return;
|
||||
|
@ -235,7 +235,6 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)`
|
||||
.info-panel-toggle {
|
||||
margin: auto;
|
||||
margin-top: 25%;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
}
|
||||
`}
|
||||
|
3
public/images/icons/17/vertical-dots.react.svg
Normal file
3
public/images/icons/17/vertical-dots.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 2.5C10.5 3.60457 9.60457 4.5 8.5 4.5C7.39543 4.5 6.5 3.60457 6.5 2.5C6.5 1.39543 7.39543 0.5 8.5 0.5C9.60457 0.5 10.5 1.39543 10.5 2.5ZM8.5 10.5C9.60457 10.5 10.5 9.60457 10.5 8.5C10.5 7.39543 9.60457 6.5 8.5 6.5C7.39543 6.5 6.5 7.39543 6.5 8.5C6.5 9.60457 7.39543 10.5 8.5 10.5ZM8.5 16.5C9.60457 16.5 10.5 15.6046 10.5 14.5C10.5 13.3954 9.60457 12.5 8.5 12.5C7.39543 12.5 6.5 13.3954 6.5 14.5C6.5 15.6046 7.39543 16.5 8.5 16.5Z" fill="#A3A9AE"/>
|
||||
</svg>
|
After Width: | Height: | Size: 605 B |
Loading…
Reference in New Issue
Block a user