Moved “Change” location in to it’s own component

App/Screens/Details/Header/Header.tsx

@@ -26,7 +26,6 @@ import {
  View
 } from 'react-native';
 
-import locationIcon from '../../../../assets/images/location.png';
 import { BackButton, CurrentLocation } from '../../../components';
 import { i18n } from '../../../localization';
 import { ApiContext, CurrentLocationContext } from '../../../stores';
@@ -38,7 +37,7 @@ interface HeaderProps {
  onBackClick: (event: GestureResponderEvent) => void;
 }
 
-export function Header (props: HeaderProps) {
+export function Header(props: HeaderProps) {
  const { onBackClick } = props;
  const { api } = useContext(ApiContext);
  const { currentLocation } = useContext(CurrentLocationContext);

App/Screens/Home/Header/Header.tsx

@@ -24,9 +24,9 @@ import {
  View
 } from 'react-native';
 
-import changeLocation from '../../../../assets/images/changeLocation.png';
+
 import alert from '../../../../assets/images/alert.png';
-import { CurrentLocation } from '../../../components';
+import { ChangeLocation, CurrentLocation } from '../../../components';
 import { i18n } from '../../../localization';
 import { ApiContext, CurrentLocationContext } from '../../../stores';
 import { distanceToStation, isStationTooFar, DistanceUnit } from '../../../util/station';
@@ -36,7 +36,7 @@ interface HeaderProps {
  onChangeLocationClick: (event: GestureResponderEvent) => void;
 }
 
-export function Header (props: HeaderProps) {
+export function Header(props: HeaderProps) {
  const { api } = useContext(ApiContext)!;
  const { currentLocation, isGps } = useContext(CurrentLocationContext);
  const { onChangeLocationClick } = props;
@@ -67,9 +67,9 @@ export function Header (props: HeaderProps) {
  </View>
  </View>
 
- <TouchableOpacity onPress={onChangeLocationClick}>
- <Image source={changeLocation} />
- </TouchableOpacity>
+ <View style={styles.changeLocation}>
+ <ChangeLocation onPress={onChangeLocationClick} />
+ </View>
  </View>
  </View>
  );
@@ -79,22 +79,28 @@ const styles = StyleSheet.create({
  backButton: {
  marginBottom: theme.spacing.normal
  },
- changeLocation: {
- marginRight: theme.spacing.tiny
- },
+
  container: {
  paddingHorizontal: theme.spacing.normal,
  paddingTop: theme.spacing.normal
  },
  content: {
  alignItems: 'center',
  flexDirection: 'row',
- justifyContent: 'space-between'
+
  },
  currentLocation: {
  marginRight: theme.spacing.tiny,
- maxWidth: '75%'
+ flex: 1
  },
+
+ changeLocation: {
+ alignSelf: 'stretch',
+ alignItems: 'flex-end',
+ justifyContent: 'flex-start',
+ maxWidth: 60,
+ },
+
  distance: {
  alignItems: 'center',
  flexDirection: 'row',

App/components/ChangeLocation/ChangeLocation.tsx

@@ -0,0 +1,62 @@
+// Sh**t! I Smoke
+// Copyright (C) 2018-2019 Marcelo S. Coelho, Amaury Martiny
+
+// Sh**t! I Smoke is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Sh**t! I Smoke is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Sh**t! I Smoke. If not, see <http:https://www.gnu.org/licenses/>.
+
+import React from 'react';
+import { Image, StyleSheet, Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+import { scale } from 'react-native-size-matters';
+
+import { i18n } from '../../localization';
+import * as theme from '../../util/theme';
+
+import changeLocation from '../../../assets/images/changeLocation.png';
+
+interface ChangeLocationProps extends TouchableOpacityProps {
+
+}
+
+export function ChangeLocation(props: ChangeLocationProps) {
+ const { onPress } = props;
+
+ return (
+ <TouchableOpacity onPress={onPress}>
+ <Image style={styles.icon} source={changeLocation} />
+ <Text style={styles.label}>{i18n.t('home_header_change_location')}</Text>
+ </TouchableOpacity>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+
+ backgroundColor: 'yellow',
+ maxWidth: 60,
+
+ },
+
+ icon: {
+ alignSelf: 'center',
+ marginBottom: scale(4),
+ },
+
+ label: {
+ color: theme.primaryColor,
+ fontFamily: theme.gothamBlack,
+ fontSize: scale(7),
+ lineHeight: scale(8),
+ textAlign: 'center',
+ textTransform: 'uppercase'
+ },
+});

App/components/ChangeLocation/index.ts

@@ -0,0 +1,17 @@
+// Sh**t! I Smoke
+// Copyright (C) 2018-2019 Marcelo S. Coelho, Amaury Martiny
+
+// Sh**t! I Smoke is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Sh**t! I Smoke is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Sh**t! I Smoke. If not, see <http:https://www.gnu.org/licenses/>.
+
+export * from './ChangeLocation';

App/components/index.ts

@@ -19,6 +19,7 @@ export * from './Banner';
 export * from './BoxButton';
 export * from './Button';
 export * from './Cigarettes';
+export * from './ChangeLocation';
 export * from './CurrentLocation';
 export * from './ListItem';
 export * from './ListSeparator';

App/localization/languages/en-us.json

@@ -9,6 +9,7 @@
  "home_share_message": "Shoot! I 'smoked' {{cigarettes}} cigarettes today by breathing urban air. And you? Find out here: https://shootismoke.github.io",
  "home_header_air_quality_station_distance": "Air Quality Station: {{distanceToStation}}{{distanceUnit}} away",
  "home_header_from_search": "from search",
+ "home_header_change_location": "Change Location",
  "home_btn_why_is_station_so_far": "Why is the station so far?",
  "home_btn_see_detailed_info": "See detailed info",
  "home_btn_see_how_it_works": "See how it works",
@@ -76,4 +77,4 @@
  "about_credits_available_github": "available on Github",
  "about_language": "Language",
  "current_location_unknown_station": "Unknown AQI station"
-}
+}

App/localization/languages/en.json

@@ -9,6 +9,7 @@
  "home_share_message": "Shoot! I 'smoked' {{cigarettes}} cigarettes today by breathing urban air. And you? Find out here: https://shootismoke.github.io",
  "home_header_air_quality_station_distance": "Air Quality Station: {{distanceToStation}}{{distanceUnit}} away",
  "home_header_from_search": "from search",
+ "home_header_change_location": "Change Location",
  "home_btn_why_is_station_so_far": "Why is the station so far?",
  "home_btn_see_detailed_info": "See detailed info",
  "home_btn_see_how_it_works": "See how it works",
@@ -76,4 +77,4 @@
  "about_credits_available_github": "available on Github",
  "about_language": "Language",
  "current_location_unknown_station": "Unknown AQI station"
-}
+}

App/localization/languages/es.json

@@ -8,6 +8,7 @@
  "home_share_title": "¿Sabías que por vivir en una gran ciudad puedes estar fumando hasta 20 cigarrillos al día?",
  "home_share_message": "Rayos! 'hoy fumé'' {{cigarettes}} cigarrillos respirando aire urbano. ¿Y tú? Encuentralo aquí: https://shootismoke.github.io",
  "home_header_air_quality_station_distance": "Estación de calidad del aire: a {{distanceToStation}}{{distanceUnit}}",
+ "home_header_change_location": "Cambiar locación",
  "home_btn_why_is_station_so_far": "¿Estación retirada?",
  "home_btn_see_detailed_info": "Ver detalles",
  "home_btn_more_details": "Más detalles",
@@ -60,4 +61,4 @@
  "about_credits_source_code": "Código fuente",
  "about_credits_available_github": "disponible en Github",
  "about_language": "Idioma"
-}
+}

App/localization/languages/fr.json

@@ -1,4 +1,5 @@
 {
+ "home_header_change_location": "Changer de lieu",
  "error_screen_common_sorry": "Désolé!\n",
  "error_screen_error_cannot_load_cigarettes": "Nous n'avons pas pu\ncharger vos\ncigarettes."
-}
+}