Merge pull request #928 from ONLYOFFICE/bugfix/fix-drag-styles

Web:Client:Home: fix drag styles for rooms

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

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

packages/client/src/pages/Home/Section/Body/TableView/TableRow.js

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

packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js

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

packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

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