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

Web:Client:Fixed line jumping on hover and when using hotkeys.

Browse Source
This commit is contained in:
Vlada Gazizova 2024-01-18 21:57:04 +03:00
parent 2f940a77cc
commit 7c4f07dec3
2 changed files with 72 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

131
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,
} = props;
const isMobileDevice = isMobileUtile();
@ -415,6 +394,11 @@ const SimpleFilesRow = (props) => {
? "row-selected"
: ""
}`}
checked={checkedProps}
isActive={isActive}
showHotkeyBorder={showHotkeyBorder}
isFirstElem={itemIndex === 0}
isHighlight={isHighlight}
>
<DragAndDrop
data-title={item.title}
@ -454,14 +438,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}
isHighlight={isHighlight}
withoutBorder={true}
>
<FilesRowContent
item={item}