From 2e3c7795c66df67e091494946925323d86459f26 Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Thu, 19 Dec 2024 10:00:38 +0200 Subject: [PATCH 1/8] fix top card width fix broken alert styles small style fixes --- .../itinerary/navigator/NaviUtils.js | 3 +- .../itinerary/navigator/navigator.scss | 48 ++++++++++--------- 2 files changed, 27 insertions(+), 24 deletions(-) diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js index a21da09687..15ea24fbc8 100644 --- a/app/component/itinerary/navigator/NaviUtils.js +++ b/app/component/itinerary/navigator/NaviUtils.js @@ -321,7 +321,7 @@ export const getItineraryAlerts = ( {alert.alertHeaderText} ), - id: alert.id, + id: `${alert.effectiveStartDate}-${alert.alertDescriptionText}`, })); }); const abortTrip = ; @@ -368,6 +368,7 @@ export const getItineraryAlerts = ( content, id: `canceled-${legId}`, hideClose: true, + expiresOn: alert.effectiveEndDate, }); } }); diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss index 19faa89d6e..2a50a02f99 100644 --- a/app/component/itinerary/navigator/navigator.scss +++ b/app/component/itinerary/navigator/navigator.scss @@ -51,9 +51,7 @@ } .navitop { - margin-bottom: 5px; - width: 92%; - margin-left: 8px; + margin: 0 8px 5px 8px; border-radius: 8px; min-height: 70px; color: black; @@ -62,6 +60,7 @@ align-items: center; letter-spacing: -0.3px; box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.2); + width: calc(100vw - 16px); &.expanded { max-height: unset; @@ -120,10 +119,9 @@ .wait-leg { display: flex; - align-items: center; margin-top: 3px; flex-direction: column; - align-self: flex-start; + align-items: flex-start; .route-info { display: flex; @@ -365,9 +363,10 @@ .info-stack { position: fixed; height: 69px; - margin-left: 8px; - width: 90%; letter-spacing: -0.3px; + width: calc(100% - 16px); + margin-right: 8px; + margin-left: 8px; div:first-child { margin-top: 0; @@ -418,6 +417,8 @@ .navi-alert-content { width: 100%; margin: 0 8px; + display: flex; + flex-direction: column; } } @@ -428,6 +429,7 @@ display: flex; flex-direction: column; margin: 0 8px; + width: 100%; span:first-child { font-weight: $font-weight-medium; @@ -443,24 +445,24 @@ font-size: $font-size-small; } } + } - .alt-btn { - display: flex; - flex-direction: column; - width: 100%; - - .show-options { - padding: var(--space-s, 16px) var(--space-xs, 8px) - var(--space-s, 16px) var(--space-s, 16px); - background: #0074bf; - color: #fff; - border-radius: 999px; // var(--radius-radius-medium, 8px); - margin-top: var(--space-xxs); + .alt-btn { + display: flex; + flex-direction: column; + width: 100%; - /* box-shadow-card-s-strong */ - box-shadow: 0 2px 4px 0 - var(--color-shadow-strong, rgba(51, 51, 51, 0.2)); - } + .show-options { + padding: var(--space-s, 16px) var(--space-xs, 8px) var(--space-s, 16px) + var(--space-s, 16px); + background: #0074bf; + color: #fff; + border-radius: 999px; // var(--radius-radius-medium, 8px); + margin-top: var(--space-xxs); + + /* box-shadow-card-s-strong */ + box-shadow: 0 2px 4px 0 + var(--color-shadow-strong, rgba(51, 51, 51, 0.2)); } } From bc777001b1422a131218f0464c508768db83bdb3 Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Fri, 20 Dec 2024 08:21:34 +0200 Subject: [PATCH 2/8] top card leg change animation navistack no longer needs top position calculation --- .../itinerary/navigator/NaviCardContainer.js | 74 ++++++++++--------- .../itinerary/navigator/NaviStack.js | 5 +- .../itinerary/navigator/navigator.scss | 19 +++++ 3 files changed, 60 insertions(+), 38 deletions(-) diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js index e0a616d884..0125f353bd 100644 --- a/app/component/itinerary/navigator/NaviCardContainer.js +++ b/app/component/itinerary/navigator/NaviCardContainer.js @@ -24,6 +24,26 @@ function addMessages(incominMessages, newMessages) { incominMessages.set(m.id, m); }); } + +const handleLegChange = (leg, firstLeg, time) => { + let legType; + if (time < legTime(firstLeg.start)) { + legType = LEGTYPE.PENDING; + } else if (leg) { + if (!leg.transitLeg) { + if (leg.current >= TIME_AT_DESTINATION) { + legType = LEGTYPE.WAIT; + } else { + legType = LEGTYPE.MOVE; + } + } else { + legType = LEGTYPE.TRANSIT; + } + } else { + legType = LEGTYPE.WAIT; + } + return legType; +}; function NaviCardContainer( { focusToLeg, @@ -45,8 +65,7 @@ function NaviCardContainer( const [messages, setMessages] = useState(new Map()); // notifications that are shown to the user. const [activeMessages, setActiveMessages] = useState([]); - const [topPosition, setTopPosition] = useState(0); - + const [legChanging, setLegChanging] = useState(false); const legRef = useRef(currentLeg); const focusRef = useRef(false); // Destination counter. How long user has been at the destination. * 10 seconds @@ -73,14 +92,6 @@ function NaviCardContainer( updateClient(topics, context); }, []); - useEffect(() => { - if (cardRef.current) { - const contentHeight = cardRef.current.getBoundingClientRect(); - // Navistack top position depending on main card height. - setTopPosition(contentHeight.bottom + TOPBAR_PADDING); - } - }, [currentLeg, cardExpanded]); - useEffect(() => { const incomingMessages = new Map(); @@ -116,6 +127,10 @@ function NaviCardContainer( if (legChanged) { updateClient(topics, context); setCardExpanded(false); + setLegChanging(true); + setTimeout(() => { + setLegChanging(false); + }, 3000); if (currentLeg) { focusToLeg?.(currentLeg); } @@ -163,30 +178,23 @@ function NaviCardContainer( } }, [time]); - let legType; - - if (time < legTime(firstLeg.start)) { - legType = LEGTYPE.PENDING; - } else if (currentLeg) { - if (!currentLeg.transitLeg) { - if (destCountRef.current >= TIME_AT_DESTINATION) { - legType = LEGTYPE.WAIT; - } else { - legType = LEGTYPE.MOVE; - } - } else { - legType = LEGTYPE.TRANSIT; - } - } else { - legType = LEGTYPE.WAIT; - } + // LegChange fires animation, we need to keep the old data until card goes ot of the view. + const l = legChanging ? lastLeg : currentLeg; + const legType = handleLegChange(l, firstLeg, time); const containerTopPosition = mapLayerRef.current.getBoundingClientRect().top + TOPBAR_PADDING; - + let className; + if (isJourneyCompleted) { + className = 'slide-out'; + } else if (legChanging) { + className = 'hide-card'; + } else { + className = 'show-card'; + } return (
{activeMessages.length > 0 && ( - + )}
); diff --git a/app/component/itinerary/navigator/NaviStack.js b/app/component/itinerary/navigator/NaviStack.js index 2e4ca62292..876407acc8 100644 --- a/app/component/itinerary/navigator/NaviStack.js +++ b/app/component/itinerary/navigator/NaviStack.js @@ -3,9 +3,9 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import NaviMessage from './NaviMessage'; -const NaviStack = ({ messages, handleRemove, topPosition }) => { +const NaviStack = ({ messages, handleRemove }) => { return ( -
+
{messages.map((notification, index) => ( Date: Fri, 20 Dec 2024 08:42:08 +0200 Subject: [PATCH 3/8] adjust animation time hide walk duration and distance while animation is running --- app/component/itinerary/navigator/NaviCard.js | 16 +++++++++++++++- .../itinerary/navigator/NaviCardContainer.js | 3 ++- .../itinerary/navigator/NaviInstructions.js | 14 +++++++++----- app/component/itinerary/navigator/navigator.scss | 4 ++-- 4 files changed, 28 insertions(+), 9 deletions(-) diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js index 75eaac285f..0fee27a2b5 100644 --- a/app/component/itinerary/navigator/NaviCard.js +++ b/app/component/itinerary/navigator/NaviCard.js @@ -26,7 +26,17 @@ const iconMap = { }; export default function NaviCard( - { leg, nextLeg, legType, cardExpanded, startTime, time, position, origin }, + { + leg, + nextLeg, + legType, + cardExpanded, + startTime, + time, + position, + origin, + legChanging, + }, { config }, ) { if (legType === LEGTYPE.PENDING) { @@ -79,6 +89,7 @@ export default function NaviCard( time={time} position={position} origin={origin} + legChanging={legChanging} />
@@ -115,6 +126,8 @@ NaviCard.propTypes = { x: PropTypes.number.isRequired, y: PropTypes.number.isRequired, }).isRequired, + // Hide distance and duration caluclation when legchange animation is running + legChanging: PropTypes.bool, }; NaviCard.defaultProps = { cardExpanded: false, @@ -122,6 +135,7 @@ NaviCard.defaultProps = { nextLeg: undefined, startTime: '', position: undefined, + legChanging: false, }; NaviCard.contextTypes = { diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js index 0125f353bd..f59f42e5d9 100644 --- a/app/component/itinerary/navigator/NaviCardContainer.js +++ b/app/component/itinerary/navigator/NaviCardContainer.js @@ -130,7 +130,7 @@ function NaviCardContainer( setLegChanging(true); setTimeout(() => { setLegChanging(false); - }, 3000); + }, 2000); if (currentLeg) { focusToLeg?.(currentLeg); } @@ -213,6 +213,7 @@ function NaviCardContainer( time={time} position={position} origin={origin} + legChanging={legChanging} />
diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js index 6f85368c03..d25273235f 100644 --- a/app/component/itinerary/navigator/NaviInstructions.js +++ b/app/component/itinerary/navigator/NaviInstructions.js @@ -11,7 +11,7 @@ import { durationToString } from '../../../util/timeUtils'; import { getRouteMode } from '../../../util/modeUtils'; export default function NaviInstructions( - { leg, nextLeg, instructions, legType, time, position, origin }, + { leg, nextLeg, instructions, legType, time, position, origin, legChanging }, { intl, config }, ) { const withRealTime = (rt, children) => ( @@ -36,10 +36,12 @@ export default function NaviInstructions( {legDestination(intl, leg, null, nextLeg)}
-
- {displayDistance(distance, config, intl.formatNumber)} ( - {durationToString(duration * 1000)}) -
+ {!legChanging && ( +
+ {displayDistance(distance, config, intl.formatNumber)} ( + {durationToString(duration * 1000)}) +
+ )} ); } @@ -145,6 +147,7 @@ NaviInstructions.propTypes = { x: PropTypes.number.isRequired, y: PropTypes.number.isRequired, }).isRequired, + legChanging: PropTypes.bool, }; NaviInstructions.defaultProps = { @@ -152,6 +155,7 @@ NaviInstructions.defaultProps = { leg: undefined, nextLeg: undefined, position: undefined, + legChanging: false, }; NaviInstructions.contextTypes = { intl: intlShape.isRequired, diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss index ced8c81241..40388cd7cf 100644 --- a/app/component/itinerary/navigator/navigator.scss +++ b/app/component/itinerary/navigator/navigator.scss @@ -50,12 +50,12 @@ } &.hide-card { - animation: hideTopCard 3s ease-out forwards; + animation: hideTopCard 2s ease-out forwards; pointer-events: none; } &.show-card { - animation: slideDownFromTop 3s ease-out forwards; + animation: slideDownFromTop 2s ease-out forwards; } } From e75b3ec9418ed5c1ec9293aaba566930e6715cb7 Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Fri, 20 Dec 2024 08:53:06 +0200 Subject: [PATCH 4/8] use previousleg, not last leg in animation --- app/component/itinerary/navigator/NaviCardContainer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js index f59f42e5d9..64586ac065 100644 --- a/app/component/itinerary/navigator/NaviCardContainer.js +++ b/app/component/itinerary/navigator/NaviCardContainer.js @@ -56,6 +56,7 @@ function NaviCardContainer( nextLeg, firstLeg, lastLeg, + previousLeg, isJourneyCompleted, }, context, @@ -179,7 +180,7 @@ function NaviCardContainer( }, [time]); // LegChange fires animation, we need to keep the old data until card goes ot of the view. - const l = legChanging ? lastLeg : currentLeg; + const l = legChanging ? previousLeg : currentLeg; const legType = handleLegChange(l, firstLeg, time); const containerTopPosition = @@ -242,6 +243,7 @@ NaviCardContainer.propTypes = { nextLeg: legShape, firstLeg: legShape, lastLeg: legShape, + previousLeg: legShape, isJourneyCompleted: PropTypes.bool, /* @@ -256,6 +258,7 @@ NaviCardContainer.defaultProps = { nextLeg: undefined, firstLeg: undefined, lastLeg: undefined, + previousLeg: undefined, isJourneyCompleted: false, }; From d8828c0ad95774d07242878f76f6cdcdc7aa154c Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Fri, 20 Dec 2024 09:00:23 +0200 Subject: [PATCH 5/8] leg change control was unnecessary in naviInstructions --- app/component/itinerary/navigator/NaviCard.js | 16 +--------------- .../itinerary/navigator/NaviCardContainer.js | 1 - .../itinerary/navigator/NaviContainer.js | 1 + .../itinerary/navigator/NaviInstructions.js | 14 +++++--------- 4 files changed, 7 insertions(+), 25 deletions(-) diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js index 0fee27a2b5..75eaac285f 100644 --- a/app/component/itinerary/navigator/NaviCard.js +++ b/app/component/itinerary/navigator/NaviCard.js @@ -26,17 +26,7 @@ const iconMap = { }; export default function NaviCard( - { - leg, - nextLeg, - legType, - cardExpanded, - startTime, - time, - position, - origin, - legChanging, - }, + { leg, nextLeg, legType, cardExpanded, startTime, time, position, origin }, { config }, ) { if (legType === LEGTYPE.PENDING) { @@ -89,7 +79,6 @@ export default function NaviCard( time={time} position={position} origin={origin} - legChanging={legChanging} />
@@ -126,8 +115,6 @@ NaviCard.propTypes = { x: PropTypes.number.isRequired, y: PropTypes.number.isRequired, }).isRequired, - // Hide distance and duration caluclation when legchange animation is running - legChanging: PropTypes.bool, }; NaviCard.defaultProps = { cardExpanded: false, @@ -135,7 +122,6 @@ NaviCard.defaultProps = { nextLeg: undefined, startTime: '', position: undefined, - legChanging: false, }; NaviCard.contextTypes = { diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js index 64586ac065..a2a21d7fc8 100644 --- a/app/component/itinerary/navigator/NaviCardContainer.js +++ b/app/component/itinerary/navigator/NaviCardContainer.js @@ -214,7 +214,6 @@ function NaviCardContainer( time={time} position={position} origin={origin} - legChanging={legChanging} />
diff --git a/app/component/itinerary/navigator/NaviContainer.js b/app/component/itinerary/navigator/NaviContainer.js index 505916eb41..227f32c486 100644 --- a/app/component/itinerary/navigator/NaviContainer.js +++ b/app/component/itinerary/navigator/NaviContainer.js @@ -86,6 +86,7 @@ function NaviContainer( firstLeg={firstLeg} lastLeg={lastLeg} isJourneyCompleted={isJourneyCompleted} + previousLeg={previousLeg} /> {isJourneyCompleted && isNavigatorIntroDismissed && ( ( @@ -36,12 +36,10 @@ export default function NaviInstructions( {legDestination(intl, leg, null, nextLeg)} - {!legChanging && ( -
- {displayDistance(distance, config, intl.formatNumber)} ( - {durationToString(duration * 1000)}) -
- )} +
+ {displayDistance(distance, config, intl.formatNumber)} ( + {durationToString(duration * 1000)}) +
); } @@ -147,7 +145,6 @@ NaviInstructions.propTypes = { x: PropTypes.number.isRequired, y: PropTypes.number.isRequired, }).isRequired, - legChanging: PropTypes.bool, }; NaviInstructions.defaultProps = { @@ -155,7 +152,6 @@ NaviInstructions.defaultProps = { leg: undefined, nextLeg: undefined, position: undefined, - legChanging: false, }; NaviInstructions.contextTypes = { intl: intlShape.isRequired, From 864ab9c5319f8c6cb7a00067a4992ab1c487f114 Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Fri, 20 Dec 2024 10:23:10 +0200 Subject: [PATCH 6/8] pr fixes --- app/component/itinerary/navigator/NaviCardContainer.js | 9 +++++++-- app/component/itinerary/navigator/navigator.scss | 6 +++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js index a2a21d7fc8..33548eca62 100644 --- a/app/component/itinerary/navigator/NaviCardContainer.js +++ b/app/component/itinerary/navigator/NaviCardContainer.js @@ -18,6 +18,7 @@ import { updateClient, getTopics } from '../ItineraryPageUtils'; const TIME_AT_DESTINATION = 3; // * 10 seconds const TOPBAR_PADDING = 8; // pixels +const HIDE_TOPCARD_DURATION = 2000; // milliseconds function addMessages(incominMessages, newMessages) { newMessages.forEach(m => { @@ -44,6 +45,7 @@ const handleLegChange = (leg, firstLeg, time) => { } return legType; }; + function NaviCardContainer( { focusToLeg, @@ -125,13 +127,14 @@ function NaviCardContainer( ...getAdditionalMessages(nextLeg, time, intl, config, messages), ]); } + let timeoutId; if (legChanged) { updateClient(topics, context); setCardExpanded(false); setLegChanging(true); - setTimeout(() => { + timeoutId = setTimeout(() => { setLegChanging(false); - }, 2000); + }, HIDE_TOPCARD_DURATION); if (currentLeg) { focusToLeg?.(currentLeg); } @@ -177,6 +180,8 @@ function NaviCardContainer( // Todo: this works in transit legs, but do we need additional logic for bikes / scooters? destCountRef.current = 0; } + + return () => clearTimeout(timeoutId); }, [time]); // LegChange fires animation, we need to keep the old data until card goes ot of the view. diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss index 40388cd7cf..17e075c1d7 100644 --- a/app/component/itinerary/navigator/navigator.scss +++ b/app/component/itinerary/navigator/navigator.scss @@ -60,7 +60,7 @@ } .navitop { - margin: 0 8px 5px 8px; + margin: 0 var(--space-s) 5px var(--space-s); border-radius: 8px; min-height: 70px; color: black; @@ -69,7 +69,7 @@ align-items: center; letter-spacing: -0.3px; box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.2); - width: calc(100vw - 16px); + width: calc(100vw - var(--space-s) * 2); &.expanded { max-height: unset; @@ -373,7 +373,7 @@ position: fixed; height: 69px; letter-spacing: -0.3px; - width: calc(100% - 16px); + width: calc(100% - var(--space-s) * 2); margin-right: 8px; margin-left: 8px; From ed693c950a93964c022d3477f5c0d6bcdd38ab3f Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Fri, 20 Dec 2024 10:58:24 +0200 Subject: [PATCH 7/8] sss variable --- app/component/itinerary/navigator/navigator.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss index 17e075c1d7..f219d79de1 100644 --- a/app/component/itinerary/navigator/navigator.scss +++ b/app/component/itinerary/navigator/navigator.scss @@ -1,3 +1,5 @@ +$fixed-width-padding: 16px; + .navi-start-container { padding: 0 10px; @@ -69,7 +71,7 @@ align-items: center; letter-spacing: -0.3px; box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.2); - width: calc(100vw - var(--space-s) * 2); + width: calc(100vw - #{$fixed-width-padding}); &.expanded { max-height: unset; @@ -373,7 +375,7 @@ position: fixed; height: 69px; letter-spacing: -0.3px; - width: calc(100% - var(--space-s) * 2); + width: calc(100% - #{$fixed-width-padding}); margin-right: 8px; margin-left: 8px; From 3b4c03e3374e5addd72478b6b90e7a6180d44fd9 Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Fri, 20 Dec 2024 13:26:29 +0200 Subject: [PATCH 8/8] more pr fixes --- app/component/itinerary/navigator/NaviCardContainer.js | 2 +- app/component/itinerary/navigator/NaviUtils.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/component/itinerary/navigator/NaviCardContainer.js b/app/component/itinerary/navigator/NaviCardContainer.js index 33548eca62..19e3d3851a 100644 --- a/app/component/itinerary/navigator/NaviCardContainer.js +++ b/app/component/itinerary/navigator/NaviCardContainer.js @@ -184,7 +184,7 @@ function NaviCardContainer( return () => clearTimeout(timeoutId); }, [time]); - // LegChange fires animation, we need to keep the old data until card goes ot of the view. + // LegChange fires animation, we need to keep the old data until card goes out of the view. const l = legChanging ? previousLeg : currentLeg; const legType = handleLegChange(l, firstLeg, time); diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js index 15ea24fbc8..f305b805c7 100644 --- a/app/component/itinerary/navigator/NaviUtils.js +++ b/app/component/itinerary/navigator/NaviUtils.js @@ -368,7 +368,7 @@ export const getItineraryAlerts = ( content, id: `canceled-${legId}`, hideClose: true, - expiresOn: alert.effectiveEndDate, + expiresOn: alert.effectiveEndDate * 1000, }); } });