Browse Source

Change `cerulean` color to primary

master
GabrielTrettel 4 years ago
parent
commit
1f7519e2e7
  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

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

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

@ -1,11 +1,7 @@
import React from "react"; 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 colors from "../../config/colors";
import { TouchableOpacity } from "react-native-gesture-handler"; import { TouchableOpacity } from "react-native-gesture-handler";
@ -14,16 +10,25 @@ function FormLocationPicker (){
<View> <View>
<View style={styles.location}> <View style={styles.location}>
<View style={styles.mapIcon}> <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>
<View style={styles.adressText}> <View style={styles.adressText}>
<Text>{""} Endereço {"\n "}...</Text>
<Text>
{""} Endereço {"\n "}...
</Text>
</View> </View>
</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> </View>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -38,16 +43,15 @@ const styles = StyleSheet.create({
backgroundColor: colors.white, backgroundColor: colors.white,
borderRadius: 25, borderRadius: 25,
marginVertical: 10, marginVertical: 10,
}, },
mapIcon: { mapIcon: {
backgroundColor: colors.cerulean,
backgroundColor: colors.primary,
padding: 8, padding: 8,
width: 20, width: 20,
alignItems: "center", alignItems: "center",
borderRadius: 5, borderRadius: 5,
flex: 0.20,
}
flex: 0.2,
},
}); });
export default FormLocationPicker; export default FormLocationPicker;

3
src/app/config/colors.js

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

11
src/app/screens/MapFormScreen.js

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

21
src/app/screens/PluviometerSharingDataScreen.js

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

2
src/app/screens/RiverFloodSharingDataScreen.js

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

25
src/app/screens/SharingFloodZonesScreen.js

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

Loading…
Cancel
Save