UI Tweaks (#34)

* center map around park instead of user * ui tweaks * make drawer draggy
sidewalklabs · Aug 27, 2018 · b117932 · b117932
1 parent ee8fac8
commit b117932
Show file tree

Hide file tree

Showing 8 changed files with 260 additions and 219 deletions.
diff --git a/expo_project/components/ColoredButton.js b/expo_project/components/ColoredButton.js
@@ -5,10 +5,10 @@ import { StyleSheet, Text, TouchableOpacity } from "react-native";
 
 class ColoredButton extends React.Component {
   render() {
-    const { backgroundColor, color, onPress, label } = this.props;
+    const { style, backgroundColor, color, onPress, label } = this.props;
     return (
       <TouchableOpacity
-        style={[styles.button, { backgroundColor }]}
+        style={[styles.button, { ...style, backgroundColor }]}
         onPress={onPress}
       >
         <Text style={[styles.text, { color }]}>{label}</Text>
@@ -19,7 +19,6 @@ class ColoredButton extends React.Component {
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: "#5B93D9",
     padding: 12,
     marginVertical: 20,
     justifyContent: "center",
@@ -29,7 +28,15 @@ const styles = StyleSheet.create({
 });
 
 ColoredButton.propTypes = {
-  color: PropTypes.string.isRequired
+  style: PropTypes.object,
+  color: PropTypes.string,
+  backgroundColor: PropTypes.string
+};
+
+ColoredButton.defaultProps = {
+  style: {},
+  backgroundColor: "blue",
+  color: "#5B93D9"
 };
 
 export default ColoredButton;
diff --git a/expo_project/components/MapWithMarkers.js b/expo_project/components/MapWithMarkers.js
@@ -1,44 +1,42 @@
 import PropTypes from "prop-types";
 import React from "react";
-import { StyleSheet } from "react-native";
+import { Platform, StyleSheet } from "react-native";
 import { MapView } from "expo";
 import PersonIcon from "./PersonIcon";
-import { Location, Permissions } from "expo";
+// import { Location, Permissions } from "expo";
 
 import MapConfig from "../constants/Map";
 
 class MapWithMarkers extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      initialRegion: null
-    };
+    this.state = { region: MapConfig.defaultRegion };
   }
 
-  componentDidMount() {
-    this._getLocationAsync();
-  }
+  // componentDidMount() {
+  //   this._getLocationAsync();
+  // }
 
-  _getLocationAsync = async () => {
-    let region = MapConfig.defaultRegion;
-    // react native maps (the belly of expo's MapView ) requests location permissions for us
-    // so here we are only retrieving permission, not asking for it
-    const { status } = await Permissions.getAsync(Permissions.LOCATION);
-    if (status === "granted") {
-      const location = await Location.getCurrentPositionAsync({
-        enableHighAccuracy: true
-      });
-      const { latitude, longitude } = location.coords;
-      region = {
-        latitude,
-        longitude,
-        latitudeDelta: 0.0043,
-        longitudeDelta: 0.0034
-      };
-    }
-    this.setState({ region });
-  };
+  // _getLocationAsync = async () => {
+  //   let region = MapConfig.defaultRegion;
+  //   // react native maps (the belly of expo's MapView ) requests location permissions for us
+  //   // so here we are only retrieving permission, not asking for it
+  //   const { status } = await Permissions.askAsync(Permissions.LOCATION);
+  //   if (status === "granted") {
+  //     const location = await Location.getCurrentPositionAsync({
+  //       enableHighAccuracy: true
+  //     });
+  //     const { latitude, longitude } = location.coords;
+  //     region = {
+  //       latitude,
+  //       longitude,
+  //       latitudeDelta: 0.0043,
+  //       longitudeDelta: 0.0034
+  //     };
+  //   }
+  //   this.setState({ region });
+  // };
 
   render() {
     const {
@@ -58,14 +56,11 @@ class MapWithMarkers extends React.Component {
         showsUserLocation
         scrollEnabled
         zoomEnabled
-        rotateEnabled
-        showsCompass
         pitchEnabled={false}
       >
         {markers.map(marker => {
           const selected = marker.id === activeMarkerId;
-          // Update the key when selected or delected, so the marker re renders and centers itself based on the new child size
-          const key = marker.id + (selected ? "-selected" : "");
+          const key = marker.id;
           return (
             <MapView.Marker
               coordinate={marker.coordinate}
@@ -92,7 +87,20 @@ class MapWithMarkers extends React.Component {
 }
 
 const styles = StyleSheet.create({
-  mapStyle: { flex: 1 }
+  mapStyle: {
+    ...Platform.select({
+      ios: {
+        flex: 1
+      },
+      android: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      }
+    })
+  }
 });
 
 MapWithMarkers.propTypes = {

diff --git a/expo_project/components/Selectable.js b/expo_project/components/Selectable.js
@@ -30,18 +30,32 @@ class Selectable extends React.Component {
   }
 
   render() {
-    const { onSelectablePress, selectedValue, title, options } = this.props;
+    const {
+      onSelectablePress,
+      selectedValue,
+      selectedColor,
+      title,
+      options
+    } = this.props;
     return (
       <View style={styles.container} onLayout={this.onLayout}>
         <Text style={styles.title}>{title}</Text>
-        <ScrollView style={styles.selectable} horizontal>
-          {_.map(options, option => {
+        <ScrollView
+          style={styles.selectable}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+        >
+          {_.map(options, (option, index) => {
             const { value, label } = option;
             const selected = value === selectedValue;
             return (
               <TouchableOpacity
                 key={value}
-                style={[styles.selectableCell, selected && styles.selected]}
+                style={[
+                  styles.selectableCell,
+                  index === 0 && styles.firstCell,
+                  selected && { backgroundColor: selectedColor }
+                ]}
                 onPress={e => {
                   onSelectablePress(value, this.state.height);
                 }}
@@ -74,20 +88,22 @@ const styles = StyleSheet.create({
     marginRight: 5,
     marginTop: 10
   },
-  selected: {
-    backgroundColor: colors.colorSecondary
+  firstCell: {
+    marginLeft: 20
   },
   pillText: {
     fontFamily: "monaco"
   },
   title: {
-    marginBottom: 5
+    marginBottom: 5,
+    paddingHorizontal: 20
   }
 });
 
 Selectable.propTypes = {
   onSelectablePress: PropTypes.func.isRequired,
   selectedValue: PropTypes.string,
+  selectedColor: PropTypes.string,
   title: PropTypes.string.isRequired,
   options: PropTypes.arrayOf(
     PropTypes.shape({
@@ -97,4 +113,8 @@ Selectable.propTypes = {
   ).isRequired
 };
 
+Selectable.defaultProps = {
+  selectedColor: colors.colorSecondary
+};
+
 export default Selectable;
diff --git a/expo_project/components/Survey.js b/expo_project/components/Survey.js
@@ -24,6 +24,7 @@ class Survey extends React.Component {
                 onSelect(activeMarker.id, questionKey, value, selectableHeight)
               }
               selectedValue={activeMarker[questionKey]}
+              selectedColor={activeMarker.color}
               title={questionLabel}
               options={options}
             />
@@ -35,7 +36,7 @@ class Survey extends React.Component {
 }
 
 const styles = StyleSheet.create({
-  titleContainer: { paddingVertical: 10 },
+  titleContainer: { paddingVertical: 10, paddingHorizontal: 20 },
   title: { fontWeight: "bold" }
 });
 

diff --git a/expo_project/config/questions.js b/expo_project/config/questions.js
@@ -30,9 +30,9 @@ export default [
     questionKey: "groupSize",
     questionLabel: "Group Size",
     options: [
-      { value: "alone", label: "1" },
-      { value: "pair", label: "2" },
-      { value: "group", label: "3+" }
+      { value: "pair", label: "pair" },
+      { value: "group", label: "group" },
+      { value: "crowd", label: "crowd" }
     ]
   },
   {
@@ -67,47 +67,5 @@ export default [
       { value: "pushcart", label: "Push Cart" },
       { value: "stroller", label: "Stroller" }
     ]
-  },
-  {
-    questionKey: "blahgender",
-    questionLabel: "Fake Question (for demo purposes)",
-    options: [
-      { value: "male", label: "1" },
-      { value: "female", label: "2" },
-      { value: "unknown", label: "3" }
-    ]
-  },
-  {
-    questionKey: "genderblah",
-    questionLabel: "Fake Question (for demo purposes)",
-    options: [
-      { value: "male", label: "4" },
-      { value: "female", label: "5" },
-      { value: "unknown", label: "6" },
-      { value: "male1", label: "7" },
-      { value: "female2", label: "8" },
-      { value: "unknown3", label: "9" },
-      { value: "male4", label: "10" },
-      { value: "female5", label: "11" },
-      { value: "unknown6", label: "12" }
-    ]
-  },
-  {
-    questionKey: "adfsasdfgender",
-    questionLabel: "Fake Question (for demo purposes)",
-    options: [
-      { value: "male", label: "fakefakeffake" },
-      { value: "female", label: "reallylongword" },
-      { value: "unknown", label: "thisshouldmakeyouscroll" }
-    ]
-  },
-  {
-    questionKey: "genafdsafdsder",
-    questionLabel: "Fake Question (for demo purposes)",
-    options: [
-      { value: "male", label: "100" },
-      { value: "female", label: "99" },
-      { value: "unknown", label: "98" }
-    ]
   }
 ];
diff --git a/expo_project/constants/Layout.js b/expo_project/constants/Layout.js
@@ -1,12 +1,20 @@
-import { Dimensions } from 'react-native';
+import { Dimensions } from "react-native";
+import { Header } from "react-navigation";
 
-const width = Dimensions.get('window').width;
-const height = Dimensions.get('window').height;
+const width = Dimensions.get("window").width;
+const height = Dimensions.get("window").height;
 
 export default {
   window: {
     width,
-    height,
+    height
   },
-  isSmallDevice: width < 375,
+  header: {
+    height: Header.HEIGHT
+  },
+  drawer: {
+    height: height - Header.HEIGHT,
+    width
+  },
+  isSmallDevice: width < 375
 };
diff --git a/expo_project/constants/Map.js b/expo_project/constants/Map.js
@@ -1,8 +1,8 @@
 export default {
   defaultRegion: {
-    latitude: 0,
-    longitude: 0,
-    latitudeDelta: 0,
-    longitudeDelta: 0
+    latitude: 43.703805,
+    longitude: -79.343568,
+    latitudeDelta: 0.0043,
+    longitudeDelta: 0.0034
   }
 };