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

Add presence indicator

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-29 14:39:24 +07:00
parent 0ac778ba39
commit c1cbfc28e2
9 changed files with 136 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/patterns/docked-at-corner/Details.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -138,6 +140,7 @@ const Details: React.FC<{}> = () => {
</div>
</div>
</section>
<RelatedPatterns patterns={[Pattern.PresenceIndicator]} />
</DetailsLayout>
);
};

2
client/patterns/drop-cap/Cover.tsx
View File

@@ -23,8 +23,8 @@ const Cover: React.FC<{}> = () => {
alignItems: 'center',
border: '2px dashed rgba(0, 0, 0, 0.3)',
display: 'flex',
marginRight: '8px',
justifyContent: 'center',
marginRight: '8px',
width: '32px',
}}
>

5
client/patterns/drop-cap/Details.tsx
View File

@@ -26,8 +26,9 @@ const Details: React.FC<{}> = () => {
>
<div style={{ width: '256px' }}>
<div className="p-drop-cap">
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document
written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web,
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup
language like HTML. CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.
</div>
</div>

45
client/patterns/presence-indicator/Cover.tsx Normal file
View File

@@ -0,0 +1,45 @@
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={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '32px',
position: 'relative',
width: '32px',
}}
>
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '9999px',
bottom: 0,
height: '8px',
position: 'absolute',
right: 0,
transform: 'translate(50%, 50%)',
width: '8px',
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

80
client/patterns/presence-indicator/Details.tsx Normal file
View File

@@ -0,0 +1,80 @@
import React from 'react';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Presence indicator">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
height: '64px',
marginRight: '16px',
position: 'relative',
width: '64px',
}}
>
<Circle size={64} />
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '9999px',
bottom: 0,
height: '16px',
position: 'absolute',
right: 0,
transform: 'translate(50%, 50%)',
width: '16px',
}}
/>
</div>
</div>
)}
source={`
<div style="
position: relative;
">
<!-- Other element such as avatar -->
...
<!-- The presense indicator -->
<div style="
/* Shown at the bottom right corner */
bottom: 0,
position: absolute;
right: 0;
transform: translate(50%, 50%);
/* Rounded border */
border-radius: 9999px;
height: 16px;
width: 16px;
/* Background color */
background-color: #FF4136;
" />
</div>
`}
/>
</div>
<RelatedPatterns patterns={[Pattern.DockedAtCorner]} />
</DetailsLayout>
);
};
export default Details;