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 {
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;
}

View File

@ -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>
)