liuyu/IOPaint
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize shortcuts style

Browse Source
This commit is contained in:
Qing
2022-05-22 13:32:19 +08:00
parent b7c3f3e327
commit 45d1cc3f35
3 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx
View File

@@ -4,21 +4,37 @@ import { shortcutsState } from '../../store/Atoms'
import Modal from '../shared/Modal'
interface Shortcut {
children: ReactNode
content: string
keys: string[]
}
function ShortCut(props: Shortcut) {
const { children, content } = props
const { content, keys } = props
return (
<div className="shortcut-option">
<div className="shortcut-description">{content}</div>
<div className="shortcut-key">{children}</div>
<div style={{ display: 'flex', justifySelf: 'end', gap: '8px' }}>
{keys.map((k, index) => (
<div className="shortcut-key" key={k}>
{k}
</div>
))}
</div>
</div>
)
}
const isMac = (function () {
return /macintosh|mac os x/i.test(navigator.userAgent)
})()
const isWindows = (function () {
return /windows|win32/i.test(navigator.userAgent)
})()
const CmdOrCtrl = isMac ? 'Cmd' : 'Ctrl'
export default function ShortcutsModal() {
const [shortcutsShow, setShortcutState] = useRecoilState(shortcutsState)
@@ -34,39 +50,20 @@ export default function ShortcutsModal() {
show={shortcutsShow}
>
<div className="shortcut-options">
<ShortCut content="Enable Multi-Stroke Mask Drawing">
<p>Hold Cmd/Ctrl</p>
</ShortCut>
<ShortCut content="Undo Inpainting">
<p>Cmd/Ctrl + Z</p>
</ShortCut>
<ShortCut content="Pan">
<p>Space & Drag</p>
</ShortCut>
<ShortCut content="View Original Image">
<p>Hold Tab</p>
</ShortCut>
<ShortCut content="Reset Zoom/Pan">
<p>Esc</p>
</ShortCut>
<ShortCut content="Cancel Mask Drawing">
<p>Esc</p>
</ShortCut>
<ShortCut content="Run Inpainting Manually">
<p>Shift + R</p>
</ShortCut>
<ShortCut content="Decrease Brush Size">
<p>[</p>
</ShortCut>
<ShortCut content="Increase Brush Size">
<p>]</p>
</ShortCut>
<ShortCut content="Toggle Dark Mode">
<p>Shift + D</p>
</ShortCut>
<ShortCut content="Toggle Hotkeys Panel">
<p>H</p>
</ShortCut>
<ShortCut
content="Enable Multi-Stroke Mask Drawing"
keys={[`Hold ${CmdOrCtrl}`]}
/>
<ShortCut content="Undo Inpainting" keys={[CmdOrCtrl, 'Z']} />
<ShortCut content="Pan" keys={['Space & Drag']} />
<ShortCut content="View Original Image" keys={['Hold Tag']} />
<ShortCut content="Reset Zoom/Pan" keys={['Esc']} />
<ShortCut content="Cancel Mask Drawing" keys={['Esc']} />
<ShortCut content="Run Inpainting Manually" keys={['Shift', 'R']} />
<ShortCut content="Decrease Brush Size" keys={['[']} />
<ShortCut content="Increase Brush Size" keys={[']']} />
<ShortCut content="Toggle Dark Mode" keys={['Shift', 'D']} />
<ShortCut content="Toggle Hotkeys Panel" keys={['H']} />
</div>
</Modal>
)