Bugfix/table view header

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

@@ -52,6 +52,10 @@ const StyledTableContainer = styled.div`
     );
     border-top: 0;
   }
+  .lengthen-header {
+    border-bottom: 1px solid #eceef1;
+    border-image-source: none;
+  }
 
   .content-container {
     overflow: hidden;

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

@@ -15,6 +15,7 @@ const TableGroupMenu = (props) => {
     checkboxOptions,
     columnStorageName,
     checkboxMargin,
+    isLengthenHeader,
     ...rest
   } = props;
 
@@ -35,8 +36,11 @@ const TableGroupMenu = (props) => {
   return (
     <>
       <StyledTableGroupMenu
+        id="table-container_caption-header"
         width={width}
-        className="table-container_group-menu"
+        className={`${
+          isLengthenHeader ? "lengthen-header" : ""
+        } table-container_group-menu`}
         checkboxMargin={checkboxMargin}
         {...rest}
       >
@@ -74,6 +78,7 @@ const TableGroupMenu = (props) => {
 TableGroupMenu.propTypes = {
   isChecked: PropTypes.bool,
   isIndeterminate: PropTypes.bool,
+  isLengthenHeader: PropTypes.bool,
   headerMenu: PropTypes.arrayOf(PropTypes.object),
   checkboxOptions: PropTypes.any.isRequired,
   onClick: PropTypes.func,

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

@@ -440,6 +440,7 @@ class TableHeader extends React.Component {
       headerMenu,
       columnStorageName,
       hasAccess,
+      isLengthenHeader,
       ...rest
     } = this.props;
 
@@ -453,14 +454,18 @@ class TableHeader extends React.Component {
             containerRef={containerRef}
             onChange={onChange}
             isChecked={isChecked}
+            isLengthenHeader={isLengthenHeader}
             isIndeterminate={isIndeterminate}
             headerMenu={headerMenu}
             columnStorageName={columnStorageName}
             {...rest}
           />
         ) : (
           <StyledTableHeader
-            className="table-container_header"
+            id="table-container_caption-header"
+            className={`${
+              isLengthenHeader ? "lengthen-header" : ""
+            }table-container_header`}
             ref={this.headerRef}
             {...rest}
           >
@@ -527,6 +532,7 @@ TableHeader.propTypes = {
   onClick: PropTypes.func,
   hasAccess: PropTypes.bool,
   resetColumnsSize: PropTypes.bool,
+  isLengthenHeader: PropTypes.bool,
 };
 
 export default TableHeader;

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

@@ -9,13 +9,7 @@ import styled, { css } from "styled-components";
 
 const borderColor = "#ECEEF1";
 const colorBorderTransition = "#f3f4f4";
-const contentStyles = css`
-  position: absolute;
-  width: 100%;
-  height: 1px;
-  background: ${borderColor};
-  margin-left: -24px;
-`;
+
 const StyledTableContainer = styled(TableContainer)`
   .table-row-selected + .table-row-selected {
     .table-row {
@@ -34,15 +28,6 @@ const StyledTableContainer = styled(TableContainer)`
     }
   }
 
-  .table-row-selected + .files-item:not(.table-row-selected) {
-    .table-row {
-      .table-container_row-checkbox-wrapper:first-child:before {
-        ${contentStyles}
-        margin-top: -40px;
-      }
-    }
-  }
-
   .files-item:not(.table-row-selected) + .table-row-selected {
     .table-row {
       .table-container_row-checkbox-wrapper,
@@ -52,18 +37,15 @@ const StyledTableContainer = styled(TableContainer)`
       }
     }
   }
-
-  .table-row-selected:last-child {
-    .table-row {
-      .table-container_row-checkbox-wrapper:before {
-        ${contentStyles}
-        margin-top: 40px;
-      }
-    }
-  }
 `;
 
-const Table = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
+const Table = ({
+  filesList,
+  sectionWidth,
+  viewAs,
+  setViewAs,
+  setFirsElemChecked,
+}) => {
   const ref = useRef(null);
 
   useEffect(() => {
@@ -80,20 +62,26 @@ const Table = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
     <StyledTableContainer forwardedRef={ref}>
       <TableHeader sectionWidth={sectionWidth} containerRef={ref} />
       <TableBody>
-        {filesList.map((item) => (
-          <TableRow key={item.id} item={item} />
+        {filesList.map((item, index) => (
+          <TableRow
+            key={item.id}
+            item={item}
+            index={index}
+            setFirsElemChecked={setFirsElemChecked}
+          />
         ))}
       </TableBody>
     </StyledTableContainer>
   );
 };
 
 export default inject(({ filesStore }) => {
-  const { filesList, viewAs, setViewAs } = filesStore;
+  const { filesList, viewAs, setViewAs, setFirsElemChecked } = filesStore;
 
   return {
     filesList,
     viewAs,
     setViewAs,
+    setFirsElemChecked,
   };
 })(observer(Table));

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

@@ -89,13 +89,46 @@ class FilesTableHeader extends React.Component {
     const tableColumns = columns.map((c) => c.enable && c.key);
     this.setTableColumns(tableColumns);
 
-    this.state = { columns, resetColumnsSize };
+    this.state = {
+      columns,
+      resetColumnsSize,
+    };
+
+    this.isBeginScrolling = false;
   }
 
   setTableColumns = (tableColumns) => {
     localStorage.setItem(`${TABLE_COLUMNS}=${this.props.userId}`, tableColumns);
   };
 
+  componentDidMount() {
+    this.customScrollElm = document.getElementsByClassName("section-scroll")[0];
+
+    this.customScrollElm.addEventListener("scroll", this.onBeginScroll);
+  }
+
+  onBeginScroll = () => {
+    const { firstElemChecked } = this.props;
+
+    const currentScrollPosition = this.customScrollElm.scrollTop;
+
+    if (currentScrollPosition === 0) {
+      this.isBeginScrolling = false;
+
+      !firstElemChecked &&
+        document
+          .getElementById("table-container_caption-header")
+          ?.classList?.remove("lengthen-header");
+      return;
+    }
+
+    !this.isBeginScrolling &&
+      document
+        .getElementById("table-container_caption-header")
+        ?.classList?.add("lengthen-header");
+
+    this.isBeginScrolling = true;
+  };
   componentDidUpdate(prevProps) {
     const { columns } = this.state;
     if (this.props.withContent !== prevProps.withContent) {
@@ -107,6 +140,9 @@ class FilesTableHeader extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    this.customScrollElm.removeEventListener("scroll", this.onBeginScroll);
+  }
   getColumns = (defaultColumns, splitColumns) => {
     const columns = [];
 
@@ -177,6 +213,7 @@ class FilesTableHeader extends React.Component {
       userId,
       cbMenuItems,
       getCheckboxItemLabel,
+      firstElemChecked,
     } = this.props;
 
     const { sortBy, sortOrder } = filter;
@@ -201,6 +238,7 @@ class FilesTableHeader extends React.Component {
 
     return (
       <TableHeader
+        isLengthenHeader={firstElemChecked || isHeaderChecked}
         checkboxSize="32px"
         sorted={sortOrder === "descending"}
         sortBy={sortBy}
@@ -240,6 +278,7 @@ export default inject(
       canShare,
       cbMenuItems,
       getCheckboxItemLabel,
+      firstElemChecked,
     } = filesStore;
     const { getHeaderMenu } = filesActionsStore;
     const { isPrivacyFolder } = treeFoldersStore;
@@ -263,6 +302,8 @@ export default inject(
       userId: auth.userStore.user.id,
       cbMenuItems,
       getCheckboxItemLabel,
+
+      firstElemChecked,
     };
   }
 )(

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

@@ -204,6 +204,8 @@ const FilesTableRow = (props) => {
     onHideContextMenu,
     onFilesClick,
     inProgress,
+    index,
+    setFirsElemChecked,
   } = props;
 
   const sharedButton =
@@ -249,6 +251,14 @@ const FilesTableRow = (props) => {
     setIsDragActive(false);
   };
 
+  React.useEffect(() => {
+    if (index === 0 && (checkedProps || isActive)) {
+      setFirsElemChecked(true);
+    } else {
+      index === 0 && setFirsElemChecked(false);
+    }
+  }, [checkedProps, isActive]);
+
   return (
     <StyledDragAndDrop
       data-title={item.title}

products/ASC.Files/Client/src/store/FilesStore.js

@@ -55,6 +55,8 @@ class FilesStore {
   activeFiles = [];
   activeFolders = [];
 
+  firstElemChecked = false;
+
   constructor(
     authStore,
     settingsStore,
@@ -1147,6 +1149,10 @@ class FilesStore {
     return this.isHeaderVisible && this.selection.length === items.length;
   }
 
+  setFirsElemChecked = (checked) => {
+    this.firstElemChecked = checked;
+  };
+
   get canCreate() {
     switch (this.selectedFolderStore.rootFolderType) {
       case FolderType.USER: