Add the shape lock button for mobile (excalidraw#1054)

xixixao · Mar 24, 2020 · 104e48b · 104e48b
1 parent e38045c
commit 104e48b
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
+    }
+  }
+}