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

ModalDialog with selectInput options implemented

Browse source
This commit is contained in:
svetlagasheva 2020-02-05 16:08:25 +02:00
parent bd1a4f2768
commit 4f37b43a05
3 changed files with 89 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/common/Multiselect/Multiselect.js
View file

@ -148,7 +148,26 @@ const Multiselect = ({ className, direction, title, disabled, dataset, modalSele
className className
})} })}
{ {
menuOpen ? <ModalDialog /> : null menuOpen ?
<ModalDialog title={title} onCloseRequest={() => closeMenu()}>
<div className={classnames(styles['menu-container'], { 'modal': modalSelects })}>
{
options.length > 0 ?
options.map(({ label, value }) => (
<Button key={value} className={classnames(styles['option-container'], { 'selected': selected.includes(value) })} title={typeof label === 'string' ? label : value} data-value={value} onClick={optionOnClick}>
<div className={styles['label']}>{typeof label === 'string' ? label : value}</div>
<Icon className={styles['icon']} icon={'ic_check'} />
</Button>
))
:
<div className={styles['no-options-container']}>
<div className={styles['label']}>No options available</div>
</div>
}
</div>
</ModalDialog>
:
null
} }
</React.Fragment> </React.Fragment>
} }

110
src/common/Multiselect/styles.less
View file

@ -37,60 +37,74 @@
.popup-menu-container { .popup-menu-container {
width: 100%; width: 100%;
}
}
.menu-container { .menu-container {
.option-container { &:global(.modal) {
display: flex; .option-container {
flex-direction: row; width: 15rem;
align-items: center;
padding: 1rem;
background-color: var(--color-backgroundlighter);
&:global(.selected) { &:not(:last-child) {
background-color: var(--color-surfacedarker); margin-bottom: 1rem;
.icon {
display: block;
}
}
&:hover, &:focus {
background-color: var(--color-surfacedark);
}
.label {
flex: 1;
max-height: 4.8em;
color: var(--color-surfacelighter);
}
.icon {
flex: none;
display: none;
width: 1rem;
height: 1rem;
margin-left: 1rem;
fill: var(--color-surfacelighter);
}
} }
}
.no-options-container { .no-options-container {
display: flex; width: 15rem;
flex-direction: row; }
align-items: center; }
justify-content: center;
padding: 1rem;
background-color: var(--color-backgroundlighter);
.label { .option-container {
flex-grow: 0; display: flex;
flex-shrink: 1; flex-direction: row;
flex-basis: auto; align-items: center;
font-size: 1.2rem; padding: 1rem;
text-align: center; background-color: var(--color-backgroundlighter);
color: var(--color-surfacelighter);
} &:global(.selected) {
background-color: var(--color-surfacedarker);
.icon {
display: block;
} }
} }
&:hover, &:focus {
background-color: var(--color-surfacedark);
}
.label {
flex: 1;
max-height: 4.8em;
color: var(--color-surfacelighter);
}
.icon {
flex: none;
display: none;
width: 1rem;
height: 1rem;
margin-left: 1rem;
fill: var(--color-surfacelighter);
}
}
.no-options-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: var(--color-backgroundlighter);
.label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
font-size: 1.2rem;
text-align: center;
color: var(--color-surfacelighter);
}
} }
} }

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

@ -130,15 +130,13 @@ const Discover = ({ urlParams, queryParams }) => {
{ {
inputsModalOpen ? inputsModalOpen ?
<ModalDialog title={'Select inputs'} className={styles['selectable-inputs-modal-container']} onCloseRequest={() => closeInputsModal()}> <ModalDialog title={'Select inputs'} className={styles['selectable-inputs-modal-container']} onCloseRequest={() => closeInputsModal()}>
{ {selectInputs.map((selectInput, index) => (
selectInputs.map((selectInput, index) => ( <Multiselect
<Multiselect {...selectInput}
{...selectInput} key={index}
key={index} modalSelects={true}
modalSelects={true} />
/> ))}
))
}
</ModalDialog> </ModalDialog>
: :
null null