Fixed Bug 53161 - Client.Files.Removed the narrowing of the line back…

…ground when selecting.
ONLYOFFICE · Dec 6, 2021 · 28fec43 · 28fec43
1 parent 7b3a18b
commit 28fec43
Show file tree

Hide file tree

Showing 6 changed files with 159 additions and 45 deletions.
diff --git a/packages/asc-web-components/row/styled-row.js b/packages/asc-web-components/row/styled-row.js
@@ -29,7 +29,7 @@ const StyledRow = styled.div`
   align-content: center;
 
   .row-loader {
-    padding: 16px 12px 12px 0px;
+    padding: 15px 12px 12px 0px;
   }
 `;
 StyledRow.defaultProps = { theme: Base };

diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/CommonStyles.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/CommonStyles.js
@@ -0,0 +1,17 @@
+import { css } from "styled-components";
+
+const marginStyles = css`
+  margin-left: -24px;
+  margin-right: -24px;
+  padding-left: 24px;
+  padding-right: 24px;
+
+  @media (max-width: 1024px) {
+    margin-left: -16px;
+    margin-right: -16px;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+`;
+
+export default marginStyles;
diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
@@ -3,7 +3,46 @@ import { inject, observer } from "mobx-react";
 import RowContainer from "@appserver/components/row-container";
 import SimpleFilesRow from "./SimpleFilesRow";
 import { isMobile } from "react-device-detect";
+import styled from "styled-components";
+import marginStyles from "./CommonStyles";
 
+const borderColor = "#ECEEF1";
+
+const StyledRowContainer = styled(RowContainer)`
+  .row-selected + .row-wrapper:not(.row-selected) {
+    .files-row {
+      border-top: ${`1px ${borderColor} solid`};
+      margin-top: -3px;
+      ${marginStyles}
+    }
+  }
+
+  .row-wrapper:not(.row-selected) + .row-selected {
+    .files-row {
+      border-top: ${`1px ${borderColor} solid`};
+      margin-top: -3px;
+      ${marginStyles}
+    }
+  }
+
+  .row-selected:last-child {
+    .files-row {
+      border-bottom: ${`1px ${borderColor} solid`};
+      padding-bottom: 1px;
+      ${marginStyles}
+    }
+    .files-row::after {
+      height: 0px;
+    }
+  }
+  .row-selected:first-child {
+    .files-row {
+      border-top: ${`1px ${borderColor} solid`};
+      margin-top: -3px;
+      ${marginStyles}
+    }
+  }
+`;
 const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
   useEffect(() => {
     if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
@@ -16,7 +55,7 @@ const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
   }, [sectionWidth]);
 
   return (
-    <RowContainer
+    <StyledRowContainer
       className="files-row-container"
       draggable
       useReactWindow={false}
@@ -28,7 +67,7 @@ const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
           sectionWidth={sectionWidth}
         />
       ))}
-    </RowContainer>
+    </StyledRowContainer>
   );
 };
 

diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
@@ -10,38 +10,19 @@ import withFileActions from "../../../../../HOCs/withFileActions";
 import withContextOptions from "../../../../../HOCs/withContextOptions";
 import SharedButton from "../../../../../components/SharedButton";
 import ItemIcon from "../../../../../components/ItemIcon";
+import marginStyles from "./CommonStyles";
 
 const checkedStyle = css`
   background: #f3f4f4;
-  margin-left: -24px;
-  margin-right: -24px;
-  padding-left: 24px;
-  padding-right: 24px;
-
-  @media (max-width: 1024px) {
-    margin-left: -16px;
-    margin-right: -16px;
-    padding-left: 16px;
-    padding-right: 16px;
-  }
+  ${marginStyles}
 `;
 
 const draggingStyle = css`
   background: #f8f7bf;
   &:hover {
     background: #efefb2;
   }
-  margin-left: -24px;
-  margin-right: -24px;
-  padding-left: 24px;
-  padding-right: 24px;
-
-  @media (max-width: 1024px) {
-    margin-left: -16px;
-    margin-right: -16px;
-    padding-left: 16px;
-    padding-right: 16px;
-  }
+  ${marginStyles}
 `;
 
 const StyledWrapper = styled.div`
@@ -144,7 +125,11 @@ const SimpleFilesRow = (props) => {
   );
 
   return (
-    <StyledWrapper>
+    <StyledWrapper
+      className={`row-wrapper ${
+        checkedProps || isActive ? "row-selected" : ""
+      }`}
+    >
       <DragAndDrop
         data-title={item.title}
         value={value}
@@ -172,6 +157,7 @@ const SimpleFilesRow = (props) => {
           isActive={isActive}
           inProgress={inProgress}
           isThirdPartyFolder={item.isThirdPartyFolder}
+          className="files-row"
         >
           <FilesRowContent
             item={item}

diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js
@@ -5,6 +5,63 @@ import TableRow from "./TableRow";
 import TableHeader from "./TableHeader";
 import TableBody from "@appserver/components/table-container/TableBody";
 import { isMobile } from "react-device-detect";
+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 {
+      .table-container_row-checkbox-wrapper,
+      .table-container_row-context-menu-wrapper {
+        margin-top: -1px;
+        border-image-slice: 1;
+        border-top: 1px solid;
+      }
+      .table-container_row-checkbox-wrapper {
+        border-image-source: ${`linear-gradient(to right, ${colorBorderTransition} 24px, ${borderColor} 24px)`};
+      }
+      .table-container_row-context-menu-wrapper {
+        border-image-source: ${`linear-gradient(to left, ${colorBorderTransition} 24px, ${borderColor} 24px)`};
+      }
+    }
+  }
+
+  .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,
+      .table-container_row-context-menu-wrapper {
+        margin-top: -1px;
+        border-top: ${`1px ${borderColor} solid`};
+      }
+    }
+  }
+
+  .table-row-selected:last-child {
+    .table-row {
+      .table-container_row-checkbox-wrapper:before {
+        ${contentStyles}
+        margin-top: 40px;
+      }
+    }
+  }
+`;
 
 const Table = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
   const ref = useRef(null);
@@ -20,14 +77,14 @@ const Table = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
   }, [sectionWidth]);
 
   return (
-    <TableContainer forwardedRef={ref}>
+    <StyledTableContainer forwardedRef={ref}>
       <TableHeader sectionWidth={sectionWidth} containerRef={ref} />
       <TableBody>
         {filesList.map((item) => (
           <TableRow key={item.id} item={item} />
         ))}
       </TableBody>
-    </TableContainer>
+    </StyledTableContainer>
   );
 };
 

diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js
@@ -22,13 +22,6 @@ import { isSafari } from "react-device-detect";
 const sideColor = globalColors.gray;
 const { acceptBackground, background } = Base.dragAndDrop;
 
-const rowCheckboxCheckedStyle = css`
-  border-image-source: linear-gradient(to right, #f3f4f4 24px, #eceef1 24px);
-`;
-const contextMenuWrapperCheckedStyle = css`
-  border-image-source: linear-gradient(to left, #f3f4f4 24px, #eceef1 24px);
-`;
-
 const rowCheckboxDraggingStyle = css`
   border-image-source: linear-gradient(to right, #f8f7bf 24px, #eceef1 24px);
 `;
@@ -54,7 +47,7 @@ const contextMenuWrapperDraggingHoverStyle = css`
 
 const StyledTableRow = styled(TableRow)`
   .table-container_cell {
-    ${isSafari && `border-image-slice: 0 !important`};
+    /* ${isSafari && `border-image-slice: 0 !important`}; */
     background: ${(props) =>
       (props.checked || props.isActive) && "#F3F4F4 !important"};
     cursor: ${(props) =>
@@ -87,29 +80,48 @@ const StyledTableRow = styled(TableRow)`
     width: 50px;
     margin-left: -24px;
     padding-left: 24px;
-    border-bottom: 1px solid;
-    border-image-slice: 1;
-    border-image-source: linear-gradient(to right, #ffffff 24px, #eceef1 24px);
+
+    ${(props) =>
+      !props.isActive &&
+      !props.checked &&
+      css`
+        border-image-slice: 1;
+        border-bottom: 1px solid;
+        border-image-source: linear-gradient(
+          to right,
+          #ffffff 24px,
+          #eceef1 24px
+        );
+      `};
 
     border-top: 0;
     border-right: 0;
+    border-left: 0;
 
-    ${(props) => props.checked && rowCheckboxCheckedStyle};
     ${(props) => props.dragging && rowCheckboxDraggingStyle};
   }
 
   .table-container_row-context-menu-wrapper {
     margin-right: -20x;
     width: 28px;
     padding-right: 18px;
-    border-bottom: 1px solid;
-    border-image-slice: 1;
-    border-image-source: linear-gradient(to left, #ffffff 24px, #eceef1 24px);
+
+    ${(props) =>
+      !props.isActive &&
+      !props.checked &&
+      css`
+        border-bottom: 1px solid;
+        border-image-slice: 1;
+        border-image-source: linear-gradient(
+          to left,
+          #ffffff 24px,
+          #eceef1 24px
+        );
+      `};
 
     border-top: 0;
     border-left: 0;
 
-    ${(props) => props.checked && contextMenuWrapperCheckedStyle};
     ${(props) => props.dragging && contextMenuWrapperDraggingStyle};
   }
 `;
@@ -234,14 +246,17 @@ const FilesTableRow = (props) => {
     <StyledDragAndDrop
       data-title={item.title}
       value={value}
-      className={`files-item ${className}`}
+      className={`files-item ${className} ${
+        checkedProps || isActive ? "table-row-selected" : ""
+      }`}
       onDrop={onDrop}
       onMouseDown={onMouseDown}
       dragging={dragging && isDragging}
       onDragOver={onDragOver}
       onDragLeave={onDragLeave}
     >
       <StyledTableRow
+        className="table-row"
         {...dragStyles}
         dragging={dragging && isDragging}
         selectionProp={selectionProp}