Merge branch 'release/v1.2' of github.com:ONLYOFFICE/AppServer into release/v1.2
This commit is contained in:
commit
bfa7b2d544
@ -19,7 +19,7 @@ const StyledInfoPanelWrapper = styled.div.attrs(({ id }) => ({
|
||||
height: auto;
|
||||
width: auto;
|
||||
background: rgba(6, 22, 38, 0.2);
|
||||
backdrop-filter: blur(18px);
|
||||
backdrop-filter: blur(3px);
|
||||
|
||||
@media ${tablet} {
|
||||
z-index: 309;
|
||||
|
@ -2,7 +2,11 @@ import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
import Scrollbar from "../scrollbar";
|
||||
import StyledAside from "./styled-aside";
|
||||
import {
|
||||
StyledAside,
|
||||
StyledControlContainer,
|
||||
StyledCrossIcon,
|
||||
} from "./styled-aside";
|
||||
|
||||
const Aside = React.memo((props) => {
|
||||
//console.log("Aside render");
|
||||
@ -14,6 +18,7 @@ const Aside = React.memo((props) => {
|
||||
className,
|
||||
contentPaddingBottom,
|
||||
withoutBodyScroll,
|
||||
onClose,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
@ -29,6 +34,12 @@ const Aside = React.memo((props) => {
|
||||
) : (
|
||||
<Scrollbar stype="mediumBlack">{children}</Scrollbar>
|
||||
)}
|
||||
|
||||
{visible && (
|
||||
<StyledControlContainer onClick={onClose}>
|
||||
<StyledCrossIcon />
|
||||
</StyledControlContainer>
|
||||
)}
|
||||
</StyledAside>
|
||||
);
|
||||
});
|
||||
@ -46,6 +57,7 @@ Aside.propTypes = {
|
||||
PropTypes.node,
|
||||
]),
|
||||
withoutBodyScroll: PropTypes.bool,
|
||||
onClose: PropTypes.func,
|
||||
};
|
||||
Aside.defaultProps = {
|
||||
scale: false,
|
||||
|
@ -2,6 +2,12 @@ import React from "react";
|
||||
import styled from "styled-components";
|
||||
import Base from "../themes/base";
|
||||
|
||||
import CrossIcon from "@appserver/components/public/static/images/cross.react.svg";
|
||||
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
import { tablet } from "@appserver/components/utils/device";
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
/* eslint-disable react/prop-types */
|
||||
const Container = ({
|
||||
@ -17,19 +23,44 @@ const Container = ({
|
||||
const StyledAside = styled(Container)`
|
||||
background-color: ${(props) => props.theme.aside.backgroundColor};
|
||||
height: ${(props) => props.theme.aside.height};
|
||||
overflow-x: ${(props) => props.theme.aside.overflowX};
|
||||
overflow-y: ${(props) => props.theme.aside.overflowY};
|
||||
|
||||
position: fixed;
|
||||
right: ${(props) => props.theme.aside.right};
|
||||
top: ${(props) => props.theme.aside.top};
|
||||
transform: translateX(
|
||||
${(props) => (props.visible ? "0" : props.scale ? "100%" : "325px")}
|
||||
${(props) => (props.visible ? "0" : props.scale ? "100%" : "480px")}
|
||||
);
|
||||
transition: ${(props) => props.theme.aside.transition};
|
||||
width: ${(props) => (props.scale ? "100%" : "325px")};
|
||||
width: ${(props) => (props.scale ? "100%" : "480px")};
|
||||
z-index: ${(props) => props.zIndex};
|
||||
box-sizing: border-box;
|
||||
|
||||
@media ${tablet} {
|
||||
max-width: calc(100% - 69px);
|
||||
transform: translateX(
|
||||
${(props) =>
|
||||
props.visible ? "0" : props.scale ? "100%" : "calc(100% - 69px)"}
|
||||
);
|
||||
}
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
max-width: calc(100% - 69px);
|
||||
transform: translateX(
|
||||
${(props) =>
|
||||
props.visible ? "0" : props.scale ? "100%" : "calc(100% - 69px)"}
|
||||
);
|
||||
`}
|
||||
|
||||
@media (max-width: 428px) {
|
||||
bottom: 0;
|
||||
top: unset;
|
||||
height: calc(100% - 64px);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
transform: translateX(${(props) => (props.visible ? "0" : "100%")});
|
||||
}
|
||||
|
||||
&.modal-dialog-aside {
|
||||
padding-bottom: ${(props) =>
|
||||
props.contentPaddingBottom
|
||||
@ -43,4 +74,47 @@ const StyledAside = styled(Container)`
|
||||
}
|
||||
`;
|
||||
StyledAside.defaultProps = { theme: Base };
|
||||
export default StyledAside;
|
||||
|
||||
const StyledControlContainer = styled.div`
|
||||
display: flex;
|
||||
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 450;
|
||||
|
||||
top: 14px;
|
||||
left: -34px;
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
top: 14px;
|
||||
`}
|
||||
|
||||
@media (max-width: 428px) {
|
||||
top: -34px;
|
||||
right: 10px;
|
||||
left: unset;
|
||||
}
|
||||
`;
|
||||
|
||||
StyledControlContainer.defaultProps = { theme: Base };
|
||||
|
||||
const StyledCrossIcon = styled(CrossIcon)`
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
z-index: 455;
|
||||
path {
|
||||
fill: ${(props) => props.theme.catalog.control.fill};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledCrossIcon.defaultProps = { theme: Base };
|
||||
|
||||
export { StyledAside, StyledControlContainer, StyledCrossIcon };
|
||||
|
@ -225,7 +225,12 @@ class ContextMenuButton extends React.Component {
|
||||
zIndex={310}
|
||||
isAside={true}
|
||||
/>
|
||||
<Aside visible={isOpen} scale={false} zIndex={310}>
|
||||
<Aside
|
||||
visible={isOpen}
|
||||
scale={false}
|
||||
zIndex={310}
|
||||
onClose={this.onClose}
|
||||
>
|
||||
<StyledContent>
|
||||
<StyledHeaderContent>
|
||||
<Heading className="header" size="medium" truncate={true}>
|
||||
|
@ -368,7 +368,12 @@ class DatePicker extends Component {
|
||||
zIndex={zIndex}
|
||||
isAside={true}
|
||||
/>
|
||||
<Aside visible={isOpen} scale={false} zIndex={zIndex}>
|
||||
<Aside
|
||||
visible={isOpen}
|
||||
scale={false}
|
||||
zIndex={zIndex}
|
||||
onClose={this.onClose}
|
||||
>
|
||||
<Content>
|
||||
<Header>
|
||||
<Heading className="header" size="medium" truncate={true}>
|
||||
|
@ -207,6 +207,7 @@ class ModalDialog extends React.Component {
|
||||
visible={visible}
|
||||
scale={scale}
|
||||
zIndex={zIndex}
|
||||
onClose={onClose}
|
||||
contentPaddingBottom={contentPaddingBottom}
|
||||
className="modal-dialog-aside not-selectable"
|
||||
withoutBodyScroll={withoutBodyScroll}
|
||||
|
@ -1,23 +1,18 @@
|
||||
import styled from "styled-components";
|
||||
import Scrollbar from "@appserver/components/scrollbar";
|
||||
import { Base } from "@appserver/components/themes";
|
||||
import { tablet } from "@appserver/components/utils/device";
|
||||
|
||||
const StyledHotkeysPanel = styled.div`
|
||||
.hotkeys-panel {
|
||||
width: 500px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.scroll-body {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hotkeys_header {
|
||||
margin: 0 16px;
|
||||
border-bottom: 1px solid #eceef1;
|
||||
padding: 0 16px;
|
||||
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
|
||||
|
||||
.hotkeys_heading {
|
||||
font-weight: 700;
|
||||
@ -69,6 +64,8 @@ const StyledHotkeysPanel = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
StyledHotkeysPanel.defaultProps = { theme: Base };
|
||||
|
||||
const StyledScrollbar = styled(Scrollbar)`
|
||||
position: relative;
|
||||
padding: 16px 0;
|
||||
|
@ -46,7 +46,7 @@ const HotkeyPanel = ({ visible, setHotkeyPanelVisible, t, tReady }) => {
|
||||
return (
|
||||
<StyledHotkeysPanel>
|
||||
<Backdrop onClick={onClose} visible={visible} isAside={true} />
|
||||
<Aside className="hotkeys-panel" visible={visible}>
|
||||
<Aside className="hotkeys-panel" visible={visible} onClose={onClose}>
|
||||
<div className="hotkeys_header">
|
||||
<Heading className="hotkeys_heading">{t("Hotkeys")}</Heading>
|
||||
</div>
|
||||
|
@ -168,7 +168,11 @@ class NewFilesPanel extends React.Component {
|
||||
zIndex={zIndex}
|
||||
isAside={true}
|
||||
/>
|
||||
<Aside className="header_aside-panel" visible={visible}>
|
||||
<Aside
|
||||
className="header_aside-panel"
|
||||
visible={visible}
|
||||
onClose={this.onClose}
|
||||
>
|
||||
<StyledContent>
|
||||
<StyledHeaderContent>
|
||||
<Heading
|
||||
|
@ -92,24 +92,6 @@ const StyledAsidePanel = styled.div`
|
||||
}
|
||||
}
|
||||
|
||||
.header_aside-panel {
|
||||
transition: unset;
|
||||
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
|
||||
width: 480px;
|
||||
max-width: 480px;
|
||||
overflow-y: hidden;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
position: fixed;
|
||||
|
||||
top: 64px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
width: 100%;
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
}
|
||||
${PanelStyles}
|
||||
`;
|
||||
|
||||
@ -123,26 +105,6 @@ const StyledVersionHistoryPanel = styled.div`
|
||||
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
|
||||
width: 480px;
|
||||
max-width: 480px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.version-history-aside-panel {
|
||||
transition: unset;
|
||||
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
|
||||
width: 480px;
|
||||
max-width: 480px;
|
||||
overflow-y: hidden;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
position: fixed;
|
||||
|
||||
top: 64px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
width: 100%;
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
}
|
||||
|
||||
.version-history-panel-header {
|
||||
@ -159,7 +121,6 @@ const StyledVersionHistoryPanel = styled.div`
|
||||
padding-top: ${(props) => (props.isLoading ? "16px" : null)};
|
||||
padding-bottom: ${(props) => (props.isLoading ? "0px" : null)};
|
||||
margin-left: 16px;
|
||||
border-top: ${(props) => props.theme.filesPanels.versionHistory.borderTop};
|
||||
|
||||
height: calc(100% - 53px);
|
||||
box-sizing: border-box;
|
||||
@ -253,6 +214,10 @@ const StyledContent = styled.div`
|
||||
background-color: ${(props) =>
|
||||
props.theme.filesPanels.content.backgroundColor};
|
||||
|
||||
.upload-panel_header-content {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.header_aside-panel-header {
|
||||
max-width: 500px;
|
||||
margin: 0 0 0 16px;
|
||||
@ -308,6 +273,10 @@ const StyledHeaderContent = styled.div`
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
|
||||
margin-right: -16px;
|
||||
|
||||
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
|
||||
|
||||
.upload_panel-icons-container {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
@ -330,6 +299,8 @@ const StyledHeaderContent = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
StyledHeaderContent.defaultProps = { theme: Base };
|
||||
|
||||
const StyledBody = styled.div`
|
||||
&.files-operations-body {
|
||||
padding: 0 0 0 16px;
|
||||
|
@ -100,6 +100,7 @@ class UploadPanelComponent extends React.Component {
|
||||
className="header_aside-panel"
|
||||
visible={visible}
|
||||
withoutBodyScroll
|
||||
onClose={this.onClose}
|
||||
>
|
||||
<StyledContent>
|
||||
<StyledHeaderContent className="upload-panel_header-content">
|
||||
|
@ -18,20 +18,9 @@ import { inject, observer } from "mobx-react";
|
||||
import config from "../../../../package.json";
|
||||
|
||||
class PureVersionHistoryPanel extends React.Component {
|
||||
componentDidUpdate(preProps) {
|
||||
const { isTabletView, fileId } = this.props;
|
||||
if (isTabletView !== preProps.isTabletView && isTabletView) {
|
||||
this.redirectToPage(fileId);
|
||||
}
|
||||
}
|
||||
|
||||
redirectToPage = (fileId) => {
|
||||
this.onClose();
|
||||
history.replace(`${this.props.homepage}/${fileId}/history`);
|
||||
};
|
||||
|
||||
onClose = () => {
|
||||
this.props.setIsVerHistoryPanel(false);
|
||||
const { setIsVerHistoryPanel } = this.props;
|
||||
setIsVerHistoryPanel(false);
|
||||
};
|
||||
|
||||
render() {
|
||||
@ -51,7 +40,12 @@ class PureVersionHistoryPanel extends React.Component {
|
||||
zIndex={zIndex}
|
||||
isAside={true}
|
||||
/>
|
||||
<Aside className="version-history-aside-panel" withoutBodyScroll>
|
||||
<Aside
|
||||
className="version-history-aside-panel"
|
||||
visible={visible}
|
||||
onClose={this.onClose}
|
||||
withoutBodyScroll
|
||||
>
|
||||
<StyledContent>
|
||||
<StyledHeaderContent className="version-history-panel-header">
|
||||
{versions && !isLoading ? (
|
||||
|
@ -10,32 +10,6 @@ import { SectionHeaderContent, SectionBodyContent } from "./Section";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
class PureVersionHistory extends React.Component {
|
||||
componentDidMount() {
|
||||
const { isTabletView } = this.props;
|
||||
|
||||
if (!isTabletView) {
|
||||
this.redirectToPanelView();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { isTabletView } = this.props;
|
||||
if (isTabletView !== prevProps.isTabletView && !isTabletView) {
|
||||
this.redirectToPanelView();
|
||||
}
|
||||
}
|
||||
|
||||
redirectToPanelView = () => {
|
||||
const { setIsVerHistoryPanel } = this.props;
|
||||
setIsVerHistoryPanel(true);
|
||||
this.redirectToHomepage();
|
||||
};
|
||||
|
||||
redirectToHomepage = () => {
|
||||
const { history } = this.props;
|
||||
history.goBack();
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isLoading, versions, showProgressBar } = this.props;
|
||||
|
||||
|
@ -16,8 +16,7 @@ class VersionHistoryStore {
|
||||
makeAutoObservable(this);
|
||||
this.filesStore = filesStore;
|
||||
|
||||
const isTabletView = window.innerWidth <= size.tablet;
|
||||
if (isTabletView && this.versions) {
|
||||
if (this.versions) {
|
||||
//TODO: Files store in not initialized on versionHistory page. Need socket.
|
||||
|
||||
const { socketHelper } = this.filesStore.settingsStore;
|
||||
@ -52,13 +51,21 @@ class VersionHistoryStore {
|
||||
|
||||
setIsVerHistoryPanel = (isVisible) => {
|
||||
this.isVisible = isVisible;
|
||||
!isVisible && this.setVerHistoryFileId(null);
|
||||
|
||||
if (!isVisible) {
|
||||
this.setVersions(null);
|
||||
this.setVerHistoryFileId(null);
|
||||
}
|
||||
};
|
||||
|
||||
setVerHistoryFileId = (fileId) => {
|
||||
this.fileId = fileId;
|
||||
};
|
||||
|
||||
setVersions = (versions) => {
|
||||
this.versions = versions;
|
||||
};
|
||||
|
||||
//setFileVersions
|
||||
setVerHistoryFileVersions = (versions) => {
|
||||
const file = this.filesStore.files.find((item) => item.id == this.fileId);
|
||||
|
@ -11,6 +11,8 @@ const AboutDialog = (props) => {
|
||||
const { t, ready } = useTranslation(["About", "Common"]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{visible && (
|
||||
<ModalDialogContainer
|
||||
isLoading={!ready}
|
||||
visible={visible}
|
||||
@ -18,9 +20,14 @@ const AboutDialog = (props) => {
|
||||
>
|
||||
<ModalDialog.Header>{t("AboutHeader")}</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<AboutContent personal={personal} buildVersionInfo={buildVersionInfo} />
|
||||
<AboutContent
|
||||
personal={personal}
|
||||
buildVersionInfo={buildVersionInfo}
|
||||
/>
|
||||
</ModalDialog.Body>
|
||||
</ModalDialogContainer>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -35,6 +35,8 @@ const DebugInfoDialog = (props) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{visible && (
|
||||
<ModalDialog
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
@ -61,6 +63,8 @@ const DebugInfoDialog = (props) => {
|
||||
</Box>
|
||||
</ModalDialog.Body>
|
||||
</ModalDialog>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user