mirror of
https://github.com/urosran/cally.git
synced 2025-08-26 06:09:40 +00:00
added settings pages
This commit is contained in:
ivic00
@ -1,6 +1,12 @@
|
||||
import SettingsPage from "@/components/pages/settings/SettingsPage";
|
||||
import { SettingsContextProvider } from "@/contexts/SettingsContext";
|
||||
import React from "react";
|
||||
import { View } from "react-native-ui-lib";
|
||||
|
||||
export default function Screen() {
|
||||
return <SettingsPage />;
|
||||
return (
|
||||
<SettingsContextProvider>
|
||||
<SettingsPage />
|
||||
</SettingsContextProvider>
|
||||
);
|
||||
}
|
||||
|
||||
123
components/pages/settings/CalendarSettingsPage.tsx
Normal file
123
components/pages/settings/CalendarSettingsPage.tsx
Normal file
@ -0,0 +1,123 @@
|
||||
import { AntDesign, Ionicons } from "@expo/vector-icons";
|
||||
import React, { useState } from "react";
|
||||
import { Button, View, Text, Checkbox } from "react-native-ui-lib";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { colorMap } from "@/contexts/SettingsContext";
|
||||
import { TouchableOpacity } from "react-native-gesture-handler";
|
||||
|
||||
const CalendarSettingsPage = (props: {
|
||||
setSelectedPage: (page: number) => void;
|
||||
}) => {
|
||||
const [selectedColor, setSelectedColor] = useState<string>(colorMap.pink);
|
||||
const [startDate, setStartDate] = useState<boolean>(true);
|
||||
return (
|
||||
<View marginH-30>
|
||||
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
|
||||
<View row marginT-20 marginB-35 centerV>
|
||||
<Ionicons name="chevron-back" size={22} color="#979797" />
|
||||
<Text text70 color="#979797">Return to main settings</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<Text text60R>Calendar settings</Text>
|
||||
<View style={styles.card}>
|
||||
<Text text70 marginB-14>
|
||||
Event Color Preference
|
||||
</Text>
|
||||
<View row spread>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.pink)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.pink}>
|
||||
{selectedColor == colorMap.pink && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.orange)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.orange}>
|
||||
{selectedColor == colorMap.orange && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.green)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.green}>
|
||||
{selectedColor == colorMap.green && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.teal)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.teal}>
|
||||
{selectedColor == colorMap.teal && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.purple)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.purple}>
|
||||
{selectedColor == colorMap.purple && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.card}>
|
||||
<Text text70>Weekly Start Date</Text>
|
||||
<View row marginV-5 marginT-20>
|
||||
<Checkbox
|
||||
value={startDate}
|
||||
style={styles.checkbox}
|
||||
color="#ea156d"
|
||||
onValueChange={() => setStartDate(true)}
|
||||
/>
|
||||
<View row marginL-8>
|
||||
<Text text70>Sundays</Text>
|
||||
<Text text70 color="gray">
|
||||
{" "}
|
||||
(default)
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View row marginV-5>
|
||||
<Checkbox
|
||||
value={!startDate}
|
||||
style={styles.checkbox}
|
||||
color="#ea156d"
|
||||
onValueChange={() => setStartDate(false)}
|
||||
/>
|
||||
<Text text70 marginL-8>
|
||||
Mondays
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
backBtn: {
|
||||
backgroundColor: "red",
|
||||
marginLeft: -2,
|
||||
justifyContent: "flex-start",
|
||||
},
|
||||
card: {
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
padding: 20,
|
||||
paddingBottom: 30,
|
||||
marginTop: 20,
|
||||
borderRadius: 20,
|
||||
},
|
||||
colorBox: {
|
||||
aspectRatio: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: 50,
|
||||
borderRadius: 12,
|
||||
},
|
||||
checkbox: {
|
||||
borderRadius: 50,
|
||||
},
|
||||
});
|
||||
|
||||
export default CalendarSettingsPage;
|
||||
33
components/pages/settings/ChoreRewardSettings.tsx
Normal file
33
components/pages/settings/ChoreRewardSettings.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import { View, Text, TouchableOpacity } from "react-native-ui-lib";
|
||||
import React from "react";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { ToDosContextProvider } from "@/contexts/ToDosContext";
|
||||
import ToDosList from "../todos/ToDosList";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
|
||||
const ChoreRewardSettings = (props: {
|
||||
setSelectedPage: (page: number) => void;
|
||||
}) => {
|
||||
return (
|
||||
<ToDosContextProvider>
|
||||
<View marginT-10>
|
||||
<ScrollView>
|
||||
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
|
||||
<View row marginT-20 marginL-20 marginB-35 centerV>
|
||||
<Ionicons name="chevron-back" size={22} color="#979797" />
|
||||
<Text text70 color="#979797">
|
||||
Return to main settings
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<Text text60R marginL-30 marginB-20>
|
||||
Chore Reward Settings
|
||||
</Text>
|
||||
<ToDosList />
|
||||
</ScrollView>
|
||||
</View>
|
||||
</ToDosContextProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChoreRewardSettings;
|
||||
@ -1,14 +1,31 @@
|
||||
import { View, Text, Button } from "react-native-ui-lib";
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { Entypo, Ionicons, Octicons } from "@expo/vector-icons";
|
||||
import CalendarSettingsPage from "./CalendarSettingsPage";
|
||||
import ChoreRewardSettings from "./ChoreRewardSettings";
|
||||
import UserSettings from "./UserSettings";
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
mainBtn: { width: "100%", justifyContent: "flex-start", marginBottom: 20, height: 60 },
|
||||
mainBtn: {
|
||||
width: "100%",
|
||||
justifyContent: "flex-start",
|
||||
marginBottom: 20,
|
||||
height: 60,
|
||||
},
|
||||
});
|
||||
|
||||
const pageIndex = {
|
||||
main: 0,
|
||||
user: 1,
|
||||
calendar: 2,
|
||||
chore: 3,
|
||||
policy: 4,
|
||||
};
|
||||
const SettingsPage = () => {
|
||||
const [selectedPage, setSelectedPage] = useState<number>(0);
|
||||
return (
|
||||
<View>
|
||||
{selectedPage == 0 && (
|
||||
<View centerH marginH-30 marginT-30>
|
||||
<Button
|
||||
backgroundColor="white"
|
||||
@ -16,8 +33,14 @@ const SettingsPage = () => {
|
||||
label="Manage my profile"
|
||||
color="#07b8c7"
|
||||
iconSource={() => (
|
||||
<Ionicons name="person-circle-sharp" size={24} color="#07b8c7" style={{marginRight: 10}} />
|
||||
<Ionicons
|
||||
name="person-circle-sharp"
|
||||
size={24}
|
||||
color="#07b8c7"
|
||||
style={{ marginRight: 10 }}
|
||||
/>
|
||||
)}
|
||||
onPress={() => setSelectedPage(pageIndex.user)}
|
||||
/>
|
||||
<Button
|
||||
backgroundColor="white"
|
||||
@ -25,26 +48,50 @@ const SettingsPage = () => {
|
||||
label="Calendar settings"
|
||||
color="#fd1775"
|
||||
iconSource={() => (
|
||||
<Ionicons name="home-outline" size={24} color="#fd1775" style={{marginRight: 10}} />
|
||||
<Ionicons
|
||||
name="home-outline"
|
||||
size={24}
|
||||
color="#fd1775"
|
||||
style={{ marginRight: 10 }}
|
||||
/>
|
||||
)}
|
||||
onPress={() => {setSelectedPage(pageIndex.calendar)}}
|
||||
/>
|
||||
<Button
|
||||
backgroundColor="white"
|
||||
style={styles.mainBtn}
|
||||
label="Chore reward settings"
|
||||
color="#ff9900"
|
||||
iconSource={() => (<Octicons name="gear" size={24} color="#ff9900" style={{marginRight: 10}} />)}
|
||||
iconSource={() => (
|
||||
<Octicons
|
||||
name="gear"
|
||||
size={24}
|
||||
color="#ff9900"
|
||||
style={{ marginRight: 10 }}
|
||||
/>
|
||||
)}
|
||||
onPress={() => setSelectedPage(pageIndex.chore)}
|
||||
/>
|
||||
<Button
|
||||
backgroundColor="white"
|
||||
style={styles.mainBtn}
|
||||
label="Kaly privacy policy"
|
||||
iconSource={() => (
|
||||
<Entypo name="text-document" size={24} color="#6c645b" style={{marginRight: 10}} />
|
||||
<Entypo
|
||||
name="text-document"
|
||||
size={24}
|
||||
color="#6c645b"
|
||||
style={{ marginRight: 10 }}
|
||||
/>
|
||||
)}
|
||||
color="#6c645b"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{selectedPage == pageIndex.calendar && <CalendarSettingsPage setSelectedPage={setSelectedPage} />}
|
||||
{selectedPage == pageIndex.chore && <ChoreRewardSettings setSelectedPage={setSelectedPage} />}
|
||||
{selectedPage == pageIndex.user && <UserSettings setSelectedPage={setSelectedPage} />}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
79
components/pages/settings/UserSettings.tsx
Normal file
79
components/pages/settings/UserSettings.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import { View, Text, TouchableOpacity } from "react-native-ui-lib";
|
||||
import React, { useState } from "react";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { ScrollView, StyleSheet } from "react-native";
|
||||
import MyProfile from "./user_settings_views/MyProfile";
|
||||
import MyGroup from "./user_settings_views/MyGroup";
|
||||
|
||||
const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
|
||||
const [selectedView, setSelectedView] = useState<boolean>(true);
|
||||
return (
|
||||
<View>
|
||||
<ScrollView>
|
||||
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
|
||||
<View row marginT-20 marginL-20 marginB-35 centerV>
|
||||
<Ionicons name="chevron-back" size={22} color="#979797" />
|
||||
<Text text70 color="#979797">
|
||||
Return to main settings
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View marginH-20>
|
||||
<Text text60R marginB-25>
|
||||
User Management
|
||||
</Text>
|
||||
<View style={styles.buttonSwitch} spread row>
|
||||
<TouchableOpacity
|
||||
onPress={() => setSelectedView(true)}
|
||||
centerV
|
||||
centerH
|
||||
style={selectedView == true ? styles.btnSelected : styles.btnNot}
|
||||
>
|
||||
<View>
|
||||
<Text text70 color={selectedView ? "white" : "black"}>
|
||||
My Profile
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => setSelectedView(false)}
|
||||
centerV
|
||||
centerH
|
||||
style={selectedView == false ? styles.btnSelected : styles.btnNot}
|
||||
>
|
||||
<View>
|
||||
<Text text70 color={!selectedView ? "white" : "black"}>
|
||||
My Group
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{selectedView && <MyProfile />}
|
||||
{!selectedView && <MyGroup />}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
buttonSwitch: {
|
||||
borderRadius: 50,
|
||||
width: "100%",
|
||||
backgroundColor: "#ebebeb",
|
||||
height: 45,
|
||||
},
|
||||
btnSelected: {
|
||||
backgroundColor: "#05a8b6",
|
||||
height: "100%",
|
||||
width: "50%",
|
||||
borderRadius: 50,
|
||||
},
|
||||
btnNot: {
|
||||
height: "100%",
|
||||
width: "50%",
|
||||
borderRadius: 50,
|
||||
},
|
||||
});
|
||||
|
||||
export default UserSettings;
|
||||
12
components/pages/settings/user_settings_views/GroupsList.tsx
Normal file
12
components/pages/settings/user_settings_views/GroupsList.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
|
||||
const GroupsList = () => {
|
||||
return (
|
||||
<View>
|
||||
<Text>GroupsList</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupsList;
|
||||
43
components/pages/settings/user_settings_views/MyGroup.tsx
Normal file
43
components/pages/settings/user_settings_views/MyGroup.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { View, Text } from "react-native-ui-lib";
|
||||
import React from "react";
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
const MyGroup = () => {
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.card}>
|
||||
<Text text70 marginV-10>
|
||||
Family
|
||||
</Text>
|
||||
<Text text70 marginB-10 marginT-15>
|
||||
Caregivers
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
marginVertical: 15,
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
borderRadius: 15,
|
||||
padding: 20,
|
||||
},
|
||||
pfp: {
|
||||
aspectRatio: 1,
|
||||
width: 60,
|
||||
backgroundColor: "green",
|
||||
borderRadius: 20,
|
||||
},
|
||||
txtBox: {
|
||||
backgroundColor: "#fafafa",
|
||||
borderRadius: 50,
|
||||
borderWidth: 2,
|
||||
borderColor: "#cecece",
|
||||
padding: 15,
|
||||
height: 45,
|
||||
},
|
||||
});
|
||||
export default MyGroup;
|
||||
68
components/pages/settings/user_settings_views/MyProfile.tsx
Normal file
68
components/pages/settings/user_settings_views/MyProfile.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import { View, Text, TextField } from "react-native-ui-lib";
|
||||
import React from "react";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
const MyProfile = () => {
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.card}>
|
||||
<Text text70>Your Profile</Text>
|
||||
<View row spread paddingH-15 centerV marginV-15>
|
||||
<View style={styles.pfp}></View>
|
||||
<Text text80 color="#50be0c">
|
||||
Change Photo
|
||||
</Text>
|
||||
<Text text80>Remove Photo</Text>
|
||||
</View>
|
||||
<View paddingH-15>
|
||||
<Text text80 marginT-10 marginB-7 color="#a1a1a1">
|
||||
First name
|
||||
</Text>
|
||||
<TextField text70 placeholder="First name" style={styles.txtBox} />
|
||||
<Text text80 marginT-10 marginB-7 color="#a1a1a1">
|
||||
Last name
|
||||
</Text>
|
||||
<TextField text70 placeholder="Last name" style={styles.txtBox} />
|
||||
<Text text80 marginT-10 marginB-7 color="#a1a1a1">
|
||||
Email address
|
||||
</Text>
|
||||
<TextField text70 placeholder="Email address" style={styles.txtBox} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text text70>Settings</Text>
|
||||
<Text text80 marginT-20 marginB-7 color="#a1a1a1">
|
||||
Time Zone
|
||||
</Text>
|
||||
<TextField text70 placeholder="Email address" style={styles.txtBox} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
marginVertical: 15,
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
borderRadius: 15,
|
||||
padding: 20,
|
||||
},
|
||||
pfp: {
|
||||
aspectRatio: 1,
|
||||
width: 60,
|
||||
backgroundColor: "green",
|
||||
borderRadius: 20,
|
||||
},
|
||||
txtBox: {
|
||||
backgroundColor: "#fafafa",
|
||||
borderRadius: 50,
|
||||
borderWidth: 2,
|
||||
borderColor: "#cecece",
|
||||
padding: 15,
|
||||
height: 45,
|
||||
},
|
||||
});
|
||||
|
||||
export default MyProfile;
|
||||
30
contexts/SettingsContext.tsx
Normal file
30
contexts/SettingsContext.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { createContext, FC, ReactNode, useContext, useState } from "react";
|
||||
|
||||
export const colorMap = {
|
||||
pink: "#ea156c",
|
||||
orange: "#e28800",
|
||||
green: "#46a80a",
|
||||
teal: "#05a8b6",
|
||||
purple: "#7305d4",
|
||||
};
|
||||
|
||||
interface ISettingsContext {
|
||||
calendarColor: string;
|
||||
setCalendarColor: (color: string) => void;
|
||||
}
|
||||
|
||||
const SettingsContext = createContext<ISettingsContext>(undefined!);
|
||||
|
||||
export const SettingsContextProvider: FC<{ children: ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [calendarColor, setCalendarColor] = useState<string>(colorMap.pink);
|
||||
|
||||
return (
|
||||
<SettingsContext.Provider value={{ calendarColor, setCalendarColor }}>
|
||||
{children}
|
||||
</SettingsContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useSettingsContext = () => useContext(SettingsContext)!;
|
||||
Reference in New Issue
Block a user