Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-07 02:09:40 +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
})}
{
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>
}

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

@ -37,60 +37,74 @@
.popup-menu-container {
width: 100%;
}
}
.menu-container {
.option-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem;
background-color: var(--color-backgroundlighter);
.menu-container {
&:global(.modal) {
.option-container {
width: 15rem;
&: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);
}
&:not(:last-child) {
margin-bottom: 1rem;
}
}
.no-options-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: var(--color-backgroundlighter);
.no-options-container {
width: 15rem;
}
}
.label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
font-size: 1.2rem;
text-align: center;
color: var(--color-surfacelighter);
}
.option-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem;
background-color: var(--color-backgroundlighter);
&: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 ?
<ModalDialog title={'Select inputs'} className={styles['selectable-inputs-modal-container']} onCloseRequest={() => closeInputsModal()}>
{
selectInputs.map((selectInput, index) => (
<Multiselect
{...selectInput}
key={index}
modalSelects={true}
/>
))
}
{selectInputs.map((selectInput, index) => (
<Multiselect
{...selectInput}
key={index}
modalSelects={true}
/>
))}
</ModalDialog>
:
null