revert(RouteDetails): remove color; remove headsign buttons

Author: miles-grant-ibigroup

i18n/en-US.yml

@@ -39,7 +39,8 @@ components:
   RouteDetails:
     operatedBy: "Operated by {agencyName}"
     moreDetails: "More Details"
-    stopsTo: "Stops To"
+    stopsTo: "Towards"
+    selectADirection: "Select a direction..."
   RouteViewer:
     allAgencies: All Agencies
     allModes: All Modes # Note to translator: This text is width-constrained.

lib/components/viewers/route-details.js

@@ -1,8 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 
 import Icon from '../util/icon'
 import { extractHeadsignFromPattern, getColorAndNameFromRoute } from '../../util/viewer'
@@ -63,7 +62,9 @@ class RouteDetails extends Component {
    * If a headsign link is clicked, set that pattern in redux state so that the
    * view can adjust
    */
-  _headSignButtonClicked = (id) => {
+  _headSignButtonClicked = (e) => {
+    const { target } = e
+    const { value: id } = target
     const { route, setViewedRoute } = this.props
     setViewedRoute({ patternId: id, routeId: route.id })
   };
@@ -77,12 +78,11 @@ class RouteDetails extends Component {
   };
 
   render () {
-    const { className, operator, pattern, route, setHoveredStop } = this.props
+    const { intl, operator, pattern, route, setHoveredStop, viewedRoute } = this.props
     const { agency, patterns, url } = route
 
     const {
-      backgroundColor: routeColor,
-      color: textColor
+      backgroundColor: routeColor
     } = getColorAndNameFromRoute(operator, route)
 
     const headsigns =
@@ -131,9 +131,10 @@ class RouteDetails extends Component {
           return bVehicleCount - aVehicleCount
         })
 
+    // if no pattern is set, we are in the routeRow
     return (
-      <Container backgroundColor={routeColor} textColor={textColor}>
-        <RouteNameContainer className={className} textColor={textColor}>
+      <Container full={pattern != null}>
+        <RouteNameContainer>
           <LogoLinkContainer>
             {agency && <FormattedMessage
               id='components.RouteDetails.operatedBy'
@@ -142,26 +143,37 @@ class RouteDetails extends Component {
               }}
             />}
             {url && (
-              <MoreDetailsLink color={textColor} href={url} target='_blank'>
+              <MoreDetailsLink href={url} target='_blank'>
                 <Icon type='link' />
                 <FormattedMessage id='components.RouteDetails.moreDetails' />
               </MoreDetailsLink>
             )}
           </LogoLinkContainer>
         </RouteNameContainer>
-        <PatternContainer color={routeColor} textColor={textColor}>
-          <h4><FormattedMessage id='components.RouteDetails.stopsTo' /></h4>
+        <PatternContainer>
+          <h4>
+            <label htmlFor='headsign-selector' id='headsign-selector-label'>
+              <FormattedMessage id='components.RouteDetails.stopsTo' />
+            </label>
+          </h4>
           {headsigns &&
-            headsigns.map((h) => (
-              <Button
-                bsStyle='link'
-                className={h.id === pattern?.id ? 'active' : ''}
+          <select
+            id='headsign-selector'
+            name='headsigns'
+            onBlur={this._headSignButtonClicked}
+            onChange={this._headSignButtonClicked}
+            value={viewedRoute.patternId}
+          >
+            {!viewedRoute.patternId && <option>{intl.formatMessage({id: 'components.RouteDetails.selectADirection'})}</option>}
+            {headsigns.map((h) => (
+              <option
                 key={h.id}
-                onClick={() => this._headSignButtonClicked(h.id)}
+                value={h.id}
               >
                 {h.headsign}
-              </Button>
+              </option>
             ))}
+          </select>}
         </PatternContainer>
         {pattern && (
           <StopContainer
@@ -200,4 +212,4 @@ const mapDispatchToProps = {
   setViewedStop
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(RouteDetails)
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(RouteDetails))

lib/components/viewers/route-viewer.js

@@ -5,7 +5,6 @@ import { Label, Button } from 'react-bootstrap'
 import { VelocityTransitionGroup } from 'velocity-react'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
-import tinycolor from 'tinycolor2'
 import { FormattedMessage, injectIntl } from 'react-intl'
 
 import Icon from '../util/icon'
@@ -141,17 +140,12 @@ class RouteViewer extends Component {
           route,
           transitOperators
         ) || {}
-      const { backgroundColor, color } = getColorAndNameFromRoute(
-        operator,
-        route
-      )
 
       return (
         <div className='route-viewer'>
           {/* Header Block */}
           <div
             className='route-viewer-header'
-            style={{ backgroundColor, color }}
           >
             {/* Always show back button, as we don't write a route anymore */}
             <div className='back-button-container'>
@@ -166,11 +160,10 @@ class RouteViewer extends Component {
                 <ModeIcon
                   aria-label={getModeFromRoute(route)}
                   mode={getModeFromRoute(route)}
-                  style={{ fill: color }}
                   width={22}
                 />
               )}
-              <strong>{route.shortName}</strong>
+              <RouteName operator={operator} route={route} />
             </div>
           </div>
           <RouteDetails
@@ -301,7 +294,7 @@ class RouteViewer extends Component {
 }
 
 const StyledRouteRow = styled.div`
-  background-color: ${props => props.isActive ? props.routeColor : 'white'};
+  background-color: white;
   border-bottom: 1px solid gray;
 `
 
@@ -311,20 +304,6 @@ const RouteRowButton = styled(Button)`
   padding: 6px;
   width: 100%;
   transition: all ease-in-out 0.1s;
-
-  &:hover {
-    background-color: ${(props) =>
-    !props.isActive && tinycolor(props.routeColor)
-      .lighten(50)
-      .toHexString()};
-    border-radius: 0;
-  }
-
-  &:active:focus,
-  &:active:hover {
-    background-color: ${(props) => props.routeColor};
-    border-radius: 0;
-  }
 `
 
 const RouteRowElement = styled.span``
@@ -358,6 +337,22 @@ const RouteNameElement = styled(Label)`
   text-overflow: ellipsis;
 `
 
+const RouteName = ({operator, route}) => {
+  const { backgroundColor, color, longName } = getColorAndNameFromRoute(
+    operator,
+    route
+  )
+  return (
+    <RouteNameElement
+      backgroundColor={backgroundColor}
+      color={color}
+      title={`${route.shortName} ${longName}`}
+    >
+      <b>{route.shortName}</b> {longName}
+    </RouteNameElement>
+  )
+}
+
 class RouteRow extends PureComponent {
   static contextType = ComponentContext
 
@@ -405,22 +400,15 @@ class RouteRow extends PureComponent {
     const { intl, isActive, operator, route } = this.props
     const { ModeIcon } = this.context
 
-    const { backgroundColor, color, longName, potentiallyUnreadableBackgroundColor } = getColorAndNameFromRoute(
-      operator,
-      route
-    )
-
     return (
       <StyledRouteRow
         isActive={isActive}
         ref={this.activeRef}
-        routeColor={backgroundColor}
       >
         <RouteRowButton
           className='clear-button-formatting'
           isActive={isActive}
           onClick={this._onClick}
-          routeColor={potentiallyUnreadableBackgroundColor}
         >
           <RouteRowElement>
             {operator && operator.logo && (
@@ -440,19 +428,13 @@ class RouteRow extends PureComponent {
               aria-label={getModeFromRoute(route)}
               height={22}
               mode={getModeFromRoute(route)}
-              style={{ fill: isActive && color }}
               width={22}
             />
           </ModeIconElement>
-          <RouteNameElement
-            backgroundColor={
-              isActive ? backgroundColor : potentiallyUnreadableBackgroundColor
-            }
-            color={color}
-            title={`${route.shortName} ${longName}`}
-          >
-            <b>{route.shortName}</b> {longName}
-          </RouteNameElement>
+          <RouteName
+            operator={operator}
+            route={route}
+          />
         </RouteRowButton>
         <VelocityTransitionGroup
           enter={{ animation: 'slideDown' }}

lib/components/viewers/styled.js

@@ -1,46 +1,43 @@
 import styled from 'styled-components'
 
-/** Converts text color (either black or white) to rgb */
-const textHexToRgb = (color) => (color === '#ffffff' ? '255,255,255' : '0,0,0')
-
 /** Route Details */
 export const Container = styled.div`
-  background-color: ${(props) => props.backgroundColor};
-  color: ${(props) => props.textColor};
   overflow-y: hidden;
   height: 100%;
+  background-color: ${props => props.full ? '#ddd' : 'inherit'}
 `
+
 export const RouteNameContainer = styled.div`
   padding: 8px;
-  color: ${props => props.textColor};
+  background-color: inherit;
 `
 export const LogoLinkContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
 `
 export const MoreDetailsLink = styled.a`
-    color: ${(props) => props.color};
-    background-color: rgba(${(props) => textHexToRgb(props.color)},0.1);
+    color: #333;
+    background-color: rgba(0,0,0,0.1);
     padding: 5px;
     display: block;
     border-radius: 5px;
     transition: 0.1s all ease-in-out;
 
     &:hover {
-        background-color: rgba(255,255,255,0.8);
-        color: #333;
+        background-color: rgba(0,0,0,0.8);
+        color: #eee;
     }
 }
 `
 export const PatternContainer = styled.div`
-  background-color: ${(props) => props.routeColor};
-  color: ${(props) => props.textColor};
+  background-color: inherit;
+  color: inherit;
   display: flex;
   justify-content: flex-start;
   align-items: baseline;
   gap: 16px;
-  padding: 0 8px;
+  padding: 0 8px 8px;
   margin: 0;
 
   overflow-x: scroll;
@@ -49,19 +46,6 @@ export const PatternContainer = styled.div`
       margin-bottom: 0px;
       white-space: nowrap;
   }
-
-  button {
-      color: inherit;
-      border-bottom: 3px solid ${(props) => props.textColor};
-  }
-
-  button:hover, button:focus, button:visited {
-    text-decoration: none;
-  }
-  button:hover,  button:focus, button.active {
-      color: ${(props) => props.color};
-      background-color: ${(props) => props.textColor};
-  }
 }
 `
 
@@ -114,4 +98,9 @@ export const Stop = styled.a`
     stop's bar connects the previous bar with the current one */
     top: -37px;
   }
+
+  /* hide the first line between blobs */
+  &:first-of-type::after {
+    background: transparent;
+  }
 `

lib/util/viewer.js

@@ -288,35 +288,21 @@ function getCleanRouteLongName ({ longNameSplitter, route }) {
  */
 export function getColorAndNameFromRoute (operator, route) {
   const {defaultRouteColor, defaultRouteTextColor, longNameSplitter} = operator || {}
-  const potentiallyUnreadableBackgroundColor = `#${defaultRouteColor || route.color || 'ffffff'}`
+  const backgroundColor = `#${defaultRouteColor || route.color || 'ffffff'}`
   // NOTE: text color is not a part of short response route object, so there
   // is no way to determine from OTP what the text color should be if the
   // background color is, say, black. Instead, determine the appropriate
   // contrast color and use that if no text color is available.
-  const contrastColor = getContrastYIQ(potentiallyUnreadableBackgroundColor)
+  const contrastColor = getContrastYIQ(backgroundColor)
   const color = `#${defaultRouteTextColor || route.textColor || contrastColor}`
   // Default long name is empty string (long name is an optional GTFS value).
   const longName = getCleanRouteLongName({ longNameSplitter, route })
 
   // Choose a color that the text color will look good against
-  let backgroundColor = potentiallyUnreadableBackgroundColor
-  if (
-    !tinycolor.isReadable(
-      tinycolor(potentiallyUnreadableBackgroundColor),
-      tinycolor(color),
-      // Buses are likely to have less care put into their color selection
-      {level: route.mode === 'BUS' ? 'AAA' : 'AA'}
-    )
-  ) {
-    backgroundColor = tinycolor(potentiallyUnreadableBackgroundColor)
-      .desaturate(40)
-      .toHexString()
-  }
 
   return {
     backgroundColor,
     color,
-    longName,
-    potentiallyUnreadableBackgroundColor
+    longName
   }
 }