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

Icon instead of background image; ref added; style changes

Browse source
This commit is contained in:
svetlagasheva 2019-04-04 14:10:23 +03:00
parent b65b104444
commit baf97cb280
2 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,10 +2,11 @@ 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';
import Icon from 'stremio-icons/dom';
import styles from './styles';
const textRef = React.createRef();
const renderInput = ({ className, href, icon, label }, url) => {
return (
<Input className={classnames(styles['button'], styles[className])} type={'link'} href={href + url} target={'_blank'}>
@ -21,7 +22,7 @@ const renderUrl = (url) => {
return (
<div className={styles['url-container']}>
<input className={styles['url']} defaultValue={url} readOnly={true} />
<Input ref={textRef} className={styles['url']} type={'text'} tabIndex={'-1'} defaultValue={url} />
<div onClick={copyToClipboard} className={styles['copy-button']}>
<Icon className={styles['icon']} icon={'ic_link'} />
<div className={styles['label']}>Copy</div>
@ -30,21 +31,16 @@ const renderUrl = (url) => {
);
}
const copyToClipboard = (event) => {
event.currentTarget.parentNode.children[0].select();
const copyToClipboard = () => {
textRef.current.select();
document.execCommand('copy');
}
const ShareModal = (props) => {
const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.surface });
const imageStyle = {
backgroundImage: `url('${placeholderIconUrl}')`
};
return (
<div className={styles['share-modal']}>
<div className={styles['x-container']}>
<div style={imageStyle} className={styles['x-icon']} onClick={props.onClose}/>
<Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} />
</div>
<div className={styles['info-container']}>
<div className={styles['share-label']}>Share</div>

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

@ -12,14 +12,18 @@
.x-container {
display: flex;
flex-direction: row;
justify-content: flex-end;
.x-icon {
width: calc(var(--spacing) * 0.5);
height: calc(var(--spacing) * 0.5);
background-position: center;
background-repeat: no-repeat;
.icon {
width: 0.8em;
height: 0.8em;
fill: var(--color-surfacedark);
cursor: pointer;
&:hover {
fill: var(--color-surface);
}
}
}
@ -35,7 +39,7 @@
padding: var(--spacing) 0;
display: flex;
flex-direction: row;
.button {
flex: 1;
height: calc(var(--share-modal-width) * 0.09);
@ -49,8 +53,8 @@
.icon {
margin-right: calc(var(--spacing) * 0.3);
width: calc(var(--spacing) * 0.7);
height: calc(var(--spacing) * 0.7);
width: 1.4em;
height: 1.4em;
fill: var(--color-surfacelighter);
}
@ -97,8 +101,8 @@
.icon {
margin-right: calc(var(--spacing) * 0.3);
width: calc(var(--spacing) * 0.7);
height: calc(var(--spacing) * 0.7);
width: 1.1em;
height: 1.1em;
fill: var(--color-surfacedarker);
}