From 743eb1b6bf470e3f699fbece9a35c78290872b28 Mon Sep 17 00:00:00 2001 From: Florian Sommariva Date: Tue, 21 Nov 2023 11:54:16 +0100 Subject: [PATCH 1/4] Forward props to IconPatrimoine component --- .../ControlSection/ControlPanel/IconPatrimoine.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Map/components/ControlSection/ControlPanel/IconPatrimoine.tsx b/frontend/src/components/Map/components/ControlSection/ControlPanel/IconPatrimoine.tsx index 06e602434..ce1d29526 100644 --- a/frontend/src/components/Map/components/ControlSection/ControlPanel/IconPatrimoine.tsx +++ b/frontend/src/components/Map/components/ControlSection/ControlPanel/IconPatrimoine.tsx @@ -1,5 +1,12 @@ -const SvgComponent: React.FC = () => ( - +const SvgComponent: React.FC = props => ( + Date: Wed, 6 Sep 2023 15:17:00 +0200 Subject: [PATCH 2/4] Define all props optionable for map ControlSection --- .../ControlSection/ControlPanel/index.tsx | 20 +++++----- .../ControlSection/ControlSection.tsx | 40 +++++++++---------- 2 files changed, 30 insertions(+), 30 deletions(-) diff --git a/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx b/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx index 242512565..8bc87e3ce 100644 --- a/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx +++ b/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx @@ -54,7 +54,7 @@ export const ControlPanel: React.FC = ({ }) => { return ( - {trekChildrenVisibility !== null && ( + {trekChildrenVisibility && toggleTrekChildrenVisibility && ( = ({ transKey="search.map.panel.trekChildren" /> )} - {poiVisibility !== null && ( + {poiVisibility && togglePoiVisibility && ( = ({ transKey="search.map.panel.poi" /> )} - {referencePointsVisibility !== null && ( + {referencePointsVisibility && toggleReferencePointsVisibility && ( = ({ transKey="search.map.panel.referencePoints" /> )} - {touristicContentVisibility !== null && ( + {touristicContentVisibility && toggleTouristicContentVisibility && ( = ({ transKey="search.map.panel.touristicContent" /> )} - {informationDeskMobileVisibility !== null && ( + {informationDeskMobileVisibility && toggleInformationDeskVisibility && ( = ({ transKey="search.map.panel.informationDesks" /> )} - {coursesVisibility !== null && ( + {coursesVisibility && toggleCoursesVisibility && ( = ({ transKey="search.map.panel.courses" /> )} - {experiencesVisibility !== null && ( + {experiencesVisibility && toggleExperiencesVisibility && ( = ({ transKey="search.map.panel.experiences" /> )} - {signageVisibility !== null && ( + {signageVisibility && toggleSignageVisibility && ( = ({ transKey="search.map.panel.signage" /> )} - {infrastructureVisibility !== null && ( + {infrastructureVisibility && toggleInfrastructureVisibility && ( = ({ transKey="search.map.panel.infrastructure" /> )} - {serviceVisibility !== null && ( + {serviceVisibility && toggleServiceVisibility && ( void; - poiVisibility: Visibility; - togglePoiVisibility: () => void; - referencePointsVisibility: Visibility; - toggleReferencePointsVisibility: () => void; - touristicContentVisibility: Visibility; - toggleTouristicContentVisibility: () => void; - informationDeskMobileVisibility: Visibility; - toggleInformationDeskVisibility: () => void; - coursesVisibility: Visibility; - toggleCoursesVisibility: () => void; - experiencesVisibility: Visibility; - toggleExperiencesVisibility: () => void; - signageVisibility: Visibility; - toggleSignageVisibility: () => void; - serviceVisibility: Visibility; - toggleServiceVisibility: () => void; - infrastructureVisibility: Visibility; - toggleInfrastructureVisibility: () => void; + trekChildrenVisibility?: Visibility; + toggleTrekChildrenVisibility?: () => void; + poiVisibility?: Visibility; + togglePoiVisibility?: () => void; + referencePointsVisibility?: Visibility; + toggleReferencePointsVisibility?: () => void; + touristicContentVisibility?: Visibility; + toggleTouristicContentVisibility?: () => void; + informationDeskMobileVisibility?: Visibility; + toggleInformationDeskVisibility?: () => void; + coursesVisibility?: Visibility; + toggleCoursesVisibility?: () => void; + experiencesVisibility?: Visibility; + toggleExperiencesVisibility?: () => void; + signageVisibility?: Visibility; + toggleSignageVisibility?: () => void; + serviceVisibility?: Visibility; + toggleServiceVisibility?: () => void; + infrastructureVisibility?: Visibility; + toggleInfrastructureVisibility?: () => void; className?: string; position?: ControlPosition; } From d55a1994f8d28a326dfb98fab67b1f8467bd96f5 Mon Sep 17 00:00:00 2001 From: Florian Sommariva Date: Wed, 6 Sep 2023 15:17:48 +0200 Subject: [PATCH 3/4] Improve a11y for control section toggle button --- .../ControlButton/ControlButton.tsx | 24 ++++++++--------- .../ControlSection/ControlPanel/index.tsx | 5 ++-- .../ControlSection/ControlSection.tsx | 27 ++++++++++++------- .../ControlSection/useControlSection.tsx | 8 +++--- frontend/src/translations/ca.json | 2 ++ frontend/src/translations/de.json | 2 ++ frontend/src/translations/en.json | 2 ++ frontend/src/translations/es.json | 2 ++ frontend/src/translations/fr.json | 2 ++ frontend/src/translations/it.json | 2 ++ 10 files changed, 49 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/Map/components/ControlButton/ControlButton.tsx b/frontend/src/components/Map/components/ControlButton/ControlButton.tsx index bd238dfed..1d467314d 100644 --- a/frontend/src/components/Map/components/ControlButton/ControlButton.tsx +++ b/frontend/src/components/Map/components/ControlButton/ControlButton.tsx @@ -1,26 +1,26 @@ +import { FormattedMessage } from 'react-intl'; +import { cn } from 'services/utils/cn'; + interface ControlButtonProps { icon: React.ReactNode; className?: string; - active?: boolean; onClick?: () => void; } -export const ControlButton: React.FC = ({ - icon, - className = '', - onClick, - active = false, -}) => { +export const ControlButton: React.FC = ({ icon, className = '', ...props }) => { return ( + + ); }; diff --git a/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx b/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx index 8bc87e3ce..0363776f3 100644 --- a/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx +++ b/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx @@ -30,7 +30,8 @@ const Wrapper = styled.div` } `; -export const ControlPanel: React.FC = ({ +export const ControlPanel: React.FC = ({ + id, trekChildrenVisibility, toggleTrekChildrenVisibility, poiVisibility, @@ -53,7 +54,7 @@ export const ControlPanel: React.FC = ({ toggleInfrastructureVisibility, }) => { return ( - + {trekChildrenVisibility && toggleTrekChildrenVisibility && ( = ({ position = 'topright', ...props }) => { - const { controlSectionState, expandControlSection, collapseControlSection } = useControlSection(); + const { controlSectionState, toggleControlSection } = useControlSection(); + const idControlSectionElement = useId(); + + if (Object.keys(props).length === 0) { + return null; + } + + const icon = controlSectionState === 'COLLAPSED' ? : ; return ( -
- {controlSectionState === 'COLLAPSED' && ( - } onClick={expandControlSection} /> - )} +
+ {controlSectionState === 'EXPANDED' && ( - <> - } onClick={collapseControlSection} /> - - + )}
diff --git a/frontend/src/components/Map/components/ControlSection/useControlSection.tsx b/frontend/src/components/Map/components/ControlSection/useControlSection.tsx index 7eefbdb55..61dd1517f 100644 --- a/frontend/src/components/Map/components/ControlSection/useControlSection.tsx +++ b/frontend/src/components/Map/components/ControlSection/useControlSection.tsx @@ -4,11 +4,11 @@ export const useControlSection = () => { const [controlSectionState, setControlSectionState] = useState<'EXPANDED' | 'COLLAPSED'>( 'COLLAPSED', ); - const expandControlSection = () => setControlSectionState('EXPANDED'); - const collapseControlSection = () => setControlSectionState('COLLAPSED'); + const toggleControlSection = () => + setControlSectionState(prevState => (prevState === 'COLLAPSED' ? 'EXPANDED' : 'COLLAPSED')); + return { controlSectionState, - expandControlSection, - collapseControlSection, + toggleControlSection, }; }; diff --git a/frontend/src/translations/ca.json b/frontend/src/translations/ca.json index 4d8f8debf..086d7edf0 100644 --- a/frontend/src/translations/ca.json +++ b/frontend/src/translations/ca.json @@ -84,6 +84,8 @@ "seeResult": "Mostrar el detall", "seeMe": "Mostrar la meva posició", "panel": { + "open": "Display layer selector", + "close": "Hide layer selector", "trekChildren": "Steps", "poi": "Heritage", "referencePoints": "Landmarks", diff --git a/frontend/src/translations/de.json b/frontend/src/translations/de.json index c532acd56..989b17bca 100644 --- a/frontend/src/translations/de.json +++ b/frontend/src/translations/de.json @@ -84,6 +84,8 @@ "seeResult": "Einzelheiten anzeigen", "seeMe": "Meinen Standpunkt sehen", "panel": { + "open": "Display layer selector", + "close": "Hide layer selector", "trekChildren": "Steps", "poi": "Heritage", "referencePoints": "Landmarken", diff --git a/frontend/src/translations/en.json b/frontend/src/translations/en.json index a61e87d11..6b67aed6b 100644 --- a/frontend/src/translations/en.json +++ b/frontend/src/translations/en.json @@ -87,6 +87,8 @@ "seeResult": "Display details", "seeMe": "View my position", "panel": { + "open": "Display layer selector", + "close": "Hide layer selector", "trekChildren": "Steps", "poi": "Heritage", "referencePoints": "Landmarks", diff --git a/frontend/src/translations/es.json b/frontend/src/translations/es.json index 30099f3e0..32edfd687 100644 --- a/frontend/src/translations/es.json +++ b/frontend/src/translations/es.json @@ -84,6 +84,8 @@ "seeResult": "Mostrar el detalle", "seeMe": "Mostrar mi posición", "panel": { + "open": "Display layer selector", + "close": "Hide layer selector", "trekChildren": "Pasos", "poi": "Patrimonios", "referencePoints": "Puntos de referencia", diff --git a/frontend/src/translations/fr.json b/frontend/src/translations/fr.json index 0eccb8ef1..1a16eec0e 100644 --- a/frontend/src/translations/fr.json +++ b/frontend/src/translations/fr.json @@ -87,6 +87,8 @@ "seeResult": "Afficher le détail", "seeMe": "Voir ma position", "panel": { + "open": "Afficher le sélecteur de couches", + "close": "Masquer le sélecteur de couches", "trekChildren": "Étapes", "poi": "Patrimoines", "referencePoints": "Repères", diff --git a/frontend/src/translations/it.json b/frontend/src/translations/it.json index 2d4a403f3..b24352b88 100644 --- a/frontend/src/translations/it.json +++ b/frontend/src/translations/it.json @@ -87,6 +87,8 @@ "seeResult": "Mostrare i dettagli", "seeMe": "Vedere la mia posizione", "panel": { + "open": "Display layer selector", + "close": "Hide layer selector", "trekChildren": "Fasi", "poi": "Eredità", "referencePoints": "Riferimenti", From bc5abfd1088d055c0a3e41133d6c0c4f1accdc58 Mon Sep 17 00:00:00 2001 From: Florian Sommariva Date: Wed, 6 Sep 2023 15:50:41 +0200 Subject: [PATCH 4/4] Use tailwind instead of styled component for ControlSection component --- .../ControlSection/ControlPanel/Line.tsx | 57 ++++++++----------- .../ControlSection/ControlPanel/index.tsx | 43 ++++---------- 2 files changed, 35 insertions(+), 65 deletions(-) diff --git a/frontend/src/components/Map/components/ControlSection/ControlPanel/Line.tsx b/frontend/src/components/Map/components/ControlSection/ControlPanel/Line.tsx index 6216bd315..57c2287e9 100644 --- a/frontend/src/components/Map/components/ControlSection/ControlPanel/Line.tsx +++ b/frontend/src/components/Map/components/ControlSection/ControlPanel/Line.tsx @@ -1,37 +1,26 @@ -import styled from 'styled-components'; -import { colorPalette } from 'stylesheet'; import { useIntl } from 'react-intl'; +import { cn } from 'services/utils/cn'; import Check from './Check'; -const Wrapper = styled.button<{ active: boolean }>` - color: ${props => (props.active ? colorPalette.primary1 : colorPalette.greyDarkColored)}; - display: flex; - align-items: center; - font-weight: bold; - text-align: left; -`; -const IconWrapper = styled.div` - & svg { - height: 25px; - width: 25px; - margin-right: 10px; - } -`; - -const Text = styled.div` - flex: auto; -`; - -export const Line: React.FC<{ Icon: any; active: boolean; toggle: () => void; transKey: string }> = - ({ Icon, active, toggle, transKey }) => { - const intl = useIntl(); - return ( - - - - - {intl.formatMessage({ id: transKey })} - {} - - ); - }; +export const Line: React.FC<{ + icon: any; + active: boolean; + toggle: () => void; + transKey: string; +}> = ({ icon: Icon, active, toggle, transKey }) => { + const intl = useIntl(); + return ( + + ); +}; diff --git a/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx b/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx index 0363776f3..9f6e02d28 100644 --- a/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx +++ b/frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx @@ -1,4 +1,3 @@ -import styled from 'styled-components'; import { Florist } from 'components/Icons/Florist'; import { Signage } from 'components/Icons/Signage'; import { Infrastructure } from 'components/Icons/Infrastructure'; @@ -12,24 +11,6 @@ import IconOutdoorSite from './IconOutdoorSite'; import IconOutdoorRoute from './IconOutdoorRoute'; import { ControlSectionProps } from '../ControlSection'; -const Wrapper = styled.div` - background: white; - box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15); - padding: 16px; - border-radius: 16px; - width: 230px; - display: flex; - flex-flow: column; - - & button { - margin-bottom: 16px; - } - - & button:last-child { - margin-bottom: 8px; - } -`; - export const ControlPanel: React.FC = ({ id, trekChildrenVisibility, @@ -54,10 +35,10 @@ export const ControlPanel: React.FC = ({ toggleInfrastructureVisibility, }) => { return ( - +
{trekChildrenVisibility && toggleTrekChildrenVisibility && ( = ({ )} {poiVisibility && togglePoiVisibility && ( = ({ )} {referencePointsVisibility && toggleReferencePointsVisibility && ( = ({ )} {touristicContentVisibility && toggleTouristicContentVisibility && ( = ({ )} {informationDeskMobileVisibility && toggleInformationDeskVisibility && ( = ({ )} {coursesVisibility && toggleCoursesVisibility && ( = ({ )} {experiencesVisibility && toggleExperiencesVisibility && ( = ({ )} {signageVisibility && toggleSignageVisibility && ( = ({ )} {infrastructureVisibility && toggleInfrastructureVisibility && ( = ({ )} {serviceVisibility && toggleServiceVisibility && ( )} - +
); };