Web: Client: Home: Section: added file extension for row view and fix tile view

packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js

@@ -64,6 +64,10 @@ const SimpleFilesRowContent = styled(RowContent)`
     }
   }
 
+  .rowMainContainer {
+    margin-inline-end: ${(props) => props.displayFileExtension && "0px"};
+  }
+
   .row_update-text {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -91,7 +95,7 @@ const SimpleFilesRowContent = styled(RowContent)`
 
   .row-content-link {
     padding-block: 12px 0;
-    padding-inline: 0 12px;
+    padding-inline: ${(props) => !props.displayFileExtension && "0px 12px"};
     margin-top: ${(props) =>
       props.theme.interfaceDirection === "rtl" ? "-14px" : "-12px"};
   }
@@ -99,12 +103,17 @@ const SimpleFilesRowContent = styled(RowContent)`
   @media ${tablet} {
     .row-main-container-wrapper {
       display: flex;
-      justify-content: space-between;
+      align-items: center;
       max-width: inherit;
     }
 
+    .mainIcons {
+      margin-bottom: ${(props) => props.displayFileExtension && "4px"};
+    }
+
     .badges {
       flex-direction: row-reverse;
+      padding-inline: ${(props) => props.displayFileExtension && "0px 12px"};
     }
 
     .tablet-badge {
@@ -143,6 +152,10 @@ const SimpleFilesRowContent = styled(RowContent)`
       margin: 0;
     }
 
+    .mainIcons {
+      margin-bottom: ${(props) => props.displayFileExtension && "0px"};
+    }
+
     .can-convert {
       margin: 0 1px;
     }
@@ -173,6 +186,7 @@ const FilesRowContent = ({
   isDefaultRoomsQuotaSet,
   isStatisticsAvailable,
   showStorageInfo,
+  displayFileExtension,
 }) => {
   const {
     contentLength,
@@ -232,20 +246,21 @@ const FilesRowContent = ({
     }
   };
 
-  const additionalComponent = () => {
-    if (isRooms) return getRoomTypeName(item.roomType, t);
+  // const additionalComponent = () => {
+  //   if (isRooms) return getRoomTypeName(item.roomType, t);
 
-    if (!fileExst && !contentLength && !providerKey)
-      return `${foldersCount} ${t("Translations:Folders")} | ${filesCount} ${t(
-        "Translations:Files",
-      )}`;
+  //   if (!fileExst && !contentLength && !providerKey)
+  //     return `${foldersCount} ${t("Translations:Folders")} | ${filesCount} ${t(
+  //       "Translations:Files",
+  //     )}`;
 
-    if (fileExst) return `${fileExst.toUpperCase().replace(/^\./, "")}`;
+  //   if (fileExst) return `${fileExst.toUpperCase().replace(/^\./, "")}`;
 
-    return "";
-  };
+  //   return "";
+  // };
+
+  // const additionalInfo = additionalComponent();
 
-  const additionalInfo = additionalComponent();
   const mainInfo = contentComponent();
 
   return (
@@ -255,6 +270,7 @@ const FilesRowContent = ({
         isMobile={!isTablet()}
         isFile={fileExst || contentLength}
         sideColor={theme.filesSection.rowView.sideColor}
+        displayFileExtension={displayFileExtension}
       >
         <Link
           className="row-content-link"
@@ -273,6 +289,16 @@ const FilesRowContent = ({
         <div className="badges">
           {badgesComponent}
           {!isRoom && !isRooms && quickButtons}
+          {displayFileExtension && (
+            <Text
+              className="item-file-exst"
+              fontWeight="600"
+              fontSize="15px"
+              color={theme.filesSection.tableView.fileExstColor}
+            >
+              {fileExst}
+            </Text>
+          )}
         </div>
 
         {mainInfo && (
@@ -287,7 +313,7 @@ const FilesRowContent = ({
           </Text>
         )}
 
-        {additionalInfo && (
+        {/* {additionalInfo && (
           <Text
             containerMinWidth="90px"
             containerWidth="10%"
@@ -299,7 +325,7 @@ const FilesRowContent = ({
           >
             {additionalInfo}
           </Text>
-        )}
+        )} */}
       </SimpleFilesRowContent>
     </>
   );

packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js

@@ -204,11 +204,13 @@ const StyledTableRow = styled(TableRow)`
 
   .item-file-name {
     padding-block: 14px;
-    padding-inline: 0 8px;
+    padding-inline: ${(props) =>
+      props.displayFileExtension ? "0px" : "0 8px"};
   }
 
   .item-file-exst {
-    color: ${(props) => props.theme.filesSection.tableView.fileExstColor};
+    padding-inline: 0 8px;
+    margin-bottom: 1px;
   }
 
   ${(props) =>

packages/client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -72,6 +72,7 @@ const FilesTableRow = (props) => {
     badgeUrl,
     isRecentTab,
     canDrag,
+    displayFileExtension,
   } = props;
   const { acceptBackground, background } = theme.dragAndDrop;
 
@@ -174,6 +175,7 @@ const FilesTableRow = (props) => {
         contextOptions={item.contextOptions}
         getContextModel={getContextModel}
         showHotkeyBorder={showHotkeyBorder}
+        displayFileExtension={displayFileExtension}
         title={
           item.isFolder
             ? t("Translations:TitleShowFolderActions")

packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js

@@ -26,6 +26,7 @@
 
 import React from "react";
 import { Link } from "@docspace/shared/components/link";
+import { Text } from "@docspace/shared/components/text";
 import { Checkbox } from "@docspace/shared/components/checkbox";
 import { TableCell } from "@docspace/shared/components/table";
 import { Loader } from "@docspace/shared/components/loader";
@@ -88,10 +89,18 @@ const FileNameCell = ({
         dir="auto"
       >
         {titleWithoutExt}
-        {displayFileExtension && (
-          <span className="item-file-exst">{fileExst}</span>
-        )}
       </Link>
+
+      {displayFileExtension && (
+        <Text
+          className="item-file-exst"
+          fontWeight="600"
+          fontSize="13px"
+          color={theme.filesSection.tableView.fileExstColor}
+        >
+          {fileExst}
+        </Text>
+      )}
     </>
   );
 };

packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js

@@ -30,6 +30,7 @@ import { withTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 
 import { Link } from "@docspace/shared/components/link";
+import { Text } from "@docspace/shared/components/text";
 
 import TileContent from "./sub-components/TileContent";
 import withContent from "../../../../../HOCs/withContent";
@@ -42,7 +43,8 @@ const SimpleFilesTileContent = styled(TileContent)`
   .row-main-container {
     height: auto;
     max-width: 100%;
-    align-self: flex-end;
+    display: flex;
+    align-items: flex-end;
   }
 
   .main-icons {
@@ -84,16 +86,15 @@ const SimpleFilesTileContent = styled(TileContent)`
   .item-file-name {
     max-height: 100%;
     line-height: 20px;
-
+    max-width: 100px;
     overflow: hidden;
     text-overflow: ellipsis;
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
+    white-space: nowrap;
+    display: block;
   }
 
   .item-file-exst {
-    color: ${(props) => props.theme.filesSection.tableView.fileExstColor};
+    margin-bottom: 1px;
   }
 
   ${({ isRooms }) =>
@@ -147,10 +148,17 @@ const FilesTileContent = ({
           isTextOverflow
         >
           {titleWithoutExt}
-          {displayFileExtension && (
-            <span className="item-file-exst">{fileExst}</span>
-          )}
         </Link>
+        {displayFileExtension && (
+          <Text
+            className="item-file-exst"
+            fontWeight="600"
+            fontSize="13px"
+            color={theme.filesSection.tableView.fileExstColor}
+          >
+            {fileExst}
+          </Text>
+        )}
       </SimpleFilesTileContent>
     </>
   );