From 1b0497721f45e6514a62bd1b6c94e537f33a7b69 Mon Sep 17 00:00:00 2001 From: guillaume-pages Date: Mon, 8 Apr 2024 16:09:54 +0200 Subject: [PATCH] display modal on mobile and modal hidden in desktop view --- .../admin/mediatheque/CheckboxAdmin.tsx | 18 +++++ src/components/admin/mediatheque/Filter.tsx | 80 +++++++++++++++++++ .../admin/mediatheque/ModalFilter.tsx | 53 ++++++++++++ src/config/mediatheque/dataFilters.ts | 17 ++++ .../admin/newportal/medialibrary/index.tsx | 31 ++++++- src/styles/globals.scss | 33 ++++++++ 6 files changed, 228 insertions(+), 4 deletions(-) create mode 100644 src/components/admin/mediatheque/CheckboxAdmin.tsx create mode 100644 src/components/admin/mediatheque/Filter.tsx create mode 100644 src/components/admin/mediatheque/ModalFilter.tsx create mode 100644 src/config/mediatheque/dataFilters.ts diff --git a/src/components/admin/mediatheque/CheckboxAdmin.tsx b/src/components/admin/mediatheque/CheckboxAdmin.tsx new file mode 100644 index 000000000..484b6b581 --- /dev/null +++ b/src/components/admin/mediatheque/CheckboxAdmin.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import Checkbox from '@mui/material/Checkbox'; + +import PelicoNeutre from 'src/svg/pelico/pelico_neutre.svg'; + +const CheckboxAdmin = () => { + const label = { inputProps: { 'aria-label': 'Pelico' } }; + + return ( +
+ + +
+ ); +}; + +export default CheckboxAdmin; diff --git a/src/components/admin/mediatheque/Filter.tsx b/src/components/admin/mediatheque/Filter.tsx new file mode 100644 index 000000000..c1f37baf0 --- /dev/null +++ b/src/components/admin/mediatheque/Filter.tsx @@ -0,0 +1,80 @@ +import React from 'react'; + +import FormControl from '@mui/material/FormControl'; +import MenuItem from '@mui/material/MenuItem'; +import OutlinedInput from '@mui/material/OutlinedInput'; +import type { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import { useTheme } from '@mui/material/styles'; +import type { Theme } from '@mui/material/styles'; + +const ITEM_HEIGHT = 48; +const ITEM_PADDING_TOP = 8; +const MenuProps = { + PaperProps: { + style: { + maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, + width: 250, + }, + }, +}; + +function getStyles(label: string, labelName: readonly string[], theme: Theme) { + return { + fontWeight: labelName.indexOf(label) === -1 ? theme.typography.fontWeightRegular : theme.typography.fontWeightMedium, + }; +} + +type FilterProps = { + labels: string[]; + placeholder: string; +}; + +const FilterMultipleChoice = ({ labels, placeholder }: FilterProps) => { + const theme = useTheme(); + const [labelName, setLabelName] = React.useState([]); + + const handleChange = (event: SelectChangeEvent) => { + const { + target: { value }, + } = event; + setLabelName( + // On autofill we get a stringified value. + typeof value === 'string' ? value.split(',') : value, + ); + }; + + return ( +
+ + + +
+ ); +}; + +export default FilterMultipleChoice; diff --git a/src/components/admin/mediatheque/ModalFilter.tsx b/src/components/admin/mediatheque/ModalFilter.tsx new file mode 100644 index 000000000..5873be1f3 --- /dev/null +++ b/src/components/admin/mediatheque/ModalFilter.tsx @@ -0,0 +1,53 @@ +import React from 'react'; + +import RefreshIcon from '@mui/icons-material/Refresh'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; +import Modal from '@mui/material/Modal'; + +import CheckboxAdmin from 'src/components/admin/mediatheque/CheckboxAdmin'; +import FilterMultipleChoice from 'src/components/admin/mediatheque/Filter'; +import { activitiesLabel } from 'src/config/mediatheque/dataFilters'; + +const styleModal = { + position: 'absolute' as const, + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 250, + bgcolor: 'background.paper', + border: '2px solid #000', + borderRadius: '10px', + boxShadow: 24, + p: 4, +}; + +const ModalFilter = () => { + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + return ( +
+ + + + + + + + +
+ + + + +
+ + +
+ ); +}; + +export default ModalFilter; diff --git a/src/config/mediatheque/dataFilters.ts b/src/config/mediatheque/dataFilters.ts new file mode 100644 index 000000000..a49bf1d5e --- /dev/null +++ b/src/config/mediatheque/dataFilters.ts @@ -0,0 +1,17 @@ +export const activitiesLabel = [ + 'Présentation', + 'Enigme', + 'Défi', + 'Question', + 'Jeux', + 'Contenu libre', + 'Indice', + 'Symbole', + 'Mascotte', + 'Reportage', + 'Reaction', + 'Hymne', + 'Couplet ?', + 'Histoire', + 'Réinventer une histoire', +]; diff --git a/src/pages/admin/newportal/medialibrary/index.tsx b/src/pages/admin/newportal/medialibrary/index.tsx index 254ab0e6e..3686d7fe7 100644 --- a/src/pages/admin/newportal/medialibrary/index.tsx +++ b/src/pages/admin/newportal/medialibrary/index.tsx @@ -1,8 +1,5 @@ import React from 'react'; -import { useGetMediatheque } from 'src/api/mediatheque/mediatheque.get'; -import type { Filter } from 'types/mediatheque.type'; - // Tout doit être responsive // STEP 1: les filtres (proposition modal sur les filtre) @@ -17,6 +14,16 @@ import type { Filter } from 'types/mediatheque.type'; // STEP 4: le bouton télécharger (image, vidéo, son) (lib jszip par exemple) // STEP 4.1: comment on dl une vidéo youtube ? Souvent des vidéos Viméo (bah on dl pas) +import RefreshIcon from '@mui/icons-material/Refresh'; +import IconButton from '@mui/material/IconButton'; + +import { useGetMediatheque } from 'src/api/mediatheque/mediatheque.get'; +import CheckboxAdmin from 'src/components/admin/mediatheque/CheckboxAdmin'; +import FilterMultipleChoice from 'src/components/admin/mediatheque/Filter'; +import ModalFilter from 'src/components/admin/mediatheque/ModalFilter'; +import { activitiesLabel } from 'src/config/mediatheque/dataFilters'; +import type { Filter } from 'types/mediatheque.type'; + const Mediatheque = () => { const offset = 0; const filters: Filter[] = [ @@ -29,7 +36,23 @@ const Mediatheque = () => { return ( <>
-

Médiatheque

+

Médiathèque d'1Village

+
+
+ + + + + + + + + +
+
+
+ +
); diff --git a/src/styles/globals.scss b/src/styles/globals.scss index ef6a88c99..2e9441c5b 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -395,3 +395,36 @@ a.text--success:hover { background-image: url('/icon-fullscreen-2x.png'); background-size: 26px 26px; } + +// ----- AFFICHAGE MEDIATHEQUE +.desktop-view { + display: flex; +} + +.modal-view { + display: none; +} + +h1.title-for-mediatheque{ + font-family: 'Alegreya Sans', 'Times New Roman', Times, serif; + font-weight: 500; +} + + +/* Style pour mobile */ +@media (max-width: 768px) { + .desktop-view { + display: none; + } + + .modal-view { + display: block; + } + + h1.title-for-mediatheque{ + font-family: 'Alegreya Sans', 'Times New Roman', Times, serif; + font-weight: 500; + text-align: center; + } +} +