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

Merge branch 'release/v1.2' of github.com:ONLYOFFICE/AppServer into release/v1.2

Browse Source
This commit is contained in:
Nikita Gopienko 2022-05-05 12:22:11 +03:00
commit bfa7b2d544
16 changed files with 192 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/asc-web-common/components/Section/sub-components/info-panel.js
View File

@ -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;

14
packages/asc-web-components/aside/aside.js
View File

@ -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,

84
packages/asc-web-components/aside/styled-aside.js
View File

@ -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 };

7
packages/asc-web-components/context-menu-button/index.js
View File

@ -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}>

7
packages/asc-web-components/date-picker/index.js
View File

@ -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}>

1
packages/asc-web-components/modal-dialog/index.js
View File

@ -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}

13
products/ASC.Files/Client/src/components/panels/HotkeysPanel/StyledHotkeys.js
View File

@ -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;

2
products/ASC.Files/Client/src/components/panels/HotkeysPanel/index.js
View File

@ -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>

6
products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js
View File

@ -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

49
products/ASC.Files/Client/src/components/panels/StyledPanels.js
View File

@ -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;

1
products/ASC.Files/Client/src/components/panels/UploadPanel/index.js
View File

@ -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">

22
products/ASC.Files/Client/src/components/panels/VersionHistoryPanel/index.js
View File

@ -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 ? (

26
products/ASC.Files/Client/src/pages/VersionHistory/index.js
View File

@ -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;

13
products/ASC.Files/Client/src/store/VersionHistoryStore.js
View File

@ -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);

9
web/ASC.Web.Client/src/components/pages/About/AboutDialog.js
View File

@ -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>
)}
</>
);
};

4
web/ASC.Web.Client/src/components/pages/DebugInfo/index.js
View File

@ -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>
)}
</>
);
};