mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-01-11 22:40:31 +00:00
avatar cases, separator instead of border
This commit is contained in:
svetlagasheva
parent
7dedfe9727
commit
a3c0bfb94a
4 changed files with 60 additions and 62 deletions
BIN
images/anonymous.png
Normal file
BIN
images/anonymous.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
|
|
@ -1,53 +1,54 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
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 renderEmail = (email) => {
|
||||
const renderAvatar = (avatar, email) => {
|
||||
if (email.length === 0) {
|
||||
return null;
|
||||
return (
|
||||
<div style={{ backgroundImage: `url('/images/anonymous.png')` }} className={styles['avatar']} />
|
||||
);
|
||||
}
|
||||
|
||||
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 placeholderIconUrl = iconDataUrl({ icon: 'ic_user', fill: colors.accent });
|
||||
const avatarStyle = {
|
||||
backgroundImage: `url('${props.avatar}'), url('${placeholderIconUrl}')`
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles['user-panel']}>
|
||||
<div className={styles['user-info']}>
|
||||
<div style={avatarStyle} className={styles['avatar']} />
|
||||
{renderAvatar(props.avatar, 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 className={styles['separator']}></div>
|
||||
<div onClick={props.resizeWindow} className={styles['option']}>
|
||||
<Icon className={styles['icon']} icon={'ic_fullscreen'} />Fullscreen mode
|
||||
</div>
|
||||
<div className={styles['options']}>
|
||||
<a href={'#settings'} className={styles['option']}>
|
||||
<Icon className={styles['icon']} icon={'ic_settings'} />Settings
|
||||
<div className={styles['separator']}></div>
|
||||
<a href={'#settings'} className={styles['option']}>
|
||||
<Icon className={styles['icon']} icon={'ic_settings'} />Settings
|
||||
</a>
|
||||
<a href={'#addons'} className={styles['option']}>
|
||||
<Icon className={styles['icon']} icon={'ic_addons'} />Add-ons
|
||||
<a href={'#addons'} className={styles['option']}>
|
||||
<Icon className={styles['icon']} icon={'ic_addons'} />Add-ons
|
||||
</a>
|
||||
<div onClick={props.playMagnetLink} className={styles['option']}>
|
||||
<Icon className={styles['icon']} icon={'ic_magnet'} />Play Magnet Link
|
||||
<div onClick={props.playMagnetLink} className={styles['option']}>
|
||||
<Icon className={styles['icon']} icon={'ic_magnet'} />Play Magnet Link
|
||||
</div>
|
||||
<a href={'https://stremio.zendesk.com'} target={'_blank'} className={styles['option']}>
|
||||
<Icon className={styles['icon']} icon={'ic_help'} />Help & Feedback
|
||||
<a href={'https://stremio.zendesk.com'} target={'_blank'} className={styles['option']}>
|
||||
<Icon className={styles['icon']} icon={'ic_help'} />Help & Feedback
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles['footer']}>
|
||||
<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['label']}>About Stremio</a>
|
||||
</div>
|
||||
<div className={styles['separator']}></div>
|
||||
<a href={'https://www.stremio.com/tos'} target={'_blank'} className={styles['option']}>Terms of Service</a>
|
||||
<a href={'https://www.stremio.com'} target={'_blank'} className={styles['option']}>About Stremio</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -55,6 +56,7 @@ const UserPanel = (props) => {
|
|||
UserPanel.propTypes = {
|
||||
avatar: PropTypes.string.isRequired,
|
||||
email: PropTypes.string.isRequired,
|
||||
login: PropTypes.func,
|
||||
logout: PropTypes.func,
|
||||
resizeWindow: PropTypes.func,
|
||||
playMagnetLink: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -22,20 +22,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
padding: @spacing 0;
|
||||
.label {
|
||||
padding: ceil((@spacing * 0.6)) (2 * ceil((@spacing * 0.6)));
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: @spacing 0;
|
||||
|
||||
.label {
|
||||
padding: ceil((@spacing * 0.6)) (2 * ceil((@spacing * 0.6)));
|
||||
}
|
||||
}
|
||||
|
||||
>:not(:last-child) {
|
||||
border-bottom-width: 1px;
|
||||
.separator {
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -51,16 +43,17 @@
|
|||
.avatar {
|
||||
grid-area: avatar;
|
||||
border-radius: 50%;
|
||||
background-size: cover, auto;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.email {
|
||||
grid-area: email;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @colorwhite;
|
||||
margin-left: @spacing;
|
||||
padding-left: @spacing;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -68,9 +61,13 @@
|
|||
|
||||
.log-out {
|
||||
grid-area: logout;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @colorneutral;
|
||||
margin-left: @spacing;
|
||||
padding-left: @spacing;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -95,23 +92,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
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;
|
||||
.separator {
|
||||
background-color: @colorneutral;
|
||||
}
|
||||
}
|
||||
|
|
@ -211,7 +211,22 @@ storiesOf('Stream', 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']}>
|
||||
<UserPanel
|
||||
resizeWindow={function() { alert('asdas') }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue