diff --git a/packages/client/src/HOCs/withPeopleContent.js b/packages/client/src/HOCs/withPeopleContent.js
index 4eba504ee5..9f6ef391ac 100644
--- a/packages/client/src/HOCs/withPeopleContent.js
+++ b/packages/client/src/HOCs/withPeopleContent.js
@@ -29,8 +29,8 @@ export default function withContent(WrappedContent) {
const onContentRowClick = (checked, user, addToSelection = true) => {
checked
- ? setBufferSelection(user, addToSelection)
- : setBufferSelection(null);
+ ? setBufferSelection(user, addToSelection)
+ : setBufferSelection(null);
};
const checkedProps = { checked };
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/RowView/PeopleRowContainer.js b/packages/client/src/pages/Home/Section/AccountsBody/RowView/PeopleRowContainer.js
index 169b8373a4..16a7ee72a3 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/RowView/PeopleRowContainer.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/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;
}
`;
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/RowView/SimpleUserRow.js b/packages/client/src/pages/Home/Section/AccountsBody/RowView/SimpleUserRow.js
index 19f044b22a..612f75a80f 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/RowView/SimpleUserRow.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/RowView/SimpleUserRow.js
@@ -12,18 +12,24 @@ import { mobile, tablet } from "@docspace/shared/utils";
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}
>
-
+
{
className={"user-row"}
onRowClick={onRowClick}
onContextClick={onRowContextClick}
+ withoutBorder={true}
>
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/RowView/userContent.js b/packages/client/src/pages/Home/Section/AccountsBody/RowView/userContent.js
index 1ac505bd72..7b59e9d4ca 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/RowView/userContent.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/RowView/userContent.js
@@ -20,7 +20,7 @@ const StyledRowContent = styled(RowContent)`
.badges {
flex-direction: row-reverse;
- margin-top: 9px;
+ margin-top: 10px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js
index 18772297a6..235e4c3703 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js
@@ -17,12 +17,6 @@ import { TableVersions } from "SRC_DIR/helpers/constants";
const COLUMNS_SIZE = `peopleColumnsSize_ver-${TableVersions.Accounts}`;
const INFO_PANEL_COLUMNS_SIZE = `infoPanelPeopleColumnsSize_ver-${TableVersions.Accounts}`;
-const marginCss = css`
- margin-top: -1px;
- border-top: ${(props) =>
- `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
-`;
-
const userNameCss = css`
${(props) =>
props.theme.interfaceDirection === "rtl"
@@ -34,8 +28,6 @@ const userNameCss = css`
margin-left: -24px;
padding-left: 24px;
`}
-
- ${marginCss}
`;
const contextCss = css`
@@ -49,8 +41,6 @@ const contextCss = css`
margin-right: -20px;
padding-right: 20px;
`}
-
- ${marginCss}
`;
const StyledTableContainer = styled(TableContainer)`
@@ -80,9 +70,7 @@ const StyledTableContainer = styled(TableContainer)`
.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}
@@ -110,12 +98,6 @@ const StyledTableContainer = styled(TableContainer)`
.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}`};
- }
}
}
`;
@@ -176,7 +158,7 @@ const Table = ({
hasMoreFiles={hasMoreAccounts}
itemCount={filterTotal}
filesLength={peopleList.length}
- itemHeight={49}
+ itemHeight={48}
useReactWindow={!withPaging}
>
{peopleList.map((item, index) => (
diff --git a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js
index 179debb4d6..92573e80bf 100644
--- a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js
@@ -20,14 +20,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 {
@@ -56,10 +59,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`};
diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
index 5eb86ac60b..215d9401b3 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
@@ -7,67 +7,28 @@ import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
import { Base } from "@docspace/shared/themes";
import { RowContainer } from "@docspace/shared/components/row-container";
-import marginStyles from "./CommonStyles";
import SimpleFilesRow from "./SimpleFilesRow";
const StyledRowContainer = styled(RowContainer)`
.row-list-item:first-child {
- .row-selected {
- .files-row {
- border-top: ${(props) =>
- `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
- margin-top: -1px;
- padding-top: 0px;
- padding-bottom: 1px;
- ${marginStyles};
+ .row-wrapper {
+ height: 57px;
+
+ margin-top: 1px;
+ border-top: 1px solid transparent;
+
+ .styled-checkbox-container {
+ padding-bottom: 5px;
+ }
+
+ .row_content {
+ padding-bottom: 5px;
}
}
}
- .row-selected + .row-wrapper:not(.row-selected) {
- .files-row {
- border-top: ${(props) =>
- `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
- margin-top: -3px;
- ${marginStyles}
- }
- }
- .row-wrapper:not(.row-selected)
- //+ .row-wrapper:not(.row-hotkey-border)
- + .row-selected {
- .files-row {
- border-top: ${(props) =>
- `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
- margin-top: -3px;
- ${marginStyles}
- }
- }
-
- .row-hotkey-border + .row-selected {
- .files-row {
- border-top: 1px solid #2da7db !important;
- }
- }
-
- .row-selected:last-child {
- .files-row {
- border-bottom: ${(props) =>
- `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
- ${marginStyles}
- }
- .files-row::after {
- height: 0px;
- }
- }
- .row-selected:first-child {
- .files-row {
- border-top: ${(props) =>
- `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
- margin-top: -2px;
- padding-top: 1px;
- padding-bottom: 1px;
- ${marginStyles};
- }
+ .row-list-item {
+ margin-top: -1px;
}
`;
@@ -129,7 +90,7 @@ const FilesRowContainer = ({
hasMoreFiles={hasMoreFiles}
draggable
useReactWindow={!withPaging}
- itemHeight={59}
+ itemHeight={58}
>
{filesListNode}
diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
index ecdb7a0b39..f54cc3cf37 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
@@ -33,11 +33,23 @@ const StyledWrapper = styled.div`
border-right: none;
margin-left: 0;
}
-`;
+ height: 59px;
+ box-sizing: border-box;
+
+ border-bottom: ${(props) =>
+ `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+ border-top: ${(props) =>
+ `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+ margin-top: -1px;
-const StyledSimpleFilesRow = styled(Row)`
${(props) => (props.checked || props.isActive) && checkedStyle};
- height: 56px;
+ ${(props) =>
+ (props.checked || props.isActive) &&
+ props.isFirstElem &&
+ css`
+ border-top-color: ${(props) =>
+ `${props.theme.filesSection.tableView.row.borderColor} !important`};
+ `};
${(props) =>
!isMobile &&
@@ -46,20 +58,43 @@ const StyledSimpleFilesRow = styled(Row)`
:hover {
cursor: pointer;
${checkedStyle}
-
- ${(props) =>
- !props.showHotkeyBorder &&
- css`
- margin-top: -2px;
- padding-top: 1px;
- 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`};
- `}
}
`};
+
+ ${(props) =>
+ props.showHotkeyBorder &&
+ css`
+ border-color: #2da7db !important;
+ z-index: 1;
+ position: relative;
+
+ margin-left: -24px;
+ margin-right: -24px;
+ padding-left: 24px;
+ padding-right: 24px;
+ `}
+
+ ${(props) =>
+ props.isHighlight &&
+ css`
+ ${marginStyles}
+ animation: Highlight 2s 1;
+
+ @keyframes Highlight {
+ 0% {
+ background: ${(props) => props.theme.filesSection.animationColor};
+ }
+
+ 100% {
+ background: none;
+ }
+ }
+ `}
+`;
+
+const StyledSimpleFilesRow = styled(Row)`
+ height: 56px;
+
position: unset;
cursor: ${(props) =>
!props.isThirdPartyFolder &&
@@ -74,63 +109,6 @@ const StyledSimpleFilesRow = styled(Row)`
margin-top: 0px;
- ${(props) =>
- props.showHotkeyBorder &&
- css`
- border-top: 1px solid #2da7db !important;
- margin-top: -1px;
- margin-left: -24px;
- margin-right: -24px;
- padding-left: 24px;
- padding-right: 24px;
- `}
-
- ${(props) =>
- props.isHighlight &&
- css`
- ${marginStyles}
-
- margin-top: -2px;
- padding-top: 1px;
- 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`};
-
- animation: Highlight 2s 1;
-
- @keyframes Highlight {
- 0% {
- background: ${(props) => props.theme.filesSection.animationColor};
- }
-
- 100% {
- background: none;
- }
- }
- `}
-
-
- ::after {
- ${(props) =>
- props.showHotkeyBorder &&
- css`
- background: #2da7db;
- padding-left: 24px;
- padding-right: 24px;
- margin-left: -24px;
- margin-right: -24px;
-
- @media ${tablet} {
- margin-left: -16px;
- margin-right: -16px;
- padding-left: 16px;
- padding-right: 16px;
- }
- `}
- }
-
${(props) =>
(!props.contextOptions || props.isEdit) &&
`
@@ -354,6 +332,7 @@ const SimpleFilesRow = (props) => {
badgesComponent,
onDragOver,
onDragLeave,
+ itemIndex,
badgeUrl,
} = props;
@@ -417,6 +396,11 @@ const SimpleFilesRow = (props) => {
? "row-selected"
: ""
}`}
+ checked={checkedProps}
+ isActive={isActive}
+ showHotkeyBorder={showHotkeyBorder}
+ isFirstElem={itemIndex === 0}
+ isHighlight={isHighlight}
>
{
className="files-row"
withAccess={withAccess}
getContextModel={getContextModel}
- showHotkeyBorder={showHotkeyBorder}
isRoom={item.isRoom}
isArchive={item.isArchive}
isDragOver={isDragActive}
isSmallContainer={isSmallContainer}
isRooms={isRooms}
folderCategory={folderCategory}
+ withoutBorder={true}
isHighlight={isHighlight}
badgeUrl={badgeUrl}
>
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
index ffca411ae3..9b1ca630d6 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
@@ -5,7 +5,6 @@ import DragAndDrop from "@docspace/shared/components/drag-and-drop/DragAndDrop";
import CursorPalmSvgUrl from "PUBLIC_DIR/images/cursor.palm.react.svg?url";
const hotkeyBorderStyle = css`
- border-bottom: 1px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to left, #2da7db 24px, #2da7db 24px);
`;
@@ -47,6 +46,31 @@ const contextMenuWrapperDraggingStyle = css`
`;
const StyledTableRow = styled(TableRow)`
+ .table-container_cell:not(.table-container_element-wrapper) {
+ border-top: ${(props) =>
+ `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+ margin-top: -1px;
+ border-left: 0; //for Safari
+ border-right: 0; //for Safari
+ }
+
+ .table-container_cell:not(.table-container_element-wrapper) {
+ height: auto;
+ max-height: 48;
+ }
+
+ .table-container_row-context-menu-wrapper {
+ height: 49px !important;
+ max-height: none !important;
+ box-sizing: border-box;
+
+ ${(props) =>
+ props.showHotkeyBorder &&
+ css`
+ position: relative;
+ `}
+ }
+
${(props) =>
props.isRoom &&
css`
@@ -63,15 +87,6 @@ const StyledTableRow = styled(TableRow)`
cursor: pointer;
background: ${(props) =>
`${props.theme.filesSection.tableView.row.backgroundActive} !important`};
-
- margin-top: ${(props) => (props.showHotkeyBorder ? "-2px" : "-1px")};
-
- ${(props) =>
- !props.showHotkeyBorder &&
- css`
- border-top: ${(props) =>
- `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
- `}
}
.table-container_file-name-cell {
${(props) =>
@@ -115,7 +130,12 @@ const StyledTableRow = styled(TableRow)`
/* cursor: wait; */
`}
- ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"}
+ ${(props) =>
+ props.showHotkeyBorder &&
+ css`
+ z-index: 1;
+ border-color: #2da7db !important;
+ `}
}
.table-container_element-wrapper,
@@ -233,32 +253,6 @@ const StyledTableRow = styled(TableRow)`
padding: 12px 0;
}
- ${(props) =>
- props.showHotkeyBorder &&
- css`
- .table-container_cell {
- margin-top: -2px;
-
- border-top: 1px solid #2da7db !important;
- border-right: 0;
- border-left: 0;
- }
- .table-container_file-name-cell > .table-container_cell {
- margin-top: 2px;
- border-top: 0px !important;
- }
-
- .item-file-name,
- .row_update-text,
- .expandButton,
- .badges,
- .tag,
- .author-cell,
- .table-container_cell > p {
- margin-top: 2px;
- }
- `}
-
${(props) =>
props.isHighlight &&
css`
@@ -334,12 +328,6 @@ const StyledBadgesContainer = styled.div`
display: flex;
align-items: center;
- ${(props) =>
- props.showHotkeyBorder &&
- css`
- margin-top: 1px;
- `}
-
.badges {
display: flex;
align-items: center;
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
index 7e36250e88..0f42c0c09b 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
@@ -13,12 +13,6 @@ import { TableBody } from "@docspace/shared/components/table";
import TableRow from "./TableRow";
import TableHeader from "./TableHeader";
-const marginCss = css`
- margin-top: -1px;
- border-top: ${(props) =>
- `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
-`;
-
const fileNameCss = css`
${(props) =>
props.theme.interfaceDirection === "rtl"
@@ -30,8 +24,6 @@ const fileNameCss = css`
margin-left: -24px;
padding-left: 24px;
`}
-
- ${marginCss}
`;
const contextCss = css`
@@ -45,8 +37,6 @@ const contextCss = css`
margin-right: -20px;
padding-right: 20px;
`}
-
- ${marginCss}
`;
const StyledTableContainer = styled(TableContainer)`
@@ -64,9 +54,7 @@ const StyledTableContainer = styled(TableContainer)`
.table-row {
.table-container_file-name-cell,
.table-container_row-context-menu-wrapper {
- margin-top: -1px;
border-image-slice: 1;
- border-top: 1px solid;
}
.table-container_file-name-cell {
${fileNameCss}
@@ -85,20 +73,6 @@ const StyledTableContainer = styled(TableContainer)`
}
}
- .table-hotkey-border + .table-row-selected {
- .table-row {
- .table-container_file-name-cell {
- border-top: unset !important;
- margin-top: 0 !important;
- }
-
- .table-container_row-context-menu-wrapper {
- border-top: unset !important;
- margin-top: 0 !important;
- }
- }
- }
-
.files-item:not(.table-row-selected) + .table-row-selected {
.table-row {
.table-container_file-name-cell {
@@ -108,12 +82,6 @@ const StyledTableContainer = styled(TableContainer)`
.table-container_row-context-menu-wrapper {
${contextCss}
}
-
- .table-container_file-name-cell,
- .table-container_row-context-menu-wrapper {
- border-bottom: ${(props) =>
- `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
- }
}
}
`;
@@ -251,7 +219,7 @@ const Table = ({
useReactWindow={!withPaging}
infoPanelVisible={infoPanelVisible}
columnInfoPanelStorageName={columnInfoPanelStorageName}
- itemHeight={49}
+ itemHeight={48}
>
{filesListNode}