From 96659f2aefd10debeab68b813005738aaf43852f Mon Sep 17 00:00:00 2001
From: Qing <cwq1913@gmail.com>
Date: Fri, 27 Jan 2023 20:38:29 +0800
Subject: [PATCH] optimize shortcuts view

---
 .../src/components/Shortcuts/Shortcuts.scss   | 12 ++++-
 .../components/Shortcuts/ShortcutsModal.tsx   | 51 ++++++++++++-------
 2 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss b/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss
index 23a6b13..d79300a 100644
--- a/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss
+++ b/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss
@@ -15,8 +15,9 @@
 }
 
 .shortcut-options {
-  display: grid;
-  row-gap: 1rem;
+  display: flex;
+  gap: 48px;
+  flex-direction: row;
 
   .shortcut-option {
     display: grid;
@@ -67,3 +68,10 @@
     }
   }
 }
+
+.shortcut-options-column {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 400px;
+}
diff --git a/lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx b/lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx
index ed4bd96..5c4f4dc 100644
--- a/lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx
+++ b/lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx
@@ -50,24 +50,39 @@ export default function ShortcutsModal() {
       show={shortcutsShow}
     >
       <div className="shortcut-options">
-        <ShortCut
-          content="Multi-Stroke Mask Drawing"
-          keys={[`Hold ${CmdOrCtrl}`]}
-        />
-        <ShortCut content="Cancel Mask Drawing" keys={['Esc']} />
-        <ShortCut content="Run Inpainting Manually" keys={['Shift', 'R']} />
-        <ShortCut content="Interactive Segmentation" keys={['I']} />
-        <ShortCut content="Undo Inpainting" keys={[CmdOrCtrl, 'Z']} />
-        <ShortCut content="Redo Inpainting" keys={[CmdOrCtrl, 'Shift', 'Z']} />
-        <ShortCut content="View Original Image" keys={['Hold Tab']} />
-        <ShortCut content="Pan" keys={['Space + Drag']} />
-        <ShortCut content="Reset Zoom/Pan" keys={['Esc']} />
-        <ShortCut content="Decrease Brush Size" keys={['[']} />
-        <ShortCut content="Increase Brush Size" keys={[']']} />
-        <ShortCut content="Toggle Dark Mode" keys={['Shift', 'D']} />
-        <ShortCut content="Toggle Hotkeys Dialog" keys={['H']} />
-        <ShortCut content="Toggle Settings Dialog" keys={['S']} />
-        <ShortCut content="Toggle File Manager" keys={['F']} />
+        <div className="shortcut-options-column">
+          <ShortCut
+            content="Multi-Stroke Mask Drawing"
+            keys={[`Hold ${CmdOrCtrl}`]}
+          />
+          <ShortCut content="Cancel Mask Drawing" keys={['Esc']} />
+          <ShortCut
+            content="Trigger Manually Inpainting"
+            keys={['Shift', 'R']}
+          />
+          <ShortCut content="Interactive Segmentation" keys={['I']} />
+          <ShortCut content="Undo Inpainting" keys={[CmdOrCtrl, 'Z']} />
+          <ShortCut
+            content="Redo Inpainting"
+            keys={[CmdOrCtrl, 'Shift', 'Z']}
+          />
+          <ShortCut
+            content="Copy Result to Clipboard"
+            keys={[CmdOrCtrl, 'C']}
+          />
+          <ShortCut content="Paste Image to Editor" keys={[CmdOrCtrl, 'V']} />
+          <ShortCut content="View Original Image" keys={['Hold Tab']} />
+        </div>
+        <div className="shortcut-options-column">
+          <ShortCut content="Pan" keys={['Space + Drag']} />
+          <ShortCut content="Reset Zoom/Pan" keys={['Esc']} />
+          <ShortCut content="Decrease Brush Size" keys={['[']} />
+          <ShortCut content="Increase Brush Size" keys={[']']} />
+          <ShortCut content="Toggle Dark Mode" keys={['Shift', 'D']} />
+          <ShortCut content="Toggle Hotkeys Dialog" keys={['H']} />
+          <ShortCut content="Toggle Settings Dialog" keys={['S']} />
+          <ShortCut content="Toggle File Manager" keys={['F']} />
+        </div>
       </div>
     </Modal>
   )