mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-12 17:14:19 +02:00
Code Issues Releases Wiki Activity

Add avatar

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-04 21:45:23 +07:00
parent ff0d0a633c
commit 261d97f172
9 changed files with 152 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/patterns/avatar-list/Details.tsx
View File

@@ -80,7 +80,9 @@ const Details: React.FC<{}> = () => {
/>
</div>
<RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
<RelatedPatterns
patterns={[Pattern.Avatar, Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]}
/>
</DetailsLayout>
);
};

51
client/patterns/avatar/Cover.tsx Normal file
View File

@@ -0,0 +1,51 @@
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',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '48px',
padding: '4px',
width: '48px',
}}
>
<svg
viewBox="0 0 24 24"
style={{
fill: "none",
height: '100%',
stroke: "#FFF",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
width: '100%',
}}
>
<path
d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
M5,20.5
c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
/>
</svg>
</div>
</div>
</Frame>
);
};
export default Cover;

83
client/patterns/avatar/Details.tsx Normal file
View File

@@ -0,0 +1,83 @@
import React from 'react';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Avatar">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '64px',
padding: '8px',
width: '64px',
}}
>
<svg
viewBox="0 0 24 24"
style={{
fill: "none",
height: '100%',
stroke: "#FFF",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
width: '100%',
}}
>
<path
d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
M5,20.5
c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
/>
</svg>
</div>
</div>
)}
source={`
<div style="
/* Rounded border */
border-radius: 50%;
height: 64px;
width: 64px;
">
<!-- Avatar image -->
<img
src="..."
style="
/* Rounded border */
border-radius: 50%;
/* Take full size */
height: 100%;
width: 100%;
"
/>
</div>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
</DetailsLayout>
);
};
export default Details;

8
client/patterns/initial-avatar/Details.tsx
View File

@@ -86,7 +86,13 @@ const Details: React.FC<{}> = () => {
</div>
<RelatedPatterns
patterns={[Pattern.AvatarList, Pattern.Badge, Pattern.Centering, Pattern.PresenceIndicator]}
patterns={[
Pattern.Avatar,
Pattern.AvatarList,
Pattern.Badge,
Pattern.Centering,
Pattern.PresenceIndicator,
]}
/>
</DetailsLayout>
);

5
client/patterns/presence-indicator/Details.tsx
View File

@@ -72,7 +72,10 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]} />
<RelatedPatterns
patterns={[Pattern.Avatar, Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]}
/>
</DetailsLayout>
);
};