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}