optimize shortcuts view

This commit is contained in:
Qing 2023-01-27 20:38:29 +08:00
parent 780517b91a
commit 96659f2aef
2 changed files with 43 additions and 20 deletions

View File

@ -15,8 +15,9 @@
} }
.shortcut-options { .shortcut-options {
display: grid; display: flex;
row-gap: 1rem; gap: 48px;
flex-direction: row;
.shortcut-option { .shortcut-option {
display: grid; display: grid;
@ -67,3 +68,10 @@
} }
} }
} }
.shortcut-options-column {
display: flex;
flex-direction: column;
gap: 12px;
width: 400px;
}

View File

@ -50,16 +50,30 @@ export default function ShortcutsModal() {
show={shortcutsShow} show={shortcutsShow}
> >
<div className="shortcut-options"> <div className="shortcut-options">
<div className="shortcut-options-column">
<ShortCut <ShortCut
content="Multi-Stroke Mask Drawing" content="Multi-Stroke Mask Drawing"
keys={[`Hold ${CmdOrCtrl}`]} keys={[`Hold ${CmdOrCtrl}`]}
/> />
<ShortCut content="Cancel Mask Drawing" keys={['Esc']} /> <ShortCut content="Cancel Mask Drawing" keys={['Esc']} />
<ShortCut content="Run Inpainting Manually" keys={['Shift', 'R']} /> <ShortCut
content="Trigger Manually Inpainting"
keys={['Shift', 'R']}
/>
<ShortCut content="Interactive Segmentation" keys={['I']} /> <ShortCut content="Interactive Segmentation" keys={['I']} />
<ShortCut content="Undo Inpainting" keys={[CmdOrCtrl, 'Z']} /> <ShortCut content="Undo Inpainting" keys={[CmdOrCtrl, 'Z']} />
<ShortCut content="Redo Inpainting" keys={[CmdOrCtrl, 'Shift', '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']} /> <ShortCut content="View Original Image" keys={['Hold Tab']} />
</div>
<div className="shortcut-options-column">
<ShortCut content="Pan" keys={['Space + Drag']} /> <ShortCut content="Pan" keys={['Space + Drag']} />
<ShortCut content="Reset Zoom/Pan" keys={['Esc']} /> <ShortCut content="Reset Zoom/Pan" keys={['Esc']} />
<ShortCut content="Decrease Brush Size" keys={['[']} /> <ShortCut content="Decrease Brush Size" keys={['[']} />
@ -69,6 +83,7 @@ export default function ShortcutsModal() {
<ShortCut content="Toggle Settings Dialog" keys={['S']} /> <ShortCut content="Toggle Settings Dialog" keys={['S']} />
<ShortCut content="Toggle File Manager" keys={['F']} /> <ShortCut content="Toggle File Manager" keys={['F']} />
</div> </div>
</div>
</Modal> </Modal>
) )
} }