From c8c724e63b7dc574baaffcc6279849e42264f1d1 Mon Sep 17 00:00:00 2001
From: DmitrySychugov <dmitry.sychugov@onlyoffice.com>
Date: Thu, 6 Jun 2024 20:02:17 +0500
Subject: [PATCH] Web: Client: fixed drag n drop style when editing index mode
 enabled

---
 .../client/src/components/Article/Body/Items.js    | 11 ++++++++++-
 .../Home/Section/Body/TableView/StyledTable.js     |  3 ++-
 .../pages/Home/Section/Body/TableView/TableRow.js  |  2 +-
 packages/shared/components/table/Table.styled.ts   | 14 ++++++++++++--
 packages/shared/components/table/TableRow.tsx      |  1 +
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/Article/Body/Items.js b/packages/client/src/components/Article/Body/Items.js
index e5f99ebd43..dc6e3dec33 100644
--- a/packages/client/src/components/Article/Body/Items.js
+++ b/packages/client/src/components/Article/Body/Items.js
@@ -75,10 +75,12 @@ const Item = ({
   iconBadge,
   folderId,
   currentColorScheme,
+  isIndexEditingMode,
 }) => {
   const [isDragActive, setIsDragActive] = useState(false);
 
-  const isDragging = dragging ? showDragItems(item) : false;
+  const isDragging =
+    dragging && !isIndexEditingMode ? showDragItems(item) : false;
 
   let value = "";
   if (isDragging) value = `${item.id} dragging`;
@@ -222,6 +224,7 @@ const Items = ({
   currentDeviceType,
   folderAccess,
   currentColorScheme,
+  isIndexEditingMode,
 }) => {
   const getEndOfBlock = React.useCallback(
     (item) => {
@@ -347,6 +350,7 @@ const Items = ({
             iconBadge={iconBadge}
             folderId={`document_catalog-${FOLDER_NAMES[item.rootFolderType]}`}
             currentColorScheme={currentColorScheme}
+            isIndexEditingMode={isIndexEditingMode}
           />
         );
       });
@@ -399,6 +403,7 @@ const Items = ({
       firstLoad,
       activeItemId,
       emptyTrashInProgress,
+      isIndexEditingMode,
     ],
   );
 
@@ -425,6 +430,7 @@ export default inject(
     clientLoadingStore,
     userStore,
     settingsStore,
+    indexingStore,
   }) => {
     const { isCommunity, isPaymentPageAvailable, currentDeviceType } =
       authStore;
@@ -441,6 +447,8 @@ export default inject(
       startDrag,
     } = filesStore;
 
+    const { isIndexEditingMode } = indexingStore;
+
     const { firstLoad } = clientLoadingStore;
 
     const { startUpload } = uploadDataStore;
@@ -493,6 +501,7 @@ export default inject(
       currentDeviceType,
       folderAccess,
       currentColorScheme,
+      isIndexEditingMode,
     };
   },
 )(withTranslation(["Files", "Common", "Translations"])(observer(Items)));
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
index 0965add892..bf3b00a03c 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
@@ -74,12 +74,12 @@ const contextMenuWrapperDraggingStyle = css`
 const StyledTableRow = styled(TableRow)`
   .table-container_cell:not(.table-container_element-wrapper) {
     border-top: ${(props) =>
+      !props.isIndexEditingMode &&
       `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
     margin-top: -1px;
     border-left: 0; //for Safari
     border-right: 0; //for Safari
   }
-
   ${(props) =>
     props.isIndexEditingMode &&
     css`
@@ -195,6 +195,7 @@ const StyledTableRow = styled(TableRow)`
     background: ${(props) =>
       (props.checked || props.isActive) &&
       !props.isIndexUpdated &&
+      !props.isIndexEditingMode &&
       `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
     cursor: ${(props) =>
       !props.isThirdPartyFolder &&
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js
index 62d90a0791..f43e75a514 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js
@@ -102,7 +102,7 @@ const FilesTableRow = (props) => {
   const dragStyles = {
     style: {
       background:
-        dragging && isDragging
+        dragging && isDragging && !isIndexEditingMode
           ? isDragActive
             ? acceptBackground
             : background
diff --git a/packages/shared/components/table/Table.styled.ts b/packages/shared/components/table/Table.styled.ts
index ae066d9031..3fe0dda961 100644
--- a/packages/shared/components/table/Table.styled.ts
+++ b/packages/shared/components/table/Table.styled.ts
@@ -106,6 +106,13 @@ const StyledTableContainer = styled.div<{ useReactWindow?: boolean }>`
     }
   }
 
+  .droppable-index {
+    width: 100vw;
+    height: 3px;
+    background-color: rgb(71, 129, 209);
+    position: absolute;
+  }
+
   .lengthen-header {
     border-image-slice: 1;
     border-image-source: ${(props) =>
@@ -443,7 +450,10 @@ const StyledTableBody = styled.div<{
   }
 `;
 
-const StyledTableRow = styled.div<{ dragging?: boolean }>`
+const StyledTableRow = styled.div<{
+  dragging?: boolean;
+  isIndexEditingMode?: boolean;
+}>`
   display: contents;
 
   .table-container_header-checkbox {
@@ -458,7 +468,7 @@ const StyledTableRow = styled.div<{ dragging?: boolean }>`
 
   .droppable-hover {
     background: ${(props) =>
-      props.dragging
+      props.dragging && !props.isIndexEditingMode
         ? `${props.theme.dragAndDrop.acceptBackground} !important`
         : "none"};
   }
diff --git a/packages/shared/components/table/TableRow.tsx b/packages/shared/components/table/TableRow.tsx
index 7bbcd4176b..8fa5402664 100644
--- a/packages/shared/components/table/TableRow.tsx
+++ b/packages/shared/components/table/TableRow.tsx
@@ -95,6 +95,7 @@ const TableRow = (props: TableRowProps) => {
   return (
     <StyledTableRow
       onContextMenu={onContextMenu}
+      isIndexEditingMode={isIndexEditingMode}
       className={`${className} table-container_row`}
       {...rest}
     >