Collapsible Legs in Route Overview screen #314
Conversation
src/components/Icon.jsx
Outdated
| @@ -26,6 +26,7 @@ export default function Icon(props) { | |||
| Icon_flipHorizontally: props.flipHorizontally, | |||
| [props.className]: !!props.className, | |||
| })} | |||
| onClick={props.onClick} | |||
src/components/Itinerary.jsx
Outdated
| @@ -7,6 +8,7 @@ import ItineraryBikeLeg from './ItineraryBikeLeg'; | |||
| import ItineraryHeader from './ItineraryHeader'; | |||
| import ItineraryTransitLeg from './ItineraryTransitLeg'; | |||
| import ItineraryElevationProfile from './ItineraryElevationProfile'; | |||
| import { isSignificantLeg } from './RoutesOverview'; | |||
There was a problem hiding this comment.
don't put utilities in component
| scrollTo={scrollToLegIdx === idx} | ||
| /> | ||
| ); | ||
| } else { | ||
| } else if (isSignificantLeg(leg)) { |
There was a problem hiding this comment.
don't hide these by default: figure out better solution
| </ItineraryDivider>, | ||
| ], | ||
|
|
||
| {expanded ? ( |
There was a problem hiding this comment.
try to flatten this
|
|
||
| import './ItineraryHeader.css'; | ||
|
|
||
| export default function ItineraryHeader({ alerts, children, icon, iconColor }) { | ||
| function alertSummary(alertBody) { |
There was a problem hiding this comment.
change to summarizeAlert
| @@ -57,6 +77,36 @@ export default function ItineraryTransitLeg({ leg, onStopClick, scrollTo }) { | |||
| /> | |||
| </span> | |||
| <span> | |||
| <FormattedMessage | |||
| defaultMessage="<i>Towards {headsign}</i>" | |||
| ' transit vehicle to board.' | ||
| } | ||
| values={{ headsign: leg.trip_headsign }} | ||
| defaultMessage="<b>Board at {stop}</b>" |
| description="instruction to exit (a public transit vehicle) at the named stop" | ||
| values={{ stop: stops[stops.length - 1].stop_name }} | ||
| {spacerWithMiddot} | ||
| {departure} |
There was a problem hiding this comment.
made start/end stops clickable
| )} | ||
| <ItineraryStep IconSVGComponent={Circle} smallIcon={true}> | ||
| <FormattedMessage | ||
| defaultMessage="<b>Get off at {stop}</b>" |
| @@ -48,5 +54,5 @@ export default function ModeIcon({ mode, width, height, fallback = BusIcon }) { | |||
| break; | |||
| } | |||
|
|
|||
| return <IconSvg width={width} height={height} />; | |||
| return <IconSvg width={width} height={height} onClick={onClick} />; | |||
There was a problem hiding this comment.
wrap this in a button
src/components/Routes.jsx
Outdated
| @@ -67,6 +70,10 @@ export default function Routes(props) { | |||
| dispatch(itineraryStepClicked(legClicked, stepClicked)); | |||
| }; | |||
|
|
|||
| const handleIconClick = (legClicked) => { | |||
There was a problem hiding this comment.
change to onExpandToggle
| @@ -13,6 +13,7 @@ const DEFAULT_STATE = { | |||
|
|
|||
| // State specific to an active route. | |||
| viewingDetails: false, // True if viewing detailed itinerary for the active route | |||
| viewingLeg: null, // number leg if viewing a particular leg of active route. | |||
There was a problem hiding this comment.
move this state to Itinerary component
| return street.totalDistance >= quartileDistance; | ||
| }); | ||
|
|
||
| return 'via ' + streetsOverQuartile.map((s) => s.name).join(', '); |
There was a problem hiding this comment.
This string should be localized
(It'll be cleaner if this utility function returns an array of streets and you have a UI component format the localized string)
src/components/ItineraryStep.css
Outdated
| .ItineraryTransitLeg { | ||
| .ItineraryStep_content { |
There was a problem hiding this comment.
Please don't do this, it creates maintainability issues. By convention a class like .ItineraryTransitLeg is private to the ItineraryTransitLeg component. Instead ItineraryTransitLeg should give some prop to ItineraryStep that lets it render correctly
| background-color: #fff5c0; | ||
| padding: 8px; | ||
| margin: 0; | ||
| margin: 8px 0 0 0; | ||
| list-style-type: none; | ||
| border: 1px solid rgb(187, 187, 187); | ||
| border: 1px solid #f4d598; |
There was a problem hiding this comment.
We are gradually migrating toward using Tailwind CSS and it might be an opportunity if changing the styles a lot to convert these components over.
Also, can we grab a color from Tailwind's palette for these? I've been using the Tailwind palette for minor UI stuff. Or if we want to use a custom color, it would be nice to define these new colors globally in tailwind.config.js so we can use them consistently
| }) { | ||
| return ( | ||
| <FormattedMessage | ||
| defaultMessage="Ride {agency} to {lastStopName}" |
There was a problem hiding this comment.
Can we keep the textual descriptions of individual modes (bus vs train, etc) as an additional reminder in case you don't see the icon, and also for accessibility since the info is only otherwise presented visually?
| description={ | ||
| 'instructions header text.' + | ||
| ' Says to ride the named transit line, operated by the named agency.' + | ||
| ' The line is operated by a subway or metro train.' |
There was a problem hiding this comment.
(also: this statement in the description is not true)
abhumbla
force-pushed
the
collapsible-legs
branch
from
1b26464 to
8af51ea
Compare
by default collapses bike legs and only shows start/end for transit
can expand to all stops/steps