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

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

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

@ -1,29 +1,36 @@
import React from 'react';
import {Button, 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 React from "react";
import {
Button,
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 { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { StyleSheet } from "react-native";
import { ProfileType } from "@/contexts/AuthContext";
const UserMenu = ({
userId,
user,
showQRCodeDialog,
setShowQRCodeDialog
}: {
userId: string,
showQRCodeDialog: boolean,
setShowQRCodeDialog: (value: string | boolean) => void
setShowQRCodeDialog,
}: {
user: UserProfile;
showQRCodeDialog: boolean;
setShowQRCodeDialog: (value: string | boolean) => void;
}) => {
const handleShowQRCode = () => {
setShowQRCodeDialog(userId);
setShowQRCodeDialog(user.uid!);
};
return (
<>
<TouchableOpacity
onPress={handleShowQRCode}
>
<Ionicons name="qr-code-outline" size={24} color="black"/>
<TouchableOpacity onPress={handleShowQRCode}>
<Ionicons name="qr-code-outline" size={24} color="black" />
</TouchableOpacity>
<Dialog
@ -32,14 +39,26 @@ const UserMenu = ({
panDirection={PanningDirectionsEnum.DOWN}
>
<Card padding-20 center>
<Text center marginB-10 style={{fontSize: 16, maxWidth: "80%"}}>Ask your family to download the app
and then scan the
QR Code to join the family group:
<Text
center
marginT-15
marginH-15
marginB-25
style={{ fontSize: 18, fontFamily: "Manrope_500Medium" }}
>
{user.userType !== ProfileType.FAMILY_DEVICE
? `Open Cally on ${user.firstName}'s device and scan the code to link it to your family group`
: "Open Cally on the family device and scan the code to link it to your family group"}
</Text>
<QRCode value={userId} size={150}/>
<QRCode value={user.uid!} size={150} />
<Button
marginT-20
style={styles.button}
label="Close"
labelStyle={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 15,
}}
onPress={() => setShowQRCodeDialog(false)}
/>
</Card>
@ -48,4 +67,12 @@ const UserMenu = ({
);
};
const styles = StyleSheet.create({
button: {
backgroundColor: "#d9d9d9",
width: 117,
height: 47,
},
});
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 { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { child } from "@react-native-firebase/storage";
import CachedImage from 'expo-cached-image'
import CachedImage from "expo-cached-image";
const HeaderTemplate = (props: {
message: string;
@ -71,7 +71,10 @@ const HeaderTemplate = (props: {
useEffect(() => {
if (members) {
const childrenMembers = members.filter(
(member) => member.userType === ProfileType.CHILD
(member) =>
member.userType === ProfileType.CHILD ||
member.userType === ProfileType.CAREGIVER ||
member.userType === ProfileType.PARENT
);
setChildren(childrenMembers);
}
@ -81,10 +84,15 @@ const HeaderTemplate = (props: {
<View row centerV marginV-15 style={styles.bottomMarg}>
{profileData?.pfp ? (
<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 && (
<View style={styles.childrenPfpArr} row>
{children?.slice(0, 3).map((child, index) => {
const bgColor: string = child.eventColor || colorMap.pink;
return child.pfp ? (
<Image
source={{ uri: child.pfp }}
@ -92,7 +100,10 @@ const HeaderTemplate = (props: {
/>
) : (
<View
style={[styles.childrenPfp, { left: index * 19 }]}
style={[
styles.childrenPfp,
{ left: index * 19, backgroundColor: bgColor },
]}
center
>
<Text style={{ color: "white" }}>
@ -104,7 +115,15 @@ const HeaderTemplate = (props: {
})}
{children?.length > 3 && (
<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>