mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-14 09:00:30 +00:00
share modal refactored
This commit is contained in:
svetlagasheva
parent
2baca1b33e
commit
7477b4aaf6
2 changed files with 99 additions and 125 deletions
|
|
@ -1,10 +1,19 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Input } from 'stremio-common';
|
||||
import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
|
||||
import colors from 'stremio-colors';
|
||||
import styles from './styles';
|
||||
|
||||
const renderUrl = (copyToClipboard, url) => {
|
||||
const renderInput = ({ className, href, icon, label }, url) => {
|
||||
return (
|
||||
<Input className={styles[className]} type={'link'} href={href + url} target={'_blank'}>
|
||||
<Icon className={styles['icon']} icon={icon} />{label}
|
||||
</Input>
|
||||
);
|
||||
}
|
||||
|
||||
const renderUrl = (url) => {
|
||||
if (url.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -19,6 +28,11 @@ const renderUrl = (copyToClipboard, url) => {
|
|||
);
|
||||
}
|
||||
|
||||
const copyToClipboard = (event) => {
|
||||
event.currentTarget.parentNode.children[0].select();
|
||||
document.execCommand('copy');
|
||||
}
|
||||
|
||||
const ShareModal = (props) => {
|
||||
const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.surface });
|
||||
const imageStyle = {
|
||||
|
|
@ -28,22 +42,16 @@ const ShareModal = (props) => {
|
|||
return (
|
||||
<div className={styles['share-modal']}>
|
||||
<div className={styles['x-container']}>
|
||||
<div onClick={props.closeModalDialog} style={imageStyle} className={styles['x-icon']} />
|
||||
<div onClick={props.onClose} style={imageStyle} className={styles['x-icon']} />
|
||||
</div>
|
||||
<div className={styles['info-container']}>
|
||||
<div className={styles['share-label']}>Share Add-on</div>
|
||||
<div className={styles['share-label']}>Share</div>
|
||||
<div className={styles['buttons']}>
|
||||
<div onClick={props.shareInFacebook} className={styles['facebook-button']}>
|
||||
<Icon className={styles['facebook-icon']} icon={'ic_facebook'} />FACEBOOK
|
||||
</div>
|
||||
<div onClick={props.shareInTwitter} className={styles['twitter-button']}>
|
||||
<Icon className={styles['twitter-icon']} icon={'ic_twitter'} />TWITTER
|
||||
</div>
|
||||
<div onClick={props.shareInGplus} className={styles['gplus-button']}>
|
||||
<Icon className={styles['gplus-icon']} icon={'ic_gplus'} />GOOGLE+
|
||||
</div>
|
||||
{renderInput({ className: 'facebook-button', href: 'https://www.facebook.com/sharer/sharer.php?u=', icon: 'ic_facebook', label: 'FACEBOOK' })}
|
||||
{renderInput({ className: 'twitter-button', href: 'https://twitter.com/home?status=', icon: 'ic_twitter', label: 'TWITTER' })}
|
||||
{renderInput({ className: 'gplus-button', href: 'https://plus.google.com/share?url=', icon: 'ic_gplus', label: 'GOOGLE+' })}
|
||||
</div>
|
||||
{renderUrl(props.copyToClipboard, props.url)}
|
||||
{renderUrl(props.url)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -51,14 +59,10 @@ const ShareModal = (props) => {
|
|||
|
||||
ShareModal.propTypes = {
|
||||
url: PropTypes.string.isRequired,
|
||||
closeModalDialog: PropTypes.func,
|
||||
shareInFacebook: PropTypes.func,
|
||||
shareInTwitter: PropTypes.func,
|
||||
shareInGplus: PropTypes.func,
|
||||
copyToClipboard: PropTypes.func
|
||||
onClose: PropTypes.func
|
||||
};
|
||||
ShareModal.defaultProps = {
|
||||
url: ''
|
||||
};
|
||||
|
||||
export default ShareModal;
|
||||
export default ShareModal;
|
||||
|
|
|
|||
|
|
@ -1,60 +1,12 @@
|
|||
@share-modal-width: 380px;
|
||||
@spacing: floor((@share-modal-width * 0.06));
|
||||
|
||||
.share-modal {
|
||||
width: @share-modal-width;
|
||||
padding: ceil((@spacing * 0.5));
|
||||
|
||||
.x-icon {
|
||||
width: ceil((@spacing * 0.5));
|
||||
height: ceil((@spacing * 0.5));
|
||||
}
|
||||
|
||||
.info-container {
|
||||
padding: floor((@spacing * 0.3)) ceil((@spacing * 0.9)) @spacing ceil((@spacing * 0.9));
|
||||
|
||||
.buttons {
|
||||
padding: @spacing 0;
|
||||
}
|
||||
|
||||
.facebook-button, .twitter-button, .gplus-button {
|
||||
width: ceil((@share-modal-width * 0.26));
|
||||
height: floor((@share-modal-width * 0.09));
|
||||
|
||||
.facebook-icon, .twitter-icon, .gplus-icon {
|
||||
width: ceil((@spacing * 0.6));
|
||||
height: ceil((@spacing * 0.6));
|
||||
margin-right: floor((@spacing * 0.3));
|
||||
}
|
||||
}
|
||||
|
||||
.url-container {
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
|
||||
.url {
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
padding: ceil((@spacing * 0.5));
|
||||
}
|
||||
|
||||
.copy-label {
|
||||
font-size: 14px;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
padding: ceil((@spacing * 0.5));
|
||||
|
||||
.copy-icon {
|
||||
width: ceil((@spacing * 0.7));
|
||||
height: ceil((@spacing * 0.7));
|
||||
margin-right: floor((@spacing * 0.3));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
--share-modal-width: 380px;
|
||||
--spacing: 22px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.share-modal {
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
width: var(--share-modal-width);
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-surfacelighter);
|
||||
|
||||
|
|
@ -63,73 +15,91 @@
|
|||
justify-content: flex-end;
|
||||
|
||||
.x-icon {
|
||||
cursor: pointer;
|
||||
width: calc(var(--spacing) * 0.5);
|
||||
height: calc(var(--spacing) * 0.5);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.share-label {
|
||||
color: var(--color-backgrounddarker);
|
||||
font-weight: 500;
|
||||
}
|
||||
.info-container {
|
||||
padding: calc(var(--spacing) * 0.2) calc(var(--spacing) * 0.9) calc(var(--spacing) * 1.2) calc(var(--spacing) * 0.9);
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
justify-content: space-between;
|
||||
.share-label {
|
||||
font-size: 1.1em;
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.facebook-button, .twitter-button, .gplus-button {
|
||||
.buttons {
|
||||
padding: var(--spacing) 0;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.facebook-button, .twitter-button, .gplus-button {
|
||||
width: calc(var(--share-modal-width) * 0.26);
|
||||
height: calc(var(--share-modal-width) * 0.09);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8em;
|
||||
color: var(--color-surfacelighter);
|
||||
cursor: pointer;
|
||||
|
||||
.facebook-icon, .twitter-icon, .gplus-icon {
|
||||
fill: var(--color-surfacelighter);
|
||||
.icon {
|
||||
margin-right: calc(var(--spacing) * 0.3);
|
||||
width: calc(var(--spacing) * 0.7);
|
||||
height: calc(var(--spacing) * 0.7);
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.facebook-button {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.twitter-button {
|
||||
background-color: var(--color-secondarylighter);
|
||||
}
|
||||
|
||||
.gplus-button {
|
||||
background-color: var(--color-signal2);
|
||||
}
|
||||
}
|
||||
|
||||
.facebook-button {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.twitter-button {
|
||||
background-color: var(--color-secondarylighter);
|
||||
}
|
||||
|
||||
.gplus-button {
|
||||
background-color: var(--color-signal2);
|
||||
}
|
||||
}
|
||||
|
||||
.url-container {
|
||||
display: flex;
|
||||
border-style: solid;
|
||||
border-color: var(--color-surface);
|
||||
|
||||
.url, .copy-label {
|
||||
color: var(--color-backgrounddarker40);
|
||||
}
|
||||
|
||||
.url {
|
||||
width: 75%;
|
||||
outline: none;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.copy-label {
|
||||
cursor: pointer;
|
||||
width: 25%;
|
||||
font-weight: 500;
|
||||
.url-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: var(--color-backgrounddarker20);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--color-surface);
|
||||
|
||||
.copy-icon {
|
||||
fill: var(--color-backgrounddarker40);
|
||||
.url {
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
width: 75%;
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
border-radius: 4px;
|
||||
color: var(--color-surfacedark);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.copy-label {
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
color: var(--color-surfacedark);
|
||||
background-color: var(--color-surfacelight);
|
||||
cursor: pointer;
|
||||
|
||||
.copy-icon {
|
||||
margin-right: calc(var(--spacing) * 0.3);
|
||||
width: calc(var(--spacing) * 0.7);
|
||||
height: calc(var(--spacing) * 0.7);
|
||||
fill: var(--color-backgrounddarker40);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue