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

user-notifications removed

Browse source
This commit is contained in:
svetlagasheva 2019-01-28 10:38:33 +02:00
parent e2a44f1e7c
commit 189d246a19
6 changed files with 0 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/common/NavBar/NavBar.js
View file

@ -2,7 +2,6 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import NavTab from './NavTab';
import SearchInput from './SearchInput';
import UserNotifications from './UserNotifications';
import UserMenu from './UserMenu';
import styles from './styles';
@ -13,7 +12,6 @@ class NavBar extends PureComponent {
{this.props.tabs.map(tab => <NavTab key={tab.to} {...tab} />)}
{this.props.title.length > 0 ? <h2 className={styles['nav-title']}>{this.props.title}</h2> : null}
{this.props.searchInput ? <SearchInput className={styles['search-input']} /> : null}
{this.props.userNotifications ? <UserNotifications className={styles['user-notifications']} /> : null}
{this.props.userMenu ? <UserMenu className={styles['user-menu']} /> : null}
</nav>
);
@ -30,7 +28,6 @@ NavBar.propTypes = {
})).isRequired,
title: PropTypes.string.isRequired,
searchInput: PropTypes.bool.isRequired,
userNotifications: PropTypes.bool.isRequired,
userMenu: PropTypes.bool.isRequired
};
@ -38,7 +35,6 @@ NavBar.defaultProps = {
tabs: [],
title: '',
searchInput: false,
userNotifications: false,
userMenu: false
};

77
src/common/NavBar/UserNotifications/UserNotifications.js
View file

@ -1,77 +0,0 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from 'stremio-icons/dom';
import { Popup } from 'stremio-common';
import styles from './styles';
class UserNotifications extends PureComponent {
render() {
return (
<Popup>
<Popup.Label>
<button className={classnames(this.props.className, styles['popup-label-container'])}>
<Icon className={classnames(styles['notifications-icon'], styles['icon'])} icon={'ic_cloud'} />
</button>
</Popup.Label>
<Popup.Menu>
<div className={styles['popup-content']}>
{this.props.metaItems.map((metaItem) =>
<div className={styles['meta-item']} key={metaItem.metaItem.videos.map((video) => video.id)}>
<div className={styles['poster']} style={{ backgroundImage: `url(${metaItem.metaItem.poster})` }}></div>
<div className={styles['info-container']}>
<div className={styles['name']}>{metaItem.metaItem.videos.map((video) => video.name)}</div>
<div className={styles['released']}>{metaItem.metaItem.videos.map((video) => video.released.getDate() + '.' + video.released.getMonth() + '.' + video.released.getFullYear())}</div>
</div>
<div className={styles['video-poster']} style={{ backgroundImage: `url(${metaItem.metaItem.videos.map((video) => video.poster)})` }}></div>
<Icon className={styles['icon']} icon={'ic_more'} />
</div>
)}
</div>
</Popup.Menu>
</Popup>
);
}
}
UserNotifications.propTypes = {
inLibrary: PropTypes.bool.isRequired,
metaItems: PropTypes.arrayOf(PropTypes.object).isRequired
};
UserNotifications.defaultProps = {
inLibrary: false,
metaItems: [
{
metaItem: {
poster: 'https://www.stremio.com/website/home-stremio.png',
released: new Date(2019, 1, 9),
name: 'Fantastic Beasts and Where to Find Them: The Original Screenplay',
videos: [
{ id: '1', poster: 'https://www.stremio.com/website/home-testimonials.jpg', episode: 1, name: 'Katy Perry - Cozy Little Christmas', released: new Date(2019, 1, 9), isUpcoming: true, isWatched: false, season: 1 }
]
}
},
{
metaItem: {
poster: 'https://www.stremio.com/website/home-stremio.png',
released: new Date(2019, 1, 7),
name: 'Fantastic Beasts and Where to Find Them: The Original Screenplay',
videos: [
{ id: '2', poster: 'https://www.stremio.com/website/home-testimonials.jpg', episode: 1, name: 'Hefty Shades of Gray', description: 'dasdasda', released: new Date(2019, 1, 7), isUpcoming: true, isWatched: true, season: 1 }
]
}
},
{
metaItem: {
poster: 'https://www.stremio.com/website/home-stremio.png',
released: new Date(2019, 1, 13),
name: 'Fantastic Beasts and Where to Find Them: The Original Screenplay',
videos: [
{ id: '3', poster: 'https://www.stremio.com/website/home-testimonials.jpg', episode: 1, name: 'Evolution', description: 'dasdasda', released: new Date(2019, 1, 12), isUpcoming: true, isWatched: true, season: 1 }
]
}
}
]
};
export default UserNotifications;

3
src/common/NavBar/UserNotifications/index.js
View file

@ -1,3 +0,0 @@
import UserNotifications from './UserNotifications';
export default UserNotifications;

68
src/common/NavBar/UserNotifications/styles.less
View file

@ -1,68 +0,0 @@
@import 'constants';
.popup-label-container {
cursor: pointer;
outline: none;
background-color: transparent;
.icon {
height: @nav-bar-height;
fill: var(--color-surfacelighter80)
}
.notifications-icon {
width: 40%;
}
&:hover, &.active {
background-color: var(--color-backgrounddark20);
.icon {
fill: var(--color-surfacelighter);
}
}
}
.popup-content {
background-color: var(--color-surfacelighter);
.meta-item {
display: flex;
cursor: pointer;
padding: 16px;
.poster {
width: 50px;
height: 50px;
border-radius: 50%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.info-container {
.name {
font-size: 15px;
}
.released {
font-size: 14px;
color: var(--color-surfacedarker);
}
}
.video-poster {
width: 100px;
height: 50px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.icon {
fill: var(--color-surfacedarker);
width: 4px;
height: 12px;
}
}
}

3
src/common/NavBar/styles.less
View file

@ -12,9 +12,6 @@
.search-input {
flex: 1;
}
.user-notifications {
width: @nav-bar-height;
}
.user-menu {
width: @nav-bar-height;
}

1
src/routes/Main/Main.js
View file

@ -16,7 +16,6 @@ class Main extends Component {
{ icon: 'ic_calendar', label: 'Calendar', to: '/calendar', replace: true }
]}
searchInput={true}
userNotificatons={true}
userMenu={true}
/>
<Switch>