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

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

@ -1,9 +1,9 @@
import React, { useEffect } from "react";
import {Drawer} from "expo-router/drawer";
import {useSignOut} from "@/hooks/firebase/useSignOut";
import {DrawerContentScrollView,} from "@react-navigation/drawer";
import {Button, ButtonSize, Text, View} from "react-native-ui-lib";
import {ImageBackground, StyleSheet} from "react-native";
import { Drawer } from "expo-router/drawer";
import { useSignOut } from "@/hooks/firebase/useSignOut";
import { DrawerContentScrollView } from "@react-navigation/drawer";
import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
import { ImageBackground, StyleSheet } from "react-native";
import DrawerButton from "@/components/shared/DrawerButton";
import NavGroceryIcon from "@/assets/svgs/NavGroceryIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
@ -11,8 +11,8 @@ import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch";
import {MaterialIcons} from "@expo/vector-icons";
import {useSetAtom} from "jotai";
import { MaterialIcons } from "@expo/vector-icons";
import { useSetAtom } from "jotai";
import {
isFamilyViewAtom,
settingsPageIndex,
@ -20,12 +20,12 @@ import {
userSettingsView,
} from "@/components/pages/calendar/atoms";
import Ionicons from "@expo/vector-icons/Ionicons";
import Constants from "expo-constants";
import * as Device from "expo-device";
import { DeviceType } from "expo-device";
import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
export default function TabLayout() {
const {mutateAsync: signOut} = useSignOut();
const { mutateAsync: signOut } = useSignOut();
const setIsFamilyView = useSetAtom(isFamilyViewAtom);
const setPageIndex = useSetAtom(settingsPageIndex);
const setUserView = useSetAtom(userSettingsView);
@ -35,14 +35,20 @@ export default function TabLayout() {
<Drawer
initialRouteName={"index"}
detachInactiveScreens
screenOptions={({ navigation }) => ({
screenOptions={({ navigation, route }) => ({
headerShown: true,
headerRight: () =>
Device.deviceType === DeviceType.TABLET ? (
headerRight: () => {
// 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} />
) : (
<></>
),
</View>
) : null;
},
headerStyle: { height: Device.deviceType === DeviceType.TABLET ? 100 : undefined},
drawerStyle: {
width: "90%",
backgroundColor: "#f9f8f7",
@ -67,10 +73,10 @@ export default function TabLayout() {
<View
style={{
flexDirection: "row",
paddingHorizontal: 30
paddingHorizontal: 30,
}}
>
<View style={{flex: 1, paddingRight: 5}}>
<View style={{ flex: 1, paddingRight: 5 }}>
<DrawerButton
title={"Calendar"}
color="rgb(7, 184, 199)"
@ -82,7 +88,7 @@ export default function TabLayout() {
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavCalendarIcon/>}
icon={<NavCalendarIcon />}
/>
<DrawerButton
color="#50be0c"
@ -95,7 +101,8 @@ export default function TabLayout() {
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavGroceryIcon/>}/>
icon={<NavGroceryIcon />}
/>
<DrawerButton
color="#ea156d"
title={"Feedback"}
@ -107,10 +114,10 @@ export default function TabLayout() {
setUserView(true);
setIsFamilyView(false);
}}
icon={<FeedbackNavIcon/>}
icon={<FeedbackNavIcon />}
/>
</View>
<View style={{flex: 1}}>
<View style={{ flex: 1 }}>
{/*<DrawerButton
color="#fd1775"
title={"My Reminders"}
@ -135,7 +142,7 @@ export default function TabLayout() {
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavToDosIcon/>}
icon={<NavToDosIcon />}
/>
<DrawerButton
color="#e0ca03"
@ -148,7 +155,7 @@ export default function TabLayout() {
setUserView(true);
setIsFamilyView(false);
}}
icon={<NavBrainDumpIcon/>}
icon={<NavBrainDumpIcon />}
/>
<DrawerButton
color="#e0ca03"
@ -161,7 +168,13 @@ export default function TabLayout() {
setUserView(true);
setIsFamilyView(false);
}}
icon={<Ionicons name="notifications-outline" size={24} color={"#ffa200"} />}
icon={
<Ionicons
name="notifications-outline"
size={24}
color={"#ffa200"}
/>
}
/>
</View>
</View>
@ -180,12 +193,12 @@ export default function TabLayout() {
backgroundColor="#ededed"
width={60}
height={60}
style={{borderRadius: 50}}
style={{ borderRadius: 50 }}
marginR-10
centerV
centerH
>
<NavSettingsIcon/>
<NavSettingsIcon />
</View>
)}
backgroundColor="white"
@ -193,7 +206,7 @@ export default function TabLayout() {
paddingV-30
marginH-30
borderRadius={18.55}
style={{elevation: 0}}
style={{ elevation: 0 }}
/>
<Button
@ -228,7 +241,7 @@ export default function TabLayout() {
options={{
drawerLabel: "Calendar",
title: "Calendar",
drawerItemStyle: {display: "none"},
drawerItemStyle: { display: "none" },
}}
/>
<Drawer.Screen
@ -275,15 +288,15 @@ export default function TabLayout() {
/>
<Drawer.Screen
name="feedback"
options={{drawerLabel: "Feedback", title: "Feedback"}}
options={{ drawerLabel: "Feedback", title: "Feedback" }}
/>
</Drawer>
);
}
const styles = StyleSheet.create({
signOut: {fontFamily: "Poppins_500Medium", fontSize: 15},
label: {fontFamily: "Poppins_400Medium", fontSize: 15},
signOut: { fontFamily: "Poppins_500Medium", fontSize: 15 },
label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
title: {
fontSize: 26.13,
fontFamily: "Manrope_600SemiBold",

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

@ -30,7 +30,7 @@ export default function Screen() {
}, [setRefreshTrigger]);
return (
<View style={{ backgroundColor: "white" }}>
<>
{Device.deviceType === DeviceType.TABLET ? (
<TabletCalendarPage />
) : (
@ -58,6 +58,6 @@ export default function Screen() {
<CalendarPage />
</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 React from "react";
import {useRouter} from "expo-router";
import * as Device from "expo-device";
import { DeviceType } from "expo-device";
export default function Screen() {
const router = useRouter()
@ -25,7 +27,7 @@ export default function Screen() {
<View flexG/>
<View width={"100%"}>
<View width={"100%"} centerH>
<Button
label="Continue"
marginT-50
@ -34,7 +36,7 @@ export default function Screen() {
fontSize: 16,
}}
onPress={() => router.push("/(unauth)/get_started")}
style={{height: 50}}
style={{height: 50, width: Device.deviceType === DeviceType.TABLET ? 629 : "100%"}}
backgroundColor="#fd1775"
/>
</View>

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

@ -32,6 +32,7 @@ const styles = StyleSheet.create({
container: {
backgroundColor: "white",
flex: 1,
flexDirection: 'row',
borderTopColor: "#a9a9a9",
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 React, {useState} from "react";
import {Ionicons} from "@expo/vector-icons";
import {ScrollView, StyleSheet} from "react-native";
import {
Button,
FloatingButton,
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 MyGroup from "./user_settings_views/MyGroup";
import {useAtom, useSetAtom} from "jotai";
import {settingsPageIndex, userSettingsView} from "../calendar/atoms";
import { useAtom, useSetAtom } from "jotai";
import { settingsPageIndex, userSettingsView } from "../calendar/atoms";
import PlusIcon from "@/assets/svgs/PlusIcon";
const UserSettings = () => {
const setPageIndex = useSetAtom(settingsPageIndex);
const [userView, setUserView] = useAtom(userSettingsView);
const [onNewUserClick, setOnNewUserClick] = useState<(boolean)>(false);
const [onNewUserClick, setOnNewUserClick] = useState<boolean>(false);
return (
<View flexG>
<ScrollView style={{paddingBottom: 20, minHeight: "100%"}}>
<ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}>
<TouchableOpacity
onPress={() => {
setPageIndex(0);
@ -27,17 +33,17 @@ const UserSettings = () => {
name="chevron-back"
size={14}
color="#979797"
style={{paddingBottom: 3}}
style={{ paddingBottom: 3 }}
/>
<Text
style={{fontFamily: "Poppins_400Regular", fontSize: 14.71}}
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
>
Return to main settings
</Text>
</View>
</TouchableOpacity>
<View marginH-26 flexG style={{minHeight: "90%"}}>
<View marginH-26 flexG style={{ minHeight: "90%" }}>
<Text text60R marginB-25>
User Management
</Text>
@ -73,23 +79,25 @@ const UserSettings = () => {
</View>
</TouchableOpacity>
</View>
{userView && <MyProfile/>}
{!userView && <MyGroup onNewUserClick={onNewUserClick} setOnNewUserClick={setOnNewUserClick}/>}
{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 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>
);
@ -99,8 +107,8 @@ const styles = StyleSheet.create({
bottomButton: {
position: "absolute",
bottom: 15,
marginHorizontal: 28,
width: 337,
marginHorizontal: 0,
width: "100%",
backgroundColor: "#e8156c",
height: 53.26,
},
@ -125,7 +133,7 @@ const styles = StyleSheet.create({
width: "50%",
borderRadius: 50,
},
title: {fontFamily: "Manrope_600SemiBold", fontSize: 18},
title: { fontFamily: "Manrope_600SemiBold", fontSize: 18 },
});
export default UserSettings;