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

metaitem subtitle ui implemented

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-01-18 15:21:05 +02:00
parent a6f95967b3
commit 29f466ca50
2 changed files with 35 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/common/MetaItem/MetaItem.js
View file

@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Popup } from 'stremio-common'; import { Popup } from 'stremio-common';
@ -48,35 +48,45 @@ class MetaItem extends Component {
); );
} }
renderTitleBar() { renderInfoBar() {
if (this.props.title.length === 0 && this.props.menu.length === 0) { if (this.props.title.length === 0 && this.props.menu.length === 0 && this.props.subtitle.length === 0) {
return null; return null;
} }
return ( return (
<div className={styles['title-bar-container']}> <Fragment>
<div className={styles['title']}>{this.props.title}</div> <div className={styles['title-bar-container']}>
<div className={styles['title']}>{this.props.title}</div>
{
this.props.menu.length > 0 ?
<Popup className={this.props.popupClassName} onOpen={this.onMenuPopupOpen} onClose={this.onMenuPopupClose}>
<Popup.Label>
<Icon
className={classnames(styles['menu-icon'], { 'active': this.state.menuPopupOpen })}
icon={'ic_more'}
/>
</Popup.Label>
<Popup.Menu>
<div className={styles['menu-items-container']}>
{this.props.menu.map(({ label, callback }) => (
<div key={label} className={styles['menu-item']} onClick={callback}>{label}</div>
))}
</div>
</Popup.Menu>
</Popup>
:
null
}
</div>
{ {
this.props.menu.length > 0 ? this.props.subtitle.length > 0 ?
<Popup className={this.props.popupClassName} onOpen={this.onMenuPopupOpen} onClose={this.onMenuPopupClose}> <div className={styles['title-bar-container']}>
<Popup.Label> <div className={styles['title']}>{this.props.subtitle}</div>
<Icon </div>
className={classnames(styles['menu-icon'], { 'active': this.state.menuPopupOpen })}
icon={'ic_more'}
/>
</Popup.Label>
<Popup.Menu>
<div className={styles['menu-items-container']}>
{this.props.menu.map(({ label, callback }) => (
<div key={label} className={styles['menu-item']} onClick={callback}>{label}</div>
))}
</div>
</Popup.Menu>
</Popup>
: :
null null
} }
</div> </Fragment>
); );
} }
@ -84,7 +94,7 @@ class MetaItem extends Component {
return ( return (
<div className={classnames(styles['meta-item-container'], styles[`relative-size-${this.props.relativeSize}`], styles[`poster-shape-${this.props.posterShape}`], this.props.className)}> <div className={classnames(styles['meta-item-container'], styles[`relative-size-${this.props.relativeSize}`], styles[`poster-shape-${this.props.posterShape}`], this.props.className)}>
{this.renderPoster()} {this.renderPoster()}
{this.renderTitleBar()} {this.renderInfoBar()}
</div> </div>
); );
} }

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

@ -1,6 +1,7 @@
.meta-item-container { .meta-item-container {
margin: 10px; margin: 10px;
display: inline-block; display: inline-flex;
flex-direction: column;
background-color: var(--color-backgroundlight); background-color: var(--color-backgroundlight);
.poster-image-container { .poster-image-container {