Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-12 07:00:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

share modal improved

Browse source
This commit is contained in:
svetlagasheva 2019-04-03 18:37:30 +03:00
parent 7477b4aaf6
commit b65b104444
2 changed files with 33 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/common/ShareModal/ShareModal.js
View file

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Input } from 'stremio-common';
import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
import colors from 'stremio-colors';
@ -7,7 +8,7 @@ import styles from './styles';
const renderInput = ({ className, href, icon, label }, url) => {
return (
<Input className={styles[className]} type={'link'} href={href + url} target={'_blank'}>
<Input className={classnames(styles['button'], styles[className])} type={'link'} href={href + url} target={'_blank'}>
<Icon className={styles['icon']} icon={icon} />{label}
</Input>
);
@ -21,8 +22,9 @@ const renderUrl = (url) => {
return (
<div className={styles['url-container']}>
<input className={styles['url']} defaultValue={url} readOnly={true} />
<div onClick={copyToClipboard} className={styles['copy-label']}>
<Icon className={styles['copy-icon']} icon={'ic_link'} />Copy
<div onClick={copyToClipboard} className={styles['copy-button']}>
<Icon className={styles['icon']} icon={'ic_link'} />
<div className={styles['label']}>Copy</div>
</div>
</div>
);
@ -42,14 +44,13 @@ const ShareModal = (props) => {
return (
<div className={styles['share-modal']}>
<div className={styles['x-container']}>
<div onClick={props.onClose} style={imageStyle} className={styles['x-icon']} />
<div style={imageStyle} className={styles['x-icon']} onClick={props.onClose}/>
</div>
<div className={styles['info-container']}>
<div className={styles['share-label']}>Share</div>
<div className={styles['buttons']}>
{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.url)}
</div>

45
src/common/ShareModal/styles.less
View file

@ -34,12 +34,13 @@
.buttons {
padding: var(--spacing) 0;
display: flex;
justify-content: space-between;
flex-direction: row;
.facebook-button, .twitter-button, .gplus-button {
width: calc(var(--share-modal-width) * 0.26);
.button {
flex: 1;
height: calc(var(--share-modal-width) * 0.09);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 0.8em;
@ -52,6 +53,14 @@
height: calc(var(--spacing) * 0.7);
fill: var(--color-surfacelighter);
}
&:focus, &:hover {
filter: brightness(1.2);
}
&:not(:last-child) {
margin-right: 1em;
}
}
.facebook-button {
@ -61,16 +70,12 @@
.twitter-button {
background-color: var(--color-secondarylighter);
}
.gplus-button {
background-color: var(--color-signal2);
}
}
.url-container {
display: flex;
border-radius: 4px;
border: 1px solid var(--color-surface);
flex-direction: row;
border: calc(var(--focusable-border-size) * 0.5) solid var(--color-surface);
.url {
padding: calc(var(--spacing) * 0.5);
@ -78,27 +83,31 @@
font-size: 0.9em;
text-align: center;
text-overflow: ellipsis;
border-radius: 4px;
color: var(--color-surfacedark);
outline: none;
}
.copy-label {
.copy-button {
padding: calc(var(--spacing) * 0.5);
width: 25%;
display: flex;
flex-direction: row;
justify-content: center;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
color: var(--color-surfacedark);
background-color: var(--color-surfacelight);
background-color: var(--color-surface);
cursor: pointer;
.copy-icon {
.icon {
margin-right: calc(var(--spacing) * 0.3);
width: calc(var(--spacing) * 0.7);
height: calc(var(--spacing) * 0.7);
fill: var(--color-backgrounddarker40);
fill: var(--color-surfacedarker);
}
.label {
color: var(--color-surfacedarker);
}
&:hover {
background-color: var(--color-surface60);
}
}
}