Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-07 10:29:37 +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 (
<div className={styles['url-container']}>
<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
</span>
</div>
</div>
);
}
@ -22,8 +22,6 @@ const renderUrl = (copyToClipboard, url) => {
const ShareAddon = (props) => {
const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.neutrallight });
const imageStyle = {
width: 10,
height: 10,
backgroundImage: `url('${placeholderIconUrl}')`
};
@ -33,7 +31,7 @@ const ShareAddon = (props) => {
<div onClick={props.closeModalDialog} style={imageStyle} className={styles['x-icon']} />
</div>
<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 onClick={props.shareInFacebook} className={styles['facebook-button']}>
<Icon className={styles['facebook-icon']} icon={'ic_facebook'} />FACEBOOK

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

@ -1,8 +1,62 @@
@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 {
width: 380px;
padding: 10px;
color: @colorwhite;
background-color: @colorwhite;
@ -17,87 +71,67 @@
}
}
.info-container {
padding: 6px 20px 30px 20px;
.share-label {
color: @colorblack;
font-weight: 500;
}
.share-label {
color: @colorblack;
font-weight: 600;
}
.buttons {
display: flex;
font-size: 11px;
justify-content: space-between;
.buttons {
.facebook-button, .twitter-button, .gplus-button {
display: flex;
font-size: 11px;
margin: 22px 0px;
justify-content: space-between;
cursor: pointer;
align-items: center;
justify-content: center;
.facebook-icon, .twitter-icon, .gplus-icon {
width: 14px;
height: 14px;
margin-right: 6px;
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 {
display: flex;
border-radius: 4px;
.facebook-button {
background-color: @colorfb;
}
.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;
border: 1px solid @colorneutrallight;
text-overflow: ellipsis;
}
.url, .copy-label {
padding: 10px;
font-weight: 600;
color: @colorblack40;
}
.copy-label {
cursor: pointer;
width: 25%;
font-weight: 500;
display: flex;
justify-content: center;
background-color: @colorblack20;
.url {
width: 90%;
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;
}
.copy-icon {
fill: @colorblack40;
}
}
}