mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-08-18 05:15:59 +00:00
'UserPanel' component
This commit is contained in:
svetlagasheva
parent
3db3eb3f9c
commit
f414c8f4b7
5 changed files with 170 additions and 2 deletions
99
src/common/UserPanel/UserPanel.js
Normal file
99
src/common/UserPanel/UserPanel.js
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import styles from './styles';
|
||||
|
||||
class UserPanel extends Component {
|
||||
renderPhoto() {
|
||||
if(this.props.photo.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['profile-picture']} style={{ backgroundImage: 'url('+ this.props.photo +')'}}></div>
|
||||
);
|
||||
}
|
||||
|
||||
renderEmail() {
|
||||
if(this.props.email.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['email']}>{this.props.email}</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderLogout() {
|
||||
return (
|
||||
<span className={styles['log-out']}>Log out</span>
|
||||
);
|
||||
}
|
||||
|
||||
renderFullscreen() {
|
||||
return (
|
||||
<div className={styles['fullscreen-option']}>
|
||||
<Icon className={styles['fullscreen-icon']} icon={'ic_fullscreen'}/>Fullscreen mode
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderOptions() {
|
||||
return (
|
||||
<ul className={styles['options']}>
|
||||
<li className={styles['settings-option']}>
|
||||
<Icon className={styles['settings-icon']} icon={'ic_settings'}/>Settings
|
||||
</li>
|
||||
<li className={styles['addons-option']}>
|
||||
<Icon className={styles['addons-icon']} icon={'ic_addons'}/>Add-ons
|
||||
</li>
|
||||
<li className={styles['magnet-option']}>
|
||||
<Icon className={styles['magnet-icon']} icon={'ic_magnet'}/>Play Magnet Link
|
||||
</li>
|
||||
<li className={styles['facebook-option']}>
|
||||
<Icon className={styles['facebook-icon']} icon={'ic_facebook'}/>Import from Facebook
|
||||
</li>
|
||||
<li className={styles['help-option']}>
|
||||
<Icon className={styles['help-icon']} icon={'ic_help'}/>Help & Feedback
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
renderInfo() {
|
||||
return (
|
||||
<ul className={styles['info']}>
|
||||
<li className={styles['terms-label']}>Terms of Service</li>
|
||||
<li className={styles['about-label']}>About Stremio</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles['user-panel']}>
|
||||
<div className={styles['user-info']}>
|
||||
{this.renderPhoto()}
|
||||
<div className={styles['profile-info']}>
|
||||
{this.renderEmail()}
|
||||
{this.renderLogout()}
|
||||
</div>
|
||||
</div>
|
||||
{this.renderFullscreen()}
|
||||
{this.renderOptions()}
|
||||
{this.renderInfo()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
UserPanel.propTypes = {
|
||||
photo: PropTypes.string.isRequired,
|
||||
email: PropTypes.string.isRequired
|
||||
};
|
||||
UserPanel.defaultProps = {
|
||||
photo: '',
|
||||
email: ''
|
||||
};
|
||||
|
||||
export default UserPanel;
|
||||
3
src/common/UserPanel/index.js
Normal file
3
src/common/UserPanel/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import UserPanel from './UserPanel';
|
||||
|
||||
export default UserPanel;
|
||||
63
src/common/UserPanel/styles.less
Normal file
63
src/common/UserPanel/styles.less
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
@import 'stremio-colors';
|
||||
.user-panel {
|
||||
width: 260px;
|
||||
fill: @coloraccent;
|
||||
color: @colorwhite80;
|
||||
font-family: LatoLight;
|
||||
background-color: @colordarkest;
|
||||
.user-info {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
.profile-picture {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-right: 14px;
|
||||
border-radius: 50%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.email {
|
||||
color: @colorwhite;
|
||||
}
|
||||
.log-out {
|
||||
color: @colorwhite40;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fullscreen-option {
|
||||
border-top: 1px solid @colorwhite20;
|
||||
border-bottom: 1px solid @colorwhite20;
|
||||
}
|
||||
.fullscreen-option, .settings-option, .addons-option, .magnet-option, .facebook-option, .help-option {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
.fullscreen-icon, .settings-icon, .addons-icon, .magnet-icon, .facebook-icon, .help-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: @colorwhite;
|
||||
background-color: @coloraccent20;
|
||||
}
|
||||
}
|
||||
.options, .info {
|
||||
padding: 15px 0px;
|
||||
}
|
||||
.info {
|
||||
border-top: 1px solid @colorwhite20;
|
||||
.terms-label, .about-label {
|
||||
padding: 10px 20px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: @colorwhite;
|
||||
background-color: @coloraccent20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@ import LibraryItemList from './LibraryItemList';
|
|||
import LibraryItemGrid from './LibraryItemGrid';
|
||||
import Addon from './Addon';
|
||||
import ShareAddon from './ShareAddon';
|
||||
import UserPanel from './UserPanel';
|
||||
|
||||
export {
|
||||
Checkbox,
|
||||
|
|
@ -23,5 +24,6 @@ export {
|
|||
LibraryItemList,
|
||||
LibraryItemGrid,
|
||||
Addon,
|
||||
ShareAddon
|
||||
ShareAddon,
|
||||
UserPanel,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { LibraryItemList } from 'stremio-common';
|
|||
import { LibraryItemGrid } from 'stremio-common';
|
||||
import { Addon } from 'stremio-common';
|
||||
import { ShareAddon } from 'stremio-common';
|
||||
import { UserPanel } from 'stremio-common';
|
||||
|
||||
class Board extends PureComponent {
|
||||
constructor(props) {
|
||||
|
|
@ -35,7 +36,7 @@ class Board extends PureComponent {
|
|||
render() {
|
||||
return (
|
||||
<div style={{ paddingTop: 40, color: 'yellow' }}>
|
||||
<ShareAddon url={'http://nfxaddon.strem.io/stremioget'}></ShareAddon>
|
||||
<UserPanel photo={'https://image.freepik.com/free-vector/wild-animals-cartoon_1196-361.jpg'} email={'animals@mail.com'}></UserPanel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue