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

share prompt styles updated

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-11-18 16:39:57 +02:00
parent 41e910e1f0
commit d01e51235c
2 changed files with 60 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/common/SharePrompt/SharePrompt.js
View file

@ -9,8 +9,10 @@ const styles = require('./styles');
const SharePrompt = ({ className, url }) => {
const inputRef = React.useRef(null);
const copyToClipboard = React.useCallback(() => {
inputRef.current.select();
document.execCommand('copy');
if (inputRef.current !== null) {
inputRef.current.select();
document.execCommand('copy');
}
}, []);
return (
<div className={classnames(className, styles['share-prompt-container'])}>
@ -25,7 +27,14 @@ const SharePrompt = ({ className, url }) => {
</Button>
</div>
<div className={styles['url-container']}>
<TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
<TextInput
ref={inputRef}
className={styles['url-text-input']}
type={'text'}
readOnly={true}
defaultValue={url}
tabIndex={-1}
/>
<Button className={styles['copy-button']} onClick={copyToClipboard}>
<Icon className={styles['icon']} icon={'ic_link'} />
<div className={styles['label']}>Copy</div>
@ -37,7 +46,7 @@ const SharePrompt = ({ className, url }) => {
SharePrompt.propTypes = {
className: PropTypes.string,
url: PropTypes.string.isRequired
url: PropTypes.string
};
module.exports = SharePrompt;

90
src/common/SharePrompt/styles.less
View file

@ -1,7 +1,8 @@
.share-prompt-container {
min-width: 18rem;
background: var(--color-surfacelighter);
.buttons-container {
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
@ -13,24 +14,10 @@
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0.6rem 1rem;
padding: 1rem;
.icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
margin-right: 0.6rem;
fill: var(--color-surfacelighter);
}
.label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
font-size: 0.8rem;
font-weight: 500;
color: var(--color-surfacelighter);
text-align: center;
&:not(:last-child) {
margin-right: 1rem;
}
&:hover {
@ -42,8 +29,22 @@
outline-offset: calc(-2 * var(--focus-outline-size));
}
&:not(:last-child) {
margin-right: 2rem;
.icon {
flex: none;
height: 1.2rem;
margin-right: 1rem;
fill: var(--color-surfacelighter);
}
.label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
max-height: 2.4em;
font-size: 0.9rem;
font-weight: 500;
text-align: center;
color: var(--color-surfacelighter);
}
}
@ -59,42 +60,29 @@
.url-container {
display: flex;
flex-direction: row;
margin-top: 2rem;
margin-top: 1rem;
border: thin solid var(--color-surface);
.url-content {
.url-text-input {
flex: 1;
min-width: 12rem;
padding: 0.6rem 1rem;
font-size: 0.9rem;
color: var(--color-surfacedark);
align-self: stretch;
padding: 1rem;
color: var(--color-backgroundlighter);
text-align: center;
border-right: thin solid var(--color-surface);
}
.copy-button {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0.6rem 1rem;
width: 8rem;
padding: 0.5rem;
background-color: var(--color-surface);
.icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
margin-right: 0.6rem;
fill: var(--color-surfacedarker);
}
.label {
color: var(--color-surfacedarker);
}
&:hover {
filter: brightness(1.2);
}
@ -103,6 +91,22 @@
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
outline-offset: calc(-1.5 * var(--focus-outline-size));
}
.icon {
flex: none;
width: 1.2rem;
height: 1.2rem;
margin-right: 0.5rem;
fill: var(--color-surfacedarker);
}
.label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
max-height: 2.4em;
color: var(--color-surfacedarker);
}
}
}
}