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

refactor(Addons): use modal instead of Filters

Browse source
This commit is contained in:
Tim 2022-02-18 14:36:01 +01:00
parent a3174cca6d
commit ad8e34f8eb
2 changed files with 51 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,13 +10,13 @@ const useRemoteAddons = require('./useRemoteAddons');
const useAddonDetailsTransportUrl = require('./useAddonDetailsTransportUrl'); const useAddonDetailsTransportUrl = require('./useAddonDetailsTransportUrl');
const useSelectableInputs = require('./useSelectableInputs'); const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles'); const styles = require('./styles');
const { Filters } = require('stremio/common');
const Addons = ({ urlParams, queryParams }) => { const Addons = ({ urlParams, queryParams }) => {
const installedAddons = useInstalledAddons(urlParams); const installedAddons = useInstalledAddons(urlParams);
const remoteAddons = useRemoteAddons(urlParams); const remoteAddons = useRemoteAddons(urlParams);
const [addonDetailsTransportUrl, setAddonDetailsTransportUrl] = useAddonDetailsTransportUrl(urlParams, queryParams); const [addonDetailsTransportUrl, setAddonDetailsTransportUrl] = useAddonDetailsTransportUrl(urlParams, queryParams);
const selectInputs = useSelectableInputs(installedAddons, remoteAddons); const selectInputs = useSelectableInputs(installedAddons, remoteAddons);
const [filtersModalOpen, openFiltersModal, closeFiltersModal] = useBinaryState(false);
const [addAddonModalOpen, openAddAddonModal, closeAddAddonModal] = useBinaryState(false); const [addAddonModalOpen, openAddAddonModal, closeAddAddonModal] = useBinaryState(false);
const addAddonUrlInputRef = React.useRef(null); const addAddonUrlInputRef = React.useRef(null);
const addAddonOnSubmit = React.useCallback(() => { const addAddonOnSubmit = React.useCallback(() => {
@ -100,9 +100,9 @@ const Addons = ({ urlParams, queryParams }) => {
value={search} value={search}
onChange={searchInputOnChange} onChange={searchInputOnChange}
/> />
<Filters className={styles['filters']}> <Button className={styles['filter-button']} title={'All filters'} onClick={openFiltersModal}>
{ renderMultiselectsInputs() } <Icon className={styles['filter-icon']} icon={'ic_filter'} />
</Filters> </Button>
</div> </div>
{ {
installedAddons.selected !== null ? installedAddons.selected !== null ?
@ -178,6 +178,14 @@ const Addons = ({ urlParams, queryParams }) => {
</div> </div>
} }
</div> </div>
{
filtersModalOpen ?
<ModalDialog title={'Addons filters'} className={styles['filters-modal']} onCloseRequest={closeFiltersModal}>
{ renderMultiselectsInputs() }
</ModalDialog>
:
null
}
{ {
addAddonModalOpen ? addAddonModalOpen ?
<ModalDialog <ModalDialog

42
src/routes/Addons/styles.less
View file

@ -12,6 +12,11 @@
cancel-button-label: label; cancel-button-label: label;
} }
:import('~stremio/common/ModalDialog/styles.less') {
filters-modal-container: modal-dialog-container;
filters-modal-content: modal-dialog-content;
}
.addons-container { .addons-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -101,8 +106,21 @@
flex-basis: 18rem; flex-basis: 18rem;
} }
.filters { .filter-button {
flex: none;
display: none; display: none;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
background-color: @color-background;
.filter-icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
fill: @color-secondaryvariant1-90;
}
} }
} }
@ -127,6 +145,24 @@
} }
} }
.filters-modal {
.filters-modal-container {
overflow: visible;
.filters-modal-content {
display: flex;
gap: 1em;
flex-direction: column;
overflow-y: visible !important;
overflow: visible;
.select-input-container {
height: 3.5em;
}
}
}
}
.add-addon-modal-container { .add-addon-modal-container {
.addon-modal-content { .addon-modal-content {
width: 30rem; width: 30rem;
@ -261,8 +297,8 @@
flex-basis: 100%; flex-basis: 100%;
} }
.filters { .filter-button {
display: block; display: flex;
} }
} }
} }