diff --git a/config.js b/config.js index 26513ee1..6b490b06 100644 --- 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 new file mode 100644 index 00000000..df1f3406 Binary files /dev/null and b/lib/images/item-scene-room.png differ diff --git a/lib/views/item-scene.js b/lib/views/item-scene.js index f399b800..d45f1a1f 100644 --- 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 ( {this.renderMedia(metadata)} + {this.renderUrlBar(metadata)} {this.renderText(metadata)} {this.renderHeader()} ); } - renderHeader() { - return ( - - - - - - ); - } - - 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 [EMBED]; - } - renderMediaImage(image) { return ( - + @@ -84,13 +66,61 @@ class ItemScene extends React.Component { ); } - renderText({ title, description, unadaptedUrl, distance }) { + renderUrlBar({ url }) { + return ( + + {url} + + ); + } + + renderText({ title, description, url, siteName = 'website' }) { return ( {title} - {unadaptedUrl} {description} - {distance} + + Visit {siteName} + + + ); + } + + 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 ( + + + {label} + + ); + } + + renderHeader() { + return ( + + + + ); } @@ -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, }, });