gabriellopes320
/
WPD-MobileApp
forked from cemaden-educacao/WPD-MobileApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Refactoring to stylesheet and some font adjustments

master
GabrielTrettel 4 years ago
parent
cd99b4b0f0
commit
7f149663de
3 changed files with 138 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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;
Write Preview
Loading…
Cancel
Save