Web: Files: VersionHistory: applied isTabletView flag, added redirect to a separate page if isTabletView = true

products/ASC.Files/Client/src/App.js

@@ -21,6 +21,7 @@ import {
   Main,
   utils,
   toastr,
+  Layout,
 } from "asc-web-common";
 
 const {
@@ -89,46 +90,53 @@ class App extends React.Component {
 
   render() {
     const { homepage } = this.props;
+    console.log(Layout);
 
     return navigator.onLine ? (
-      <Router history={history}>
-        {!this.isEditor && <NavMenu />}
-        <Main>
-          <Suspense fallback={null}>
-            <Switch>
-              <Redirect exact from="/" to={`${homepage}`} />
-              <PrivateRoute
-                exact
-                path={`${homepage}/settings/:setting`}
-                component={Settings}
-              />
-              <Route
-                exact
-                path={`${homepage}/doceditor`}
-                component={DocEditor}
-              />
-              <PrivateRoute
-                exact
-                path={`${homepage}/:fileId/history`}
-                component={VersionHistory}
-              />
-              <PrivateRoute exact path={homepage} component={Home} />
-              <PrivateRoute path={`${homepage}/filter`} component={Home} />
-              <PublicRoute
-                exact
-                path={[
-                  "/login",
-                  "/login/error=:error",
-                  "/login/confirmed-email=:confirmedEmail",
-                ]}
-                component={Login}
-              />
-              <PrivateRoute exact path={`/error=:error`} component={Error520} />
-              <PrivateRoute component={Error404} />
-            </Switch>
-          </Suspense>
-        </Main>
-      </Router>
+      <Layout>
+        <Router history={history}>
+          {!this.isEditor && <NavMenu />}
+          <Main>
+            <Suspense fallback={null}>
+              <Switch>
+                <Redirect exact from="/" to={`${homepage}`} />
+                <PrivateRoute
+                  exact
+                  path={`${homepage}/settings/:setting`}
+                  component={Settings}
+                />
+                <Route
+                  exact
+                  path={`${homepage}/doceditor`}
+                  component={DocEditor}
+                />
+                <PrivateRoute
+                  exact
+                  path={`${homepage}/:fileId/history`}
+                  component={VersionHistory}
+                />
+                <PrivateRoute exact path={homepage} component={Home} />
+                <PrivateRoute path={`${homepage}/filter`} component={Home} />
+                <PublicRoute
+                  exact
+                  path={[
+                    "/login",
+                    "/login/error=:error",
+                    "/login/confirmed-email=:confirmedEmail",
+                  ]}
+                  component={Login}
+                />
+                <PrivateRoute
+                  exact
+                  path={`/error=:error`}
+                  component={Error520}
+                />
+                <PrivateRoute component={Error404} />
+              </Switch>
+            </Suspense>
+          </Main>
+        </Router>
+      </Layout>
     ) : (
       <Offline />
     );

products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js

@@ -97,16 +97,14 @@ import {
   getSharePanelVisible,
   getVisibilityVersionHistoryPanel,
 } from "../../../../../store/files/selectors";
-import {
-  OperationsPanel,
-  VersionHistoryPanel,
-} from "../../../../panels";
+import { OperationsPanel, VersionHistoryPanel } from "../../../../panels";
 const {
   isAdmin,
   getSettings,
   getCurrentUser,
   isEncryptionSupport,
   getOrganizationName,
+  getIsTabletView,
 } = store.auth.selectors;
 //import { getFilterByLocation } from "../../../../../helpers/converters";
 //import config from "../../../../../../package.json";
@@ -246,7 +244,8 @@ class SectionBodyContent extends React.Component {
     const { showMoveToPanel, showCopyPanel, isDrag } = this.state;
     const { isVisibleVersionHistoryPanel } = this.props;
 
-    if (this.props.sharingPanelVisible !== nextProps.sharingPanelVisible) {      return true;
+    if (this.props.sharingPanelVisible !== nextProps.sharingPanelVisible) {
+      return true;
     }
 
     if (this.state.showSharingPanel !== nextState.showSharingPanel) {
@@ -558,15 +557,15 @@ class SectionBodyContent extends React.Component {
     const {
       settings,
       history,
-      isMobile,
       setIsLoading,
       setVisibilityVersionHistoryPanel,
       setVersionHistoryFileId,
+      isTabletView,
     } = this.props;
 
     const fileId = e.currentTarget.dataset.id;
 
-    if (!isMobile && window.innerWidth > 1024) {
+    if (!isTabletView) {
       setIsLoading(true);
       setVersionHistoryFileId(fileId);
       setVisibilityVersionHistoryPanel(true);
@@ -1635,6 +1634,7 @@ class SectionBodyContent extends React.Component {
       mediaViewerMediaFormats,
       tooltipValue,
       isVisibleVersionHistoryPanel,
+      history,
     } = this.props;
 
     const { editingId, showMoveToPanel, showCopyPanel } = this.state;
@@ -1714,6 +1714,7 @@ class SectionBodyContent extends React.Component {
           <VersionHistoryPanel
             visible={isVisibleVersionHistoryPanel}
             onClose={this.onHistoryAction}
+            history={history}
           />
         )}
         <CustomTooltip ref={this.tooltipRef}>{fileMoveTooltip}</CustomTooltip>
@@ -1961,6 +1962,7 @@ const mapStateToProps = (state) => {
     iconOfDraggedFile: getIconOfDraggedFile(state)(state),
     sharingPanelVisible: getSharePanelVisible(state),
     isVisibleVersionHistoryPanel: getVisibilityVersionHistoryPanel(state),
+    isTabletView: getIsTabletView(state),
   };
 };
 

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

@@ -3,12 +3,15 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
 import { Backdrop, Heading, Aside } from "asc-web-components";
-import { api, utils, Loaders } from "asc-web-common";
+import { api, utils, Loaders, store } from "asc-web-common";
 
 import { withTranslation, I18nextProvider } from "react-i18next";
 import { createI18N } from "../../../helpers/i18n";
 
-import { setIsLoading } from "../../../store/files/actions";
+import {
+  setIsLoading,
+  setVisibilityVersionHistoryPanel,
+} from "../../../store/files/actions";
 import { getVersionHistoryFileId } from "../../../store/files/selectors";
 
 import {
@@ -27,6 +30,8 @@ const i18n = createI18N({
 
 const { changeLanguage } = utils;
 
+const { getIsTabletView, getSettingsHomepage } = store.auth.selectors;
+
 class PureVersionHistoryPanel extends React.Component {
   constructor(props) {
     super(props);
@@ -40,6 +45,20 @@ class PureVersionHistoryPanel extends React.Component {
     }
   }
 
+  componentDidUpdate(preProps) {
+    const { isTabletView, fileId } = this.props;
+    if (isTabletView !== preProps.isTabletView && isTabletView) {
+      this.redirectToPage(fileId);
+    }
+  }
+
+  redirectToPage = (fileId) => {
+    const { history, homepage, setVisibilityVersionHistoryPanel } = this.props;
+    setVisibilityVersionHistoryPanel(false);
+
+    history.replace(`${homepage}/${fileId}/history`);
+  };
+
   getFileVersions = (fileId) => {
     const { setIsLoading } = this.props;
 
@@ -133,12 +152,16 @@ VersionHistoryPanelContainer.propTypes = {
 function mapStateToProps(state) {
   return {
     fileId: getVersionHistoryFileId(state),
+    isTabletView: getIsTabletView(state),
+    homepage: getSettingsHomepage(state),
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
     setIsLoading: (isLoading) => dispatch(setIsLoading(isLoading)),
+    setVisibilityVersionHistoryPanel: (isVisible) =>
+      dispatch(setVisibilityVersionHistoryPanel(isVisible)),
   };
 }