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

packages/asc-web-common/components/Navigation/StyledNavigation.js

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
-import { isMobile, isMobileOnly } from "react-device-detect";
+import { isMobileOnly } from "react-device-detect";
-import { tablet, desktop, mobile } from "@appserver/components/utils/device";
+import { tablet, mobile } from "@appserver/components/utils/device";
 
 const StyledContainer = styled.div`
   width: 100% !important;
@@ -22,14 +22,6 @@ const StyledContainer = styled.div`
       props.isRootFolder ? "auto 1fr" : "29px 1fr auto"};
     padding: ${(props) => (props.isDropBox ? "14px 0 5px" : "14px 0 15px")};
   }
-  ${isMobile &&
-  css`
-    width: 100%;
-    grid-template-columns: ${(props) =>
-      props.isRootFolder ? "auto 1fr" : "29px 1fr auto"};
-    padding: ${(props) =>
-      props.isDropBox ? "12px 0 5px" : " 12px 0 13px"} !important;
-  `}
 
   @media ${mobile} {
     padding: ${(props) =>

packages/asc-web-components/context-menu/styled-context-menu.js

@@ -21,6 +21,7 @@ const styledMobileView = css`
   max-height: ${(props) => props.theme.newContextMenu.devices.maxHeight};
   left: ${(props) => props.theme.newContextMenu.devices.left};
   bottom: ${(props) => props.theme.newContextMenu.devices.bottom};
+  border-radius: ${(props) => props.theme.newContextMenu.mobileBorderRadius};
 `;
 
 const StyledContextMenu = styled.div`

packages/asc-web-components/main-button-mobile/index.js

@@ -245,6 +245,7 @@ const MainButtonMobile = (props) => {
         >
           {isMobile || isTablet ? (
             <Scrollbar
+              style={{ height: manualWidth || "400px" }}
               scrollclass="section-scroll"
               stype="mediumBlack"
               ref={dropDownRef}

packages/asc-web-components/table-container/StyledTableContainer.js

@@ -40,10 +40,12 @@ const StyledTableContainer = styled.div`
     border-image-source: ${(props) =>
       props.theme.tableContainer.header.borderImageSource};
     border-top: 0;
-  }
+
-  .lengthen-header {
+    .lengthen-header {
-    border-bottom: ${(props) => props.theme.tableContainer.header.borderBottom};
+      border-bottom: ${(props) =>
-    border-image-source: none;
+        props.theme.tableContainer.header.borderBottom};
+      border-image-source: none;
+    }
   }
 
   .content-container {
@@ -79,7 +81,7 @@ const StyledTableGroupMenu = styled.div`
   align-items: center;
   width: 100%;
   z-index: 199;
-  height: 53px;
+  height: 52px;
   box-shadow: ${(props) => props.theme.tableContainer.groupMenu.boxShadow};
   border-radius: 0px 0px 6px 6px;
   margin: 0;

packages/asc-web-components/themes/base.js

@@ -1227,6 +1227,7 @@ const Base = {
   },
 
   treeNode: {
+    background: "#f3f4f4",
     dragging: {
       draggable: {
         background: lightCumulus,
@@ -2060,7 +2061,7 @@ const Base = {
 
     groupMenu: {
       background: white,
-      borderBottom: "none",
+      borderBottom: "1px solid transparent",
       borderRight: `1px solid ${grayMid}`,
       boxShadow: "0px 5px 20px rgba(4, 15, 27, 7%)",
     },
@@ -2410,6 +2411,7 @@ const Base = {
   newContextMenu: {
     background: white,
     borderRadius: "6px",
+    mobileBorderRadius: "6px 6px 0 0",
     boxShadow: "0px 12px 40px rgba(4, 15, 27, 0.12)",
     padding: "6px 0px",
     border: "none",

packages/asc-web-components/themes/dark.js

@@ -1224,6 +1224,7 @@ const Dark = {
   },
 
   treeNode: {
+    background: "#3D3D3D",
     dragging: {
       draggable: {
         background: "rgba(230, 211, 138, 0.12)",
@@ -2420,6 +2421,7 @@ const Dark = {
   newContextMenu: {
     background: "#3D3D3D",
     borderRadius: "6px",
+    mobileBorderRadius: "6px 6px 0 0",
     boxShadow:
       "0px 12px 24px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.08), 0px 3.2px 2.6px rgba(0, 0, 0, 0.08)",
     padding: "6px 0px",

packages/asc-web-components/tree-menu/index.js

@@ -104,7 +104,7 @@ const StyledTreeMenu = styled(Tree)`
       width: 100%;
       width: ${(props) => props.widthAdditional};
       height: 36px;
-      background-color: #f3f4f4;
+      background-color: ${(props) => props.theme.treeNode.background};
       content: "";
       z-index: 1;
       right: -${(props) => props.multiplicationFactor - 4}px;

products/ASC.Files/Client/public/locales/en/InfoPanel.json

@@ -6,7 +6,7 @@
   "WhoHasAccess": "Who has access",
   "Members": "members",
   "OpenSharingSettings": "Open sharing settings",
-
+  "OFORMsDescription": "Fill out the form online and get a simple Design Project Proposal ready, or just download the fillable template in the desirable format: DOCXF, OFORM, or PDF. <1> Propose a project or a series of projects to an freelance designer team. Outline project and task structure, payments, and terms.</1>",
   "Location": "Location",
   "FileExtension": "File extension",
   "LastModifiedBy": "Last modified by",

products/ASC.Files/Client/src/HOCs/withFileActions.js

@@ -132,7 +132,10 @@ export default function withFileActions(WrappedFileItem) {
       openFileAction(item);
     };
 
-    getContextModel = () => this.props.getModel(this.props.item, this.props.t);
+    getContextModel = () => {
+      const { getModel, item, t, history } = this.props;
+      return getModel(item, t, history);
+    };
 
     render() {
       const {

products/ASC.Files/Client/src/pages/FormGallery/TilesView/FileTile.js

@@ -10,9 +10,7 @@ const FileTile = (props) => {
   return (
     <div ref={props.selectableRef}>
       <Tile key={item.id} item={item}>
-        <SimpleFilesTileContent
+        <SimpleFilesTileContent>
-        //sideColor={theme.filesSection.tilesView.sideColor}
-        >
           <Link
             className="item-file-name"
             containerWidth="100%"
@@ -20,8 +18,6 @@ const FileTile = (props) => {
             fontWeight="600"
             fontSize={isDesktop ? "13px" : "14px"}
             target="_blank"
-            //{...linkStyles} //TODO: OFORM
-            //color={theme.filesSection.tilesView.color}
             isTextOverflow
           >
             {item.attributes.name_form}

products/ASC.Files/Client/src/pages/FormGallery/TilesView/sub-components/Tile.js

@@ -42,8 +42,8 @@ class Tile extends React.PureComponent {
   getIconFile = () => {
     const { thumbnailClick, item } = this.props;
 
-    //const src = item.attributes.card_prewiew.data.attributes.formats.thumbnail.url;
+    const src =
-    const src = item.attributes.card_prewiew.data.attributes.url;
+      item.attributes.template_image.data.attributes.formats.small.url;
     const svgLoader = () => <div style={{ width: "96px" }} />;
 
     return src ? (

products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/GalleryItem.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
-import { withTranslation } from "react-i18next";
+import { withTranslation, Trans } from "react-i18next";
 import { LANGUAGE } from "@appserver/common/constants";
 import Text from "@appserver/components/text";
 import { ReactSVG } from "react-svg";
@@ -23,9 +23,9 @@ const SingleItem = (props) => {
 
   const src = getIcon(32, ".docxf");
   const thumbnailBlank = getIcon(96, ".docxf");
-  const thumbnailUrl = selectedItem.attributes.card_prewiew.data.attributes.url;
 
-  //console.log("item", selectedItem);
+  const thumbnailUrl =
+    selectedItem.attributes.template_image.data.attributes.formats.small.url;
 
   return (
     <>
@@ -69,6 +69,22 @@ const SingleItem = (props) => {
             {selectedItem.attributes.file_pages}
           </Text>
         </div>
+        <Text
+          as="div"
+          fontSize="12px"
+          fontWeight={400}
+          className="oforms-description"
+        >
+          <Trans t={t} i18nKey="OFORMsDescription" ns="InfoPanel">
+            Fill out the form online and get a simple Design Project Proposal
+            ready, or just download the fillable template in the desirable
+            format: DOCXF, OFORM, or PDF.
+            <p className="oforms-description-text">
+              Propose a project or a series of projects to an freelance designer
+              team. Outline project and task structure, payments, and terms.
+            </p>
+          </Trans>
+        </Text>
       </StyledProperties>
     </>
   );

products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/styles/styles.js

@@ -65,8 +65,13 @@ const StyledTitle = styled.div`
 `;
 
 const StyledGalleryThumbnail = styled.div`
-  max-height: 200px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 346px;
   overflow: hidden;
+  border: 1px solid #d0d5da;
+  border-radius: 6px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   .info-panel_gallery-img {
     display: block;
@@ -122,6 +127,14 @@ const StyledProperties = styled.div`
       font-size: 13px;
     }
   }
+
+  .oforms-description {
+    margin-top: 36px;
+
+    .oforms-description-text {
+      margin: 0;
+    }
+  }
 `;
 
 const StyledAccess = styled.div`

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

@@ -5,13 +5,13 @@ import SimpleFilesRow from "./SimpleFilesRow";
 import { isMobile } from "react-device-detect";
 import styled from "styled-components";
 import marginStyles from "./CommonStyles";
-
+import { Base } from "@appserver/components/themes";
-const borderColor = "#ECEEF1";
 
 const StyledRowContainer = styled(RowContainer)`
   .row-selected + .row-wrapper:not(.row-selected) {
     .files-row {
-      border-top: ${`1px ${borderColor} solid`};
+      border-top: ${(props) =>
+        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       margin-top: -3px;
       ${marginStyles}
     }
@@ -21,7 +21,8 @@ const StyledRowContainer = styled(RowContainer)`
     + .row-wrapper:not(.row-hotkey-border)
     + .row-selected {
     .files-row {
-      border-top: ${`1px ${borderColor} solid`};
+      border-top: ${(props) =>
+        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       margin-top: -3px;
       ${marginStyles}
     }
@@ -29,7 +30,8 @@ const StyledRowContainer = styled(RowContainer)`
 
   .row-selected:last-child {
     .files-row {
-      border-bottom: ${`1px ${borderColor} solid`};
+      border-bottom: ${(props) =>
+        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       padding-bottom: 1px;
       ${marginStyles}
     }
@@ -39,12 +41,16 @@ const StyledRowContainer = styled(RowContainer)`
   }
   .row-selected:first-child {
     .files-row {
-      border-top: ${`1px ${borderColor} solid`};
+      border-top: ${(props) =>
+        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
       margin-top: -3px;
       ${marginStyles}
     }
   }
 `;
+
+StyledRowContainer.defaultProps = { theme: Base };
+
 const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
   useEffect(() => {
     if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;

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

@@ -266,4 +266,4 @@ export default withTranslation([
   "Translations",
   "InfoPanel",
   "VersionBadge",
-])(withFileActions(withRouter(withQuickButtons(SimpleFilesRow))));
+])(withRouter(withFileActions(withQuickButtons(SimpleFilesRow))));

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

@@ -382,7 +382,7 @@ const FilesTableRow = (props) => {
 };
 
 export default withTranslation(["Home", "Common", "VersionBadge", "InfoPanel"])(
-  withFileActions(
+  withRouter(
-    withRouter(withContent(withQuickButtons(withBadges(FilesTableRow))))
+    withFileActions(withContent(withQuickButtons(withBadges(FilesTableRow))))
   )
 );

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

@@ -115,8 +115,8 @@ export default inject(({ settingsStore }) => {
   return { getIcon };
 })(
   withTranslation(["Home", "VersionBadge", "InfoPanel"])(
-    withFileActions(
+    withRouter(
-      withRouter(withBadges(withQuickButtons(observer(FileTile))))
+      withFileActions(withBadges(withQuickButtons(observer(FileTile))))
     )
   )
 );

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -484,6 +484,7 @@ class Tile extends React.PureComponent {
                 getContextModel={getContextModel}
                 ref={this.cm}
                 header={contextMenuHeader}
+                withBackdrop={true}
               />
             </StyledOptionButton>
           </>

products/ASC.Files/Client/src/store/ContextOptionsStore.js

@@ -2,7 +2,6 @@ import { makeAutoObservable } from "mobx";
 import copy from "copy-to-clipboard";
 import saveAs from "file-saver";
 import { isMobile } from "react-device-detect";
-import history from "@appserver/common/history";
 import config from "../../package.json";
 import toastr from "studio/toastr";
 import { FileAction, AppServerConfig } from "@appserver/common/constants";
@@ -105,7 +104,7 @@ class ContextOptionsStore {
     this.dialogsStore.setCopyPanelVisible(true);
   };
 
-  showVersionHistory = (id) => {
+  showVersionHistory = (id, history) => {
     const {
       fetchFileVersions,
       setIsVerHistoryPanel,
@@ -343,7 +342,7 @@ class ContextOptionsStore {
     setIsVisible(true);
   };
 
-  getFilesContextOptions = (item, t) => {
+  getFilesContextOptions = (item, t, history) => {
     const { contextOptions } = item;
     const isRootThirdPartyFolder =
       item.providerKey && item.id === item.rootFolderId;
@@ -367,7 +366,7 @@ class ContextOptionsStore {
                 {
                   key: "show-version-history",
                   label: t("ShowVersionHistory"),
-                  onClick: () => this.showVersionHistory(item.id),
+                  onClick: () => this.showVersionHistory(item.id, history),
                   disabled: false,
                 },
               ],
@@ -385,7 +384,7 @@ class ContextOptionsStore {
               key: "show-version-history",
               label: t("ShowVersionHistory"),
               icon: "images/history.react.svg",
-              onClick: () => this.showVersionHistory(item.id),
+              onClick: () => this.showVersionHistory(item.id, history),
               disabled: false,
             },
           ];
@@ -631,7 +630,7 @@ class ContextOptionsStore {
     return options;
   };
 
-  getModel = (item, t) => {
+  getModel = (item, t, history) => {
     const { type, id, extension } = this.filesStore.fileActionStore;
     const { fileExst, contextOptions } = item;
 
@@ -639,7 +638,7 @@ class ContextOptionsStore {
 
     const contextOptionsProps =
       !isEdit && contextOptions && contextOptions.length > 0
-        ? this.getFilesContextOptions(item, t)
+        ? this.getFilesContextOptions(item, t, history)
         : [];
 
     return contextOptionsProps;