mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 06:07:33 +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

1
client/constants/Pattern.ts
View File

@@ -21,6 +21,7 @@ enum Pattern {
Modal = 'Modal',
Notification = 'Notification',
Pagination = 'Pagination',
PresenceIndicator = 'Presence indicator',
PreviousNextButtons = 'Previous next buttons',
PricingTable = 'Pricing table',
PropertyList = 'Property list',

1
client/pages/ExplorePage.tsx
View File

@@ -104,6 +104,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.Modal} />
<CoverCard pattern={Pattern.Notification} />
<CoverCard pattern={Pattern.Pagination} />
<CoverCard pattern={Pattern.PresenceIndicator} />
<CoverCard pattern={Pattern.PreviousNextButtons} />
<CoverCard pattern={Pattern.PricingTable} />
<CoverCard pattern={Pattern.PropertyList} />

1
client/pages/HomePage.tsx
View File

@@ -216,6 +216,7 @@ const HomePage = () => {
<CoverCard pattern={Pattern.Modal} />
<CoverCard pattern={Pattern.Notification} />
<CoverCard pattern={Pattern.Pagination} />
<CoverCard pattern={Pattern.PresenceIndicator} />
<CoverCard pattern={Pattern.PreviousNextButtons} />
<CoverCard pattern={Pattern.PricingTable} />
<CoverCard pattern={Pattern.PropertyList} />

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;

1
public/sitemap.xml
View File

@@ -26,6 +26,7 @@
<url><loc>https://csslayout.io/patterns/modal</loc></url>
<url><loc>https://csslayout.io/patterns/notification</loc></url>
<url><loc>https://csslayout.io/patterns/pagination</loc></url>
<url><loc>https://csslayout.io/patterns/presence-indicator</loc></url>
<url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>
<url><loc>https://csslayout.io/patterns/pricing-table</loc></url>
<url><loc>https://csslayout.io/patterns/progress-bar</loc></url>