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

avatar cases, separator instead of border

Browse source
This commit is contained in:
svetlagasheva 2018-11-28 11:23:07 +02:00
parent 7dedfe9727
commit a3c0bfb94a
4 changed files with 60 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/anonymous.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.8 KiB

54
src/common/UserPanel/UserPanel.js
View file

@ -1,53 +1,54 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom'; import Icon from 'stremio-icons/dom';
import colors from 'stremio-colors';
import styles from './styles'; import styles from './styles';
const renderEmail = (email) => { const renderAvatar = (avatar, email) => {
if (email.length === 0) { if (email.length === 0) {
return null; return (
<div style={{ backgroundImage: `url('/images/anonymous.png')` }} className={styles['avatar']} />
);
} }
return ( return (
<div className={styles['email']}>{email}</div> <div style={{ backgroundImage: `url('${avatar}'), url('/images/default_avatar.png') ` }} className={styles['avatar']} />
);
}
const renderEmail = (email) => {
return (
<div className={styles['email']}>{email.length === 0 ? 'Anonymous' : email}</div>
); );
} }
const UserPanel = (props) => { const UserPanel = (props) => {
const placeholderIconUrl = iconDataUrl({ icon: 'ic_user', fill: colors.accent });
const avatarStyle = {
backgroundImage: `url('${props.avatar}'), url('${placeholderIconUrl}')`
};
return ( return (
<div className={styles['user-panel']}> <div className={styles['user-panel']}>
<div className={styles['user-info']}> <div className={styles['user-info']}>
<div style={avatarStyle} className={styles['avatar']} /> {renderAvatar(props.avatar, props.email)}
{renderEmail(props.email)} {renderEmail(props.email)}
<div onClick={props.logout} className={styles['log-out']}>Log out</div> <div onClick={props.email.length === 0 ? props.login : props.logout} className={styles['logging']}>{props.email.length === 0 ? 'Log in' : 'Log out'}</div>
</div> </div>
<div className={styles['separator']}></div>
<div onClick={props.resizeWindow} className={styles['option']}> <div onClick={props.resizeWindow} className={styles['option']}>
<Icon className={styles['icon']} icon={'ic_fullscreen'} />Fullscreen mode <Icon className={styles['icon']} icon={'ic_fullscreen'} />Fullscreen mode
</div> </div>
<div className={styles['options']}> <div className={styles['separator']}></div>
<a href={'#settings'} className={styles['option']}> <a href={'#settings'} className={styles['option']}>
<Icon className={styles['icon']} icon={'ic_settings'} />Settings <Icon className={styles['icon']} icon={'ic_settings'} />Settings
</a> </a>
<a href={'#addons'} className={styles['option']}> <a href={'#addons'} className={styles['option']}>
<Icon className={styles['icon']} icon={'ic_addons'} />Add-ons <Icon className={styles['icon']} icon={'ic_addons'} />Add-ons
</a> </a>
<div onClick={props.playMagnetLink} className={styles['option']}> <div onClick={props.playMagnetLink} className={styles['option']}>
<Icon className={styles['icon']} icon={'ic_magnet'} />Play Magnet Link <Icon className={styles['icon']} icon={'ic_magnet'} />Play Magnet Link
</div> </div>
<a href={'https://stremio.zendesk.com'} target={'_blank'} className={styles['option']}> <a href={'https://stremio.zendesk.com'} target={'_blank'} className={styles['option']}>
<Icon className={styles['icon']} icon={'ic_help'} />Help & Feedback <Icon className={styles['icon']} icon={'ic_help'} />Help & Feedback
</a> </a>
</div> <div className={styles['separator']}></div>
<div className={styles['footer']}> <a href={'https://www.stremio.com/tos'} target={'_blank'} className={styles['option']}>Terms of Service</a>
<a href={'https://www.stremio.com/tos'} target={'_blank'} className={styles['label']}>Terms of Service</a> <a href={'https://www.stremio.com'} target={'_blank'} className={styles['option']}>About Stremio</a>
<a href={'https://www.stremio.com'} target={'_blank'} className={styles['label']}>About Stremio</a>
</div>
</div> </div>
); );
} }
@ -55,6 +56,7 @@ const UserPanel = (props) => {
UserPanel.propTypes = { UserPanel.propTypes = {
avatar: PropTypes.string.isRequired, avatar: PropTypes.string.isRequired,
email: PropTypes.string.isRequired, email: PropTypes.string.isRequired,
login: PropTypes.func,
logout: PropTypes.func, logout: PropTypes.func,
resizeWindow: PropTypes.func, resizeWindow: PropTypes.func,
playMagnetLink: PropTypes.func, playMagnetLink: PropTypes.func,

51
src/common/UserPanel/styles.less
View file

@ -22,20 +22,12 @@
} }
} }
.options { .label {
padding: @spacing 0; padding: ceil((@spacing * 0.6)) (2 * ceil((@spacing * 0.6)));
} }
.footer { .separator {
padding: @spacing 0; height: 1px;
.label {
padding: ceil((@spacing * 0.6)) (2 * ceil((@spacing * 0.6)));
}
}
>:not(:last-child) {
border-bottom-width: 1px;
} }
} }
@ -51,16 +43,17 @@
.avatar { .avatar {
grid-area: avatar; grid-area: avatar;
border-radius: 50%; border-radius: 50%;
background-size: cover, auto; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.email { .email {
grid-area: email; grid-area: email;
align-self: center; display: flex;
align-items: center;
color: @colorwhite; color: @colorwhite;
margin-left: @spacing; padding-left: @spacing;
overflow: hidden; overflow: hidden;
white-space: pre; white-space: pre;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -68,9 +61,13 @@
.log-out { .log-out {
grid-area: logout; grid-area: logout;
align-self: center; display: flex;
align-items: center;
color: @colorneutral; color: @colorneutral;
margin-left: @spacing; padding-left: @spacing;
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@ -95,23 +92,7 @@
} }
} }
.footer { .separator {
display: flex; background-color: @colorneutral;
flex-direction: column;
.label {
color: @colorwhite80;
&:hover {
cursor: pointer;
color: @colorwhite;
background-color: @coloraccent20;
}
}
}
>:not(:last-child) {
border-bottom-style: solid;
border-bottom-color: @colorneutral;
} }
} }

17
stories/index.stories.js
View file

@ -211,7 +211,22 @@ storiesOf('Stream', module)
)); ));
storiesOf('UserPanel', module) storiesOf('UserPanel', module)
.add('user panel', () => ( .add('anonymous', () => (
<div style={storyStyle} className={appStyles['app']}>
<UserPanel
resizeWindow={function() { alert('asdas') }}
/>
</div>
))
.add('without avatar', () => (
<div style={storyStyle} className={appStyles['app']}>
<UserPanel
resizeWindow={function() { alert('asdas') }}
email={'animals@mail.com'}
/>
</div>
))
.add('with avatar', () => (
<div style={storyStyle} className={appStyles['app']}> <div style={storyStyle} className={appStyles['app']}>
<UserPanel <UserPanel
resizeWindow={function() { alert('asdas') }} resizeWindow={function() { alert('asdas') }}