Web: Files: added new table cells, fixed table styles

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

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from "react";
+import Text from "../text";
 import PropTypes from "prop-types";
+import globalColors from "@appserver/components/utils/globalColors";
 
 const Column = ({
   id,
@@ -81,10 +83,13 @@ const Column = ({
       className={`${className} table-column`}
       {...rest}
     >
-      <div className="header-container">
+      <Text
+        fontWeight={600}
+        color={globalColors.gray}
+        className="header-container"
+      >
         {title}
-        {index}
-      </div>
+      </Text>
       <div className="content-container">{children}</div>
       {resizable && (
         <div

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

@@ -15,16 +15,17 @@ const StyledTableContainer = styled.div`
     position: absolute;
     cursor: ew-resize;
     height: 10px;
-    width: 7px;
     right: 4px;
-    top: 4px;
+    top: 14px;
     z-index: 1;
-    border-right: 2px solid transparent;
-    border-color: #d0d5da;
+    border-right: 2px solid #d0d5da;
   }
 
   .header-container {
-    border-bottom: 2px solid grey;
+    height: 38px;
+    border-bottom: 1px solid #eceef1;
+    display: flex;
+    align-items: center;
   }
 
   .content-container {

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

@@ -3,7 +3,13 @@ import { StyledTableContainer } from "./StyledTableContainer";
 import PropTypes from "prop-types";
 
 const TableContainer = (props) => {
-  return <StyledTableContainer ref={props.forwardedRef} {...props} />;
+  return (
+    <StyledTableContainer
+      style={{ marginTop: -18 }}
+      ref={props.forwardedRef}
+      {...props}
+    />
+  );
 };
 
 TableContainer.propTypes = {

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

@@ -8,25 +8,38 @@ import { withTranslation } from "react-i18next";
 import TableCell from "@appserver/components/table-container/TableCell";
 import FileNameCell from "./sub-components/FileNameCell";
 import SizeCell from "./sub-components/SizeCell";
+import AuthorCell from "./sub-components/AuthorCell";
+import CreatedCell from "./sub-components/CreatedCell";
+import globalColors from "@appserver/components/utils/globalColors";
+
+const sideColor = globalColors.gray;
 
 const TableCellFiles = (props) => {
-  const { column } = props;
+  const { column, item } = props;
 
   const getElem = () => {
     let field = null;
     for (let inc of column.includes) {
-      if (field) {
-        field = field[inc];
-      } else {
-        field = inc;
-      }
+      field = inc;
+      // if (field) {
+      //   console.log("123", field);
+      //   console.log("inc", inc);
+      //   field = field[inc];
+      //   console.log("234", field);
+      // } else {
+      //   field = inc;
+      // }
     }
 
     switch (field) {
       case "title":
         return <FileNameCell {...props} />;
       case "contentLength":
-        return <SizeCell {...props} />;
+        return <SizeCell sideColor={sideColor} {...props} />;
+      case "displayName":
+        return <AuthorCell sideColor={sideColor} {...props} />;
+      case "created":
+        return <CreatedCell sideColor={sideColor} {...props} />;
 
       default:
         return <></>;

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/AuthorCell.js

@@ -0,0 +1,21 @@
+import React from "react";
+import Text from "@appserver/components/text";
+
+const AuthorCell = (props) => {
+  const { fileOwner, sideColor } = props;
+
+  return (
+    <Text
+      as="div"
+      color={sideColor}
+      fontSize="12px"
+      fontWeight={400}
+      title={fileOwner}
+      truncate={true}
+    >
+      {fileOwner}
+    </Text>
+  );
+};
+
+export default AuthorCell;

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/CreatedCell.js

@@ -0,0 +1,23 @@
+import React from "react";
+import Text from "@appserver/components/text";
+
+const AuthorCell = (props) => {
+  const { updatedDate, sideColor, item } = props;
+  const { fileExst, contentLength, providerKey } = item;
+
+  return (
+    <Text
+      title={updatedDate}
+      fontSize="12px"
+      fontWeight={400}
+      color={sideColor}
+      className="row_update-text"
+    >
+      {(fileExst || contentLength || !providerKey) &&
+        updatedDate &&
+        updatedDate}
+    </Text>
+  );
+};
+
+export default AuthorCell;

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/SizeCell.js

@@ -1,11 +1,8 @@
 import React from "react";
 import Text from "@appserver/components/text";
-import globalColors from "@appserver/components/utils/globalColors";
-
-const sideColor = globalColors.gray;
 
 const SizeCell = (props) => {
-  const { t, item } = props;
+  const { t, item, sideColor } = props;
   const {
     fileExst,
     contentLength,