ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 08:24:55 +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

75
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,8 +11,8 @@ 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,
@ -20,12 +20,12 @@ import {
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);
@ -35,14 +35,20 @@ export default function TabLayout() {
<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
const showViewSwitch = ["calendar", "todos", "index"].includes(
route.name
);
return Device.deviceType === DeviceType.TABLET && showViewSwitch ? (
<View marginR-16>
<ViewSwitch navigation={navigation} /> <ViewSwitch navigation={navigation} />
) : ( </View>
<></> ) : null;
), },
headerStyle: { height: Device.deviceType === DeviceType.TABLET ? 100 : undefined},
drawerStyle: { drawerStyle: {
width: "90%", width: "90%",
backgroundColor: "#f9f8f7", backgroundColor: "#f9f8f7",
@ -67,10 +73,10 @@ export default function TabLayout() {
<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)"
@ -82,7 +88,7 @@ export default function TabLayout() {
setUserView(true); setUserView(true);
setIsFamilyView(false); setIsFamilyView(false);
}} }}
icon={<NavCalendarIcon/>} icon={<NavCalendarIcon />}
/> />
<DrawerButton <DrawerButton
color="#50be0c" color="#50be0c"
@ -95,7 +101,8 @@ export default function TabLayout() {
setUserView(true); setUserView(true);
setIsFamilyView(false); setIsFamilyView(false);
}} }}
icon={<NavGroceryIcon/>}/> icon={<NavGroceryIcon />}
/>
<DrawerButton <DrawerButton
color="#ea156d" color="#ea156d"
title={"Feedback"} title={"Feedback"}
@ -107,10 +114,10 @@ export default function TabLayout() {
setUserView(true); setUserView(true);
setIsFamilyView(false); setIsFamilyView(false);
}} }}
icon={<FeedbackNavIcon/>} icon={<FeedbackNavIcon />}
/> />
</View> </View>
<View style={{flex: 1}}> <View style={{ flex: 1 }}>
{/*<DrawerButton {/*<DrawerButton
color="#fd1775" color="#fd1775"
title={"My Reminders"} title={"My Reminders"}
@ -135,7 +142,7 @@ export default function TabLayout() {
setUserView(true); setUserView(true);
setIsFamilyView(false); setIsFamilyView(false);
}} }}
icon={<NavToDosIcon/>} icon={<NavToDosIcon />}
/> />
<DrawerButton <DrawerButton
color="#e0ca03" color="#e0ca03"
@ -148,7 +155,7 @@ export default function TabLayout() {
setUserView(true); setUserView(true);
setIsFamilyView(false); setIsFamilyView(false);
}} }}
icon={<NavBrainDumpIcon/>} icon={<NavBrainDumpIcon />}
/> />
<DrawerButton <DrawerButton
color="#e0ca03" color="#e0ca03"
@ -161,7 +168,13 @@ export default function TabLayout() {
setUserView(true); setUserView(true);
setIsFamilyView(false); setIsFamilyView(false);
}} }}
icon={<Ionicons name="notifications-outline" size={24} color={"#ffa200"} />} icon={
<Ionicons
name="notifications-outline"
size={24}
color={"#ffa200"}
/>
}
/> />
</View> </View>
</View> </View>
@ -180,12 +193,12 @@ export default function TabLayout() {
backgroundColor="#ededed" backgroundColor="#ededed"
width={60} width={60}
height={60} height={60}
style={{borderRadius: 50}} style={{ borderRadius: 50 }}
marginR-10 marginR-10
centerV centerV
centerH centerH
> >
<NavSettingsIcon/> <NavSettingsIcon />
</View> </View>
)} )}
backgroundColor="white" backgroundColor="white"
@ -193,7 +206,7 @@ export default function TabLayout() {
paddingV-30 paddingV-30
marginH-30 marginH-30
borderRadius={18.55} borderRadius={18.55}
style={{elevation: 0}} style={{ elevation: 0 }}
/> />
<Button <Button
@ -228,7 +241,7 @@ export default function TabLayout() {
options={{ options={{
drawerLabel: "Calendar", drawerLabel: "Calendar",
title: "Calendar", title: "Calendar",
drawerItemStyle: {display: "none"}, drawerItemStyle: { display: "none" },
}} }}
/> />
<Drawer.Screen <Drawer.Screen
@ -275,15 +288,15 @@ export default function TabLayout() {
/> />
<Drawer.Screen <Drawer.Screen
name="feedback" name="feedback"
options={{drawerLabel: "Feedback", title: "Feedback"}} options={{ drawerLabel: "Feedback", title: "Feedback" }}
/> />
</Drawer> </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",

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,
}, },

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

@ -1,21 +1,27 @@
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);
@ -27,17 +33,17 @@ const UserSettings = () => {
name="chevron-back" name="chevron-back"
size={14} size={14}
color="#979797" color="#979797"
style={{paddingBottom: 3}} style={{ paddingBottom: 3 }}
/> />
<Text <Text
style={{fontFamily: "Poppins_400Regular", fontSize: 14.71}} style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797" color="#979797"
> >
Return to main settings Return to main settings
</Text> </Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<View marginH-26 flexG style={{minHeight: "90%"}}> <View marginH-26 flexG style={{ minHeight: "90%" }}>
<Text text60R marginB-25> <Text text60R marginB-25>
User Management User Management
</Text> </Text>
@ -73,23 +79,25 @@ const UserSettings = () => {
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
{userView && <MyProfile/>} {userView && <MyProfile />}
{!userView && <MyGroup onNewUserClick={onNewUserClick} setOnNewUserClick={setOnNewUserClick}/>} {!userView && (
<MyGroup
onNewUserClick={onNewUserClick}
setOnNewUserClick={setOnNewUserClick}
/>
)}
</View> </View>
</ScrollView> </ScrollView>
{!userView && ( {!userView && (
<FloatingButton <View marginH-28>
fullWidth <Button
hideBackgroundOverlay style={styles.bottomButton}
visible labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
button={{ label=" Add a user device"
label: " Add a user device", iconSource={() => <PlusIcon height={13} width={14} />}
iconSource: () => <PlusIcon height={13} width={14}/>, onPress={() => setOnNewUserClick(true)}
onPress: () => setOnNewUserClick(true),
style: styles.bottomButton,
labelStyle: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
}}
/> />
</View>
)} )}
</View> </View>
); );
@ -99,8 +107,8 @@ 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,
}, },
@ -125,7 +133,7 @@ const styles = StyleSheet.create({
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;