First iteration of the POI view (#297)

mozilla-magnet · Nov 7, 2016 · 1a86f93 · 1a86f93
1 parent 5ac4990
commit 1a86f93
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 42 deletions.
diff --git a/config.js b/config.js
@@ -1,7 +1,7 @@
 module.exports = {
   'flags': {
     'injectTestUrls': false,
-    'itemsExpandable': false,
+    'itemsExpandable': true,
     'itemsSwipable': false,
   },
 

diff --git a/lib/images/item-scene-room.png b/lib/images/item-scene-room.png
diff --git a/lib/views/item-scene.js b/lib/views/item-scene.js
@@ -9,12 +9,13 @@ const ReactNative = require('react-native');
 const tinycolor = require('tinycolor2');
 const React = require('react');
 
-var {
+const {
   TouchableOpacity,
   StyleSheet,
   View,
   Text,
   Image,
+  Linking,
 } = ReactNative;
 
 class ItemScene extends React.Component {
@@ -30,41 +31,22 @@ class ItemScene extends React.Component {
     return (
       <View style={styles.root}>
         {this.renderMedia(metadata)}
+        {this.renderUrlBar(metadata)}
         {this.renderText(metadata)}
         {this.renderHeader()}
       </View>
     );
   }
 
-  renderHeader() {
-    return (
-      <View style={styles.header}>
-        <TouchableOpacity
-        testId="close-button"
-        style={styles.close}
-        onPress={this.onClosePress.bind(this)}>
-          <Image
-            style={styles.closeImage}
-            source={require('../images/item-scene-close.png')}/>
-        </TouchableOpacity>
-      </View>
-    );
-  }
-
-  renderMedia({ embed, image, title, themeColor }) {
-    debug('render media', embed, image, title, themeColor);
-    if (embed) return this.renderMediaEmbed(embed);
-    else if (image) return this.renderMediaImage(image);
+  renderMedia({ image, title, themeColor }) {
+    debug('render media', image, title, themeColor);
+    if (image) return this.renderMediaImage(image);
     else return this.renderMediaFallback(title, themeColor);
   }
 
-  renderMediaEmbed() {
-    return <Text>[EMBED]</Text>;
-  }
-
   renderMediaImage(image) {
     return (
-      <View style={[styles.mediaImage]}>
+      <View style={styles.mediaImage}>
         <Image
           style={styles.mediaImageNode}
           resizeMode="cover"
@@ -74,8 +56,8 @@ class ItemScene extends React.Component {
   }
 
   renderMediaFallback(title, themeColor = theme.colorPrimary) {
-    var backgroundColor = tinycolor(themeColor).setAlpha(0.8);
-    var color = 'rgba(255,255,255,0.5)';
+    const backgroundColor = tinycolor(themeColor).setAlpha(0.8);
+    const color = 'rgba(255,255,255,0.5)';
 
     return (
       <View style={[styles.mediaFallback, { backgroundColor }]}>
@@ -84,13 +66,61 @@ class ItemScene extends React.Component {
     );
   }
 
-  renderText({ title, description, unadaptedUrl, distance }) {
+  renderUrlBar({ url }) {
+    return (
+      <View style={styles.urlBar}>
+        <Text style={styles.url}>{url}</Text>
+      </View>
+    );
+  }
+
+  renderText({ title, description, url, siteName = 'website' }) {
     return (
       <View style={styles.text}>
         <View><Text style={styles.title}>{title}</Text></View>
-        <View><Text style={styles.url}>{unadaptedUrl}</Text></View>
         <View><Text style={styles.description}>{description}</Text></View>
-        <View><Text>{distance}</Text></View>
+        <View>
+          <Text
+            style={styles.visitButton}
+            onPress={this.onVisitWebsite.bind(this, url)}>Visit {siteName}</Text>
+        </View>
+      </View>
+    );
+  }
+
+  onVisitWebsite(url) {
+    Linking.openURL(url);
+  }
+
+  renderDistance(distance = 0) {
+    distance = Math.round(distance);
+    let label = `${distance} metres away`;
+
+    if (distance === 1) {
+      label = '1 metre away';
+    }
+
+    return (
+      <View style={styles.distance}>
+        <Image
+          style={styles.distanceImage}
+          source={require('../images/item-scene-room.png')}/>
+        <Text>{label}</Text>
+      </View>
+    );
+  }
+
+  renderHeader() {
+    return (
+      <View style={styles.header}>
+        <TouchableOpacity
+          testId="close-button"
+          style={styles.close}
+          onPress={this.onClosePress.bind(this)}>
+          <Image
+            style={styles.closeImage}
+            source={require('../images/item-scene-close.png')}/>
+        </TouchableOpacity>
       </View>
     );
   }
@@ -111,6 +141,8 @@ ItemScene.propTypes = {
 
 module.exports = ItemScene;
 
+const VERTICAL_MARGIN = 20;
+
 const styles = StyleSheet.create({
   root: {
     position: 'relative',
@@ -133,14 +165,16 @@ const styles = StyleSheet.create({
     height: 20,
   },
 
-  media: {},
+  mediaImage: {
+    height: 220,
+  },
 
   mediaImageNode: {
     height: 220,
   },
 
   mediaFallback: {
-    height: 200,
+    height: 220,
     overflow: 'hidden',
     paddingLeft: 16,
   },
@@ -152,30 +186,57 @@ const styles = StyleSheet.create({
     marginTop: -40,
   },
 
-  text: {
-    padding: 16,
+  urlBar: {
+    paddingHorizontal: 16,
+    paddingTop: -5 + VERTICAL_MARGIN,
     borderTopColor: '#EEE',
     borderTopWidth: 1,
   },
 
+  url: {
+    color: '#999',
+    fontFamily: 'FiraSans-LightItalic',
+    fontSize: 14,
+  },
+
+  text: {
+    marginTop: -13 + VERTICAL_MARGIN,
+    paddingHorizontal: 16,
+  },
+
   title: {
     fontSize: 31,
     fontFamily: 'FiraSans-LightItalic',
     color: '#4D4D4D',
   },
 
-  url: {
-    marginTop: 13,
-    marginBottom: 17,
-    color: '#BBB',
-    fontFamily: 'FiraSans-LightItalic',
-    fontSize: 14,
+  description: {
+    marginTop: -13 + VERTICAL_MARGIN,
+    fontSize: 15,
+    lineHeight: 24,
+    fontFamily: 'FiraSans-Book',
+    color: '#999',
   },
 
-  description: {
+  visitButton: {
+    marginTop: -3 + VERTICAL_MARGIN,
+    padding: 10,
     fontSize: 15,
     lineHeight: 24,
+    textAlign: 'center',
     fontFamily: 'FiraSans-Book',
     color: '#999',
+    backgroundColor: 'lightgrey',
+  },
+
+  distance: {
+    flexDirection: 'row',
+    marginHorizontal: 10,
+  },
+
+  distanceImage: {
+    width: 20,
+    height: 20,
+    marginRight: 5,
   },
 });