optimize shortcuts modal order

This commit is contained in:
Qing 2023-01-28 21:44:18 +08:00
parent 0ddc1f105c
commit 23552b7bd8
2 changed files with 24 additions and 26 deletions

View File

@ -22,7 +22,7 @@
.shortcut-option {
display: grid;
grid-template-columns: repeat(2, auto);
column-gap: 6rem;
column-gap: 2rem;
align-items: center;
@include mobile {
@ -73,5 +73,5 @@
display: flex;
flex-direction: column;
gap: 12px;
width: 400px;
width: 320px;
}

View File

@ -50,35 +50,33 @@ export default function ShortcutsModal() {
show={shortcutsShow}
>
<div className="shortcut-options">
<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="View Original Image" keys={['Hold Tab']} />
<ShortCut
content="Multi-Stroke Drawing"
keys={[`Hold ${CmdOrCtrl}`]}
/>
<ShortCut content="Cancel Drawing" keys={['Esc']} />
</div>
<div className="shortcut-options-column">
<ShortCut content="Undo" keys={[CmdOrCtrl, 'Z']} />
<ShortCut content="Redo" keys={[CmdOrCtrl, 'Shift', 'Z']} />
<ShortCut content="Copy Result" keys={[CmdOrCtrl, 'C']} />
<ShortCut content="Paste Image" keys={[CmdOrCtrl, 'V']} />
<ShortCut
content="Trigger Manually Inpainting"
keys={['Shift', 'R']}
/>
<ShortCut content="Trigger Interactive Segmentation" keys={['I']} />
</div>
<div className="shortcut-options-column">
<ShortCut content="Switch Theme" keys={['Shift', 'D']} />
<ShortCut content="Toggle Hotkeys Dialog" keys={['H']} />
<ShortCut content="Toggle Settings Dialog" keys={['S']} />
<ShortCut content="Toggle File Manager" keys={['F']} />