Web:Client:Accounts: add checked state for row view

packages/client/src/pages/Accounts/Home/Section/Body/RowView/PeopleRowContainer.js

@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import styled, { css } from "styled-components";
 import { inject, observer } from "mobx-react";
 import { isMobile } from "react-device-detect";
 
@@ -8,6 +9,81 @@ import EmptyScreen from "../EmptyScreen";
 
 import SimpleUserRow from "./SimpleUserRow";
 
+const marginStyles = css`
+  margin-left: -24px;
+  margin-right: -24px;
+  padding-left: 24px;
+  padding-right: 24px;
+
+  ${isMobile &&
+  css`
+    margin-left: -20px;
+    margin-right: -20px;
+    padding-left: 20px;
+    padding-right: 20px;
+  `}
+
+  @media (max-width: 1024px) {
+    margin-left: -16px;
+    margin-right: -16px;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  @media (max-width: 375px) {
+    margin-left: -16px;
+    margin-right: -8px;
+    padding-left: 16px;
+    padding-right: 8px;
+  }
+`;
+
+const StyledRowContainer = styled(RowContainer)`
+  .row-selected + .row-wrapper:not(.row-selected) {
+    .user-row {
+      border-top: ${(props) =>
+        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+      margin-top: -3px;
+      ${marginStyles}
+    }
+  }
+
+  .row-wrapper:not(.row-selected) + .row-selected {
+    .user-row {
+      border-top: ${(props) =>
+        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+      margin-top: -3px;
+      ${marginStyles}
+    }
+  }
+
+  .row-hotkey-border + .row-selected {
+    .user-row {
+      border-top: 1px solid #2da7db !important;
+    }
+  }
+
+  .row-selected:last-child {
+    .user-row {
+      border-bottom: ${(props) =>
+        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+      padding-bottom: 1px;
+      ${marginStyles}
+    }
+    .user-row::after {
+      height: 0px;
+    }
+  }
+  .row-selected:first-child {
+    .user-row {
+      border-top: ${(props) =>
+        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+      margin-top: -3px;
+      ${marginStyles}
+    }
+  }
+`;
+
 const PeopleRowContainer = ({
   peopleList,
   sectionWidth,
@@ -32,7 +108,7 @@ const PeopleRowContainer = ({
   }, [sectionWidth]);
 
   return peopleList.length > 0 ? (
-    <RowContainer className="people-row-container" useReactWindow={false}>
+    <StyledRowContainer className="people-row-container" useReactWindow={false}>
       {peopleList.map((item) => (
         <SimpleUserRow
           theme={theme}
@@ -41,7 +117,7 @@ const PeopleRowContainer = ({
           sectionWidth={sectionWidth}
         />
       ))}
-    </RowContainer>
+    </StyledRowContainer>
   ) : (
     <EmptyScreen />
   );

packages/client/src/pages/Accounts/Home/Section/Body/RowView/SimpleUserRow.js

@@ -1,13 +1,79 @@
 import React from "react";
+import styled, { css } from "styled-components";
 import { withRouter } from "react-router";
+import { isMobile } from "react-device-detect";
 
 import Row from "@docspace/components/row";
+import { Base } from "@docspace/components/themes";
 
 import withContextOptions from "SRC_DIR/HOCs/withPeopleContextOptions";
 import withContent from "SRC_DIR/HOCs/withPeopleContent";
 
 import UserContent from "./userContent";
 
+const marginStyles = css`
+  margin-left: -24px;
+  margin-right: -24px;
+  padding-left: 24px;
+  padding-right: 24px;
+
+  ${isMobile &&
+  css`
+    margin-left: -20px;
+    margin-right: -20px;
+    padding-left: 20px;
+    padding-right: 20px;
+  `}
+
+  @media (max-width: 1024px) {
+    margin-left: -16px;
+    margin-right: -16px;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  @media (max-width: 375px) {
+    margin-left: -16px;
+    margin-right: -8px;
+    padding-left: 16px;
+    padding-right: 8px;
+  }
+`;
+
+const checkedStyle = css`
+  background: ${(props) => props.theme.filesSection.rowView.checkedBackground};
+  ${marginStyles}
+`;
+
+const StyledWrapper = styled.div`
+  .user-item {
+    border-left: none;
+    border-right: none;
+    margin-left: 0;
+  }
+`;
+
+StyledWrapper.defaultProps = { theme: Base };
+
+const StyledSimpleUserRow = styled(Row)`
+  ${(props) => (props.checked || props.isActive) && checkedStyle};
+
+  ${!isMobile &&
+  css`
+    :hover {
+      cursor: pointer;
+      ${checkedStyle}
+
+      margin-top: -3px;
+      border-top: ${(props) =>
+        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+    }
+  `}
+
+  position: unset;
+  margin-top: -2px;
+`;
+
 const SimpleUserRow = (props) => {
   const {
     item,
@@ -16,21 +82,47 @@ const SimpleUserRow = (props) => {
     checkedProps,
     onContentRowSelect,
     element,
+    setSelection,
   } = props;
 
+  const [isActive, setIsActive] = React.useState(false);
+
+  const isChecked = checkedProps.checked;
+
+  const userContextClick = React.useCallback(() => {
+    setIsActive(true);
+    !isChecked && setSelection([]);
+  }, [isChecked, setSelection]);
+
+  const onHideContextMenu = React.useCallback(() => {
+    setIsActive(false);
+  }, []);
+
   return (
-    <Row
-      key={item.id}
-      data={item}
-      element={element}
-      onSelect={onContentRowSelect}
-      {...checkedProps}
-      {...contextOptionsProps}
-      sectionWidth={sectionWidth}
-      mode={"modern"}
+    <StyledWrapper
+      className={`row-wrapper ${
+        checkedProps || isActive ? "row-selected" : ""
+      }`}
     >
-      <UserContent {...props} />
-    </Row>
+      <div className="user-item">
+        <StyledSimpleUserRow
+          key={item.id}
+          data={item}
+          element={element}
+          onSelect={onContentRowSelect}
+          checked={isChecked}
+          isActive={isActive}
+          {...contextOptionsProps}
+          sectionWidth={sectionWidth}
+          mode={"modern"}
+          className={"user-row"}
+          rowContextClose={onHideContextMenu}
+          rowContextClick={userContextClick}
+        >
+          <UserContent {...props} />
+        </StyledSimpleUserRow>
+      </div>
+    </StyledWrapper>
   );
 };