ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 00:24:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed calendar after tablet merge

Browse Source
This commit is contained in:
ivic00
2024-11-18 01:43:09 +01:00
parent 662b38f894
commit 0ba2cbd65d
5 changed files with 402 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

527
app/(auth)/_layout.tsx
View File

@ -1,9 +1,9 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import {Drawer} from "expo-router/drawer"; import { Drawer } from "expo-router/drawer";
import {useSignOut} from "@/hooks/firebase/useSignOut"; import { useSignOut } from "@/hooks/firebase/useSignOut";
import {DrawerContentScrollView,} from "@react-navigation/drawer"; import { DrawerContentScrollView } from "@react-navigation/drawer";
import {Button, ButtonSize, Text, View} from "react-native-ui-lib"; import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
import {ImageBackground, StyleSheet} from "react-native"; import { ImageBackground, StyleSheet } from "react-native";
import DrawerButton from "@/components/shared/DrawerButton"; import DrawerButton from "@/components/shared/DrawerButton";
import NavGroceryIcon from "@/assets/svgs/NavGroceryIcon"; import NavGroceryIcon from "@/assets/svgs/NavGroceryIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon"; import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
@ -11,107 +11,114 @@ import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon"; import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon"; import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch"; import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch";
import {MaterialIcons} from "@expo/vector-icons"; import { MaterialIcons } from "@expo/vector-icons";
import {useSetAtom} from "jotai"; import { useSetAtom } from "jotai";
import { import {
isFamilyViewAtom, isFamilyViewAtom,
settingsPageIndex, settingsPageIndex,
toDosPageIndex, toDosPageIndex,
userSettingsView, userSettingsView,
} from "@/components/pages/calendar/atoms"; } from "@/components/pages/calendar/atoms";
import Ionicons from "@expo/vector-icons/Ionicons"; import Ionicons from "@expo/vector-icons/Ionicons";
import Constants from "expo-constants";
import * as Device from "expo-device"; import * as Device from "expo-device";
import { DeviceType } from "expo-device"; import { DeviceType } from "expo-device";
import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
export default function TabLayout() { export default function TabLayout() {
const {mutateAsync: signOut} = useSignOut(); const { mutateAsync: signOut } = useSignOut();
const setIsFamilyView = useSetAtom(isFamilyViewAtom); const setIsFamilyView = useSetAtom(isFamilyViewAtom);
const setPageIndex = useSetAtom(settingsPageIndex); const setPageIndex = useSetAtom(settingsPageIndex);
const setUserView = useSetAtom(userSettingsView); const setUserView = useSetAtom(userSettingsView);
const setToDosIndex = useSetAtom(toDosPageIndex); const setToDosIndex = useSetAtom(toDosPageIndex);
return ( return (
<Drawer <Drawer
initialRouteName={"index"} initialRouteName={"index"}
detachInactiveScreens detachInactiveScreens
screenOptions={({ navigation }) => ({ screenOptions={({ navigation, route }) => ({
headerShown: true, headerShown: true,
headerRight: () => headerRight: () => {
Device.deviceType === DeviceType.TABLET ? ( // Only show ViewSwitch on calendar and todos pages
<ViewSwitch navigation={navigation} /> const showViewSwitch = ["calendar", "todos", "index"].includes(
) : ( route.name
<></> );
), return Device.deviceType === DeviceType.TABLET && showViewSwitch ? (
<View marginR-16>
<ViewSwitch navigation={navigation} />
</View>
) : null;
},
headerStyle: { height: Device.deviceType === DeviceType.TABLET ? 100 : undefined},
drawerStyle: { drawerStyle: {
width: "90%", width: "90%",
backgroundColor: "#f9f8f7", backgroundColor: "#f9f8f7",
height: "100%", height: "100%",
}, },
})} })}
drawerContent={(props) => { drawerContent={(props) => {
return ( return (
<DrawerContentScrollView {...props} style={{}}> <DrawerContentScrollView {...props} style={{}}>
<View centerV marginH-30 marginT-20 marginB-20 row> <View centerV marginH-30 marginT-20 marginB-20 row>
<ImageBackground <ImageBackground
source={require("../../assets/images/splash.png")} source={require("../../assets/images/splash.png")}
style={{ style={{
backgroundColor: "transparent", backgroundColor: "transparent",
height: 51.43, height: 51.43,
aspectRatio: 1, aspectRatio: 1,
marginRight: 8, marginRight: 8,
}} }}
/> />
<Text style={styles.title}>Welcome to Cally</Text> <Text style={styles.title}>Welcome to Cally</Text>
</View> </View>
<View <View
style={{ style={{
flexDirection: "row", flexDirection: "row",
paddingHorizontal: 30 paddingHorizontal: 30,
}} }}
> >
<View style={{flex: 1, paddingRight: 5}}> <View style={{ flex: 1, paddingRight: 5 }}>
<DrawerButton <DrawerButton
title={"Calendar"} title={"Calendar"}
color="rgb(7, 184, 199)" color="rgb(7, 184, 199)"
bgColor={"rgb(231, 248, 250)"} bgColor={"rgb(231, 248, 250)"}
pressFunc={() => { pressFunc={() => {
props.navigation.navigate("calendar"); props.navigation.navigate("calendar");
setPageIndex(0); setPageIndex(0);
setToDosIndex(0); setToDosIndex(0);
setUserView(true); setUserView(true);
setIsFamilyView(false); setIsFamilyView(false);
}} }}
icon={<NavCalendarIcon/>} icon={<NavCalendarIcon />}
/> />
<DrawerButton <DrawerButton
color="#50be0c" color="#50be0c"
title={"Groceries"} title={"Groceries"}
bgColor={"#eef9e7"} bgColor={"#eef9e7"}
pressFunc={() => { pressFunc={() => {
props.navigation.navigate("grocery"); props.navigation.navigate("grocery");
setPageIndex(0); setPageIndex(0);
setToDosIndex(0); setToDosIndex(0);
setUserView(true); setUserView(true);
setIsFamilyView(false); setIsFamilyView(false);
}} }}
icon={<NavGroceryIcon/>}/> icon={<NavGroceryIcon />}
<DrawerButton />
color="#ea156d" <DrawerButton
title={"Feedback"} color="#ea156d"
bgColor={"#fdedf4"} title={"Feedback"}
pressFunc={() => { bgColor={"#fdedf4"}
props.navigation.navigate("feedback"); pressFunc={() => {
setPageIndex(0); props.navigation.navigate("feedback");
setToDosIndex(0); setPageIndex(0);
setUserView(true); setToDosIndex(0);
setIsFamilyView(false); setUserView(true);
}} setIsFamilyView(false);
icon={<FeedbackNavIcon/>} }}
/> icon={<FeedbackNavIcon />}
</View> />
<View style={{flex: 1}}> </View>
{/*<DrawerButton <View style={{ flex: 1 }}>
{/*<DrawerButton
color="#fd1775" color="#fd1775"
title={"My Reminders"} title={"My Reminders"}
bgColor={"#ffe8f2"} bgColor={"#ffe8f2"}
@ -124,169 +131,175 @@ export default function TabLayout() {
/> />
} }
/>*/} />*/}
<DrawerButton <DrawerButton
color="#8005eb" color="#8005eb"
title={"To Do's"} title={"To Do's"}
bgColor={"#f3e6fd"} bgColor={"#f3e6fd"}
pressFunc={() => { pressFunc={() => {
props.navigation.navigate("todos"); props.navigation.navigate("todos");
setPageIndex(0); setPageIndex(0);
setToDosIndex(0); setToDosIndex(0);
setUserView(true); setUserView(true);
setIsFamilyView(false); setIsFamilyView(false);
}} }}
icon={<NavToDosIcon/>} icon={<NavToDosIcon />}
/> />
<DrawerButton <DrawerButton
color="#e0ca03" color="#e0ca03"
title={"Brain Dump"} title={"Brain Dump"}
bgColor={"#fffacb"} bgColor={"#fffacb"}
pressFunc={() => { pressFunc={() => {
props.navigation.navigate("brain_dump"); props.navigation.navigate("brain_dump");
setPageIndex(0); setPageIndex(0);
setToDosIndex(0); setToDosIndex(0);
setUserView(true); setUserView(true);
setIsFamilyView(false); setIsFamilyView(false);
}} }}
icon={<NavBrainDumpIcon/>} icon={<NavBrainDumpIcon />}
/> />
<DrawerButton <DrawerButton
color="#e0ca03" color="#e0ca03"
title={"Notifications"} title={"Notifications"}
bgColor={"#ffdda1"} bgColor={"#ffdda1"}
pressFunc={() => { pressFunc={() => {
props.navigation.navigate("notifications"); props.navigation.navigate("notifications");
setPageIndex(0); setPageIndex(0);
setToDosIndex(0); setToDosIndex(0);
setUserView(true); setUserView(true);
setIsFamilyView(false); setIsFamilyView(false);
}} }}
icon={<Ionicons name="notifications-outline" size={24} color={"#ffa200"} />} icon={
/> <Ionicons
</View> name="notifications-outline"
</View> size={24}
<Button color={"#ffa200"}
onPress={() => { />
props.navigation.navigate("settings"); }
setPageIndex(0); />
setToDosIndex(0); </View>
setUserView(true); </View>
setIsFamilyView(false); <Button
}} onPress={() => {
label={"Manage Settings"} props.navigation.navigate("settings");
labelStyle={styles.label} setPageIndex(0);
iconSource={() => ( setToDosIndex(0);
<View setUserView(true);
backgroundColor="#ededed" setIsFamilyView(false);
width={60} }}
height={60} label={"Manage Settings"}
style={{borderRadius: 50}} labelStyle={styles.label}
marginR-10 iconSource={() => (
centerV <View
centerH backgroundColor="#ededed"
> width={60}
<NavSettingsIcon/> height={60}
</View> style={{ borderRadius: 50 }}
)} marginR-10
backgroundColor="white" centerV
color="#464039" centerH
paddingV-30 >
marginH-30 <NavSettingsIcon />
borderRadius={18.55} </View>
style={{elevation: 0}} )}
/> backgroundColor="white"
color="#464039"
paddingV-30
marginH-30
borderRadius={18.55}
style={{ elevation: 0 }}
/>
<Button <Button
size={ButtonSize.large} size={ButtonSize.large}
marginH-10 marginH-10
marginT-12 marginT-12
paddingV-15 paddingV-15
style={{ style={{
marginTop: 50, marginTop: 50,
backgroundColor: "transparent", backgroundColor: "transparent",
borderWidth: 1.3, borderWidth: 1.3,
borderColor: "#fd1775", borderColor: "#fd1775",
}} }}
label="Sign out of Cally" label="Sign out of Cally"
color="#fd1775" color="#fd1775"
labelStyle={styles.signOut} labelStyle={styles.signOut}
onPress={() => signOut()} onPress={() => signOut()}
/>
</DrawerContentScrollView>
);
}}
>
<Drawer.Screen
name="index"
options={{
drawerLabel: "Calendar",
title: "Calendar",
}}
/> />
<Drawer.Screen </DrawerContentScrollView>
name="calendar" );
options={{ }}
drawerLabel: "Calendar", >
title: "Calendar", <Drawer.Screen
drawerItemStyle: {display: "none"}, name="index"
}} options={{
/> drawerLabel: "Calendar",
<Drawer.Screen title: "Calendar",
name="brain_dump" }}
options={{ />
drawerLabel: "Brain Dump", <Drawer.Screen
title: "Brain Dump", name="calendar"
}} options={{
/> drawerLabel: "Calendar",
<Drawer.Screen title: "Calendar",
name="settings" drawerItemStyle: { display: "none" },
options={{ }}
drawerLabel: "Settings", />
title: "Settings", <Drawer.Screen
}} name="brain_dump"
/> options={{
<Drawer.Screen drawerLabel: "Brain Dump",
name="grocery" title: "Brain Dump",
options={{ }}
drawerLabel: "Grocery", />
title: "Grocery", <Drawer.Screen
}} name="settings"
/> options={{
<Drawer.Screen drawerLabel: "Settings",
name="reminders" title: "Settings",
options={{ }}
drawerLabel: "Reminders", />
title: "Reminders", <Drawer.Screen
}} name="grocery"
/> options={{
<Drawer.Screen drawerLabel: "Grocery",
name="todos" title: "Grocery",
options={{ }}
drawerLabel: "To-Do", />
title: "To-Dos", <Drawer.Screen
}} name="reminders"
/> options={{
<Drawer.Screen drawerLabel: "Reminders",
name="notifications" title: "Reminders",
options={{ }}
drawerLabel: "Notifications", />
title: "Notifications", <Drawer.Screen
}} name="todos"
/> options={{
<Drawer.Screen drawerLabel: "To-Do",
name="feedback" title: "To-Dos",
options={{drawerLabel: "Feedback", title: "Feedback"}} }}
/> />
</Drawer> <Drawer.Screen
); name="notifications"
options={{
drawerLabel: "Notifications",
title: "Notifications",
}}
/>
<Drawer.Screen
name="feedback"
options={{ drawerLabel: "Feedback", title: "Feedback" }}
/>
</Drawer>
);
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
signOut: {fontFamily: "Poppins_500Medium", fontSize: 15}, signOut: { fontFamily: "Poppins_500Medium", fontSize: 15 },
label: {fontFamily: "Poppins_400Medium", fontSize: 15}, label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
title: { title: {
fontSize: 26.13, fontSize: 26.13,
fontFamily: "Manrope_600SemiBold", fontFamily: "Manrope_600SemiBold",
color: "#262627", color: "#262627",
}, },
}); });

4
app/(auth)/calendar/index.tsx
View File

@ -30,7 +30,7 @@ export default function Screen() {
}, [setRefreshTrigger]); }, [setRefreshTrigger]);
return ( return (
<View style={{ backgroundColor: "white" }}> <>
{Device.deviceType === DeviceType.TABLET ? ( {Device.deviceType === DeviceType.TABLET ? (
<TabletCalendarPage /> <TabletCalendarPage />
) : ( ) : (
@ -58,6 +58,6 @@ export default function Screen() {
<CalendarPage /> <CalendarPage />
</ScrollView> </ScrollView>
)} )}
</View> </>
); );
} }

6
app/(unauth)/index.tsx
View File

@ -2,6 +2,8 @@ import {SafeAreaView} from "react-native-safe-area-context";
import {Button, Image, Text, View} from "react-native-ui-lib"; import {Button, Image, Text, View} from "react-native-ui-lib";
import React from "react"; import React from "react";
import {useRouter} from "expo-router"; import {useRouter} from "expo-router";
import * as Device from "expo-device";
import { DeviceType } from "expo-device";
export default function Screen() { export default function Screen() {
const router = useRouter() const router = useRouter()
@ -25,7 +27,7 @@ export default function Screen() {
<View flexG/> <View flexG/>
<View width={"100%"}> <View width={"100%"} centerH>
<Button <Button
label="Continue" label="Continue"
marginT-50 marginT-50
@ -34,7 +36,7 @@ export default function Screen() {
fontSize: 16, fontSize: 16,
}} }}
onPress={() => router.push("/(unauth)/get_started")} onPress={() => router.push("/(unauth)/get_started")}
style={{height: 50}} style={{height: 50, width: Device.deviceType === DeviceType.TABLET ? 629 : "100%"}}
backgroundColor="#fd1775" backgroundColor="#fd1775"
/> />
</View> </View>

1
components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx
View File

@ -32,6 +32,7 @@ const styles = StyleSheet.create({
container: { container: {
backgroundColor: "white", backgroundColor: "white",
flex: 1, flex: 1,
flexDirection: 'row',
borderTopColor: "#a9a9a9", borderTopColor: "#a9a9a9",
borderTopWidth: 1, borderTopWidth: 1,
}, },

242
components/pages/settings/UserSettings.tsx
View File

@ -1,131 +1,139 @@
import {FloatingButton, Text, TouchableOpacity, View,} from "react-native-ui-lib"; import {
import React, {useState} from "react"; Button,
import {Ionicons} from "@expo/vector-icons"; FloatingButton,
import {ScrollView, StyleSheet} from "react-native"; Text,
TouchableOpacity,
View,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { Ionicons } from "@expo/vector-icons";
import { Dimensions, ScrollView, StyleSheet } from "react-native";
import MyProfile from "./user_settings_views/MyProfile"; import MyProfile from "./user_settings_views/MyProfile";
import MyGroup from "./user_settings_views/MyGroup"; import MyGroup from "./user_settings_views/MyGroup";
import {useAtom, useSetAtom} from "jotai"; import { useAtom, useSetAtom } from "jotai";
import {settingsPageIndex, userSettingsView} from "../calendar/atoms"; import { settingsPageIndex, userSettingsView } from "../calendar/atoms";
import PlusIcon from "@/assets/svgs/PlusIcon"; import PlusIcon from "@/assets/svgs/PlusIcon";
const UserSettings = () => { const UserSettings = () => {
const setPageIndex = useSetAtom(settingsPageIndex); const setPageIndex = useSetAtom(settingsPageIndex);
const [userView, setUserView] = useAtom(userSettingsView); const [userView, setUserView] = useAtom(userSettingsView);
const [onNewUserClick, setOnNewUserClick] = useState<(boolean)>(false); const [onNewUserClick, setOnNewUserClick] = useState<boolean>(false);
return ( return (
<View flexG> <View flexG>
<ScrollView style={{paddingBottom: 20, minHeight: "100%"}}> <ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
setPageIndex(0); setPageIndex(0);
setUserView(true); setUserView(true);
}} }}
>
<View row marginT-20 marginB-20 marginL-20 centerV>
<Ionicons
name="chevron-back"
size={14}
color="#979797"
style={{ paddingBottom: 3 }}
/>
<Text
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
>
Return to main settings
</Text>
</View>
</TouchableOpacity>
<View marginH-26 flexG style={{ minHeight: "90%" }}>
<Text text60R marginB-25>
User Management
</Text>
<View style={styles.buttonSwitch} spread row>
<TouchableOpacity
onPress={() => setUserView(true)}
centerV
centerH
style={userView == true ? styles.btnSelected : styles.btnNot}
>
<View>
<Text
style={styles.btnTxt}
color={userView ? "white" : "black"}
> >
<View row marginT-20 marginB-20 marginL-20 centerV> My Profile
<Ionicons </Text>
name="chevron-back" </View>
size={14} </TouchableOpacity>
color="#979797" <TouchableOpacity
style={{paddingBottom: 3}} onPress={() => setUserView(false)}
/> centerV
<Text centerH
style={{fontFamily: "Poppins_400Regular", fontSize: 14.71}} style={userView == false ? styles.btnSelected : styles.btnNot}
color="#979797" >
> <View>
Return to main settings <Text
</Text> style={styles.btnTxt}
</View> color={!userView ? "white" : "black"}
</TouchableOpacity> >
<View marginH-26 flexG style={{minHeight: "90%"}}> My Group
<Text text60R marginB-25> </Text>
User Management </View>
</Text> </TouchableOpacity>
<View style={styles.buttonSwitch} spread row> </View>
<TouchableOpacity {userView && <MyProfile />}
onPress={() => setUserView(true)} {!userView && (
centerV <MyGroup
centerH onNewUserClick={onNewUserClick}
style={userView == true ? styles.btnSelected : styles.btnNot} setOnNewUserClick={setOnNewUserClick}
> />
<View> )}
<Text
style={styles.btnTxt}
color={userView ? "white" : "black"}
>
My Profile
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => setUserView(false)}
centerV
centerH
style={userView == false ? styles.btnSelected : styles.btnNot}
>
<View>
<Text
style={styles.btnTxt}
color={!userView ? "white" : "black"}
>
My Group
</Text>
</View>
</TouchableOpacity>
</View>
{userView && <MyProfile/>}
{!userView && <MyGroup onNewUserClick={onNewUserClick} setOnNewUserClick={setOnNewUserClick}/>}
</View>
</ScrollView>
{!userView && (
<FloatingButton
fullWidth
hideBackgroundOverlay
visible
button={{
label: " Add a user device",
iconSource: () => <PlusIcon height={13} width={14}/>,
onPress: () => setOnNewUserClick(true),
style: styles.bottomButton,
labelStyle: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
}}
/>
)}
</View> </View>
); </ScrollView>
{!userView && (
<View marginH-28>
<Button
style={styles.bottomButton}
labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
label=" Add a user device"
iconSource={() => <PlusIcon height={13} width={14} />}
onPress={() => setOnNewUserClick(true)}
/>
</View>
)}
</View>
);
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
bottomButton: { bottomButton: {
position: "absolute", position: "absolute",
bottom: 15, bottom: 15,
marginHorizontal: 28, marginHorizontal: 0,
width: 337, width: "100%",
backgroundColor: "#e8156c", backgroundColor: "#e8156c",
height: 53.26, height: 53.26,
}, },
buttonSwitch: { buttonSwitch: {
borderRadius: 50, borderRadius: 50,
width: "100%", width: "100%",
backgroundColor: "#ebebeb", backgroundColor: "#ebebeb",
height: 45, height: 45,
}, },
btnSelected: { btnSelected: {
backgroundColor: "#05a8b6", backgroundColor: "#05a8b6",
height: "100%", height: "100%",
width: "50%", width: "50%",
borderRadius: 50, borderRadius: 50,
}, },
btnTxt: { btnTxt: {
fontFamily: "Manrope_500Medium", fontFamily: "Manrope_500Medium",
fontSize: 15, fontSize: 15,
}, },
btnNot: { btnNot: {
height: "100%", height: "100%",
width: "50%", width: "50%",
borderRadius: 50, borderRadius: 50,
}, },
title: {fontFamily: "Manrope_600SemiBold", fontSize: 18}, title: { fontFamily: "Manrope_600SemiBold", fontSize: 18 },
}); });
export default UserSettings; export default UserSettings;