Merge pull request #928 from ONLYOFFICE/bugfix/fix-drag-styles
Web:Client:Home: fix drag styles for rooms
This commit is contained in:
commit
09a63ba190
@ -20,11 +20,11 @@ const checkedStyle = css`
|
||||
`;
|
||||
|
||||
const draggingStyle = css`
|
||||
background: ${(props) => props.theme.filesSection.rowView.draggingBackground};
|
||||
&:hover {
|
||||
background: ${(props) =>
|
||||
props.theme.filesSection.rowView.draggingHoverBackground};
|
||||
}
|
||||
background: ${(props) =>
|
||||
props.isDragOver
|
||||
? props.theme.dragAndDrop.acceptBackground
|
||||
: props.theme.dragAndDrop.background};
|
||||
|
||||
${marginStyles}
|
||||
`;
|
||||
|
||||
@ -208,6 +208,8 @@ const SimpleFilesRow = (props) => {
|
||||
isRooms,
|
||||
} = props;
|
||||
|
||||
const [isDragOver, setIsDragOver] = React.useState(false);
|
||||
|
||||
const withAccess = isAdmin || item.access === 0;
|
||||
const isSmallContainer = sectionWidth <= 500;
|
||||
|
||||
@ -220,6 +222,16 @@ const SimpleFilesRow = (props) => {
|
||||
/>
|
||||
);
|
||||
|
||||
const onDragOver = (dragOver) => {
|
||||
if (dragOver !== isDragOver) {
|
||||
setIsDragOver(dragOver);
|
||||
}
|
||||
};
|
||||
|
||||
const onDragLeave = () => {
|
||||
setIsDragOver(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledWrapper
|
||||
id={id}
|
||||
@ -238,6 +250,8 @@ const SimpleFilesRow = (props) => {
|
||||
onDrop={onDrop}
|
||||
onMouseDown={onMouseDown}
|
||||
dragging={dragging && isDragging}
|
||||
onDragOver={onDragOver}
|
||||
onDragLeave={onDragLeave}
|
||||
>
|
||||
<StyledSimpleFilesRow
|
||||
key={item.id}
|
||||
@ -267,6 +281,7 @@ const SimpleFilesRow = (props) => {
|
||||
getContextModel={getContextModel}
|
||||
showHotkeyBorder={showHotkeyBorder}
|
||||
isRoom={item.isRoom}
|
||||
isDragOver={isDragOver}
|
||||
>
|
||||
<FilesRowContent
|
||||
item={item}
|
||||
|
@ -368,6 +368,10 @@ const FilesTableRow = (props) => {
|
||||
let modifiedAvailableDrag = true;
|
||||
let sizeAvailableDrag = true;
|
||||
let typeAvailableDrag = true;
|
||||
let ownerAvailableDrag = true;
|
||||
let tagsAvailableDrag = true;
|
||||
let activityAvailableDrag = true;
|
||||
|
||||
let buttonsAvailableDrag = true;
|
||||
|
||||
if (dragging && isDragging) {
|
||||
@ -379,6 +383,9 @@ const FilesTableRow = (props) => {
|
||||
sizeAvailableDrag = availableColumns.includes("Size");
|
||||
typeAvailableDrag = availableColumns.includes("Type");
|
||||
buttonsAvailableDrag = availableColumns.includes("QuickButtons");
|
||||
ownerAvailableDrag = availableColumns.includes("Owner");
|
||||
tagsAvailableDrag = availableColumns.includes("Tags");
|
||||
activityAvailableDrag = availableColumns.includes("Activity");
|
||||
}
|
||||
|
||||
return (
|
||||
@ -440,6 +447,7 @@ const FilesTableRow = (props) => {
|
||||
/>
|
||||
<StyledBadgesContainer>{badgesComponent}</StyledBadgesContainer>
|
||||
</TableCell>
|
||||
|
||||
{(item.isRoom || isRooms) && (
|
||||
<TableCell
|
||||
style={
|
||||
@ -470,7 +478,7 @@ const FilesTableRow = (props) => {
|
||||
{item.isRoom && (
|
||||
<TableCell
|
||||
style={
|
||||
!typeAvailableDrag
|
||||
!tagsAvailableDrag
|
||||
? { background: "none !important" }
|
||||
: dragStyles.style
|
||||
}
|
||||
@ -482,10 +490,13 @@ const FilesTableRow = (props) => {
|
||||
/>
|
||||
</TableCell>
|
||||
)}
|
||||
|
||||
{!personal && (
|
||||
<TableCell
|
||||
style={
|
||||
!authorAvailableDrag ? { background: "none" } : dragStyles.style
|
||||
!authorAvailableDrag && !ownerAvailableDrag
|
||||
? { background: "none" }
|
||||
: dragStyles.style
|
||||
}
|
||||
{...selectionProp}
|
||||
>
|
||||
@ -515,7 +526,9 @@ const FilesTableRow = (props) => {
|
||||
|
||||
<TableCell
|
||||
style={
|
||||
!modifiedAvailableDrag ? { background: "none" } : dragStyles.style
|
||||
!modifiedAvailableDrag && !activityAvailableDrag
|
||||
? { background: "none" }
|
||||
: dragStyles.style
|
||||
}
|
||||
{...selectionProp}
|
||||
>
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import DragAndDrop from "@docspace/components/drag-and-drop";
|
||||
@ -12,6 +13,10 @@ import withQuickButtons from "../../../../../HOCs/withQuickButtons";
|
||||
import ItemIcon from "../../../../../components/ItemIcon";
|
||||
import withBadges from "../../../../../HOCs/withBadges";
|
||||
|
||||
const StyledDragAndDrop = styled(DragAndDrop)`
|
||||
border-radius: 6px;
|
||||
`;
|
||||
|
||||
const FileTile = (props) => {
|
||||
const {
|
||||
item,
|
||||
@ -70,7 +75,7 @@ const FileTile = (props) => {
|
||||
|
||||
return (
|
||||
<div ref={props.selectableRef} id={id}>
|
||||
<DragAndDrop
|
||||
<StyledDragAndDrop
|
||||
data-title={item.title}
|
||||
value={value}
|
||||
className={`files-item ${className} ${item.id}_${item.fileExst}`}
|
||||
@ -121,7 +126,7 @@ const FileTile = (props) => {
|
||||
/>
|
||||
{badgesComponent}
|
||||
</Tile>
|
||||
</DragAndDrop>
|
||||
</StyledDragAndDrop>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -119,13 +119,6 @@ const StyledTile = styled.div`
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
${(props) =>
|
||||
props.isFolder &&
|
||||
props.dragging &&
|
||||
css`
|
||||
background: ${(props) =>
|
||||
props.theme.filesSection.rowView.draggingBackground};
|
||||
`};
|
||||
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
|
||||
}
|
||||
|
||||
@ -134,17 +127,6 @@ const StyledTile = styled.div`
|
||||
${(props) => (props.checked || props.isActive) && checkedStyle};
|
||||
}
|
||||
|
||||
&:hover:before,
|
||||
&:hover:after {
|
||||
${(props) =>
|
||||
props.isFolder &&
|
||||
props.dragging &&
|
||||
css`
|
||||
background: ${(props) =>
|
||||
props.theme.filesSection.rowView.draggingHoverBackground};
|
||||
`};
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
opacity: ${(props) => (props.checked ? 1 : 0)};
|
||||
|
Loading…
Reference in New Issue
Block a user