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. 84
      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 Screen from "../components/Screen";
import FormImagePicker from "../components/forms/FormImagePicker"; import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation"; 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 colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler"; 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({ const validationSchema = Yup.object().shape({
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"), 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"), .required("Por favor, forneça uma descrição"),
}); });
const borderWidth = 4;
function RainSharingDataScreen() { function RainSharingDataScreen() {
const [passable, setPassable] = useState(0); const [passable, setPassable] = useState(0);
@ -65,80 +42,130 @@ function RainSharingDataScreen() {
validationSchema={validationSchema} validationSchema={validationSchema}
> >
<View> <View>
<Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray' }}>
{/* <Text
style={{
fontSize: 25,
textAlign: "center",
backgroundColor: "lightgray",
}}
>
Enviar uma informação Enviar uma informação
</Text>
</Text> */}
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setPassable(0)}> <TouchableNativeFeedback onPress={() => setPassable(0)}>
<View borderWidth={passable == 0 ? 5 : 0} style={{ alignItems: 'center' }}>
<View
borderWidth={passable == 0 ? borderWidth : 0}
style={styles.img_block}
>
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/sem_chuva.png")} 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> </View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(1)}> <TouchableNativeFeedback onPress={() => setPassable(1)}>
<View borderWidth={passable == 1 ? 5 : 0} style={{ alignItems: 'center' }}>
<View
borderWidth={passable == 1 ? borderWidth : 0}
style={styles.img_block}
>
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")} 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> </View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(2)}> <TouchableNativeFeedback onPress={() => setPassable(2)}>
<View borderWidth={passable == 2 ? 5 : 0} style={{ alignItems: 'center' }}>
<View
borderWidth={passable == 2 ? borderWidth : 0}
style={styles.img_block}
>
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")} 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> </View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setPassable(3)}> <TouchableNativeFeedback onPress={() => setPassable(3)}>
<View borderWidth={passable == 3 ? 5 : 0} style={{ alignItems: 'center' }}>
<View
borderWidth={passable == 3 ? borderWidth : 0}
style={styles.img_block}
>
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/chuva_forte.png")} 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> </View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(4)}> <TouchableNativeFeedback onPress={() => setPassable(4)}>
<View borderWidth={passable == 4 ? 5 : 0} style={{ alignItems: 'center' }}>
<View
borderWidth={passable == 4 ? borderWidth : 0}
style={styles.img_block}
>
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/chuva_muito_forte.png")} 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> </View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setPassable(5)}> <TouchableNativeFeedback onPress={() => setPassable(5)}>
<View borderWidth={passable == 5 ? 5 : 0} style={{ alignContent: 'center' }}>
<View
borderWidth={passable == 5 ? borderWidth : 0}
style={styles.img_block}
>
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/chuva_pancadas.png")} 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> </View>
</TouchableNativeFeedback> </TouchableNativeFeedback>
</View> </View>
</View> </View>
<FormImagePicker backgroundColor="#1976D2" name="images" /> <FormImagePicker backgroundColor="#1976D2" name="images" />
<Button title="Enviar" backgroundColor="red" width="20" />
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form> </Form>
</Screen> </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; export default RainSharingDataScreen;

84
src/app/screens/SharingDataScreen.js

@ -1,73 +1,90 @@
import React from "react"; import React from "react";
import { StyleSheet, View } from "react-native"; 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 { createStackNavigator } from "@react-navigation/stack";
import RainSharingDataScreen from '../screens/RainSharingDataScreen';
import RainSharingDataScreen from "../screens/RainSharingDataScreen";
import SharingFloodZonesScreen from "./SharingFloodZonesScreen"; import SharingFloodZonesScreen from "./SharingFloodZonesScreen";
//1/3 //1/3
const styles = StyleSheet.create({
container: {
},
rainLogo: {
width: 110,
height: 100,
margin: 30,
},
floodingLogo: {
width: 85,
height: 85,
marginTop: 70,
},
})
function SharingDataScreen({ navigation }) { function SharingDataScreen({ navigation }) {
return ( return (
<View style={styles.container}> <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 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 <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/pontos_alagamento_peq.png")} 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>
<TouchableOpacity style={{ alignItems: 'center' }} onPress={() => navigation.navigate('RainSharingData')}>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() => navigation.navigate("RainSharingData")}
>
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")} source={require("../assets/chuva_peq.png")}
/> />
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva</Text>
<Text style={styles.text}>Chuva</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<TouchableOpacity style={{ alignItems: 'center' }}>
<View style={{ flexDirection: "row", justifyContent: "space-around" }}>
<TouchableOpacity style={{ alignItems: "center" }}>
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/diario_pluviometrico.png")} 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>
<TouchableOpacity style={{ alignItems: 'center' }}>
<TouchableOpacity style={{ alignItems: "center" }}>
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/nivel_rio.png")} 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> </TouchableOpacity>
</View> </View>
</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(); const Stack = createStackNavigator();
function RainSharingDataNavigator() { function RainSharingDataNavigator() {
@ -75,9 +92,12 @@ function RainSharingDataNavigator() {
<Stack.Navigator initialRouteName="SharingData"> <Stack.Navigator initialRouteName="SharingData">
<Stack.Screen name="SharingData" component={SharingDataScreen} /> <Stack.Screen name="SharingData" component={SharingDataScreen} />
<Stack.Screen name="RainSharingData" component={RainSharingDataScreen} /> <Stack.Screen name="RainSharingData" component={RainSharingDataScreen} />
<Stack.Screen name="FloodSharingData" component={SharingFloodZonesScreen} />
<Stack.Screen
name="FloodSharingData"
component={SharingFloodZonesScreen}
/>
</Stack.Navigator> </Stack.Navigator>
); );
} }
export default RainSharingDataNavigator;
export default RainSharingDataNavigator;

21
src/app/screens/SharingFloodZonesScreen.js

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