From 24772e88ad68c66abeb8b99d66e4875e1f2d9166 Mon Sep 17 00:00:00 2001 From: TimofeyBoyko Date: Tue, 28 Sep 2021 18:25:23 +0800 Subject: [PATCH] Web: fixed document catalog loader --- .../StyledDocumentCatalogFolderLoader.js | 2 +- .../sub-components/catalog-backdrop.js | 3 ++ .../sub-components/catalog-header.js | 1 - .../PageLayout/sub-components/catalog.js | 6 +-- .../Client/src/pages/VersionHistory/index.js | 49 +++++++++++-------- 5 files changed, 34 insertions(+), 27 deletions(-) diff --git a/packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/StyledDocumentCatalogFolderLoader.js b/packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/StyledDocumentCatalogFolderLoader.js index 7b11a47ba0..54e2c2971d 100644 --- a/packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/StyledDocumentCatalogFolderLoader.js +++ b/packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/StyledDocumentCatalogFolderLoader.js @@ -6,7 +6,7 @@ const StyledContainer = styled.div` padding: 0 20px; @media ${tablet} { - width: 52px; + width: 100%; padding: 0; } diff --git a/packages/asc-web-common/components/PageLayout/sub-components/catalog-backdrop.js b/packages/asc-web-common/components/PageLayout/sub-components/catalog-backdrop.js index 337c23ba3a..1e276c1a4f 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/catalog-backdrop.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/catalog-backdrop.js @@ -12,6 +12,9 @@ const StyledBackdrop = styled(Backdrop)` position: fixed; top: 0; left: 0; + background: rgba(6, 22, 38, 0.15); + -webkit-backdrop-filter: blur(18px); + backdrop-filter: blur(18px); cursor: initial; @media ${mobile} { display: block; diff --git a/packages/asc-web-common/components/PageLayout/sub-components/catalog-header.js b/packages/asc-web-common/components/PageLayout/sub-components/catalog-header.js index e7596fd5dc..c62c188725 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/catalog-header.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/catalog-header.js @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import Heading from '@appserver/components/heading'; -import Backdrop from '@appserver/components/backdrop'; import { mobile, tablet } from '@appserver/components/utils/device'; import MenuIcon from '@appserver/components/public/static/images/menu.react.svg'; diff --git a/packages/asc-web-common/components/PageLayout/sub-components/catalog.js b/packages/asc-web-common/components/PageLayout/sub-components/catalog.js index c920954423..3eaeae9311 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/catalog.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/catalog.js @@ -1,17 +1,15 @@ import React from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import PropTypes from 'prop-types'; import { Resizable } from 're-resizable'; import { isMobile } from 'react-device-detect'; import { mobile, tablet } from '@appserver/components/utils/device'; const StyledCatalog = styled.div` - @supports (-webkit-touch-callout: none) { + @media (hover: none) { position: relative; top: 48px; - left: 0; } - .resizable-block { display: flex; flex-direction: column; diff --git a/products/ASC.Files/Client/src/pages/VersionHistory/index.js b/products/ASC.Files/Client/src/pages/VersionHistory/index.js index 00241f8a64..3795d0f018 100644 --- a/products/ASC.Files/Client/src/pages/VersionHistory/index.js +++ b/products/ASC.Files/Client/src/pages/VersionHistory/index.js @@ -1,17 +1,22 @@ -import React from "react"; -import PropTypes from "prop-types"; -import { withRouter } from "react-router"; -import PageLayout from "@appserver/common/components/PageLayout"; -import Loaders from "@appserver/common/components/Loaders"; -import { withTranslation } from "react-i18next"; +import React from 'react'; +import PropTypes from 'prop-types'; +import { withRouter } from 'react-router'; +import PageLayout from '@appserver/common/components/PageLayout'; +import Loaders from '@appserver/common/components/Loaders'; +import { withTranslation } from 'react-i18next'; import { ArticleHeaderContent, ArticleBodyContent, ArticleMainButtonContent, -} from "../../components/Article"; -import { SectionHeaderContent, SectionBodyContent } from "./Section"; +} from '../../components/Article'; +import { + CatalogBodyContent, + CatalogHeaderContent, + CatalogMainButtonContent, +} from '../../components/Catalog'; +import { SectionHeaderContent, SectionBodyContent } from './Section'; //import { setDocumentTitle } from "../../../helpers/utils"; -import { inject, observer } from "mobx-react"; +import { inject, observer } from 'mobx-react'; class PureVersionHistory extends React.Component { componentDidMount() { @@ -50,8 +55,7 @@ class PureVersionHistory extends React.Component { headerBorderBottom={true} showSecondaryProgressBar={showProgressBar} secondaryProgressBarIcon="file" - showSecondaryButtonAlert={false} - > + showSecondaryButtonAlert={false}> @@ -64,12 +68,19 @@ class PureVersionHistory extends React.Component { + + + + + + + + + + {versions && !isLoading ? ( - + ) : ( )} @@ -83,7 +94,7 @@ class PureVersionHistory extends React.Component { } } -const VersionHistory = withTranslation("VersionHistory")(PureVersionHistory); +const VersionHistory = withTranslation('VersionHistory')(PureVersionHistory); VersionHistory.propTypes = { history: PropTypes.object.isRequired, @@ -91,11 +102,7 @@ VersionHistory.propTypes = { export default inject(({ auth, filesStore, versionHistoryStore }) => { const { filter, isLoading } = filesStore; - const { - setIsVerHistoryPanel, - versions, - showProgressBar, - } = versionHistoryStore; + const { setIsVerHistoryPanel, versions, showProgressBar } = versionHistoryStore; return { isTabletView: auth.settingsStore.isTabletView,