Web: Files: fix layout

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"

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));