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

Change `cerulean` color to primary

master
GabrielTrettel 4 years ago
parent
8908859c39
commit
1f7519e2e7
7 changed files with 94 additions and 55 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. 31
      src/app/components/forms/FormDatePicker.js
  2. 32
      src/app/components/forms/FormLocationPicker.js
  3. 3
      src/app/config/colors.js
  4. 11
      src/app/screens/MapFormScreen.js
  5. 21
      src/app/screens/PluviometerSharingDataScreen.js
  6. 2
      src/app/screens/RiverFloodSharingDataScreen.js
  7. 25
      src/app/screens/SharingFloodZonesScreen.js

31
src/app/components/forms/FormDatePicker.js
View File

@ -8,7 +8,7 @@ import {
Platform,
TouchableOpacity,
} from "react-native";
import { MaterialCommunityIcons } from '@expo/vector-icons'
import { MaterialCommunityIcons } from "@expo/vector-icons";
import DateTimePicker from "@react-native-community/datetimepicker";
import moment from "moment";
@ -20,7 +20,7 @@ const FormDatePicker = (props) => {
const [date, setDate] = useState(moment(defaultDate));
const [show, setShow] = useState(false);
const [auxDate, setAuxDate] = useState(moment());
const [mode, setMode] = useState('date');
const [mode, setMode] = useState("date");
const [time, setTime] = useState(moment(defaultDate));
//-------------------------- Time picker ainda não está habilitado pra ios --------------------------------
@ -32,16 +32,16 @@ const FormDatePicker = (props) => {
const androidOnChange = (e, selectedDate) => {
setShow(false);
if (selectedDate) {
if (mode == 'date') {
if (mode == "date") {
setDate(moment(selectedDate));
props.onDateChange(selectedDate);
setMode('time');
setMode("time");
setShow(true); // to show the picker again in time mode
} else {
setTime(moment(selectedDate));
props.onTimeChange(selectedDate);
setShow(false);
setMode('date');
setMode("date");
}
}
};
@ -73,8 +73,7 @@ const FormDatePicker = (props) => {
formatChosenDate={(selectedDate) => {
if (mode == "date") {
return moment(selectedDate).format("DD/MM/YYYY");
}
else {
} else {
return moment(selectedDate).format("HH:mm");
}
}} //formatar a data e hora do selected date
@ -95,11 +94,17 @@ const FormDatePicker = (props) => {
}}
>
<View style={styles.dateIcon}>
<MaterialCommunityIcons name="calendar-today" size={30} color="white" alignItems="center" />
<MaterialCommunityIcons
name="calendar-today"
size={30}
color="white"
alignItems="center"
/>
</View>
<View style={styles.dateInput}>
<Text style={{ fontSize: dimensions.text.default }}>
{" "} {date.format("DD/MM/YYYY")} {"\n "} {time.format("HH:mm")}
{" "}
{date.format("DD/MM/YYYY")} {"\n "} {time.format("HH:mm")}
</Text>
</View>
</View>
@ -189,19 +194,19 @@ const styles = StyleSheet.create({
justifyContent: "center",
},
dateInput: {
flex: 0.80,
flex: 0.8,
backgroundColor: colors.white,
borderRadius: 25,
marginVertical: 10,
},
dateIcon: {
backgroundColor: colors.cerulean,
backgroundColor: colors.primary,
padding: 8,
width: 20,
alignItems: "center",
borderRadius: 5,
flex: 0.20,
}
flex: 0.2,
},
});
export default FormDatePicker;

32
src/app/components/forms/FormLocationPicker.js
View File

@ -1,11 +1,7 @@
import React from "react";
import {
StyleSheet,
Text,
View,
} from "react-native";
import { StyleSheet, Text, View } from "react-native";
import { MaterialIcons } from '@expo/vector-icons';
import { MaterialIcons } from "@expo/vector-icons";
import colors from "../../config/colors";
import { TouchableOpacity } from "react-native-gesture-handler";
@ -14,16 +10,25 @@ function FormLocationPicker (){
<View>
<View style={styles.location}>
<View style={styles.mapIcon}>
<MaterialIcons name="location-on" size={28} color="white" alignItems="center" alignContent="center" />
<MaterialIcons
name="location-on"
size={28}
color="white"
alignItems="center"
alignContent="center"
/>
</View>
<View style={styles.adressText}>
<Text>{""} Endereço {"\n "}...</Text>
<Text>
{""} Endereço {"\n "}...
</Text>
</View>
</View>
<Text style={{ color: colors.primary }}>Defina o local no mapa</Text>
<Text style={{ color: colors.primary }}>
Defina o local no mapa
</Text>
</View>
);
}
const styles = StyleSheet.create({
@ -38,16 +43,15 @@ const styles = StyleSheet.create({
backgroundColor: colors.white,
borderRadius: 25,
marginVertical: 10,
},
mapIcon: {
backgroundColor: colors.cerulean,
backgroundColor: colors.primary,
padding: 8,
width: 20,
alignItems: "center",
borderRadius: 5,
flex: 0.20,
}
flex: 0.2,
},
});
export default FormLocationPicker;

3
src/app/config/colors.js
View File

@ -1,5 +1,5 @@
export default {
primary: "#1976D2",
primary: "#006493",
secondary: "#4ecdc4",
black: "#000",
white: "#fff",
@ -10,5 +10,4 @@ export default {
lightGray: "#C4C4C4",
gray: "gray",
lightestGray: "#F0F0F0",
cerulean: "#006493",
};

11
src/app/screens/MapFormScreen.js
View File

@ -9,7 +9,7 @@ import useLocation from "../hooks/useLocation";
import useMarkers from "../hooks/selectFromDB";
import MapMarker from "../components/MapMarker";
import attachFocusToQuery from "../hooks/useFocus";
import SearchBox from "../components/maps/SearchBox";
// import SearchBox from "../components/maps/SearchBox";
function MapFormScreen(props) {
const location = useLocation({
@ -17,8 +17,6 @@ function MapFormScreen(props) {
longitude: -51.3948396,
});
const hasToQuery = attachFocusToQuery();
const markers = useMarkers(hasToQuery);
@ -47,12 +45,15 @@ function MapFormScreen(props) {
...lat_long_delta,
}}
>
<Marker draggable ={true}
<Marker
draggable={true}
coordinate={{
latitude: local.latitude,
longitude: local.longitude,
}}
onDragEnd={(e) => console.log({ x: e.nativeEvent.coordinate })}
onDragEnd={(e) =>
console.log({ x: e.nativeEvent.coordinate })
}
></Marker>
</MapView>
</View>

21
src/app/screens/PluviometerSharingDataScreen.js
View File

@ -21,7 +21,6 @@ import { TouchableOpacity } from "react-native-gesture-handler";
const dims = scaleDimsFromWidth(85, 85, 25);
const validationSchema = Yup.object().shape({
pluviometer: Yup.number()
.required("Campo obrigatório")
@ -91,9 +90,21 @@ function PluviometerSharingDataScreen(props) {
styles={{ width: 50 }}
/>
<View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
<View
style={{
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
}}
>
{/*Data da coleta:*/}
<View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
<View
style={{
flex: 0.48,
borderRightColor: colors.primary,
borderRightWidth: 1,
}}
>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
@ -106,7 +117,9 @@ function PluviometerSharingDataScreen(props) {
</View>
{/*Local do evento:*/}
<View style={{ flex: 0.48 }}>
<TouchableOpacity onPress={() => props.navigation.navigate("FormMap")}>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>
<FormLocationPicker />
</TouchableOpacity>
</View>

2
src/app/screens/RiverFloodSharingDataScreen.js
View File

@ -123,7 +123,7 @@ function RiverFloodSharingDataScreen(props) {
<View
style={{
flex: 0.48,
borderRightColor: colors.cerulean,
borderRightColor: colors.primary,
borderRightWidth: 1,
}}
>

25
src/app/screens/SharingFloodZonesScreen.js
View File

@ -7,7 +7,10 @@ import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation";
import colors from "../config/colors";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
import { TouchableNativeFeedback, TouchableOpacity } from "react-native-gesture-handler";
import {
TouchableNativeFeedback,
TouchableOpacity,
} from "react-native-gesture-handler";
import { insertFloodZone } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
@ -109,9 +112,21 @@ function SharingFloodZonesScreen(props) {
<FormImagePicker name="images" height={10} />
<View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
<View
style={{
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
}}
>
{/*Data da coleta:*/}
<View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
<View
style={{
flex: 0.48,
borderRightColor: colors.primary,
borderRightWidth: 1,
}}
>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
@ -124,7 +139,9 @@ function SharingFloodZonesScreen(props) {
</View>
{/*Local do evento:*/}
<View style={{ flex: 0.48 }}>
<TouchableOpacity onPress={() => props.navigation.navigate("FormMap")}>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>
<FormLocationPicker />
</TouchableOpacity>
</View>

Write Preview
Loading…
Cancel
Save