cemaden-educacao
/
WPD-MobileApp
2
1
Fork 1
Code Issues 2 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

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

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

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