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

pickers active state managed

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-05-23 11:08:47 +03:00
parent 12fa4a9bf3
commit 68c8fa09c0
2 changed files with 24 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/routes/Discover/Discover.js
View file

@ -2,13 +2,16 @@ const React = require('react');
const classnames = require('classnames');
const { Input } = require('stremio-navigation');
const Icon = require('stremio-icons/dom');
const { NavBar, MetaItem, Popup } = require('stremio-common');
const { NavBar, MetaItem, Popup, useBinaryState } = require('stremio-common');
const useCatalog = require('./useCatalog');
const styles = require('./styles');
// TODO impl refocus to left of the scroll view
const Discover = ({ urlParams }) => {
const catalog = useCatalog(urlParams);
const [typePickerOpen, typePickerOnOpen, typePickerOnClose] = useBinaryState(false);
const [catalogPickerOpen, catalogPickerOnOpen, catalogPickerOnClose] = useBinaryState(false);
const [categoryPickerOpen, categoryPickerOnOpen, categoryPickerOnClose] = useBinaryState(false);
React.useEffect(() => {
if (typeof urlParams.type !== 'string' || typeof urlParams.catalog !== 'string') {
const type = urlParams.type || 'movie';
@ -35,9 +38,9 @@ const Discover = ({ urlParams }) => {
typeof urlParams.type === 'string' || typeof urlParams.catalog === 'string' ?
<div className={styles['discover-content']}>
<div className={styles['pickers-container']}>
<Popup>
<Popup onOpen={typePickerOnOpen} onClose={typePickerOnClose}>
<Popup.Label>
<Input className={classnames(styles['picker-button'], 'focusable-with-border')} type={'button'}>
<Input className={classnames(styles['picker-button'], { 'active': typePickerOpen }, 'focusable-with-border')} type={'button'}>
<div className={styles['picker-label']}>{urlParams.type}</div>
<Icon className={styles['picker-icon']} icon={'ic_arrow_down'} />
</Input>
@ -55,10 +58,10 @@ const Discover = ({ urlParams }) => {
</div>
</Popup.Menu>
</Popup>
<Popup>
<Popup onOpen={catalogPickerOnOpen} onClose={catalogPickerOnClose}>
<Popup.Label>
<Input className={classnames(styles['picker-button'], 'focusable-with-border')} type={'button'}>
<div className={styles['picker-label']}>{urlParams.type}</div>
<Input className={classnames(styles['picker-button'], { 'active': catalogPickerOpen }, 'focusable-with-border')} type={'button'}>
<div className={styles['picker-label']}>{urlParams.catalog}</div>
<Icon className={styles['picker-icon']} icon={'ic_arrow_down'} />
</Input>
</Popup.Label>
@ -75,10 +78,10 @@ const Discover = ({ urlParams }) => {
</div>
</Popup.Menu>
</Popup>
<Popup>
<Popup onOpen={categoryPickerOnOpen} onClose={categoryPickerOnClose}>
<Popup.Label>
<Input className={classnames(styles['picker-button'], 'focusable-with-border')} type={'button'}>
<div className={styles['picker-label']}>{urlParams.type}</div>
<Input className={classnames(styles['picker-button'], { 'active': categoryPickerOpen }, 'focusable-with-border')} type={'button'}>
<div className={styles['picker-label']}>{urlParams.category !== null ? urlParams.category : 'Select category'}</div>
<Icon className={styles['picker-icon']} icon={'ic_arrow_down'} />
</Input>
</Popup.Label>

13
src/routes/Discover/styles.less
View file

@ -53,7 +53,6 @@
justify-content: space-between;
margin: 0 0.8em;
padding: 0 0.8em;
text-transform: capitalize;
background-color: var(--color-backgroundlighter);
cursor: pointer;
@ -61,6 +60,18 @@
background-color: var(--color-surfacedarker60);
}
&:global(.active) {
background-color: var(--color-surfacelight);
.picker-label {
color: var(--color-backgrounddarker);
}
.picker-icon {
fill: var(--color-backgrounddarker);
}
}
.picker-label {
flex: 1;
font-size: 1.1em;