Merge branch 'release/v1.0.0' of github.com:ONLYOFFICE/DocSpace into release/v1.0.0
This commit is contained in:
commit
b168b67adc
@ -20,6 +20,7 @@ import {
|
|||||||
mobile,
|
mobile,
|
||||||
isTablet,
|
isTablet,
|
||||||
isMobile as isMobileUtils,
|
isMobile as isMobileUtils,
|
||||||
|
isSmallTablet,
|
||||||
isDesktop,
|
isDesktop,
|
||||||
} from "@docspace/components/utils/device";
|
} from "@docspace/components/utils/device";
|
||||||
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
|
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
|
||||||
@ -139,11 +140,6 @@ const StyledInfoPanelToggleWrapper = styled.div`
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
${isMobile &&
|
|
||||||
css`
|
|
||||||
display: none;
|
|
||||||
`}
|
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
@ -337,12 +333,7 @@ const SectionHeaderContent = (props) => {
|
|||||||
/>
|
/>
|
||||||
{!isInfoPanelVisible && (
|
{!isInfoPanelVisible && (
|
||||||
<StyledInfoPanelToggleWrapper>
|
<StyledInfoPanelToggleWrapper>
|
||||||
{!(
|
{!(isTablet() || isSmallTablet() || !isDesktop()) && (
|
||||||
isTablet() ||
|
|
||||||
isMobile ||
|
|
||||||
isMobileUtils() ||
|
|
||||||
!isDesktop()
|
|
||||||
) && (
|
|
||||||
<div className="info-panel-toggle-bg">
|
<div className="info-panel-toggle-bg">
|
||||||
<IconButton
|
<IconButton
|
||||||
id="info-panel-toggle--open"
|
id="info-panel-toggle--open"
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import PanelReactSvgUrl from "PUBLIC_DIR/images/panel.react.svg?url";
|
import PanelReactSvgUrl from "PUBLIC_DIR/images/panel.react.svg?url";
|
||||||
import React from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import { withTranslation } from "react-i18next";
|
import { withTranslation } from "react-i18next";
|
||||||
import { isMobile as isMobileRDD } from "react-device-detect";
|
import { isMobile as isMobileRDD } from "react-device-detect";
|
||||||
@ -11,7 +11,7 @@ import withLoader from "@docspace/client/src/HOCs/withLoader";
|
|||||||
import Submenu from "@docspace/components/submenu";
|
import Submenu from "@docspace/components/submenu";
|
||||||
import {
|
import {
|
||||||
isDesktop as isDesktopUtils,
|
isDesktop as isDesktopUtils,
|
||||||
isMobile as isMobileUtils,
|
isSmallTablet as isSmallTabletUtils,
|
||||||
isTablet as isTabletUtils,
|
isTablet as isTabletUtils,
|
||||||
} from "@docspace/components/utils/device";
|
} from "@docspace/components/utils/device";
|
||||||
|
|
||||||
@ -37,6 +37,8 @@ const InfoPanelHeaderContent = (props) => {
|
|||||||
// selectionParentRoom,
|
// selectionParentRoom,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
const [isTablet, setIsTablet] = useState(false);
|
||||||
|
|
||||||
const isRooms = getIsRooms();
|
const isRooms = getIsRooms();
|
||||||
const isGallery = getIsGallery();
|
const isGallery = getIsGallery();
|
||||||
const isAccounts = getIsAccounts();
|
const isAccounts = getIsAccounts();
|
||||||
@ -48,6 +50,19 @@ const InfoPanelHeaderContent = (props) => {
|
|||||||
const withSubmenu =
|
const withSubmenu =
|
||||||
!isNoItem && !isSeveralItems && !isGallery && !isAccounts && !isTrash;
|
!isNoItem && !isSeveralItems && !isGallery && !isAccounts && !isTrash;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
checkWidth();
|
||||||
|
window.addEventListener("resize", checkWidth);
|
||||||
|
return () => window.removeEventListener("resize", checkWidth);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const checkWidth = () => {
|
||||||
|
const isTablet =
|
||||||
|
isTabletUtils() || isSmallTabletUtils() || !isDesktopUtils();
|
||||||
|
|
||||||
|
setIsTablet(isTablet);
|
||||||
|
};
|
||||||
|
|
||||||
const closeInfoPanel = () => setIsVisible(false);
|
const closeInfoPanel = () => setIsVisible(false);
|
||||||
|
|
||||||
const setMembers = () => setView("info_members");
|
const setMembers = () => setView("info_members");
|
||||||
@ -84,9 +99,6 @@ const InfoPanelHeaderContent = (props) => {
|
|||||||
|
|
||||||
const personalSubmenu = [submenuData[1], submenuData[2]];
|
const personalSubmenu = [submenuData[1], submenuData[2]];
|
||||||
|
|
||||||
const isTablet =
|
|
||||||
isTabletUtils() || isMobileUtils() || isMobileRDD || !isDesktopUtils();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledInfoPanelHeader isTablet={isTablet} withSubmenu={withSubmenu}>
|
<StyledInfoPanelHeader isTablet={isTablet} withSubmenu={withSubmenu}>
|
||||||
<div className="main">
|
<div className="main">
|
||||||
|
@ -27,9 +27,20 @@ export const MainContainer = styled.div`
|
|||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
color: ${(props) => props.theme.client.settings.common.descriptionColor};
|
color: ${(props) => props.theme.client.settings.common.descriptionColor};
|
||||||
}
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ButtonWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.request-again-link {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.button {
|
|
||||||
@media (${smallTablet}) {
|
@media (${smallTablet}) {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
gap: 16px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 16px;
|
bottom: 16px;
|
||||||
width: calc(100% - 40px);
|
width: calc(100% - 40px);
|
||||||
@ -37,6 +48,9 @@ export const MainContainer = styled.div`
|
|||||||
@media (${mobile}) {
|
@media (${mobile}) {
|
||||||
width: calc(100% - 32px);
|
width: calc(100% - 32px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -5,13 +5,21 @@ import { inject } from "mobx-react";
|
|||||||
import Text from "@docspace/components/text";
|
import Text from "@docspace/components/text";
|
||||||
import Button from "@docspace/components/button";
|
import Button from "@docspace/components/button";
|
||||||
import toastr from "@docspace/components/toast/toastr";
|
import toastr from "@docspace/components/toast/toastr";
|
||||||
import { MainContainer } from "./StyledDeleteData";
|
import Link from "@docspace/components/link";
|
||||||
|
import { MainContainer, ButtonWrapper } from "./StyledDeleteData";
|
||||||
import { setDocumentTitle } from "../../../../helpers/utils";
|
import { setDocumentTitle } from "../../../../helpers/utils";
|
||||||
import { sendSuspendPortalEmail } from "@docspace/common/api/portal";
|
import { sendSuspendPortalEmail } from "@docspace/common/api/portal";
|
||||||
import { isDesktop } from "@docspace/components/utils/device";
|
import { isDesktop } from "@docspace/components/utils/device";
|
||||||
|
import { EmployeeActivationStatus } from "@docspace/common/constants";
|
||||||
|
|
||||||
const PortalDeactivation = (props) => {
|
const PortalDeactivation = (props) => {
|
||||||
const { t, getPortalOwner, owner } = props;
|
const {
|
||||||
|
t,
|
||||||
|
getPortalOwner,
|
||||||
|
owner,
|
||||||
|
currentColorScheme,
|
||||||
|
sendActivationLink,
|
||||||
|
} = props;
|
||||||
const [isDesktopView, setIsDesktopView] = useState(false);
|
const [isDesktopView, setIsDesktopView] = useState(false);
|
||||||
|
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
@ -42,6 +50,13 @@ const PortalDeactivation = (props) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const requestAgain = () => {
|
||||||
|
sendActivationLink && sendActivationLink(t);
|
||||||
|
};
|
||||||
|
|
||||||
|
const notActivatedEmail =
|
||||||
|
owner.activationStatus === EmployeeActivationStatus.NotActivated;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MainContainer>
|
<MainContainer>
|
||||||
<Text fontSize="16px" fontWeight="700" className="header">
|
<Text fontSize="16px" fontWeight="700" className="header">
|
||||||
@ -51,21 +66,46 @@ const PortalDeactivation = (props) => {
|
|||||||
{t("PortalDeactivationDescription")}
|
{t("PortalDeactivationDescription")}
|
||||||
</Text>
|
</Text>
|
||||||
<Text className="helper">{t("PortalDeactivationHelper")}</Text>
|
<Text className="helper">{t("PortalDeactivationHelper")}</Text>
|
||||||
|
<ButtonWrapper>
|
||||||
<Button
|
<Button
|
||||||
className="button"
|
className="button"
|
||||||
label={t("Deactivate")}
|
label={t("Deactivate")}
|
||||||
primary
|
primary
|
||||||
size={isDesktopView ? "small" : "normal"}
|
size={isDesktopView ? "small" : "normal"}
|
||||||
onClick={onDeactivateClick}
|
onClick={onDeactivateClick}
|
||||||
|
isDisabled={notActivatedEmail}
|
||||||
/>
|
/>
|
||||||
|
{notActivatedEmail && (
|
||||||
|
<Text fontSize="12px" fontWeight="600">
|
||||||
|
{t("MainBar:ConfirmEmailHeader")}
|
||||||
|
<Link
|
||||||
|
className="request-again-link"
|
||||||
|
color={currentColorScheme?.main?.accent}
|
||||||
|
fontSize="12px"
|
||||||
|
fontWeight="400"
|
||||||
|
onClick={requestAgain}
|
||||||
|
>
|
||||||
|
{t("MainBar:RequestActivation")}
|
||||||
|
</Link>
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</ButtonWrapper>
|
||||||
</MainContainer>
|
</MainContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default inject(({ auth }) => {
|
export default inject(({ auth }) => {
|
||||||
const { getPortalOwner, owner } = auth.settingsStore;
|
const { getPortalOwner, owner, currentColorScheme } = auth.settingsStore;
|
||||||
|
const { sendActivationLink } = auth.userStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
getPortalOwner,
|
getPortalOwner,
|
||||||
owner,
|
owner,
|
||||||
|
currentColorScheme,
|
||||||
|
sendActivationLink,
|
||||||
};
|
};
|
||||||
})(withTranslation("Settings")(withRouter(PortalDeactivation)));
|
})(
|
||||||
|
withTranslation(["Settings", "MainBar", "People"])(
|
||||||
|
withRouter(PortalDeactivation)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
@ -4,7 +4,8 @@ import { withTranslation } from "react-i18next";
|
|||||||
import { inject } from "mobx-react";
|
import { inject } from "mobx-react";
|
||||||
import Text from "@docspace/components/text";
|
import Text from "@docspace/components/text";
|
||||||
import Button from "@docspace/components/button";
|
import Button from "@docspace/components/button";
|
||||||
import { MainContainer } from "./StyledDeleteData";
|
import Link from "@docspace/components/link";
|
||||||
|
import { MainContainer, ButtonWrapper } from "./StyledDeleteData";
|
||||||
import { setDocumentTitle } from "../../../../helpers/utils";
|
import { setDocumentTitle } from "../../../../helpers/utils";
|
||||||
import { DeletePortalDialog } from "SRC_DIR/components/dialogs";
|
import { DeletePortalDialog } from "SRC_DIR/components/dialogs";
|
||||||
import toastr from "@docspace/components/toast/toastr";
|
import toastr from "@docspace/components/toast/toastr";
|
||||||
@ -13,9 +14,16 @@ import {
|
|||||||
sendDeletePortalEmail,
|
sendDeletePortalEmail,
|
||||||
} from "@docspace/common/api/portal";
|
} from "@docspace/common/api/portal";
|
||||||
import { isDesktop } from "@docspace/components/utils/device";
|
import { isDesktop } from "@docspace/components/utils/device";
|
||||||
|
import { EmployeeActivationStatus } from "@docspace/common/constants";
|
||||||
|
|
||||||
const PortalDeletion = (props) => {
|
const PortalDeletion = (props) => {
|
||||||
const { t, getPortalOwner, owner } = props;
|
const {
|
||||||
|
t,
|
||||||
|
getPortalOwner,
|
||||||
|
owner,
|
||||||
|
currentColorScheme,
|
||||||
|
sendActivationLink,
|
||||||
|
} = props;
|
||||||
const [isDialogVisible, setIsDialogVisible] = useState(false);
|
const [isDialogVisible, setIsDialogVisible] = useState(false);
|
||||||
const [stripeUrl, setStripeUrl] = useState(null);
|
const [stripeUrl, setStripeUrl] = useState(null);
|
||||||
const [isDesktopView, setIsDesktopView] = useState(false);
|
const [isDesktopView, setIsDesktopView] = useState(false);
|
||||||
@ -54,6 +62,13 @@ const PortalDeletion = (props) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const requestAgain = () => {
|
||||||
|
sendActivationLink && sendActivationLink(t);
|
||||||
|
};
|
||||||
|
|
||||||
|
const notActivatedEmail =
|
||||||
|
owner.activationStatus === EmployeeActivationStatus.NotActivated;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MainContainer>
|
<MainContainer>
|
||||||
<Text fontSize="16px" fontWeight="700" className="header">
|
<Text fontSize="16px" fontWeight="700" className="header">
|
||||||
@ -63,14 +78,30 @@ const PortalDeletion = (props) => {
|
|||||||
{t("PortalDeletionDescription")}
|
{t("PortalDeletionDescription")}
|
||||||
</Text>
|
</Text>
|
||||||
<Text className="helper">{t("PortalDeletionHelper")}</Text>
|
<Text className="helper">{t("PortalDeletionHelper")}</Text>
|
||||||
|
<ButtonWrapper>
|
||||||
<Button
|
<Button
|
||||||
className="button"
|
className="button"
|
||||||
label={t("Common:Delete")}
|
label={t("Common:Delete")}
|
||||||
primary
|
primary
|
||||||
size={isDesktopView ? "small" : "normal"}
|
size={isDesktopView ? "small" : "normal"}
|
||||||
onClick={onDeleteClick}
|
onClick={onDeleteClick}
|
||||||
|
isDisabled={notActivatedEmail}
|
||||||
/>
|
/>
|
||||||
|
{notActivatedEmail && (
|
||||||
|
<Text fontSize="12px" fontWeight="600">
|
||||||
|
{t("MainBar:ConfirmEmailHeader")}
|
||||||
|
<Link
|
||||||
|
className="request-again-link"
|
||||||
|
color={currentColorScheme?.main?.accent}
|
||||||
|
fontSize="12px"
|
||||||
|
fontWeight="400"
|
||||||
|
onClick={requestAgain}
|
||||||
|
>
|
||||||
|
{t("MainBar:RequestActivation")}
|
||||||
|
</Link>
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</ButtonWrapper>
|
||||||
<DeletePortalDialog
|
<DeletePortalDialog
|
||||||
visible={isDialogVisible}
|
visible={isDialogVisible}
|
||||||
onClose={() => setIsDialogVisible(false)}
|
onClose={() => setIsDialogVisible(false)}
|
||||||
@ -82,9 +113,17 @@ const PortalDeletion = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default inject(({ auth }) => {
|
export default inject(({ auth }) => {
|
||||||
const { getPortalOwner, owner } = auth.settingsStore;
|
const { getPortalOwner, owner, currentColorScheme } = auth.settingsStore;
|
||||||
|
const { sendActivationLink } = auth.userStore;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
getPortalOwner,
|
getPortalOwner,
|
||||||
owner,
|
owner,
|
||||||
|
currentColorScheme,
|
||||||
|
sendActivationLink,
|
||||||
};
|
};
|
||||||
})(withTranslation(["Settings", "Common"])(withRouter(PortalDeletion)));
|
})(
|
||||||
|
withTranslation(["Settings", "MainBar", "People", "Common"])(
|
||||||
|
withRouter(PortalDeletion)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
@ -17,6 +17,7 @@ import {
|
|||||||
isMobile as isMobileUtils,
|
isMobile as isMobileUtils,
|
||||||
isTablet as isTabletUtils,
|
isTablet as isTabletUtils,
|
||||||
isDesktop as isDesktopUtils,
|
isDesktop as isDesktopUtils,
|
||||||
|
isSmallTablet as isSmallTabletUtils,
|
||||||
} from "@docspace/components/utils/device";
|
} from "@docspace/components/utils/device";
|
||||||
import ToggleInfoPanelButton from "./sub-components/toggle-infopanel-btn";
|
import ToggleInfoPanelButton from "./sub-components/toggle-infopanel-btn";
|
||||||
import TrashWarning from "./sub-components/trash-warning";
|
import TrashWarning from "./sub-components/trash-warning";
|
||||||
@ -59,8 +60,7 @@ const Navigation = ({
|
|||||||
const containerRef = React.useRef(null);
|
const containerRef = React.useRef(null);
|
||||||
|
|
||||||
const isDesktop =
|
const isDesktop =
|
||||||
(!isMobile && !isTabletUtils() && !isMobileUtils()) ||
|
(!isTabletUtils() && !isSmallTabletUtils()) || isDesktopUtils();
|
||||||
(isDesktopUtils() && !isMobile);
|
|
||||||
|
|
||||||
const infoPanelIsVisible = React.useMemo(
|
const infoPanelIsVisible = React.useMemo(
|
||||||
() => isDesktop && (!isEmptyPage || (isEmptyPage && isRoom)),
|
() => isDesktop && (!isEmptyPage || (isEmptyPage && isRoom)),
|
||||||
|
@ -67,13 +67,6 @@ const StyledContainer = styled.div`
|
|||||||
grid-template-columns: ${(props) =>
|
grid-template-columns: ${(props) =>
|
||||||
props.isRootFolder ? "1fr auto" : "29px 1fr auto"};
|
props.isRootFolder ? "1fr auto" : "29px 1fr auto"};
|
||||||
}
|
}
|
||||||
|
|
||||||
${isMobile &&
|
|
||||||
css`
|
|
||||||
width: 100%;
|
|
||||||
grid-template-columns: ${(props) =>
|
|
||||||
props.isRootFolder ? "1fr auto" : "49px 1fr auto"};
|
|
||||||
`}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default StyledContainer;
|
export default StyledContainer;
|
||||||
|
@ -21,12 +21,6 @@ const StyledInfoPanelToggleWrapper = styled.div`
|
|||||||
margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")};
|
margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")};
|
||||||
}
|
}
|
||||||
|
|
||||||
${isMobile &&
|
|
||||||
css`
|
|
||||||
display: none;
|
|
||||||
margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")};
|
|
||||||
`}
|
|
||||||
|
|
||||||
.info-panel-toggle-bg {
|
.info-panel-toggle-bg {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
|
Loading…
Reference in New Issue
Block a user