IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #191 from ONLYOFFICE/bugfix/rows-jump-styles

Browse Source 
bugfix/rows-jump-styles
This commit is contained in:
Alexey Safronov 2024-02-02 19:00:44 +04:00 committed by GitHub
commit 8c775468e0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 171 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/HOCs/withPeopleContent.js
View File

@ -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 };

41
packages/client/src/pages/Home/Section/AccountsBody/RowView/PeopleRowContainer.js
View File

@ -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;
}
`;

46
packages/client/src/pages/Home/Section/AccountsBody/RowView/SimpleUserRow.js
View File

@ -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}
>
<div className="user-item">
<div className="user-item user-row-container">
<StyledSimpleUserRow
key={item.id}
data={item}
@ -134,6 +157,7 @@ const SimpleUserRow = (props) => {
className={"user-row"}
onRowClick={onRowClick}
onContextClick={onRowContextClick}
withoutBorder={true}
>
<UserContent {...props} />
</StyledSimpleUserRow>

2
packages/client/src/pages/Home/Section/AccountsBody/RowView/userContent.js
View File

@ -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`

20
packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js
View File

@ -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) => (

23
packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js
View File

@ -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`};

69
packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
View File

@ -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}
</StyledRowContainer>

130
packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
View File

@ -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}
>
<DragAndDrop
data-title={item.title}
@ -456,13 +440,13 @@ const SimpleFilesRow = (props) => {
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}
>

74
packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
View File

@ -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;

34
packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
View File

@ -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}
</TableBody>