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