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

Merge pull request #63 from phuoc-ng/overlay-button

Browse Source 
Add overlay play button
This commit is contained in:
phuoc-ng
2019-11-30 16:47:18 +07:00
committed by GitHub
parent e98a843262 7dc6186777
commit c0091af17f
6 changed files with 181 additions and 7 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 {
Menu = 'Menu',
Modal = 'Modal',
Notification = 'Notification',
OverlayPlayButton = 'Overlay play button',
Pagination = 'Pagination',
PresenceIndicator = 'Presence indicator',
PreviousNextButtons = 'Previous next buttons',

1
client/pages/ExplorePage.tsx
View File

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

58
client/patterns/overlay-play-button/Cover.tsx Normal file
View File

@@ -0,0 +1,58 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Triangle from '../../placeholders/Triangle';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
height: '100%',
position: 'relative',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.25)',
display: 'flex',
height: '100%',
justifyContent: 'center',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
border: '2px solid #FFF',
borderRadius: '9999px',
display: 'flex',
height: '32px',
justifyContent: 'center',
width: '32px',
}}
>
<Triangle backgroundColor='#FFF' corner='r' size={8} />
</div>
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

98
client/patterns/overlay-play-button/Details.tsx Normal file
View File

@@ -0,0 +1,98 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Overlay play button">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
height: '100%',
position: 'relative',
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.25)',
display: 'flex',
height: '100%',
justifyContent: 'center',
left: 0,
position: 'absolute',
top: 0,
width: '100%',
}}
>
<div
style={{
alignItems: 'center',
border: '4px solid #FFF',
borderRadius: '9999px',
display: 'flex',
height: '64px',
justifyContent: 'center',
width: '64px',
}}
>
<Triangle backgroundColor='#FFF' corner='r' size={8} />
</div>
</div>
</div>
</div>
)}
source={`
<div style="
/* Used to position the overlay */
position: relative;
">
<!-- The video element -->
<video src="..." />
<!-- The overlay area -->
<div style="
/* Position */
left: 0;
position: absolute;
top: 0;
/* Take full size */
height: 100%;
width: 100%;
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
/* Add a dark background */
background-color: 'rgba(0, 0, 0, 0.25)',
">
<!-- The player button -->
...
</div>
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

29
client/placeholders/Triangle.tsx
View File

@@ -1,43 +1,58 @@
import React from 'react';
interface TriangleProps {
backgroundColor?: string;
corner?: string;
size?: number;
}
const Triangle: React.FC<TriangleProps> = ({ size = 16, corner = 'tl' }) => {
const Triangle: React.FC<TriangleProps> = ({
backgroundColor = 'rgba(0, 0, 0, .3)',
size = 16,
corner = 'tl',
}) => {
let bw = '';
let bc = '';
switch (corner) {
case 't':
bw = `0 ${size}px ${size}px ${size}px`;
bc = 'transparent transparent rgba(0, 0, 0, .3) transparent';
bc = `transparent transparent ${backgroundColor} transparent`;
break;
case 'r':
bw = `${size}px 0 ${size}px ${2 * size}px`;
bc = `transparent transparent transparent ${backgroundColor}`;
break;
case 'b':
bw = `${size}px ${size}px 0 ${size}px`;
bc = 'rgba(0, 0, 0, .3) transparent transparent transparent';
bc = `${backgroundColor} transparent transparent transparent`;
break;
case 'l':
bw = `${size}px ${2 * size}px ${size}px 0`;
bc = `transparent ${backgroundColor} transparent transparent`;
break;
case 'tr':
bw = `0 ${size}px ${size}px 0`;
bc = 'transparent rgba(0, 0, 0, .3) transparent transparent';
bc = `transparent ${backgroundColor} transparent transparent`;
break;
case 'br':
bw = `0 0 ${size}px ${size}px`;
bc = 'transparent transparent rgba(0, 0, 0, .3) transparent';
bc = `transparent transparent ${backgroundColor} transparent`;
break;
case 'bl':
bw = `${size}px 0 0 ${size}px`;
bc = 'transparent transparent transparent rgba(0, 0, 0, .3)';
bc = `transparent transparent transparent ${backgroundColor}`;
break;
case 'tl':
default:
bw = `${size}px ${size}px 0 0`;
bc = 'rgba(0, 0, 0, .3) transparent transparent transparent';
bc = `${backgroundColor} transparent transparent transparent`;
break;
}

1
public/sitemap.xml
View File

@@ -26,6 +26,7 @@
<url><loc>https://csslayout.io/patterns/menu</loc></url>
<url><loc>https://csslayout.io/patterns/modal</loc></url>
<url><loc>https://csslayout.io/patterns/notification</loc></url>
<url><loc>https://csslayout.io/patterns/overlay-play-button</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>