Fix Icon Support

dymajo · Sep 2, 2019 · 8f737e2 · 8f737e2
1 parent 88c20a9
commit 8f737e2
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 26 deletions.
diff --git a/js/views/lines/LineList.jsx b/js/views/lines/LineList.jsx
@@ -18,12 +18,9 @@ class LineList extends React.Component {
     loading: true,
     meta: {},
     error: null,
-    lines: undefined,
     groups: [],
-    colors: {},
     icons: {},
     groupShow: {},
-    friendlyNames: {},
   }
 
   componentDidMount() {
@@ -66,26 +63,12 @@ class LineList extends React.Component {
       data.groups.forEach(group => {
         groupShow[group.name] = ''
       })
-      const {
-        meta,
-        lines,
-        colors,
-        icons,
-        groups,
-        operators,
-        friendlyNames,
-        friendlyNumbers,
-      } = data
+      const { meta, icons, groups } = data
 
       this.setState({
         meta,
-        lines,
-        colors,
         icons,
         groups,
-        operators,
-        friendlyNames,
-        friendlyNumbers,
         groupShow,
         loading: false,
       })
@@ -149,7 +132,8 @@ class LineList extends React.Component {
                   >
                     <Text style={styles.label}>{item.routeLongName}</Text>
                     <View>
-                      {icons[item] === undefined ? (
+                      {icons[`${item.agencyId}/${item.routeShortName}`] ===
+                      undefined ? (
                         <Text
                           style={[
                             styles.pill,
@@ -164,7 +148,9 @@ class LineList extends React.Component {
                         <img
                           alt={item.routeLongName}
                           style={{ maxHeight: '28px', width: 'auto' }}
-                          src={`/route_icons/${icons[item]}-color.svg`}
+                          src={`/route_icons/${
+                            icons[`${item.agencyId}/${item.routeShortName}`]
+                          }-color.svg`}
                         />
                       )}
                     </View>

diff --git a/js/views/station/Station.jsx b/js/views/station/Station.jsx
@@ -350,7 +350,6 @@ class Station extends React.Component {
     name = name.replace(' Train Station', '')
     name = name.replace(' Ferry Terminal', '')
     name = name.replace('- Cable Car Station', '')
-    name = name.replace(' Station', '')
     return name
   }
 
@@ -421,11 +420,13 @@ class Station extends React.Component {
               route_color: routeColor,
               route_id: routeId,
               route_text_color: routeTextColor,
+              route_icon: routeIcon,
             } = item[0]
             return (
               <TripItem
                 key={tripId}
                 routeShortName={routeShortName}
+                routeIcon={routeIcon}
                 direction={directionId}
                 color={routeColor}
                 textColor={routeTextColor}

diff --git a/js/views/station/TripItemV2.jsx b/js/views/station/TripItemV2.jsx
@@ -67,6 +67,7 @@ const getNextText = (times, hideVerb = false, amphersand = 'also') => {
 
 export const TripItem = ({
   routeShortName,
+  routeIcon,
   color = headerColor,
   textColor = '#fff',
   direction,
@@ -92,9 +93,19 @@ export const TripItem = ({
     <TouchableOpacity activeOpacity={0.85} onClick={onClick}>
       <View style={[styles.wrapper, { backgroundColor: color }]}>
         <View style={styles.left}>
-          <Text style={[styles.routeShortName, textColorStyles]}>
-            {routeShortName}
-          </Text>
+          {routeIcon ? (
+            <View style={styles.routeIcon}>
+              <img
+                alt={routeShortName}
+                style={{ maxHeight: '28px', width: 'auto' }}
+                src={`/route_icons/${routeIcon}-mono.svg`}
+              />
+            </View>
+          ) : (
+            <Text style={[styles.routeShortName, textColorStyles]}>
+              {routeShortName}
+            </Text>
+          )}
           <View style={styles.destinations}>
             <View
               style={
@@ -201,9 +212,14 @@ styles = StyleSheet.create({
   },
   right: {
     paddingRight: padding * 0.75,
-    display: 'block',
-    textAlign: 'right',
+    display: 'flex',
     backgroundRepeat: 'no-repeat',
+    alignItems: 'flex-end',
+  },
+  routeIcon: {
+    alignItems: 'start',
+    paddingTop: 5,
+    paddingBottom: 3,
   },
   routeShortName: {
     fontSize: 28,
@@ -234,6 +250,7 @@ styles = StyleSheet.create({
     paddingTop: 2,
     paddingRight: 1,
     fontFamily,
+    textAlign: 'right',
   },
   departureTimeText: {
     lineHeight: 30,
@@ -262,12 +279,14 @@ styles = StyleSheet.create({
     letterSpacing: 0.5,
     color: '#fff',
     fontFamily,
+    textAlign: 'right',
   },
   strong: {
     fontWeight: 'bold',
   },
   and: {
     fontFamily,
     fontSize: 13,
+    textAlign: 'right',
   },
 })
diff --git a/scss/_leaflet.scss b/scss/_leaflet.scss
@@ -643,3 +643,7 @@
     }
   }
 }
+
+.leaflet-marker-icon {
+  color: transparent;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -643,3 +643,7 @@ @@
         }
       }
     }
+    .leaflet-marker-icon {
+      color: transparent;
+    }