collapse schedule filter

diff --git a/resources/js/components/common/Icon.js b/resources/js/components/common/Icon.js
index 00a65a497f4d36b4a90ffc3a5a15615cada8d59d..facd3f23f20f6f41d5768147025669110ce59c5c 100644 (file)
--- a/resources/js/components/common/Icon.js
+++ b/resources/js/components/common/Icon.js
@@ -67,6 +67,7 @@ Icon.CROSSHAIRS = makePreset('CrosshairsIcon', 'crosshairs');
 Icon.DELETE = makePreset('DeleteIcon', 'user-xmark');
 Icon.DISCORD = makePreset('DiscordIcon', ['fab', 'discord']);
 Icon.EDIT = makePreset('EditIcon', 'edit');
+Icon.FILTER = makePreset('FilterIcon', 'filter');
 Icon.FINISHED = makePreset('FinishedIcon', 'square-check');
 Icon.FIRST_PLACE = makePreset('FirstPlaceIcon', 'trophy');
 Icon.FORBIDDEN = makePreset('ForbiddenIcon', 'square-xmark');

diff --git a/resources/js/components/pages/Schedule.js b/resources/js/components/pages/Schedule.js
index 3d0a14082b8d5262c8350d207b6186c6a04e6116..ffbb69ef611f8deffaeb39ae09af27d0483e5c97 100644 (file)
--- a/resources/js/components/pages/Schedule.js
+++ b/resources/js/components/pages/Schedule.js
@@ -2,13 +2,14 @@ import axios from 'axios';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Alert, Container } from 'react-bootstrap';
+import { Alert, Button, Container } from 'react-bootstrap';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import toastr from 'toastr';
 
 import CanonicalLinks from '../common/CanonicalLinks';
 import ErrorBoundary from '../common/ErrorBoundary';
+import Icon from '../common/Icon';
 import ApplyDialog from '../episodes/ApplyDialog';
 import Filter from '../episodes/Filter';
 import List from '../episodes/List';
@@ -25,6 +26,7 @@ const Schedule = ({ user }) => {
        const [restreamEpisode, setRestreamEpisode] = React.useState(null);
        const [showApplyDialog, setShowApplyDialog] = React.useState(false);
        const [showRestreamDialog, setShowRestreamDialog] = React.useState(false);
+       const [showFilter, setShowFilter] = React.useState(false);
 
        const { t } = useTranslation();
 
@@ -211,18 +213,37 @@ const Schedule = ({ user }) => {
                };
        }, [ahead, behind, fetchEpisodes, filter]);
 
+       const toggleFilter = React.useCallback(() => {
+               setShowFilter(show => !show);
+       }, []);
+
+       const filterButtonVariant = React.useMemo(() => {
+               const outline = showFilter ? '' : 'outline-';
+               const filterActive = filter && filter.event && filter.event.length;
+               return `${outline}${filterActive ? 'info' : 'secondary'}`;
+       }, [filter, showFilter]);
+
        return <Container>
                <Helmet>
                        <title>{t('schedule.heading')}</title>
                        <meta name="description" content={t('schedule.description')} />
                </Helmet>
                <CanonicalLinks base="/schedule" />
-               <div className="d-flex align-items-start justify-content-between">
-                       <h1>{t('schedule.heading')}</h1>
-                       <div className="ms-3 mt-5">
+               <div className="d-flex align-items-end justify-content-between">
+                       <h1 className="mb-0">{t('schedule.heading')}</h1>
+                       <Button
+                               onClick={toggleFilter}
+                               title={t('button.filter')}
+                               variant={filterButtonVariant}
+                       >
+                               <Icon.FILTER title="" />
+                       </Button>
+               </div>
+               {showFilter ?
+                       <div className="my-2">
                                <Filter filter={filter} setFilter={updateFilter} />
                        </div>
-               </div>
+               : null}
                <ErrorBoundary>
                        {episodes.length ?
                                <List

diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index 389c300c193fe8df68704c309679ad194cafc175..e5534e381ef62fe3349c6e27c20237cb2cd05339 100644 (file)
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -252,6 +252,7 @@ export default {
                        close: 'Schließen',
                        confirm: 'Bestätigen',
                        edit: 'Bearbeiten',
+                       filter: 'Filter',
                        generate: 'Generieren',
                        help: 'Hilfe',
                        login: 'Login',

diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index ff1905d8f66886df214d96425d8d2d21dea4a8a3..4d8a8992852c58a836ae1904d57fb8e4eb8bd4a6 100644 (file)
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -252,6 +252,7 @@ export default {
                        close: 'Close',
                        confirm: 'Confirm',
                        edit: 'Edit',
+                       filter: 'Filter',
                        generate: 'Generate',
                        help: 'Help',
                        login: 'Login',