From 263fef4eaaf3c31535c5d1e5b692ffbcc24542cd Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Sun, 26 Jan 2020 19:01:56 +0000
Subject: [PATCH] Add a gap between shapes and lock (#569)

* Add a gap between shapes and lock

The lock is a different type as the rest of the shapes, so we should visually separate it.

* redesign lock icon

Co-authored-by: David Luzar <luzar.david@gmail.com>
---
 src/components/LockIcon.tsx  |  2 +-
 src/components/ToolIcon.scss | 22 +++++++++++++++++++++
 src/index.tsx                | 37 +++++++++++++++++-------------------
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/src/components/LockIcon.tsx b/src/components/LockIcon.tsx
index e8db82f4..053387da 100644
--- a/src/components/LockIcon.tsx
+++ b/src/components/LockIcon.tsx
@@ -43,7 +43,7 @@ export function LockIcon(props: LockIconProps) {
   const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
 
   return (
-    <label className={`ToolIcon ${sizeCn}`} title={props.title}>
+    <label className={`ToolIcon ToolIcon__lock ${sizeCn}`} title={props.title}>
       <input
         className="ToolIcon_type_checkbox"
         type="checkbox"
diff --git a/src/components/ToolIcon.scss b/src/components/ToolIcon.scss
index 8e146e44..d4314fcf 100644
--- a/src/components/ToolIcon.scss
+++ b/src/components/ToolIcon.scss
@@ -60,3 +60,25 @@
     box-shadow: 0 0 0 2px #a5d8ff;
   }
 }
+
+.ToolIcon.ToolIcon__lock {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.1rem;
+
+  .ToolIcon__icon {
+    background-color: transparent;
+    width: 2rem;
+    height: 2em;
+  }
+  &:hover .ToolIcon__icon {
+    background-color: transparent;
+  }
+  &:active .ToolIcon__icon {
+    background-color: transparent;
+  }
+  &:focus .ToolIcon__icon {
+    box-shadow: none;
+  }
+}
diff --git a/src/index.tsx b/src/index.tsx
index b90535ef..59590e6a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -481,21 +481,6 @@ export class App extends React.Component<any, AppState> {
     );
   }
 
-  private renderShapeLock() {
-    const { elementLocked } = this.state;
-    return (
-      <LockIcon
-        checked={elementLocked}
-        onChange={() => {
-          this.setState({
-            elementLocked: !elementLocked,
-            elementType: elementLocked ? "selection" : this.state.elementType,
-          });
-        }}
-      />
-    );
-  }
-
   private renderShapesSwitcher() {
     const { t } = this.props;
 
@@ -525,7 +510,6 @@ export class App extends React.Component<any, AppState> {
             ></ToolButton>
           );
         })}
-        {this.renderShapeLock()}
       </>
     );
   }
@@ -623,10 +607,23 @@ export class App extends React.Component<any, AppState> {
               </div>
             </Stack.Col>
             <Stack.Col gap={4} align="start">
-              <Island padding={1}>
-                <h2 className="visually-hidden">Shapes</h2>
-                <Stack.Row gap={1}>{this.renderShapesSwitcher()}</Stack.Row>
-              </Island>
+              <Stack.Row gap={1}>
+                <Island padding={1}>
+                  <h2 className="visually-hidden">Shapes</h2>
+                  <Stack.Row gap={1}>{this.renderShapesSwitcher()}</Stack.Row>
+                </Island>
+                <LockIcon
+                  checked={this.state.elementLocked}
+                  onChange={() => {
+                    this.setState({
+                      elementLocked: !this.state.elementLocked,
+                      elementType: this.state.elementLocked
+                        ? "selection"
+                        : this.state.elementType,
+                    });
+                  }}
+                />
+              </Stack.Row>
             </Stack.Col>
             <div />
           </div>