Client:Components:QuickButtons Fixed bug 67799 added lock icon

packages/client/src/HOCs/withQuickButtons.js

@@ -114,6 +114,7 @@ export default function withQuickButtons(WrappedComponent) {
         isPublicRoom,
         isPersonalRoom,
         isArchiveFolder,
+        currentDeviceType,
       } = this.props;
 
       const quickButtonsComponent = (
@@ -134,6 +135,7 @@ export default function withQuickButtons(WrappedComponent) {
           folderCategory={folderCategory}
           onCopyPrimaryLink={this.onCopyPrimaryLink}
           isArchiveFolder={isArchiveFolder}
+          currentDeviceType={currentDeviceType}
         />
       );
 
@@ -177,6 +179,7 @@ export default function withQuickButtons(WrappedComponent) {
 
       return {
         theme: settingsStore.theme,
+        currentDeviceType: settingsStore.currentDeviceType,
         isAdmin: authStore.isAdmin,
         lockFileAction,
         setFavoriteAction,

packages/client/src/components/QuickButtons.js

@@ -30,12 +30,14 @@ import LinkReactSvgUrl from "PUBLIC_DIR/images/link.react.svg?url";
 import LockedReactSvgUrl from "PUBLIC_DIR/images/locked.react.svg?url";
 import FileActionsFavoriteReactSvgUrl from "PUBLIC_DIR/images/file.actions.favorite.react.svg?url";
 import FavoriteReactSvgUrl from "PUBLIC_DIR/images/favorite.react.svg?url";
+import LockedReact12SvgUrl from "PUBLIC_DIR/images/icons/12/lock.react.svg?url";
 
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { isTablet, isMobile, commonIconsStyles } from "@docspace/shared/utils";
 import {
+  DeviceType,
   FileStatus,
   RoomsType,
   ShareAccessRights,
@@ -60,16 +62,26 @@ const QuickButtons = (props) => {
     onClickShare,
     isPersonalRoom,
     isArchiveFolder,
+    currentDeviceType,
   } = props;
 
+  const isMobile = currentDeviceType === DeviceType.mobile;
+
   const { id, locked, shared, fileStatus, title, fileExst } = item;
 
   const isFavorite =
     (fileStatus & FileStatus.IsFavorite) === FileStatus.IsFavorite;
 
   const isTile = viewAs === "tile";
+  const isRow = viewAs == "row";
 
-  const iconLock = locked ? FileActionsLockedReactSvgUrl : LockedReactSvgUrl;
+  const iconLock = useMemo(() => {
+    if (isMobile) {
+      return LockedReact12SvgUrl;
+    }
+
+    return locked ? FileActionsLockedReactSvgUrl : LockedReactSvgUrl;
+  }, [locked, isMobile]);
 
   const colorLock = locked
     ? theme.filesQuickButtons.sharedColor
@@ -90,13 +102,17 @@ const QuickButtons = (props) => {
   const tabletViewQuickButton = isTablet();
 
   const sizeQuickButton = isTile || tabletViewQuickButton ? "medium" : "small";
-
-  const displayBadges = viewAs === "table" || isTile || tabletViewQuickButton;
+  const displayBadges =
+    viewAs === "table" ||
+    (isRow && locked && isMobile) ||
+    isTile ||
+    tabletViewQuickButton;
 
   const setFavorite = () => onClickFavorite(isFavorite);
 
   const isAvailableLockFile =
     !folderCategory && fileExst && displayBadges && item.security.Lock;
+
   const isAvailableDownloadFile =
     isPublicRoom && item.security.Download && viewAs === "tile";
 

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

@@ -175,13 +175,6 @@ const StyledSimpleFilesRow = styled(Row)`
     }
   }
 
-  .lock-file {
-    cursor: ${(props) => (props.withAccess ? "pointer" : "default")};
-    svg {
-      height: 12px;
-    }
-  }
-
   .tablet-row-copy-link {
     display: none;
   }
@@ -241,6 +234,7 @@ const StyledSimpleFilesRow = styled(Row)`
   }
 
   .lock-file {
+    cursor: ${(props) => (props.withAccess ? "pointer" : "default")};
     svg {
       height: 16px;
     }
@@ -292,20 +286,26 @@ const StyledSimpleFilesRow = styled(Row)`
   }
 
   @media ${mobile} {
+    .lock-file {
+      svg {
+        height: 12px;
+      }
+    }
+
     .badges {
       gap: 8px;
     }
 
-    .badges__quickButtons:not(:empty) {
+    /* .badges__quickButtons:not(:empty) {
       ${(props) =>
-        props.theme.interfaceDirection === "rtl"
-          ? css`
-              margin-right: 8px;
-            `
-          : css`
-              margin-left: 8px;
-            `}
-    }
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            margin-right: 8px;
+          `
+        : css`
+            margin-left: 8px;
+          `}
+    } */
     .room__badges:empty,
     .file__badges:empty,
     .folder__badges:empty,

public/images/icons/12/lock.react.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 0C4.34315 0 3 1.34315 3 3V4C1.89543 4 1 4.89543 1 6V10C1 11.1046 1.89543 12 3 12H9C10.1046 12 11 11.1046 11 10V6C11 4.89543 10.1046 4 9 4V3C9 1.34315 7.65685 0 6 0ZM7 4V3C7 2.44772 6.55228 2 6 2C5.44772 2 5 2.44772 5 3V4H7ZM7 8C7 8.55228 6.55228 9 6 9C5.44772 9 5 8.55228 5 8C5 7.44772 5.44772 7 6 7C6.55228 7 7 7.44772 7 8Z" fill="#657077"/>
+</svg>