Web:Client:Fixed content bouncing when hovering in tables and rows in accounts on small screens.

2024-02-26 17:11:30 +03:00 · 2024-02-26 17:11:30 +03:00 · 5e616330e6
commit 5e616330e6
parent 2227bb2239
6 changed files with 147 additions and 102 deletions
--- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/RowView/index.styled.js
@ -6,40 +6,56 @@ import { Base } from "@docspace/shared/themes";
 import { mobile, tablet } from "@docspace/shared/utils/device";
 import { RowContent } from "@docspace/shared/components/row-content";

+const marginStyles = css`
+  margin-left: -24px;
+  margin-right: -24px;
+  padding-left: 24px;
+  padding-right: 24px;
+
+  @media ${tablet} {
+    margin-left: -16px;
+    margin-right: -16px;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+`;
+
+const marginStylesGroupRowContainer = css`
+  margin-right: -48px !important;
+
+  @media ${tablet} {
+    margin-right: -32px !important;
+  }
+`;
+
 export const GroupsRowContainer = styled(RowContainer)`
-  .row-selected + .row-wrapper:not(.row-selected),
-  .row-wrapper:not(.row-selected) + .row-selected,
-  .row-selected:first-child {
+  .row-selected + .row-wrapper:not(.row-selected) {
    .group-row {
-      border-top: ${({ theme }) =>
-        `1px ${theme.filesSection.tableView.row.borderColor} solid`};
-      margin: -3px -24px 0 -24px;
-      padding: 0 24px;
-      @media ${tablet} {
-        margin: -3px -16px 0 -16px;
-        padding: 0 16px;
+      ${marginStyles}
    }
  }
-  }
-  .row-selected:last-child {
+
+  .row-wrapper:not(.row-selected) + .row-selected {
    .group-row {
-      border-bottom: ${({ theme }) =>
-        `1px ${theme.filesSection.tableView.row.borderColor} solid`};
-      margin: 0 -24px;
-      padding: 0 24px 1px 24px;
-      @media ${tablet} {
-        margin: 0 -16px;
-        padding: 0 16px 1px 16px;
-      }
-      &::after {
-        height: 0px;
+      ${marginStyles}
    }
  }
-  }
-  .row-hotkey-border + .row-selected {
+
+  .row-list-item:first-child {
    .group-row {
-      border-top: 1px solid #2da7db !important;
+      border-top: 2px solid transparent;
    }
+
+    .row-selected {
+      .group-row {
+        border-top-color: ${(props) =>
+          `${props.theme.filesSection.tableView.row.borderColor} !important`};
+      }
+    }
+  }
+
+  .row-list-item {
+    margin-top: -1px;
  }
 `;

@ -61,18 +77,23 @@ export const GroupsRowWrapper = styled.div`
    position: relative;
    outline: none;
    background: none !important;
+
+    ${(props) =>
+      (props.isChecked || props.isActive) && marginStylesGroupRowContainer};
+
+    :hover {
+      ${marginStylesGroupRowContainer}
+    }
  }
 `;

 const checkedStyle = css`
  background: ${({ theme }) => theme.filesSection.rowView.checkedBackground};
  margin-left: -24px;
-  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
  @media ${tablet} {
    margin-left: -16px;
-    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
@ -83,15 +104,24 @@ export const GroupsRow = styled(Row)`
  &:hover {
    cursor: pointer;
    ${checkedStyle}
-    margin-top: -3px;
-    padding-bottom: 1px;
-    border-top: 1px
-      ${({ theme }) => theme.filesSection.tableView.row.borderColor} solid;
-    border-bottom: 1px
-      ${({ theme }) => theme.filesSection.tableView.row.borderColor} solid;
  }
+
+  .row_content {
+    height: 58px;
+  }
+
+  height: 59px;
+
+  border-top: ${(props) =>
+    `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+  border-bottom: ${(props) =>
+    `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+
+  box-sizing: border-box;
+  margin-top: -1px;
+
  position: unset;
-  margin-top: -2px;
+
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  .styled-element {
    height: 32px;
--- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.js
@ -68,7 +68,7 @@ const GroupsTableView = ({
        hasMoreFiles={hasMoreGroups}
        itemCount={groupsFilterTotal}
        filesLength={groups.length}
-        itemHeight={49}
+        itemHeight={48}
        useReactWindow={!withPaging}
      >
        {groups.map((item, index) => (
--- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.styled.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.styled.js
@ -58,12 +58,6 @@ export const GroupsTableContainer = styled(TableContainer)`
  }
  .table-row-selected + .table-row-selected {
    .table-row {
-      .table-container_group-title-cell,
-      .table-container_row-context-menu-wrapper {
-        margin-top: -1px;
-        border-image-slice: 1;
-        border-top: 1px solid;
-      }
      .table-container_group-title-cell {
        ${groupTitleCss}
        border-left: 0; //for Safari macOS
@ -86,11 +80,6 @@ export const GroupsTableContainer = styled(TableContainer)`
      .table-container_row-context-menu-wrapper {
        ${contextCss}
      }
-      .table-container_group-title-cell,
-      .table-container_row-context-menu-wrapper {
-        border-bottom: ${(props) =>
-          `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
-      }
    }
  }
 `;
@ -102,13 +91,27 @@ export const GroupsRowWrapper = styled.div`
 `;

 export const GroupsRow = styled(TableRow)`
+  .table-container_cell:not(.table-container_row-checkbox-wrapper) {
+    height: auto;
+    max-height: 48;
+  }
+
  .table-container_cell {
-    height: 48px;
-    max-height: 48px;
+    border-top: ${(props) =>
+      `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+    margin-top: -1px;
+
    background: ${(props) =>
      (props.checked || props.isActive) &&
      `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
  }
+
+  .table-container_row-context-menu-wrapper {
+    height: 49px !important;
+    max-height: none !important;
+    box-sizing: border-box;
+  }
+
  .table-container_row-checkbox-wrapper {
    min-width: 48px;
    ${(props) =>
@ -160,9 +163,6 @@ export const GroupsRow = styled(TableRow)`
      cursor: pointer;
      background: ${(props) =>
        `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
-      border-top: ${(props) =>
-        `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
-      margin-top: -1px;
    }
    .table-container_group-title-cell {
      ${(props) =>
--- a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/PeopleRowContainer.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/PeopleRowContainer.js
@ -27,50 +27,31 @@ const marginStyles = css`
 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 {
+  .row-list-item:first-child {
    .user-row {
-      border-top: 1px solid #2da7db !important;
+      border-top: 2px solid transparent;
+    }
+
+    .row-selected {
+      .user-row {
+        border-top-color: ${(props) =>
+          `${props.theme.filesSection.tableView.row.borderColor} !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}
-    }
+  .row-list-item {
+    margin-top: -1px;
  }
 `;

--- a/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/People/RowView/SimpleUserRow.js
@ -12,18 +12,24 @@ import { mobile, tablet } from "@docspace/shared/utils/device";

 const marginStyles = css`
  margin-left: -24px;
-  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;

  @media ${tablet} {
    margin-left: -16px;
-    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
 `;

+const marginStylesUserRowContainer = css`
+  margin-right: -48px !important;
+
+  @media ${tablet} {
+    margin-right: -32px !important;
+  }
+`;
+
 const checkedStyle = css`
  background: ${(props) => props.theme.filesSection.rowView.checkedBackground};
  ${marginStyles}
@ -49,6 +55,15 @@ const StyledWrapper = styled.div`
    outline: none;
    background: none !important;
  }
+
+  .user-row-container {
+    ${(props) =>
+      (props.checked || props.isActive) && marginStylesUserRowContainer};
+
+    :hover {
+      ${marginStylesUserRowContainer}
+    }
+  }
 `;

 StyledWrapper.defaultProps = { theme: Base };
@ -56,23 +71,29 @@ StyledWrapper.defaultProps = { theme: Base };
 const StyledSimpleUserRow = styled(Row)`
  ${(props) => (props.checked || props.isActive) && checkedStyle};

+  .row_content {
+    height: 58px;
+  }
+
+  height: 59px;
+
+  border-top: ${(props) =>
+    `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+  border-bottom: ${(props) =>
+    `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+
+  box-sizing: border-box;
+  margin-top: -1px;
+
  ${!isMobile &&
  css`
    :hover {
      cursor: pointer;
      ${checkedStyle}
-
-      margin-top: -3px;
-      padding-bottom: 1px;
-      border-top: ${(props) =>
-        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
-      border-bottom: ${(props) =>
-        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
    }
  `}

  position: unset;
-  margin-top: -2px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  .styled-element {
@ -119,8 +140,10 @@ const SimpleUserRow = (props) => {
        isChecked || isActive ? "row-selected" : ""
      }`}
      value={value}
+      checked={isChecked}
+      isActive={isActive}
    >
-      <div className="user-item">
+      <div className="user-item user-row-container">
        <StyledSimpleUserRow
          key={item.id}
          data={item}
--- a/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js
@ -25,14 +25,17 @@ const StyledWrapper = styled.div`
 `;

 const StyledPeopleRow = styled(TableRow)`
+  .table-container_cell {
+    border-top: ${(props) =>
+      `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+    margin-top: -1px;
+  }
+
  :hover {
    .table-container_cell {
      cursor: pointer;
      background: ${(props) =>
        `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
-      border-top: ${(props) =>
-        `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
-      margin-top: -1px;
    }

    .table-container_user-name-cell {
@ -66,10 +69,18 @@ const StyledPeopleRow = styled(TableRow)`
    }
  }

-  .table-container_cell {
-    height: 48px;
-    max-height: 48px;
+  .table-container_row-context-menu-wrapper {
+    height: 49px !important;
+    max-height: none !important;
+    box-sizing: border-box;
+  }

+  .table-container_cell:not(.table-container_row-checkbox-wrapper) {
+    height: auto;
+    max-height: 48;
+  }
+
+  .table-container_cell {
    background: ${(props) =>
      (props.checked || props.isActive) &&
      `${props.theme.filesSection.tableView.row.backgroundActive} !important`};