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. 4
      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 && ( {!imageUri && (
<MaterialCommunityIcons <MaterialCommunityIcons
color={colors.medium} color={colors.medium}
name="camera"
name="camera-plus"
size={40} size={40}
/> />
)} )}

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

@ -3,6 +3,7 @@ import { useFormikContext } from "formik";
import ErrorMessage from "./ErrorMessage"; import ErrorMessage from "./ErrorMessage";
import ImageInputList from "../ImageInputList"; import ImageInputList from "../ImageInputList";
import { View, Text, StyleSheet } from "react-native";
function FormImagePicker({ name }) { function FormImagePicker({ name }) {
const { errors, setFieldValue, touched, values } = useFormikContext(); const { errors, setFieldValue, touched, values } = useFormikContext();
@ -20,15 +21,27 @@ function FormImagePicker({ name }) {
}; };
return ( return (
<>
<View>
<Text style={styles.labelStyle}>Imagens: </Text>
<ImageInputList <ImageInputList
imageUris={imageUris} imageUris={imageUris}
onAddImage={handleAdd} onAddImage={handleAdd}
onRemoveImage={handleRemove} onRemoveImage={handleRemove}
/> />
<ErrorMessage error={errors[name]} visible={touched[name]} /> <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; export default FormImagePicker;

3
src/app/screens/PluviometerSharingDataScreen.js

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

4
src/app/screens/RainSharingDataScreen.js

@ -82,7 +82,7 @@ function RainSharingDataScreen(props) {
> >
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
source={require("../assets/chuva_fraca.png")}
/> />
<Text style={styles.text}>Chuva fraca</Text> <Text style={styles.text}>Chuva fraca</Text>
</View> </View>
@ -156,7 +156,7 @@ function RainSharingDataScreen(props) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
paddingHorizontal: 10,
padding: 10,
}, },
img_block: { img_block: {
borderRadius: 5, borderRadius: 5,

11
src/app/screens/RiverFloodSharingDataScreen.js

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

2
src/app/screens/SharingFloodZonesScreen.js

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

Loading…
Cancel
Save