From 104e48b6cb257be53c58f9f88d2b3374f650c7f6 Mon Sep 17 00:00:00 2001
From: Sanghyeon Lee <yongdamsh@gmail.com>
Date: Tue, 24 Mar 2020 19:51:49 +0900
Subject: [PATCH] Add the shape lock button for mobile (#1054)

---
 src/components/App.tsx        |  2 +-
 src/components/LayerUI.tsx    |  8 ++++----
 src/components/LockIcon.tsx   |  5 +----
 src/components/MobileMenu.tsx |  8 ++++++++
 src/components/ToolIcon.scss  | 35 +++++++++++++++++++++++++++++------
 5 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index a37f7530a856..5bf550a01279 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -190,7 +190,7 @@ export class App extends React.Component<any, AppState> {
           language={getLanguage()}
           onRoomCreate={this.createRoom}
           onRoomDestroy={this.destroyRoom}
-          onToggleLock={this.toggleLock}
+          onLockToggle={this.toggleLock}
         />
         <main>
           <canvas
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index 623d6241b85b..68ace2f6b1b2 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -33,7 +33,7 @@ interface LayerUIProps {
   setElements: (elements: readonly ExcalidrawElement[]) => void;
   onRoomCreate: () => void;
   onRoomDestroy: () => void;
-  onToggleLock: () => void;
+  onLockToggle: () => void;
 }
 
 export const LayerUI = React.memo(
@@ -47,7 +47,7 @@ export const LayerUI = React.memo(
     setElements,
     onRoomCreate,
     onRoomDestroy,
-    onToggleLock,
+    onLockToggle,
   }: LayerUIProps) => {
     const isMobile = useIsMobile();
 
@@ -101,6 +101,7 @@ export const LayerUI = React.memo(
         setAppState={setAppState}
         onRoomCreate={onRoomCreate}
         onRoomDestroy={onRoomDestroy}
+        onLockToggle={onLockToggle}
       />
     ) : (
       <>
@@ -159,9 +160,8 @@ export const LayerUI = React.memo(
                     </Island>
                     <LockIcon
                       checked={appState.elementLocked}
-                      onChange={onToggleLock}
+                      onChange={onLockToggle}
                       title={t("toolBar.lock")}
-                      isButton={isMobile}
                     />
                   </Stack.Row>
                 </Stack.Col>
diff --git a/src/components/LockIcon.tsx b/src/components/LockIcon.tsx
index e7aedd8f302d..1cde1f5357d8 100644
--- a/src/components/LockIcon.tsx
+++ b/src/components/LockIcon.tsx
@@ -12,7 +12,6 @@ type LockIconProps = {
   checked: boolean;
   onChange?(): void;
   size?: LockIconSize;
-  isButton?: boolean;
 };
 
 const DEFAULT_SIZE: LockIconSize = "m";
@@ -46,9 +45,7 @@ export function LockIcon(props: LockIconProps) {
 
   return (
     <label
-      className={`ToolIcon ToolIcon__lock ${
-        props.isButton ? "ToolIcon_type_button" : "ToolIcon_type_floating"
-      } ${sizeCn}`}
+      className={`ToolIcon ToolIcon__lock ToolIcon_type_floating ${sizeCn}`}
       title={`${props.title} ${getShortcutKey("Q")}`}
     >
       <input
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index 114b35ad0dca..554b9a687b7c 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -14,6 +14,7 @@ import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
 import { RoomDialog } from "./RoomDialog";
 import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
+import { LockIcon } from "./LockIcon";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -24,6 +25,7 @@ type MobileMenuProps = {
   setElements: any;
   onRoomCreate: () => void;
   onRoomDestroy: () => void;
+  onLockToggle: () => void;
 };
 
 export function MobileMenu({
@@ -35,6 +37,7 @@ export function MobileMenu({
   setAppState,
   onRoomCreate,
   onRoomDestroy,
+  onLockToggle,
 }: MobileMenuProps) {
   return (
     <>
@@ -54,6 +57,11 @@ export function MobileMenu({
                     />
                   </Stack.Row>
                 </Island>
+                <LockIcon
+                  checked={appState.elementLocked}
+                  onChange={onLockToggle}
+                  title={t("toolBar.lock")}
+                />
               </Stack.Row>
             </Stack.Col>
           )}
diff --git a/src/components/ToolIcon.scss b/src/components/ToolIcon.scss
index 2446509d0789..a3a53a18afd5 100644
--- a/src/components/ToolIcon.scss
+++ b/src/components/ToolIcon.scss
@@ -106,12 +106,6 @@
 }
 
 .ToolIcon.ToolIcon__lock {
-  &.ToolIcon_type_button {
-    border-radius: 4px;
-    svg {
-      position: static;
-    }
-  }
   &.ToolIcon_type_floating {
     margin-left: 0.1rem;
   }
@@ -126,3 +120,32 @@
   font-family: var(--ui-font);
   user-select: none;
 }
+
+@media (max-width: 360px) {
+  .ToolIcon.ToolIcon__lock {
+    display: inline-block;
+    position: absolute;
+    top: 60px;
+    right: -8px;
+
+    margin-left: 0;
+    border-radius: 20px 0 0 20px;
+
+    background-color: var(--button-gray-1);
+    &:hover {
+      background-color: var(--button-gray-1);
+    }
+    &:active {
+      background-color: var(--button-gray-2);
+    }
+
+    .ToolIcon__icon {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: inherit;
+    }
+    svg {
+      position: static;
+    }
+  }
+}