Web: fixed document catalog loader

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

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;

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

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;

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}>
         <PageLayout.ArticleHeader>
           <ArticleHeaderContent />
         </PageLayout.ArticleHeader>
@@ -64,12 +68,19 @@ class PureVersionHistory extends React.Component {
           <ArticleBodyContent />
         </PageLayout.ArticleBody>
 
+        <PageLayout.CatalogHeader>
+          <CatalogHeaderContent />
+        </PageLayout.CatalogHeader>
+        <PageLayout.CatalogMainButton>
+          <CatalogMainButtonContent />
+        </PageLayout.CatalogMainButton>
+        <PageLayout.CatalogBody>
+          <CatalogBodyContent />
+        </PageLayout.CatalogBody>
+
         <PageLayout.SectionHeader>
           {versions && !isLoading ? (
-            <SectionHeaderContent
-              title={versions[0].title}
-              onClickBack={this.redirectToHomepage}
-            />
+            <SectionHeaderContent title={versions[0].title} onClickBack={this.redirectToHomepage} />
           ) : (
             <Loaders.SectionHeader title="version-history-title-loader" />
           )}
@@ -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,