Browse Source

Refactoring to stylesheet and some font adjustments

master
GabrielTrettel 4 years ago
parent
commit
7f149663de
  1. 113
      src/app/screens/RainSharingDataScreen.js
  2. 82
      src/app/screens/SharingDataScreen.js
  3. 21
      src/app/screens/SharingFloodZonesScreen.js

113
src/app/screens/RainSharingDataScreen.js

@ -12,34 +12,9 @@ import CategoryPickerItem from "../components/CategoryPickerItem";
import Screen from "../components/Screen";
import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation";
import { Image, Text, TouchableOpacity } from 'react-native';
import { Image, Text, TouchableOpacity } from "react-native";
import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
//1/3
const styles = StyleSheet.create({
container: {
paddingTop: 50,
},
img_block: {
height: 120,
padding: 10,
borderRadius: 5,
borderStyle: "dotted",
borderColor: colors.primary,
justifyContent: "center",
alignItems: "center",
},
floodingLogo: {
width: 85,
height: 85,
marginTop: 30,
borderRadius: 5,
borderColor: colors.primary,
justifyContent: "center",
alignItems: "center",
},
})
const validationSchema = Yup.object().shape({
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@ -48,6 +23,8 @@ const validationSchema = Yup.object().shape({
.required("Por favor, forneça uma descrição"),
});
const borderWidth = 4;
function RainSharingDataScreen() {
const [passable, setPassable] = useState(0);
@ -65,80 +42,130 @@ function RainSharingDataScreen() {
validationSchema={validationSchema}
>
<View>
<Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray' }}>
{/* <Text
style={{
fontSize: 25,
textAlign: "center",
backgroundColor: "lightgray",
}}
>
Enviar uma informação
</Text>
</Text> */}
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setPassable(0)}>
<View borderWidth={passable == 0 ? 5 : 0} style={{ alignItems: 'center' }}>
<View
borderWidth={passable == 0 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/sem_chuva.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Sem chuva</Text>
<Text style={styles.text}>Sem chuva</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(1)}>
<View borderWidth={passable == 1 ? 5 : 0} style={{ alignItems: 'center' }}>
<View
borderWidth={passable == 1 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva fraca</Text>
<Text style={styles.text}>Chuva fraca</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(2)}>
<View borderWidth={passable == 2 ? 5 : 0} style={{ alignItems: 'center' }}>
<View
borderWidth={passable == 2 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva{"\n"}moderada</Text>
<Text style={styles.text}>Chuva{"\n"}moderada</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setPassable(3)}>
<View borderWidth={passable == 3 ? 5 : 0} style={{ alignItems: 'center' }}>
<View
borderWidth={passable == 3 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_forte.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva forte</Text>
<Text style={styles.text}>Chuva forte</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(4)}>
<View borderWidth={passable == 4 ? 5 : 0} style={{ alignItems: 'center' }}>
<View
borderWidth={passable == 4 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_muito_forte.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva muito{"\n"}forte</Text>
<Text style={styles.text}>Chuva muito{"\n"}forte</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(5)}>
<View borderWidth={passable == 5 ? 5 : 0} style={{ alignContent: 'center' }}>
<View
borderWidth={passable == 5 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_pancadas.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Pancada de{"\n"}chuva</Text>
<Text style={styles.text}>Pancada de{"\n"}chuva</Text>
</View>
</TouchableNativeFeedback>
</View>
</View>
<FormImagePicker backgroundColor="#1976D2" name="images" />
<Button title="Enviar" backgroundColor="red" width="20" />
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form>
</Screen>
);
}
const styles = StyleSheet.create({
container: {
padding: 10,
},
img_block: {
borderRadius: 5,
padding: 10,
borderStyle: "dotted",
borderColor: colors.primary,
alignItems: "center",
},
floodingLogo: {
width: 85,
height: 85,
},
text: {
fontSize: 14,
textAlign: "center",
marginTop: 10,
},
});
export default RainSharingDataScreen;

82
src/app/screens/SharingDataScreen.js

@ -1,73 +1,90 @@
import React from "react";
import { StyleSheet, View } from "react-native";
import { Image, Text, TouchableOpacity } from 'react-native';
import { Image, Text, TouchableOpacity } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import RainSharingDataScreen from '../screens/RainSharingDataScreen';
import RainSharingDataScreen from "../screens/RainSharingDataScreen";
import SharingFloodZonesScreen from "./SharingFloodZonesScreen";
//1/3
const styles = StyleSheet.create({
container: {
},
rainLogo: {
width: 110,
height: 100,
margin: 30,
},
floodingLogo: {
width: 85,
height: 85,
marginTop: 70,
},
})
function SharingDataScreen({ navigation }) {
return (
<View style={styles.container}>
<Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray', marginTop: 10 }}>
<Text
style={{
fontSize: 25,
textAlign: "center",
backgroundColor: "lightgray",
marginTop: 10,
}}
>
Enviar uma informação
</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<TouchableOpacity style={{ alignItems: 'center' }} onPress={()=> navigation.navigate('FloodSharingData')}>
</Text>
<View style={{ flexDirection: "row", justifyContent: "space-around" }}>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() => navigation.navigate("FloodSharingData")}
>
<Image
style={styles.floodingLogo}
source={require("../assets/pontos_alagamento_peq.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Pontos de {"\n"}alagamento</Text>
<Text style={styles.text}>Pontos de {"\n"}alagamento</Text>
</TouchableOpacity>
<TouchableOpacity style={{ alignItems: 'center' }} onPress={() => navigation.navigate('RainSharingData')}>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() => navigation.navigate("RainSharingData")}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva</Text>
<Text style={styles.text}>Chuva</Text>
</TouchableOpacity>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<TouchableOpacity style={{ alignItems: 'center' }}>
<View style={{ flexDirection: "row", justifyContent: "space-around" }}>
<TouchableOpacity style={{ alignItems: "center" }}>
<Image
style={styles.floodingLogo}
source={require("../assets/diario_pluviometrico.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Diário do{"\n"}pluviômetro</Text>
<Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
</TouchableOpacity>
<TouchableOpacity style={{ alignItems: 'center' }}>
<TouchableOpacity style={{ alignItems: "center" }}>
<Image
style={styles.floodingLogo}
source={require("../assets/nivel_rio.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Nível de água {"\n"}no rio</Text>
<Text style={styles.text}>Nível de água {"\n"}no rio</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
text: {
fontSize: 14,
textAlign: "center",
marginTop: 10,
},
rainLogo: {
width: 110,
height: 100,
margin: 30,
},
floodingLogo: {
width: 85,
height: 85,
marginTop: 70,
},
});
const Stack = createStackNavigator();
function RainSharingDataNavigator() {
@ -75,7 +92,10 @@ function RainSharingDataNavigator() {
<Stack.Navigator initialRouteName="SharingData">
<Stack.Screen name="SharingData" component={SharingDataScreen} />
<Stack.Screen name="RainSharingData" component={RainSharingDataScreen} />
<Stack.Screen name="FloodSharingData" component={SharingFloodZonesScreen} />
<Stack.Screen
name="FloodSharingData"
component={SharingFloodZonesScreen}
/>
</Stack.Navigator>
);
}

21
src/app/screens/SharingFloodZonesScreen.js

@ -24,6 +24,7 @@ const validationSchema = Yup.object().shape({
});
const screen_width = Dimensions.get("window").width;
const borderWidth = 3;
function SharingFloodZonesScreen() {
const [passable, setPassable] = useState(0);
@ -41,22 +42,28 @@ function SharingFloodZonesScreen() {
>
<View style={styles.imgs_container}>
<TouchableNativeFeedback onPress={() => setPassable(1)}>
<View style={styles.img_block} borderWidth={passable == 1 ? 1 : 0}>
<View
style={styles.img_block}
borderWidth={passable == 1 ? borderWidth : 0}
>
<Image
style={styles.image}
source={require("../assets/floodZonesAssets/passable_icon.png")}
/>
<Text>Transitável</Text>
<Text style={styles.text}>Transitável</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(0)}>
<View style={styles.img_block} borderWidth={passable == 0 ? 1 : 0}>
<View
style={styles.img_block}
borderWidth={passable == 0 ? borderWidth : 0}
>
<Image
style={styles.image}
source={require("../assets/floodZonesAssets/not_passable_icon.png")}
/>
<Text>Intransitável</Text>
<Text style={styles.text}>Intransitável</Text>
</View>
</TouchableNativeFeedback>
</View>
@ -70,7 +77,7 @@ function SharingFloodZonesScreen() {
numberOfLines={3}
placeholder="Descrição"
/>
<SubmitButton title="Enviar" backgroundColor={colors.background} />
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form>
</Screen>
);
@ -107,6 +114,10 @@ const styles = StyleSheet.create({
flexDirection: "row",
justifyContent: "center",
},
text: {
fontSize: 14,
},
});
export default SharingFloodZonesScreen;
Loading…
Cancel
Save