Web: Client: fixed drag n drop style when editing index mode enabled

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

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 &&

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

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"};
   }

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