kamp/IOPaint
1
0
Fork 0
Code Issues Pull Requests Releases 1 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss
View File

@ -34,11 +34,10 @@
.shortcut-key {
justify-self: end;
font-family: 'WorkSans-Bold';
border: 1px solid var(--modal-hotkey-border-color);
padding: 0.4rem 1rem;
padding: 0.4rem 0.4rem;
width: max-content;
border-radius: 0.4rem;
border-radius: 0.2rem;
@include mobile {
padding: 0.2rem 0.4rem;
@ -48,7 +47,6 @@
.shortcut-description {
justify-self: start;
text-align: left;
width: 18rem;
@include mobile {
text-align: left;

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

5
lama_cleaner/app/src/components/shared/Modal.scss
View File

@ -4,8 +4,11 @@
inset: 0;
background-color: var(--model-mask-bg);
backdrop-filter: blur(12px);
@media (prefers-reduced-motion: no-preference) {
animation: opacityReveal 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
}
@keyframes contentShow {
0% {
@ -46,5 +49,7 @@
}
}
@media (prefers-reduced-motion: no-preference) {
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
}