mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-16 11:04:30 +02:00
Code Issues Releases Wiki Activity

Add keyboard shortcut pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-16 21:19:07 +07:00
parent bceeeb3180
commit 9e893fd26f
6 changed files with 153 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
client/patterns/keyboard-shortcut/Cover.tsx Normal file
View File

@@ -0,0 +1,34 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<kbd
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '4px',
boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
color: 'rgba(0, 0, 0, 0.7)',
padding: '8px',
}}
>
⌘ + C
</kbd>
</div>
</Frame>
);
};
export default Cover;

110
client/patterns/keyboard-shortcut/Details.tsx Normal file
View File

@@ -0,0 +1,110 @@
import React from 'react';
import { Link } from 'react-router-dom';
import Heading from '../../components/Heading';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
interface ItemProps {
action: string;
keys: string;
}
const Item: React.FC<ItemProps> = ({ action, keys }) => {
return (
<dl
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
margin: 0,
padding: '4px 0',
}}
>
<div>{action}</div>
<kbd
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '4px',
boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
color: 'rgba(0, 0, 0, 0.7)',
padding: '8px',
}}
>
{keys}
</kbd>
</dl>
);
};
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Keyboard shortcut">
<div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
We use the native <code>kbd</code> tag to display the keyboard shortcut.
</div>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<kbd
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '4px',
boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
color: 'rgba(0, 0, 0, 0.7)',
padding: '8px',
}}
>
⌘ + C
</kbd>
</div>
)}
source={`
<kbd style="
/* Background and color */
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
color: rgba(0, 0, 0, 0.7);
/* Bottom shadow */
box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
/* Spacing */
padding: 8px;
">
...
</kbd>
`}
/>
</div>
<section>
<Heading title="Use cases" />
<div style={{ padding: '32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
We can use this pattern with the <Link to="/patterns/property-list">property list</Link> pattern
to create shortkey preferences as following:
</div>
<div style={{ width: '250px' }}>
<Item action="Cut" keys="⌘ + X" />
<Item action="Copy" keys="⌘ + C" />
<Item action="Paste" keys="⌘ + V" />
</div>
</div>
</section>
</DetailsLayout>
);
};
export default Details;

2
client/patterns/property-list/Details.tsx
View File

@@ -92,7 +92,7 @@ const Details: React.FC<{}> = () => {
<section>
<Heading title="Use cases" />
<div style={{ padding: '64px', width: '500px' }}>
<div style={{ padding: '32px', width: '500px' }}>
<Item>
<dt>Name</dt>
<dd>WebAssembly in Action</dd>