Browse Source

some layout improvements

master
analuizaff 4 years ago
parent
commit
19a31c5bbb
  1. BIN
      src/app/assets/chuva_peq.png
  2. BIN
      src/app/assets/pontos_alagamento_peq.png
  3. 2
      src/app/components/ImageInput.js
  4. 17
      src/app/components/forms/FormImagePicker.js
  5. 3
      src/app/screens/PluviometerSharingDataScreen.js
  6. 206
      src/app/screens/RainSharingDataScreen.js
  7. 11
      src/app/screens/RiverFloodSharingDataScreen.js
  8. 2
      src/app/screens/SharingFloodZonesScreen.js

BIN
src/app/assets/chuva_peq.png

Before

Width: 50  |  Height: 51  |  Size: 8.4 KiB

After

Width: 72  |  Height: 74  |  Size: 1.6 KiB

BIN
src/app/assets/pontos_alagamento_peq.png

Before

Width: 50  |  Height: 49  |  Size: 8.4 KiB

After

Width: 79  |  Height: 82  |  Size: 1.6 KiB

2
src/app/components/ImageInput.js

@ -48,7 +48,7 @@ function ImageInput({ imageUri, onChangeImage }) {
{!imageUri && (
<MaterialCommunityIcons
color={colors.medium}
name="camera"
name="camera-plus"
size={40}
/>
)}

17
src/app/components/forms/FormImagePicker.js

@ -3,6 +3,7 @@ import { useFormikContext } from "formik";
import ErrorMessage from "./ErrorMessage";
import ImageInputList from "../ImageInputList";
import { View, Text, StyleSheet } from "react-native";
function FormImagePicker({ name }) {
const { errors, setFieldValue, touched, values } = useFormikContext();
@ -20,15 +21,27 @@ function FormImagePicker({ name }) {
};
return (
<>
<View>
<Text style={styles.labelStyle}>Imagens: </Text>
<ImageInputList
imageUris={imageUris}
onAddImage={handleAdd}
onRemoveImage={handleRemove}
/>
<ErrorMessage error={errors[name]} visible={touched[name]} />
</>
</View>
);
}
const styles = StyleSheet.create({
labelStyle: {
fontSize: 16,
fontWeight: "bold",
textAlign: "left",
color: "#1976D2",
marginBottom: 5,
marginTop: 15,
},
});
export default FormImagePicker;

3
src/app/screens/PluviometerSharingDataScreen.js

@ -128,8 +128,7 @@ function PluviometerSharingDataScreen(props) {
const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
width: "100%",
padding: 10,
},
image: {
width: 85,

206
src/app/screens/RainSharingDataScreen.js

@ -40,115 +40,115 @@ function RainSharingDataScreen(props) {
Chuva
</Text>
<ScrollView style={styles.container}>
<Form
initialValues={{
images: [],
}}
onSubmit={(values) => {
insertRainData({ ...values, rain, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
onPress: () => {
},
});
props.navigation.goBack(null);
}}
validationSchema={validationSchema}
>
<View>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setRain(0)}>
<View
borderWidth={rain == 0 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/sem_chuva.png")}
/>
<Text style={styles.text}>Sem chuva</Text>
</View>
</TouchableNativeFeedback>
<Form
initialValues={{
images: [],
}}
onSubmit={(values) => {
insertRainData({ ...values, rain, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
onPress: () => {
},
});
props.navigation.goBack(null);
}}
validationSchema={validationSchema}
>
<View>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setRain(0)}>
<View
borderWidth={rain == 0 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/sem_chuva.png")}
/>
<Text style={styles.text}>Sem chuva</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRain(1)}>
<View
borderWidth={rain == 1 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
/>
<Text style={styles.text}>Chuva fraca</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRain(1)}>
<View
borderWidth={rain == 1 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_fraca.png")}
/>
<Text style={styles.text}>Chuva fraca</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRain(2)}>
<View
borderWidth={rain == 2 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
/>
<Text style={styles.text}>Chuva{"\n"}moderada</Text>
</View>
</TouchableNativeFeedback>
</View>
<TouchableNativeFeedback onPress={() => setRain(2)}>
<View
borderWidth={rain == 2 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
/>
<Text style={styles.text}>Chuva{"\n"}moderada</Text>
</View>
</TouchableNativeFeedback>
</View>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setRain(3)}>
<View
borderWidth={rain == 3 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_forte.png")}
/>
<Text style={styles.text}>Chuva forte</Text>
</View>
</TouchableNativeFeedback>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setRain(3)}>
<View
borderWidth={rain == 3 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_forte.png")}
/>
<Text style={styles.text}>Chuva forte</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRain(4)}>
<View
borderWidth={rain == 4 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_muito_forte.png")}
/>
<Text style={styles.text}>Chuva muito{"\n"}forte</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRain(4)}>
<View
borderWidth={rain == 4 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_muito_forte.png")}
/>
<Text style={styles.text}>Chuva muito{"\n"}forte</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRain(5)}>
<View
borderWidth={rain == 5 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_pancadas.png")}
/>
<Text style={styles.text}>Pancada de{"\n"}chuva</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setRain(5)}>
<View
borderWidth={rain == 5 ? borderWidth : 0}
style={styles.img_block}
>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_pancadas.png")}
/>
<Text style={styles.text}>Pancada de{"\n"}chuva</Text>
</View>
</TouchableNativeFeedback>
</View>
</View>
</View>
<FormImagePicker backgroundColor="#1976D2" name="images" />
<FormImagePicker backgroundColor="#1976D2" name="images" />
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form>
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form>
</ScrollView>
</Screen>
);
@ -156,7 +156,7 @@ function RainSharingDataScreen(props) {
const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
padding: 10,
},
img_block: {
borderRadius: 5,

11
src/app/screens/RiverFloodSharingDataScreen.js

@ -39,7 +39,7 @@ function RiverFloodSharingDataScreen(props) {
<KeyboardAwareScrollView
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container}
scrollEnabled={false}>
scrollEnabled={true}>
<Form
initialValues={{
images: [],
@ -88,7 +88,7 @@ function RiverFloodSharingDataScreen(props) {
</View>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
style={{ marginTop: 10, flexDirection: "row", justifyContent: "space-around" }}
>
<TouchableNativeFeedback onPress={() => setRiverScale(2)}>
<View
@ -117,13 +117,10 @@ function RiverFloodSharingDataScreen(props) {
</TouchableNativeFeedback>
</View>
</View>
<FormImagePicker backgroundColor="#1976D2" name="images" />
<SubmitButton
title="Enviar"
backgroundColor={colors.primary}
onPress={() => props.navigation.pop()}
/>
<SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form>
</KeyboardAwareScrollView>
</Screen>

2
src/app/screens/SharingFloodZonesScreen.js

@ -116,7 +116,7 @@ function SharingFloodZonesScreen(props) {
const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
padding: 10,
},
header: {

Loading…
Cancel
Save