From 352cfaf2f1e7c6416df9122043e6903e1273e3f6 Mon Sep 17 00:00:00 2001
From: Artem Tarasov <artem.tarasov@onlyoffice.com>
Date: Mon, 12 Apr 2021 18:02:53 +0300
Subject: [PATCH] Web: Files: fix layout

---
 .../pages/Home/Section/Body/FilesContent.js   | 32 +++++++++++--------
 .../Section/Body/sub-components/Badges.js     | 23 +++++++------
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js
index 77aa923d96..a50a7daa4b 100644
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js
+++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesContent.js
@@ -28,7 +28,7 @@ import EditingWrapperComponent from "./sub-components/EditingWrapperComponent";
 import { SimpleTileContent } from "./FilesTile/SimpleTileContent";
 import { SimpleRowContent } from "./FilesRow/SimpleRowContent";
 
-import BadgesFile from "./sub-components/Badges";
+import Badges from "./sub-components/Badges";
 
 const sideColor = "#A3A9AE";
 
@@ -564,22 +564,25 @@ class FilesContent extends React.Component {
           >
             {titleWithoutExt}
           </Link>
-          <div className="badges">
-            <Text
-              className="badge-ext"
-              as="span"
-              color="#A3A9AE"
-              fontSize="15px"
-              fontWeight={600}
-              title={fileExst}
-              truncate={true}
-            >
-              {fileExst}
-            </Text>
 
-            <BadgesFile
+          <div className="badges">
+            {fileExst && (
+              <Text
+                className="badge-ext"
+                as="span"
+                color="#A3A9AE"
+                fontSize="15px"
+                fontWeight={600}
+                title={fileExst}
+                truncate={true}
+              >
+                {fileExst}
+              </Text>
+            )}
+            <Badges
               item={item}
               newItems={this.state.newItems}
+              canWebEdit={canWebEdit}
               onFilesClick={this.onFilesClick}
               onClickLock={this.onClickLock}
               onClickFavorite={this.onClickFavorite}
@@ -587,6 +590,7 @@ class FilesContent extends React.Component {
               onBadgeClick={this.onBadgeClick}
             />
           </div>
+
           {viewAs !== "tile" && (
             <Text
               containerMinWidth="120px"
diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/sub-components/Badges.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/sub-components/Badges.js
index 5389d3b1bb..a14b9d6e3a 100644
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Body/sub-components/Badges.js
+++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Body/sub-components/Badges.js
@@ -29,7 +29,7 @@ export const StyledFileActionsLockedIcon = styled(FileActionsLockedIcon)`
   }
 `;
 
-const BadgesFile = (props) => {
+const Badges = (props) => {
   const {
     newItems,
     viewAs,
@@ -37,6 +37,7 @@ const BadgesFile = (props) => {
     canWebEdit,
     isTrashFolder,
     canConvert,
+    accessToEdit,
 
     onFilesClick,
     onClickLock,
@@ -47,13 +48,9 @@ const BadgesFile = (props) => {
   const { id, locked, fileStatus, versionGroup, access, title } = item;
   const { fileExst } = item;
 
-  const accessToEdit =
-    access === ShareAccessRights.FullAccess ||
-    access === ShareAccessRights.None; // TODO: fix access type for owner (now - None)
-
   const showNew = !!newItems;
   return fileExst ? (
-    <div className="files-badges">
+    <>
       {/* TODO: Uncomment after fix conversation {canConvert && !isTrashFolder && (
                   <IconButton
                     onClick={this.setConvertDialogVisible}
@@ -131,7 +128,7 @@ const BadgesFile = (props) => {
           data-id={id}
         />
       )}
-    </div>
+    </>
   ) : (
     showNew && (
       <Badge
@@ -151,7 +148,13 @@ const BadgesFile = (props) => {
   );
 };
 
-export default inject(({ filesStore }, { item }) => {
+export default inject(({ filesStore, treeFoldersStore }, { item }) => {
   const { viewAs } = filesStore;
-  return { viewAs };
-})(observer(BadgesFile));
+  const { isRecycleBinFolder: isTrashFolder } = treeFoldersStore;
+  const { access } = item;
+  const accessToEdit =
+    access === ShareAccessRights.FullAccess ||
+    access === ShareAccessRights.None; // TODO: fix access type for owner (now - None)
+
+  return { viewAs, isTrashFolder, accessToEdit };
+})(observer(Badges));