Web: fix article main button view (now correct display mobile main button when view port is increased/decreased)

packages/asc-web-common/components/Article/index.js

@@ -113,7 +113,7 @@ const Article = ({
           <SubArticleHeader showText={showText} onClick={toggleShowText}>
             {articleHeaderContent ? articleHeaderContent.props.children : null}
           </SubArticleHeader>
-          {articleMainButtonContent ? (
+          {articleMainButtonContent && !isMobileOnly && !isMobileUtils() ? (
             <SubArticleMainButton showText={showText}>
               {articleMainButtonContent.props.children}
             </SubArticleMainButton>
@@ -128,6 +128,11 @@ const Article = ({
           <SubArticleBackdrop onClick={toggleArticleOpen} />
         </>
       )}
+      {articleMainButtonContent && (isMobileOnly || isMobileUtils()) ? (
+        <SubArticleMainButton showText={showText}>
+          {articleMainButtonContent.props.children}
+        </SubArticleMainButton>
+      ) : null}
     </>
   );
 };

packages/asc-web-common/components/Article/styled-article.js

@@ -212,22 +212,16 @@ StyledMenuIcon.defaultProps = { theme: Base };
 const StyledArticleMainButton = styled.div`
   padding: 0px 20px 16px;
   max-width: 216px;
+
   @media ${tablet} {
-    display: none;
+    padding: 0;
+    margin: 0;
   }
 
-  @media ${mobile} {
-    display: none;
-  }
-
-  ${isTablet &&
+  ${isMobile &&
   css`
-    display: none;
-  `}
-
-  ${isMobileOnly &&
-  css`
-    display: none;
+    padding: 0;
+    margin: 0;
   `}
 `;
 

products/ASC.Files/Client/src/components/Article/MainButton/MobileView.js

@@ -29,7 +29,6 @@ const MobileView = ({
   titleProp,
   actionOptions,
   buttonOptions,
-  sectionWidth,
   files,
   clearUploadData,
   setUploadPanelVisible,
@@ -146,7 +145,6 @@ const MobileView = ({
 
   return (
     <StyledMainButtonMobile
-      sectionWidth={sectionWidth}
       actionOptions={actionOptions}
       isOpenButton={isOpenButton}
       onUploadClick={openButtonToggler}

products/ASC.Files/Client/src/components/Article/MainButton/index.js

@@ -1,7 +1,7 @@
 import React from "react";
-import PropTypes from "prop-types";
+
 import { inject, observer } from "mobx-react";
-import { withRouter } from "react-router";
+
 import MainButton from "@appserver/components/main-button";
 import { withTranslation } from "react-i18next";
 import { isMobile } from "react-device-detect";
@@ -12,14 +12,13 @@ import {
 import Loaders from "@appserver/common/components/Loaders";
 import { FileAction } from "@appserver/common/constants";
 import { encryptionUploadDialog } from "../../../helpers/desktop";
-import config from "../../../../package.json";
 
 import MobileView from "./MobileView";
-import withLoader from "../../../HOCs/withLoader";
 
 const ArticleMainButtonContent = (props) => {
   const {
     t,
+    showText,
     isDisabled,
     canCreate,
     isPrivacy,
@@ -28,9 +27,9 @@ const ArticleMainButtonContent = (props) => {
     startUpload,
     setAction,
     setSelectFileDialogVisible,
-    sectionWidth,
     isArticleLoading,
     isFavoritesFolder,
+    isShareFolder,
     isRecentFolder,
     isCommonFolder,
     isRecycleBinFolder,
@@ -42,6 +41,12 @@ const ArticleMainButtonContent = (props) => {
   const [uploadActions, setUploadActions] = React.useState([]);
   const [model, setModel] = React.useState([]);
 
+  const [isMobileView, setIsMobileView] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMobileView(isMobile || isMobileUtils() || isTabletUtils());
+  }, [showText]);
+
   const onCreate = React.useCallback(
     (e) => {
       const format = e.action || null;
@@ -216,17 +221,18 @@ const ArticleMainButtonContent = (props) => {
 
   return (
     <>
-      {isMobile || isMobileUtils() || isTabletUtils() ? (
+      {isMobileView ? (
         <>
           {!isFavoritesFolder &&
             !isRecentFolder &&
             !isCommonFolder &&
-            !isRecycleBinFolder && (
+            !isShareFolder &&
+            !isRecycleBinFolder &&
+            !isArticleLoading && (
               <MobileView
                 titleProp={t("Upload")}
                 actionOptions={actions}
                 buttonOptions={uploadActions}
-                sectionWidth={sectionWidth}
               />
             )}
         </>
@@ -267,7 +273,7 @@ const ArticleMainButtonContent = (props) => {
 };
 
 export default inject(
-  ({ filesStore, dialogsStore, uploadDataStore, treeFoldersStore }) => {
+  ({ auth, filesStore, dialogsStore, uploadDataStore, treeFoldersStore }) => {
     const {
       isLoaded,
       firstLoad,
@@ -281,6 +287,7 @@ export default inject(
       isRecentFolder,
       isCommonFolder,
       isRecycleBinFolder,
+      isShareFolder,
     } = treeFoldersStore;
     const { startUpload } = uploadDataStore;
     const { setSelectFileDialogVisible } = dialogsStore;
@@ -288,12 +295,15 @@ export default inject(
     const isArticleLoading = (!isLoaded || isLoading) && firstLoad;
 
     return {
+      showText: auth.settingsStore.showText,
+
       isArticleLoading,
       isPrivacy: isPrivacyFolder,
       isFavoritesFolder,
       isRecentFolder,
       isCommonFolder,
       isRecycleBinFolder,
+      isShareFolder,
       canCreate,
 
       setAction: fileActionStore.setAction,

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

@@ -2,10 +2,7 @@ import React, { useEffect } from "react";
 import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { isMobile } from "react-device-detect";
-import {
-  isMobile as isMobileUtils,
-  isTablet as isTabletUtils,
-} from "@appserver/components/utils/device";
+
 import { observer, inject } from "mobx-react";
 import FilesRowContainer from "./RowsView/FilesRowContainer";
 import FilesTileContainer from "./TilesView/FilesTileContainer";
@@ -14,7 +11,6 @@ import withLoader from "../../../../HOCs/withLoader";
 import TableView from "./TableView/TableContainer";
 import withHotkeys from "../../../../HOCs/withHotkeys";
 import { Consumer } from "@appserver/components/utils/context";
-import { ArticleMainButtonContent } from "../../../../components/Article";
 
 let currentDroppable = null;
 let isDragActive = false;
@@ -206,23 +202,14 @@ const SectionBodyContent = (props) => {
         (!fileActionId && isEmptyFilesList) || null ? (
           <>
             <EmptyContainer />
-            {(isMobile || isMobileUtils() || isTabletUtils()) && (
-              <ArticleMainButtonContent sectionWidth={context.sectionWidth} />
-            )}
           </>
         ) : viewAs === "tile" ? (
           <>
             <FilesTileContainer sectionWidth={context.sectionWidth} t={t} />
-            {(isMobile || isMobileUtils() || isTabletUtils()) && (
-              <ArticleMainButtonContent sectionWidth={context.sectionWidth} />
-            )}
           </>
         ) : viewAs === "table" ? (
           <>
             <TableView sectionWidth={context.sectionWidth} tReady={tReady} />
-            {(isMobile || isMobileUtils() || isTabletUtils()) && (
-              <ArticleMainButtonContent sectionWidth={context.sectionWidth} />
-            )}
           </>
         ) : (
           <>
@@ -230,9 +217,6 @@ const SectionBodyContent = (props) => {
               sectionWidth={context.sectionWidth}
               tReady={tReady}
             />
-            {(isMobile || isMobileUtils() || isTabletUtils()) && (
-              <ArticleMainButtonContent sectionWidth={context.sectionWidth} />
-            )}
           </>
         )
       }

products/ASC.Files/Client/src/pages/Home/index.js

@@ -2,6 +2,10 @@ import React from "react";
 //import PropTypes from "prop-types";
 import { withRouter } from "react-router";
 import { isMobile } from "react-device-detect";
+import {
+  isMobile as isMobileUtils,
+  isTablet as isTabletUtils,
+} from "@appserver/components/utils/device";
 import axios from "axios";
 import toastr from "@appserver/components/toast/toastr";
 import Section from "@appserver/common/components/Section";
@@ -18,6 +22,8 @@ import {
   SectionPagingContent,
 } from "./Section";
 
+import { ArticleMainButtonContent } from "../../components/Article";
+
 import { createTreeFolders } from "../../helpers/files-helpers";
 import MediaViewer from "./MediaViewer";
 import DragTooltip from "../../components/DragTooltip";
@@ -317,7 +323,9 @@ class PureHome extends React.Component {
           <Section.SectionBody>
             <Consumer>
               {(context) => (
-                <SectionBodyContent sectionWidth={context.sectionWidth} />
+                <>
+                  <SectionBodyContent sectionWidth={context.sectionWidth} />
+                </>
               )}
             </Consumer>
           </Section.SectionBody>

products/ASC.People/Client/src/components/Article/MainButton/index.js

@@ -148,7 +148,8 @@ class ArticleMainButtonContent extends React.Component {
 
     return isAdmin ? (
       <>
-        {isMobile || isMobileUtils() || isTabletUtils() ? (
+        {(isMobile || isMobileUtils() || isTabletUtils()) &&
+        !isArticleLoading ? (
           <MobileView
             labelProps={t("OtherOperations")}
             actionOptions={menuModel}
@@ -202,6 +203,7 @@ export default withRouter(
       guestCaption,
       groupCaption,
       toggleShowText: auth.settingsStore.toggleShowText,
+      showText: auth.settingsStore.showText,
       isArticleLoading,
     };
   })(

products/ASC.People/Client/src/pages/Home/Section/Body/EmptyScreen.js

@@ -68,15 +68,7 @@ const EmptyScreen = ({ resetFilter, isEmptyGroup, setIsLoading }) => {
           </Grid>
         }
       />
-      {isMobile || isMobileUtils() || isTabletUtils() ? (
-        <Consumer>
-          {(context) => (
-            <ArticleMainButtonContent sectionWidth={context.sectionWidth} />
-          )}
-        </Consumer>
-      ) : (
-        <></>
-      )}
+      ) : (<></>)
     </>
   );
 };