Client: added index arrow to row view

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

@@ -74,6 +74,7 @@ const FilesRowContainer = ({
   withPaging,
   highlightFile,
   currentDeviceType,
+  isIndexEditingMode,
 }) => {
   useViewEffect({
     view: viewAs,
@@ -96,6 +97,7 @@ const FilesRowContainer = ({
         isHighlight={
           highlightFile.id == item.id && highlightFile.isExst === !item.fileExst
         }
+        isIndexEditingMode={isIndexEditingMode}
       />
     ));
   }, [
@@ -124,7 +126,13 @@ const FilesRowContainer = ({
 };
 
 export default inject(
-  ({ filesStore, settingsStore, infoPanelStore, treeFoldersStore }) => {
+  ({
+    filesStore,
+    settingsStore,
+    infoPanelStore,
+    treeFoldersStore,
+    indexingStore,
+  }) => {
     const {
       filesList,
       viewAs,
@@ -138,6 +146,7 @@ export default inject(
     const { isVisible: infoPanelVisible } = infoPanelStore;
     const { isRoomsFolder, isArchiveFolder, isTrashFolder } = treeFoldersStore;
     const { withPaging, currentDeviceType } = settingsStore;
+    const { isIndexEditingMode } = indexingStore;
 
     const isRooms = isRoomsFolder || isArchiveFolder;
 
@@ -154,6 +163,7 @@ export default inject(
       withPaging,
       highlightFile,
       currentDeviceType,
+      isIndexEditingMode,
     };
   },
 )(observer(FilesRowContainer));

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

@@ -362,6 +362,7 @@ const SimpleFilesRow = (props) => {
     itemIndex,
     badgeUrl,
     canDrag,
+    isIndexEditingMode,
   } = props;
 
   const isMobileDevice = isMobileUtile();
@@ -462,6 +463,7 @@ const SimpleFilesRow = (props) => {
           contextButtonSpacerWidth={displayShareButton}
           dragging={dragging && isDragging}
           isDragging={dragging}
+          isIndexEditingMode={isIndexEditingMode}
           isActive={isActive}
           inProgress={inProgress}
           isThirdPartyFolder={item.isThirdPartyFolder}

packages/shared/components/row/Row.tsx

@@ -25,11 +25,13 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React, { useRef } from "react";
+import ArrowReactSvgUrl from "PUBLIC_DIR/images/arrow2.react.svg?url";
 
 import { isMobile } from "react-device-detect"; // TODO: isDesktop=true for IOS(Firefox & Safari)
 import { isMobile as isMobileUtils } from "../../utils/device";
 
 import { Checkbox } from "../checkbox";
+import { ColorTheme, ThemeId } from "../color-theme";
 import {
   ContextMenuButton,
   ContextMenuButtonDisplayType,
@@ -71,6 +73,7 @@ const Row = (props: RowProps) => {
     className,
     badgeUrl,
     isDisabled,
+    isIndexEditingMode,
   } = props;
 
   const cm = useRef<null | {
@@ -213,30 +216,51 @@ const Row = (props: RowProps) => {
         {renderContentElement && (
           <StyledContentElement>{contentElement}</StyledContentElement>
         )}
-        {renderContext ? (
-          <ContextMenuButton
-            isFill
-            className="expandButton"
-            getData={getOptions}
-            directionX="right"
-            displayType={ContextMenuButtonDisplayType.toggle}
-            onClick={onContextMenu}
-            title={contextTitle}
-          />
+        {isIndexEditingMode ? (
+          <>
+            <ColorTheme
+              themeId={ThemeId.IndexIconButton}
+              iconName={ArrowReactSvgUrl}
+              className="index-up-icon"
+              size="small"
+              // onClick={onClickShare}
+            />
+            <ColorTheme
+              themeId={ThemeId.IndexIconButton}
+              iconName={ArrowReactSvgUrl}
+              className="index-down-icon"
+              size="small"
+              // onClick={onClickShare}
+            />
+          </>
         ) : (
-          <div className="expandButton"> </div>
+          <>
+            {renderContext ? (
+              <ContextMenuButton
+                isFill
+                className="expandButton"
+                getData={getOptions}
+                directionX="right"
+                displayType={ContextMenuButtonDisplayType.toggle}
+                onClick={onContextMenu}
+                title={contextTitle}
+              />
+            ) : (
+              <div className="expandButton"> </div>
+            )}
+            <ContextMenu
+              getContextModel={getContextModel}
+              model={contextData.contextOptions || []}
+              ref={cm}
+              header={contextMenuHeader}
+              withBackdrop={isMobileUtils()}
+              onHide={rowContextClose}
+              isRoom={isRoom}
+              isArchive={isArchive}
+              badgeUrl={badgeUrl}
+            />
+          </>
         )}
-        <ContextMenu
-          getContextModel={getContextModel}
-          model={contextData.contextOptions || []}
-          ref={cm}
-          header={contextMenuHeader}
-          withBackdrop={isMobileUtils()}
-          onHide={rowContextClose}
-          isRoom={isRoom}
-          isArchive={isArchive}
-          badgeUrl={badgeUrl}
-        />
       </StyledOptionButton>
     </StyledRow>
   );

packages/shared/components/row/Row.types.tsx

@@ -69,6 +69,7 @@ export interface RowProps {
   mode?: TMode;
   /** Removes the borders */
   withoutBorder?: boolean;
+  isIndexEditingMode: boolean;
   isRoom?: boolean;
   contextTitle?: string;
   badgesComponent?: React.ReactNode;