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

share addon improved

Browse source
This commit is contained in:
svetlagasheva 2018-12-05 17:46:00 +02:00
parent 8fd7d8e60c
commit dd028d2ecc
2 changed files with 108 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/common/ShareAddon/ShareAddon.js
View file

@ -12,9 +12,9 @@ const renderUrl = (copyToClipboard, url) => {
return ( return (
<div className={styles['url-container']}> <div className={styles['url-container']}>
<input className={styles['url']} defaultValue={url} readOnly={true} /> <input className={styles['url']} defaultValue={url} readOnly={true} />
<span onClick={copyToClipboard} className={styles['copy-label']}> <div onClick={copyToClipboard} className={styles['copy-label']}>
<Icon className={styles['copy-icon']} icon={'ic_link'} />Copy <Icon className={styles['copy-icon']} icon={'ic_link'} />Copy
</span> </div>
</div> </div>
); );
} }
@ -22,8 +22,6 @@ const renderUrl = (copyToClipboard, url) => {
const ShareAddon = (props) => { const ShareAddon = (props) => {
const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.neutrallight }); const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.neutrallight });
const imageStyle = { const imageStyle = {
width: 10,
height: 10,
backgroundImage: `url('${placeholderIconUrl}')` backgroundImage: `url('${placeholderIconUrl}')`
}; };
@ -33,7 +31,7 @@ const ShareAddon = (props) => {
<div onClick={props.closeModalDialog} style={imageStyle} className={styles['x-icon']} /> <div onClick={props.closeModalDialog} style={imageStyle} className={styles['x-icon']} />
</div> </div>
<div className={styles['info-container']}> <div className={styles['info-container']}>
<span className={styles['share-label']}>Share Add-on</span> <div className={styles['share-label']}>Share Add-on</div>
<div className={styles['buttons']}> <div className={styles['buttons']}>
<div onClick={props.shareInFacebook} className={styles['facebook-button']}> <div onClick={props.shareInFacebook} className={styles['facebook-button']}>
<Icon className={styles['facebook-icon']} icon={'ic_facebook'} />FACEBOOK <Icon className={styles['facebook-icon']} icon={'ic_facebook'} />FACEBOOK

176
src/common/ShareAddon/styles.less
View file

@ -1,8 +1,62 @@
@import 'stremio-colors'; @import 'stremio-colors';
@share-addon-width: 380px;
@spacing: floor((@share-addon-width * 0.06));
.share-addon {
width: @share-addon-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-addon-width * 0.26));
height: floor((@share-addon-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-addon { .share-addon {
width: 380px;
padding: 10px;
color: @colorwhite; color: @colorwhite;
background-color: @colorwhite; background-color: @colorwhite;
@ -17,87 +71,67 @@
} }
} }
.info-container { .share-label {
padding: 6px 20px 30px 20px; color: @colorblack;
font-weight: 500;
}
.share-label { .buttons {
color: @colorblack; display: flex;
font-weight: 600; font-size: 11px;
} justify-content: space-between;
.buttons { .facebook-button, .twitter-button, .gplus-button {
display: flex; display: flex;
font-size: 11px; cursor: pointer;
margin: 22px 0px; align-items: center;
justify-content: space-between; justify-content: center;
.facebook-icon, .twitter-icon, .gplus-icon { .facebook-icon, .twitter-icon, .gplus-icon {
width: 14px;
height: 14px;
margin-right: 6px;
fill: @colorwhite; fill: @colorwhite;
} }
.facebook-button {
background-color: @colorfb;
}
.twitter-button {
background-color: @coloraccent;
}
.gplus-button {
background-color: #dd4b39;
}
.facebook-button, .twitter-button, .gplus-button {
display: flex;
cursor: pointer;
width: 100px;
height: 32px;
align-items: center;
justify-content: center;
}
} }
.url-container { .facebook-button {
display: flex; background-color: @colorfb;
border-radius: 4px; }
.twitter-button {
background-color: @coloraccent;
}
.gplus-button {
background-color: #dd4b39;
}
}
.url-container {
display: flex;
border-style: solid;
border-color: @colorneutrallight;
.url, .copy-label {
color: @colorblack40;
}
.url {
width: 75%;
outline: none;
font-weight: 600;
text-align: center; text-align: center;
border: 1px solid @colorneutrallight; text-overflow: ellipsis;
}
.url, .copy-label { .copy-label {
padding: 10px; cursor: pointer;
font-weight: 600; width: 25%;
color: @colorblack40; font-weight: 500;
} display: flex;
justify-content: center;
background-color: @colorblack20;
.url { .copy-icon {
width: 90%; fill: @colorblack40;
outline: none;
font-size: 12px;
text-align: center;
border-radius: 4px;
padding-right: 30px;
text-overflow: ellipsis;
}
.copy-label {
width: 30%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
background-color: @colorblack20;
.copy-icon {
width: 16px;
height: 16px;
margin-right: 4px;
fill: @colorblack40;
}
} }
} }
} }