Merge branch 'feature/upload-panel' of github.com:ONLYOFFICE/AppServer into feature/upload-panel

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

@@ -252,6 +252,7 @@ class PureHome extends React.Component {
         <PageLayout
           withBodyScroll
           withBodyAutoFocus={!isMobile}
+          uploadFiles
           onDrop={this.onDrop}
           setSelections={this.props.setSelections}
           onMouseMove={this.onMouseMove}

products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js

@@ -40,6 +40,7 @@ const StyledFileRow = styled(Row)`
 
   .upload_panel-icon {
     margin-left: auto;
+    padding-left: 16px;
     line-height: 24px;
     display: flex;
     align-items: center;
@@ -80,7 +81,7 @@ const StyledFileRow = styled(Row)`
 
 const FileRow = (props) => {
   const {
-    // t,
+    t,
     item,
     uploaded,
     cancelCurrentUpload,
@@ -135,6 +136,7 @@ const FileRow = (props) => {
               <Text
                 fontWeight="600"
                 color={item.error && "#A3A9AE"}
+                truncate
                 // MediaViewer doesn't work
                 /*onClick={() => onMediaClick(item.fileId)}*/
               >
@@ -144,6 +146,7 @@ const FileRow = (props) => {
               <Link
                 fontWeight="600"
                 color={item.error && "#A3A9AE"}
+                truncate
                 href={item.fileInfo ? item.fileInfo.webUrl : ""}
                 target="_blank"
               >
@@ -151,7 +154,7 @@ const FileRow = (props) => {
               </Link>
             )
           ) : (
-            <Text fontWeight="600" color={item.error && "#A3A9AE"}>
+            <Text fontWeight="600" color={item.error && "#A3A9AE"} truncate>
               {name}
             </Text>
           )}
@@ -170,11 +173,11 @@ const FileRow = (props) => {
               <Icons.LoadErrorIcon
                 size="medium"
                 data-for="errorTooltip"
-                data-tip={item.error || /*t("UnknownError")*/ "Unknown Error"}
+                data-tip={item.error || t("UnknownError")}
               />
               <Tooltip
                 id="errorTooltip"
-                className="tooltip-custom"
+                offsetTop={64}
                 getContent={(dataTip) => <Text fontSize="13px">{dataTip}</Text>}
                 effect="float"
                 place="left"

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { Backdrop, Heading, Aside, IconButton } from "asc-web-components";
 import { connect } from "react-redux";
-// import { withTranslation } from "react-i18next";
-// import { utils as commonUtils } from "asc-web-common";
+import { withTranslation } from "react-i18next";
+import { utils as commonUtils } from "asc-web-common";
 import {
   setUploadPanelVisible,
   cancelUpload,
@@ -22,13 +22,13 @@ import {
 } from "../StyledPanels";
 import FileList from "./FileList";
 
-// import { createI18N } from "../../../helpers/i18n";
+import { createI18N } from "../../../helpers/i18n";
 
-// const i18n = createI18N({
-//   page: "UploadPanel",
-//   localesPath: "panels/UploadPanel",
-// });
-//const { changeLanguage } = commonUtils;
+const i18n = createI18N({
+  page: "UploadPanel",
+  localesPath: "panels/UploadPanel",
+});
+const { changeLanguage } = commonUtils;
 
 const DownloadBodyStyle = { height: `calc(100vh - 62px)` };
 
@@ -36,7 +36,7 @@ class UploadPanelComponent extends React.Component {
   constructor(props) {
     super(props);
 
-    //changeLanguage(i18n);
+    changeLanguage(i18n);
 
     this.ref = React.createRef();
     this.scrollRef = React.createRef();
@@ -73,13 +73,8 @@ class UploadPanelComponent extends React.Component {
   };
 
   render() {
-    console.log("UploadPanel render");
-    const {
-      // t,
-      uploadPanelVisible,
-      sharingPanelVisible,
-      uploaded,
-    } = this.props;
+    //console.log("UploadPanel render");
+    const { t, uploadPanelVisible, sharingPanelVisible, uploaded } = this.props;
 
     const visible = uploadPanelVisible;
     const zIndex = 310;
@@ -96,8 +91,7 @@ class UploadPanelComponent extends React.Component {
           <StyledContent>
             <StyledHeaderContent className="upload-panel_header-content">
               <Heading className="upload_panel-header" size="medium" truncate>
-                {/* {t("Uploads")}  TODO: fix translations render */}
-                Uploads
+                {t("Uploads")}
               </Heading>
               <div className="upload_panel-icons-container">
                 <div className="upload_panel-remove-icon">
@@ -143,11 +137,11 @@ class UploadPanelComponent extends React.Component {
   }
 }
 
-// const UploadPanelContainerTranslated = withTranslation()(UploadPanelComponent);
+const UploadPanelContainerTranslated = withTranslation()(UploadPanelComponent);
 
-// const UploadPanel = (props) => (
-//   <UploadPanelContainerTranslated i18n={i18n} {...props} />
-// );
+const UploadPanel = (props) => (
+  <UploadPanelContainerTranslated i18n={i18n} {...props} />
+);
 
 const mapStateToProps = (state) => {
   //console.log("mapStateToProps");
@@ -162,4 +156,4 @@ export default connect(mapStateToProps, {
   setUploadPanelVisible,
   cancelUpload,
   clearUploadData,
-})(UploadPanelComponent);
+})(UploadPanel);

products/ASC.Files/Client/src/store/files/actions.js

@@ -906,6 +906,9 @@ export const cancelUpload = () => {
       uploaded: true,
     };
 
+    if (newUploadData.files.length === 0)
+      dispatch(setUploadPanelVisible(false));
+
     dispatch(setUploadData(newUploadData));
   };
 };