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

ui fixes

Browse Source
This commit is contained in:
ivic00
2024-11-05 22:00:16 +01:00
parent 6dc81ae653
commit dac3f3c0a3
3 changed files with 96 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/pages/settings/user_settings_views/MyGroup.tsx
View File

@ -178,7 +178,7 @@ const MyGroup: React.FC<MyGroupProps> = ({onNewUserClick, setOnNewUserClick}) =>
<UserMenu <UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)} setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid} showQRCodeDialog={showQRCodeDialog === member?.uid}
userId={member?.uid!} user={member}
/> />
</View> </View>
</Card> </Card>
@ -220,7 +220,7 @@ const MyGroup: React.FC<MyGroupProps> = ({onNewUserClick, setOnNewUserClick}) =>
<UserMenu <UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)} setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid} showQRCodeDialog={showQRCodeDialog === member?.uid}
userId={member?.uid!} user={member}
/> />
</Card> </Card>
))} ))}
@ -259,7 +259,7 @@ const MyGroup: React.FC<MyGroupProps> = ({onNewUserClick, setOnNewUserClick}) =>
<UserMenu <UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)} setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid} showQRCodeDialog={showQRCodeDialog === member?.uid}
userId={member?.uid!} user={member}
/> />
</Card> </Card>
))} ))}

111
components/pages/settings/user_settings_views/UserMenu.tsx
View File

@ -1,51 +1,78 @@
import React from 'react'; import React from "react";
import {Button, Card, Dialog, Text, TouchableOpacity} from 'react-native-ui-lib'; import {
import QRCode from 'react-native-qrcode-svg'; Button,
import {PanningDirectionsEnum} from "react-native-ui-lib/src/components/panningViews/panningProvider"; Card,
Dialog,
Text,
TouchableOpacity,
} from "react-native-ui-lib";
import QRCode from "react-native-qrcode-svg";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
import Ionicons from "@expo/vector-icons/Ionicons"; import Ionicons from "@expo/vector-icons/Ionicons";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { StyleSheet } from "react-native";
import { ProfileType } from "@/contexts/AuthContext";
const UserMenu = ({ const UserMenu = ({
userId, user,
showQRCodeDialog, showQRCodeDialog,
setShowQRCodeDialog setShowQRCodeDialog,
}: { }: {
userId: string, user: UserProfile;
showQRCodeDialog: boolean, showQRCodeDialog: boolean;
setShowQRCodeDialog: (value: string | boolean) => void setShowQRCodeDialog: (value: string | boolean) => void;
}) => { }) => {
const handleShowQRCode = () => { const handleShowQRCode = () => {
setShowQRCodeDialog(userId); setShowQRCodeDialog(user.uid!);
}; };
return (
<>
<TouchableOpacity onPress={handleShowQRCode}>
<Ionicons name="qr-code-outline" size={24} color="black" />
</TouchableOpacity>
return ( <Dialog
<> visible={showQRCodeDialog}
<TouchableOpacity onDismiss={() => setShowQRCodeDialog(false)}
onPress={handleShowQRCode} panDirection={PanningDirectionsEnum.DOWN}
> >
<Ionicons name="qr-code-outline" size={24} color="black"/> <Card padding-20 center>
</TouchableOpacity> <Text
center
<Dialog marginT-15
visible={showQRCodeDialog} marginH-15
onDismiss={() => setShowQRCodeDialog(false)} marginB-25
panDirection={PanningDirectionsEnum.DOWN} style={{ fontSize: 18, fontFamily: "Manrope_500Medium" }}
> >
<Card padding-20 center> {user.userType !== ProfileType.FAMILY_DEVICE
<Text center marginB-10 style={{fontSize: 16, maxWidth: "80%"}}>Ask your family to download the app ? `Open Cally on ${user.firstName}'s device and scan the code to link it to your family group`
and then scan the : "Open Cally on the family device and scan the code to link it to your family group"}
QR Code to join the family group: </Text>
</Text> <QRCode value={user.uid!} size={150} />
<QRCode value={userId} size={150}/> <Button
<Button marginT-20
marginT-20 style={styles.button}
label="Close" label="Close"
onPress={() => setShowQRCodeDialog(false)} labelStyle={{
/> fontFamily: "PlusJakartaSans_500Medium",
</Card> fontSize: 15,
</Dialog> }}
</> onPress={() => setShowQRCodeDialog(false)}
); />
</Card>
</Dialog>
</>
);
}; };
const styles = StyleSheet.create({
button: {
backgroundColor: "#d9d9d9",
width: 117,
height: 47,
},
});
export default UserMenu; export default UserMenu;

29
components/shared/HeaderTemplate.tsx
View File

@ -9,7 +9,7 @@ import { useGetChildrenByParentId } from "@/hooks/firebase/useGetChildrenByParen
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers"; import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { UserProfile } from "@/hooks/firebase/types/profileTypes"; import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { child } from "@react-native-firebase/storage"; import { child } from "@react-native-firebase/storage";
import CachedImage from 'expo-cached-image' import CachedImage from "expo-cached-image";
const HeaderTemplate = (props: { const HeaderTemplate = (props: {
message: string; message: string;
@ -71,7 +71,10 @@ const HeaderTemplate = (props: {
useEffect(() => { useEffect(() => {
if (members) { if (members) {
const childrenMembers = members.filter( const childrenMembers = members.filter(
(member) => member.userType === ProfileType.CHILD (member) =>
member.userType === ProfileType.CHILD ||
member.userType === ProfileType.CAREGIVER ||
member.userType === ProfileType.PARENT
); );
setChildren(childrenMembers); setChildren(childrenMembers);
} }
@ -81,10 +84,15 @@ const HeaderTemplate = (props: {
<View row centerV marginV-15 style={styles.bottomMarg}> <View row centerV marginV-15 style={styles.bottomMarg}>
{profileData?.pfp ? ( {profileData?.pfp ? (
<View> <View>
<CachedImage source={{ uri: profileData.pfp, }} style={styles.pfp} cacheKey={profileData.pfp}/> <CachedImage
source={{ uri: profileData.pfp }}
style={styles.pfp}
cacheKey={profileData.pfp}
/>
{isFamilyView && props.isCalendar && ( {isFamilyView && props.isCalendar && (
<View style={styles.childrenPfpArr} row> <View style={styles.childrenPfpArr} row>
{children?.slice(0, 3).map((child, index) => { {children?.slice(0, 3).map((child, index) => {
const bgColor: string = child.eventColor || colorMap.pink;
return child.pfp ? ( return child.pfp ? (
<Image <Image
source={{ uri: child.pfp }} source={{ uri: child.pfp }}
@ -92,7 +100,10 @@ const HeaderTemplate = (props: {
/> />
) : ( ) : (
<View <View
style={[styles.childrenPfp, { left: index * 19 }]} style={[
styles.childrenPfp,
{ left: index * 19, backgroundColor: bgColor },
]}
center center
> >
<Text style={{ color: "white" }}> <Text style={{ color: "white" }}>
@ -104,7 +115,15 @@ const HeaderTemplate = (props: {
})} })}
{children?.length > 3 && ( {children?.length > 3 && (
<View style={[styles.childrenPfp, { left: 3 * 19 }]} center> <View style={[styles.childrenPfp, { left: 3 * 19 }]} center>
<Text style={{ color: "white", fontFamily: "Manrope_600SemiBold", fontSize: 12 }}>+{children.length - 3}</Text> <Text
style={{
color: "white",
fontFamily: "Manrope_600SemiBold",
fontSize: 12,
}}
>
+{children.length - 3}
</Text>
</View> </View>
)} )}
</View> </View>