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

MetaItem menu adapted to latest changes in the buttons api

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-07 12:25:32 +03:00
parent 23c5b8ade8
commit 50aea4b8a9
2 changed files with 32 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,7 @@ const ICON_FOR_TYPE = Object.assign(Object.create(null), {
'tv': 'ic_tv'
});
const MetaItem = React.memo(({ className, menuClassName, id, type, name, posterShape = 'square', poster, title, subtitle, progress, playIcon, menuOptions, onClick, menuOptionOnSelect }) => {
const MetaItem = React.memo(({ className, id, type, name, posterShape = 'square', poster = '', title = '', subtitle = '', progress = 0, playIcon = false, menuOptions = [], onClick, menuOptionOnSelect }) => {
const menuRef = React.useRef(null);
const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
const onContextMenu = React.useCallback((event) => {
@ -76,12 +76,16 @@ const MetaItem = React.memo(({ className, menuClassName, id, type, name, posterS
Array.isArray(menuOptions) && menuOptions.length > 0 ?
<Popup ref={menuRef} onOpen={onMenuOpen} onClose={onMenuClose}>
<Popup.Label>
<Icon className={classnames(styles['menu-icon'], { 'active': menuOpen })} icon={'ic_more'} />
<Button className={classnames(styles['menu-button-container'], { 'active': menuOpen })} tabIndex={-1}>
<Icon className={styles['menu-icon']} icon={'ic_more'} />
</Button>
</Popup.Label>
<Popup.Menu className={classnames(menuClassName, styles['menu-container'])} tabIndex={-1}>
<div className={styles['menu-items-container']}>
<Popup.Menu>
<div className={styles['menu-buttons-container']}>
{menuOptions.map(({ label, type }) => (
<Button key={type} className={styles['menu-item']} data-id={id} data-type={type} onClick={menuOptionOnSelect}>{label}</Button>
<Button key={type} className={styles['menu-button']} data-id={id} data-type={type} onClick={menuOptionOnSelect}>
{label}
</Button>
))}
</div>
</Popup.Menu>
@ -110,7 +114,6 @@ MetaItem.displayName = 'MetaItem';
MetaItem.propTypes = {
className: PropTypes.string,
menuClassName: PropTypes.string,
id: PropTypes.string,
type: PropTypes.string,
name: PropTypes.string,

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

@ -11,8 +11,10 @@
color: var(--color-backgrounddarker);
}
.menu-icon {
fill: var(--color-backgrounddarker);
.menu-button-container {
.menu-icon {
fill: var(--color-backgrounddarker);
}
}
}
}
@ -136,37 +138,39 @@
}
}
.menu-icon {
.menu-button-container {
flex: none;
display: block;
width: 2.5rem;
height: 2.5rem;
padding: 0.6rem;
fill: var(--color-surfacelighter);
&:hover, &:global(.active) {
background-color: var(--color-surface80);
}
.menu-icon {
display: block;
width: 100%;
height: 100%;
fill: var(--color-surfacelighter);
}
}
}
}
.menu-container {
.menu-items-container {
min-width: 8em;
max-width: 12em;
background-color: var(--color-surfacelighter);
.menu-buttons-container {
min-width: 8rem;
max-width: 12rem;
background-color: var(--color-surfacelighter);
.menu-item {
width: 100%;
font-size: 1.2em;
padding: 0.5em;
color: var(--color-backgrounddarker);
cursor: pointer;
.menu-button {
font-size: 1.1rem;
padding: 0.5rem;
color: var(--color-backgrounddarker);
outline: none;
&:hover, &:focus {
background-color: var(--color-surfacelight);
}
&:hover, &:focus {
background-color: var(--color-surfacelight);
}
}
}