Web:Client:Accounts: add hover and checked styles to table view

2022-08-26 09:31:46 +03:00 · 2022-08-26 09:31:46 +03:00 · 368ebe4213
commit 368ebe4213
parent f0e99cafd3
3 changed files with 253 additions and 118 deletions
--- a/packages/client/src/HOCs/withPeopleContent.js
+++ b/packages/client/src/HOCs/withPeopleContent.js
@ -143,7 +143,12 @@ export default function withContent(WrappedContent) {
    const { getTargetUser } = peopleStore.targetUserStore;
    const { selectionStore } = peopleStore;

-    const { selection, selectUser, deselectUser } = selectionStore;
+    const {
+      selection,
+      setSelection,
+      selectUser,
+      deselectUser,
+    } = selectionStore;

    return {
      theme: auth.settingsStore.theme,
@ -154,6 +159,7 @@ export default function withContent(WrappedContent) {
      checked: selection.some((el) => el.id === item.id),
      selectUser,
      deselectUser,
+      setSelection,
    };
  })(observer(WithContent));
 }
--- a/packages/client/src/pages/Accounts/Home/Section/Body/TableView/TableContainer.js
+++ b/packages/client/src/pages/Accounts/Home/Section/Body/TableView/TableContainer.js
@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from "react";
+import styled, { css } from "styled-components";
 import { inject, observer } from "mobx-react";
 import { isMobile } from "react-device-detect";

@ -9,6 +10,81 @@ import EmptyScreen from "../EmptyScreen";

 import TableRow from "./TableRow";
 import TableHeader from "./TableHeader";
+import { Base } from "@docspace/components/themes";
+
+const marginCss = css`
+  margin-top: -1px;
+  border-top: ${(props) =>
+    `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+`;
+
+const userNameCss = css`
+  margin-left: -24px;
+  padding-left: 24px;
+  ${marginCss}
+`;
+
+const contextCss = css`
+  margin-right: -20px;
+  padding-right: 18px;
+  ${marginCss}
+`;
+
+const StyledTableContainer = styled(TableContainer)`
+  .table-row-selected {
+    .table-container_user-name-cell {
+      ${userNameCss}
+    }
+
+    .table-container_row-context-menu-wrapper {
+      ${contextCss}
+    }
+  }
+
+  .table-row-selected + .table-row-selected {
+    .table-row {
+      .table-container_user-name-cell,
+      .table-container_row-context-menu-wrapper {
+        margin-top: -1px;
+        border-image-slice: 1;
+        border-top: 1px solid;
+      }
+      .table-container_user-name-cell {
+        ${userNameCss}
+        border-left: 0; //for Safari macOS
+        border-right: 0; //for Safari macOS
+
+        border-image-source: ${(props) => `linear-gradient(to right, 
+          ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
+      }
+      .table-container_row-context-menu-wrapper {
+        ${contextCss}
+
+        border-image-source: ${(props) => `linear-gradient(to left,
+          ${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
+      }
+    }
+  }
+
+  .user-item:not(.table-row-selected) + .table-row-selected {
+    .table-row {
+      .table-container_user-name-cell {
+        ${userNameCss}
+      }
+
+      .table-container_row-context-menu-wrapper {
+        ${contextCss}
+      }
+
+      .table-container_user-name-cell,
+      .table-container_row-context-menu-wrapper {
+        border-bottom: ${(props) =>
+          `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+      }
+    }
+`;
+
+StyledTableContainer.defaultProps = { theme: Base };

 const Table = ({
  peopleList,
@ -40,7 +116,7 @@ const Table = ({
  }, [sectionWidth]);

  return peopleList.length > 0 ? (
-    <TableContainer forwardedRef={ref}>
+    <StyledTableContainer forwardedRef={ref}>
      <TableHeader sectionWidth={sectionWidth} containerRef={ref} />
      <TableBody>
        {peopleList.map((item) => (
@ -55,7 +131,7 @@ const Table = ({
          />
        ))}
      </TableBody>
-    </TableContainer>
+    </StyledTableContainer>
  ) : (
    <EmptyScreen />
  );
--- a/packages/client/src/pages/Accounts/Home/Section/Body/TableView/TableRow.js
+++ b/packages/client/src/pages/Accounts/Home/Section/Body/TableView/TableRow.js
@ -15,11 +15,37 @@ import withContextOptions from "SRC_DIR/HOCs/withPeopleContextOptions";
 import withContent from "SRC_DIR/HOCs/withPeopleContent";

 import Badges from "../Badges";
+import { Base } from "@docspace/components/themes";
+
+const StyledWrapper = styled.div`
+  display: contents;
+`;

 const StyledPeopleRow = styled(TableRow)`
+  :hover {
+    .table-container_cell {
+      cursor: pointer;
+      background: ${(props) =>
+        `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
+    }
+
+    .table-container_user-name-cell {
+      margin-left: -24px;
+      padding-left: 24px;
+    }
+    .table-container_row-context-menu-wrapper {
+      margin-right: -20px;
+      padding-right: 18px;
+    }
+  }
+
  .table-container_cell {
    height: 46px;
    max-height: 46px;
+
+    background: ${(props) =>
+      (props.checked || props.isActive) &&
+      `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
  }

  .table-container_row-checkbox-wrapper {
@ -80,6 +106,8 @@ const StyledPeopleRow = styled(TableRow)`
  }
 `;

+StyledPeopleRow.defaultProps = { theme: Base };
+
 const fakeRooms = [
  {
    name: "Room 1",
@ -106,8 +134,11 @@ const PeopleTableRow = (props) => {
    theme,
    changeUserType,
    userId,
+    setSelection,
  } = props;

+  const [isActive, setIsActive] = React.useState(false);
+
  const {
    displayName,
    email,
@ -200,127 +231,149 @@ const PeopleTableRow = (props) => {

  const typeLabel = getRoomTypeLabel(role);

-  return (
-    <StyledPeopleRow
-      key={item.id}
-      sideInfoColor={sideInfoColor}
-      {...contextOptionsProps}
-    >
-      <TableCell>
-        <TableCell
-          hasAccess={isAdmin}
-          className="table-container_row-checkbox-wrapper"
-          checked={checkedProps.checked}
-        >
-          <div className="table-container_element">{element}</div>
-          <Checkbox
-            className="table-container_row-checkbox"
-            onChange={onChange}
-            isChecked={checkedProps.checked}
-          />
-        </TableCell>
+  const isChecked = checkedProps.checked;

-        <Link
-          type="page"
-          title={displayName}
-          fontWeight="600"
-          fontSize="15px"
-          color={nameColor}
-          isTextOverflow
-          href={`/accounts/view/${userName}`}
-          onClick={onUserNameClick}
-          className="table-cell_username"
-        >
-          {statusType === "pending" ? email : displayName}
-        </Link>
-        <Badges statusType={statusType} />
-      </TableCell>
-      <TableCell className={"table-cell_type"}>
-        {((isOwner && role !== "owner") ||
-          (isAdmin && !isOwner && role !== "admin")) &&
-        statusType !== "disabled" &&
-        userId !== item.id ? (
-          <ComboBox
-            className="type-combobox"
-            selectedOption={getTypesOptions().find(
-              (option) => option.key === role
-            )}
-            options={getTypesOptions()}
-            onSelect={onTypeChange}
-            scaled={false}
-            size="content"
-            displaySelectedOption
-            modernView
-          />
-        ) : (
-          <Text
+  const userContextClick = React.useCallback(() => {
+    setIsActive(true);
+    !isChecked && setSelection([]);
+  }, [isChecked, setSelection]);
+
+  const onHideContextMenu = React.useCallback(() => {
+    setIsActive(false);
+  }, []);
+
+  return (
+    <StyledWrapper
+      className={`user-item ${
+        isChecked || isActive ? "table-row-selected" : ""
+      }`}
+    >
+      <StyledPeopleRow
+        key={item.id}
+        className="table-row"
+        sideInfoColor={sideInfoColor}
+        checked={isChecked}
+        fileContextClick={userContextClick}
+        onHideContextMenu={onHideContextMenu}
+        isActive={isActive}
+        {...contextOptionsProps}
+      >
+        <TableCell className={"table-container_user-name-cell"}>
+          <TableCell
+            hasAccess={isAdmin}
+            className="table-container_row-checkbox-wrapper"
+            checked={isChecked}
+          >
+            <div className="table-container_element">{element}</div>
+            <Checkbox
+              className="table-container_row-checkbox"
+              onChange={onChange}
+              isChecked={isChecked}
+            />
+          </TableCell>
+
+          <Link
            type="page"
-            title={position}
+            title={displayName}
+            fontWeight="600"
+            fontSize="15px"
+            color={nameColor}
+            isTextOverflow
+            href={`/accounts/view/${userName}`}
+            onClick={onUserNameClick}
+            className="table-cell_username"
+          >
+            {statusType === "pending" ? email : displayName}
+          </Link>
+          <Badges statusType={statusType} />
+        </TableCell>
+        <TableCell className={"table-cell_type"}>
+          {((isOwner && role !== "owner") ||
+            (isAdmin && !isOwner && role !== "admin")) &&
+          statusType !== "disabled" &&
+          userId !== item.id ? (
+            <ComboBox
+              className="type-combobox"
+              selectedOption={getTypesOptions().find(
+                (option) => option.key === role
+              )}
+              options={getTypesOptions()}
+              onSelect={onTypeChange}
+              scaled={false}
+              size="content"
+              displaySelectedOption
+              modernView
+            />
+          ) : (
+            <Text
+              type="page"
+              title={position}
+              fontSize="12px"
+              fontWeight={400}
+              color={sideInfoColor}
+              truncate
+              noSelect
+              style={{ paddingLeft: "8px" }}
+            >
+              {typeLabel}
+            </Text>
+          )}
+        </TableCell>
+        <TableCell className="table-cell_room">
+          {!rooms?.length ? (
+            <Text
+              type="page"
+              title={position}
+              fontSize="12px"
+              fontWeight={400}
+              color={sideInfoColor}
+              truncate
+              noSelect
+              style={{ paddingLeft: "8px" }}
+            >
+              —
+            </Text>
+          ) : rooms?.length === 1 ? (
+            <Text
+              type="page"
+              title={position}
+              fontSize="12px"
+              fontWeight={400}
+              color={sideInfoColor}
+              truncate
+              style={{ paddingLeft: "8px" }}
+            >
+              {rooms[0].name} ({rooms[0].role})
+            </Text>
+          ) : (
+            <ComboBox
+              className="room-combobox"
+              selectedOption={{ key: "length", label: `${fakeRooms.length}` }}
+              options={[]}
+              onSelect={onTypeChange}
+              advancedOptions={getRoomsOptions()}
+              scaled={false}
+              size="content"
+              displaySelectedOption
+              modernView
+            />
+          )}
+        </TableCell>
+        <TableCell>
+          <Link
+            type="page"
+            title={email}
            fontSize="12px"
            fontWeight={400}
            color={sideInfoColor}
-            truncate
-            noSelect
-            style={{ paddingLeft: "8px" }}
+            onClick={onEmailClick}
+            isTextOverflow
          >
-            {typeLabel}
-          </Text>
-        )}
-      </TableCell>
-      <TableCell className="table-cell_room">
-        {!rooms?.length ? (
-          <Text
-            type="page"
-            title={position}
-            fontSize="12px"
-            fontWeight={400}
-            color={sideInfoColor}
-            truncate
-            noSelect
-            style={{ paddingLeft: "8px" }}
-          >
-            —
-          </Text>
-        ) : rooms?.length === 1 ? (
-          <Text
-            type="page"
-            title={position}
-            fontSize="12px"
-            fontWeight={400}
-            color={sideInfoColor}
-            truncate
-            style={{ paddingLeft: "8px" }}
-          >
-            {rooms[0].name} ({rooms[0].role})
-          </Text>
-        ) : (
-          <ComboBox
-            className="room-combobox"
-            selectedOption={{ key: "length", label: `${fakeRooms.length}` }}
-            options={[]}
-            onSelect={onTypeChange}
-            advancedOptions={getRoomsOptions()}
-            scaled={false}
-            size="content"
-            displaySelectedOption
-            modernView
-          />
-        )}
-      </TableCell>
-      <TableCell>
-        <Link
-          type="page"
-          title={email}
-          fontSize="12px"
-          fontWeight={400}
-          color={sideInfoColor}
-          onClick={onEmailClick}
-          isTextOverflow
-        >
-          {email}
-        </Link>
-      </TableCell>
-    </StyledPeopleRow>
+            {email}
+          </Link>
+        </TableCell>
+      </StyledPeopleRow>
+    </StyledWrapper>
  );
 };