ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-08-25 21:59:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui tweaks

Browse Source
This commit is contained in:
ivic00
2024-09-28 20:38:20 +02:00
parent 7fa5a17e0b
commit 908eeab607
10 changed files with 371 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,125 +1,159 @@
import React, {useRef, useState} from "react";
import {LayoutChangeEvent} from "react-native";
import {Calendar} from "react-native-big-calendar";
import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
import {MaterialIcons} from "@expo/vector-icons";
import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import React, { useRef, useState } from "react";
import { LayoutChangeEvent, StyleSheet } from "react-native";
import { Calendar } from "react-native-big-calendar";
import {
Button,
Picker,
PickerModes,
SegmentedControl,
Text,
View,
} from "react-native-ui-lib";
import { MaterialIcons } from "@expo/vector-icons";
import { AddEventDialog } from "@/components/pages/calendar/AddEventDialog";
import { useGetEvents } from "@/hooks/firebase/useGetEvents";
import { useAuthContext } from "@/contexts/AuthContext";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
const modeMap = new Map([
[0, "day"],
[1, "week"],
[2, "month"]
[0, "day"],
[1, "week"],
[2, "month"],
]);
const months = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
export default function Screen() {
const { profileData } = useAuthContext();
const [calendarHeight, setCalendarHeight] = useState(0);
const [mode, setMode] = useState<"week" | "month" | "day">("week");
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
const { profileData } = useAuthContext();
const [calendarHeight, setCalendarHeight] = useState(0);
const [mode, setMode] = useState<"week" | "month" | "day">("week");
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
const calendarContainerRef = useRef(null);
const { data: events} = useGetEvents()
const calendarContainerRef = useRef(null);
const { data: events } = useGetEvents();
const onLayout = (event: LayoutChangeEvent) => {
const {height} = event.nativeEvent.layout;
setCalendarHeight(height);
};
const onLayout = (event: LayoutChangeEvent) => {
const { height } = event.nativeEvent.layout;
setCalendarHeight(height);
};
const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index);
if (selectedMode) {
setMode(selectedMode as "week" | "month" | "day");
}
};
const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index);
if (selectedMode) {
setMode(selectedMode as "week" | "month" | "day");
}
};
const handleMonthChange = (month: string) => {
const currentYear = selectedDate.getFullYear();
const currentDay = selectedDate.getDate();
const newMonthIndex = months.indexOf(month);
const handleMonthChange = (month: string) => {
const currentYear = selectedDate.getFullYear();
const currentDay = selectedDate.getDate();
const newMonthIndex = months.indexOf(month);
// Update the date with the new month while preserving the day and year
const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
setSelectedDate(updatedDate);
};
// Update the date with the new month while preserving the day and year
const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
setSelectedDate(updatedDate);
};
console.log(events)
console.log(events);
return (
<View style={{flex: 1, height: "100%", padding: 10}}>
<View style={{height: 60, justifyContent: "space-evenly", alignItems: "flex-start"}}>
<Text>Welcome {profileData?.firstName}</Text>
<Text>Let's get your week started!</Text>
</View>
return (
<View style={{ flex: 1, height: "100%", padding: 10 }}>
<HeaderTemplate
message={"Let's get your week started!"}
isWelcome={true}
/>
<View
style={{flex: 1, backgroundColor: "#fff", borderRadius: 30}}
ref={calendarContainerRef}
onLayout={onLayout}
>
<View style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 10,
paddingVertical: 8,
borderRadius: 20,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: "#f9f9f9",
marginBottom: 10,
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 5,
elevation: 3,
}}>
<Picker
value={months[selectedDate.getMonth()]} // Get the month from the date
placeholder={"Select Month"}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
>
{months.map((month) => (
<Picker.Item key={month} label={month} value={month}/>
))}
</Picker>
<View
style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }}
ref={calendarContainerRef}
onLayout={onLayout}
>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 10,
paddingVertical: 8,
borderRadius: 20,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: "white",
marginBottom: 10,
}}
>
<Picker
value={months[selectedDate.getMonth()]} // Get the month from the date
placeholder={"Select Month"}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
>
{months.map((month) => (
<Picker.Item key={month} label={month} value={month} />
))}
</Picker>
<View>
<SegmentedControl
segments={[
{label: "D"},
{label: "W"},
{label: "M"}
]}
onChangeIndex={handleSegmentChange}
initialIndex={[...modeMap.entries()].find(([_, value]) => value === mode)?.[0] || 1}
/>
</View>
</View>
{calendarHeight > 0 && (
<Calendar
mode={mode}
events={events ?? []}
height={calendarHeight}
activeDate={selectedDate}
onSwipeEnd={(newDate) => {
console.log(newDate)
setSelectedDate(newDate);
}}
/>
)}
</View>
<AddEventDialog/>
<View>
<SegmentedControl
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"
activeColor="white"
outlineColor="white"
outlineWidth={3}
style={{ backgroundColor: "green" }}
segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange}
initialIndex={
[...modeMap.entries()].find(
([_, value]) => value === mode
)?.[0] || 1
}
/>
</View>
</View>
);
{calendarHeight > 0 && (
<Calendar
bodyContainerStyle={styles.calHeader}
mode={mode}
events={events ?? []}
height={calendarHeight}
activeDate={selectedDate}
onSwipeEnd={(newDate) => {
console.log(newDate);
setSelectedDate(newDate);
}}
/>
)}
</View>
<CalendarViewSwitch />
<AddEventDialog />
</View>
);
}
const styles = StyleSheet.create({
segmentslblStyle: {
fontSize: 14,
},
calHeader: {
borderWidth: 0
},
});

46
components/pages/brain_dump/BrainDumpPage.tsx
View File

@ -13,27 +13,35 @@ const BrainDumpPage = () => {
return (
<View>
<ScrollView>
<HeaderTemplate message={"Welcome to your notes!"} isWelcome={false} />
<ScrollView
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
>
<View marginH-25>
<View style={styles.searchField} centerV>
<TextField
value={searchText}
onChangeText={(value) => {
setSearchText(value);
}}
leadingAccessory={
<Feather
name="search"
size={24}
color="#9b9b9b"
style={{ paddingRight: 10 }}
/>
}
placeholder="Search notes..."
/>
<HeaderTemplate
message={"Welcome to your notes!"}
isWelcome={false}
/>
<View>
<View style={styles.searchField} centerV>
<TextField
value={searchText}
onChangeText={(value) => {
setSearchText(value);
}}
leadingAccessory={
<Feather
name="search"
size={24}
color="#9b9b9b"
style={{ paddingRight: 10 }}
/>
}
placeholder="Search notes..."
/>
</View>
<DumpList searchText={searchText} />
</View>
<DumpList searchText={searchText} />
</View>
</ScrollView>
</View>

8
components/pages/brain_dump/DumpItem.tsx
View File

@ -1,7 +1,7 @@
import { View, Text } from "react-native-ui-lib";
import React, { useState } from "react";
import { IBrainDump } from "@/contexts/DumpContext";
import { TouchableOpacity } from "react-native-gesture-handler";
import { TouchableOpacity, TouchableWithoutFeedback } from "react-native-gesture-handler";
import MoveBrainDump from "./MoveBrainDump";
const BrainDumpItem = (props: { item: IBrainDump }) => {
@ -9,7 +9,7 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
return (
<View>
<TouchableOpacity onPress={() => setIsVisible(true)}>
<TouchableWithoutFeedback onPress={() => setIsVisible(true)}>
<View
backgroundColor="white"
marginV-5
@ -19,9 +19,9 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
<Text text70BL marginB-8>
{props.item.title}
</Text>
<Text text80>{props.item.description}</Text>
<Text text70>{props.item.description}</Text>
</View>
</TouchableOpacity>
</TouchableWithoutFeedback>
<MoveBrainDump item={props.item} isVisible={isVisible} setIsVisible={setIsVisible} />
</View>
);

11
components/pages/calendar/AddEventDialog.tsx
View File

@ -22,16 +22,19 @@ export const AddEventDialog = () => {
position: "absolute",
bottom: 20,
right: 20,
height: 60,
width: 60,
height: 40,
borderRadius: 30,
backgroundColor: "#fff",
backgroundColor: "#fd1775",
alignItems: 'center',
justifyContent: 'center',
}}
centerV
color="white"
enableShadow
iconSource={() => <MaterialIcons name="add" size={30}/>}
iconSource={() => <MaterialIcons name="add" size={22} color={'white'}/>}
onPress={() => setShow(true)}
label="New"
text60R
/>
<Dialog

74
components/pages/calendar/CalendarViewSwitch.tsx Normal file
View File

@ -0,0 +1,74 @@
import { View, Text, Button, TouchableOpacity } from "react-native-ui-lib";
import React, { useState } from "react";
import { MaterialIcons } from "@expo/vector-icons";
import { StyleSheet } from "react-native";
const CalendarViewSwitch = () => {
const [show, setShow] = useState<boolean>(false);
const [calView, setCalView] = useState<boolean>(false);
return (
<View
row
spread
style={{
position: "absolute",
bottom: 20,
left: 20,
borderRadius: 30,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center",
// iOS shadow
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
// Android shadow (elevation)
elevation: 6,
}}
centerV
>
<TouchableOpacity onPress={() => setCalView(true)}>
<View
centerV
centerH
height={40}
paddingH-15
style={calView ? styles.switchBtnActive : styles.switchBtn}
>
<Text color={calView ? "white" : "#a1a1a1"} text70R>
Family View
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => setCalView(false)}>
<View
centerV
centerH
height={40}
paddingH-15
style={!calView ? styles.switchBtnActive : styles.switchBtn}
>
<Text color={!calView ? "white" : "#a1a1a1"} text70R>
My View
</Text>
</View>
</TouchableOpacity>
</View>
);
};
export default CalendarViewSwitch;
const styles = StyleSheet.create({
switchBtnActive: {
backgroundColor: "#a1a1a1",
borderRadius: 50,
},
switchBtn: {
backgroundColor: "white",
borderRadius: 50,
},
});

173
components/pages/grocery/GroceryItem.tsx
View File

@ -4,6 +4,7 @@ import {
Button,
TouchableOpacity,
Checkbox,
ButtonSize,
} from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
@ -15,9 +16,8 @@ import {
useGroceryContext,
} from "@/contexts/GroceryContext";
import EditGroceryFrequency from "./EditGroceryFrequency";
import { TextInput } from "react-native";
import EditGroceryItem from "./EditGroceryItem";
import { TouchableWithoutFeedback } from "react-native-gesture-handler";
import { StyleSheet } from "react-native";
const GroceryItem = ({
item,
@ -32,7 +32,9 @@ const GroceryItem = ({
const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
const [newTitle, setNewTitle] = useState<string>("");
const [category, setCategory] = useState<GroceryCategory>(GroceryCategory.None);
const [category, setCategory] = useState<GroceryCategory>(
GroceryCategory.None
);
const handleTitleChange = (newTitle: string) => {
updateGroceryItem(item.id, { title: newTitle });
@ -47,93 +49,124 @@ const GroceryItem = ({
}, []);
return (
<ListItem
<View
key={item.id}
style={{ borderRadius: 50, marginVertical: 5, height: 55 }}
style={{ borderRadius: 18, marginVertical: 5 }}
backgroundColor="white"
centerV
padding-0
onPress={() => {
setOpenFreqEdit(true);
}}
>
<EditGroceryFrequency
visible={openFreqEdit}
key={item.id}
item={item}
onClose={() => {
setOpenFreqEdit(false);
<ListItem
onPress={() => {
setOpenFreqEdit(true);
}}
/>
<ListItem.Part left containerStyle={{ flex: 1, paddingStart: 20 }}>
{!isEditingTitle ? (
<View>
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
<Text text70BL>{item.title}</Text>
</TouchableOpacity>
</View>
) : (
>
<EditGroceryFrequency
visible={openFreqEdit}
key={item.id}
item={item}
onClose={() => {
setOpenFreqEdit(false);
}}
/>
<ListItem.Part left containerStyle={{ flex: 1, paddingStart: 20 }}>
{!isEditingTitle ? (
<View>
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
<Text text70BL>{item.title}</Text>
</TouchableOpacity>
</View>
) : (
<EditGroceryItem
editGrocery={{
id: item.id,
title: newTitle,
setTitle: setNewTitle,
category:category,
category: category,
updateCategory: updateGroceryItem,
closeEdit: setIsEditingTitle,
setCategory: setCategory,
}}
/>
)}
</ListItem.Part>
<ListItem.Part right containerStyle={{ paddingEnd: 20 }}>
{!item.approved ? (
<View row>
<Button
padding-0
children={
<AntDesign
name="check"
size={24}
style={{
color: item.approved ? "green" : "#aaaaaa",
}}
/>
)}
</ListItem.Part>
<ListItem.Part right containerStyle={{ paddingEnd: item.approved ? 20 : 5 }}>
{!item.approved ? (
<View row >
<Button
padding-0
children={
<AntDesign
name="check"
size={24}
style={{
color: item.approved ? "green" : "#aaaaaa",
}}
/>
}
backgroundColor="transparent"
size={Button.sizes.small}
onPress={() => {
handleItemApproved(item.id, { approved: true });
}}
/>
<Button
padding-0
children={
<AntDesign
name="close"
size={24}
style={{ color: item.approved ? "#aaaaaa" : "red" }}
/>
}
backgroundColor="transparent"
size={Button.sizes.small}
onPress={() => {
handleItemApproved(item.id, { approved: false });
}}
/>
</View>
) : (
<Checkbox
value={item.bought}
style={styles.checkbox}
onValueChange={() =>
updateGroceryItem(item.id, { bought: !item.bought })
}
backgroundColor="transparent"
size={Button.sizes.small}
onPress={() => {
handleItemApproved(item.id, { approved: true });
}}
/>
<Button
padding-0
children={
<AntDesign
name="close"
size={24}
style={{ color: item.approved ? "#aaaaaa" : "red" }}
/>
}
backgroundColor="transparent"
size={Button.sizes.small}
onPress={() => {
handleItemApproved(item.id, { approved: false });
}}
/>
)}
</ListItem.Part>
</ListItem>
{!item.approved && (
<View>
<View centerH>
<View height={1} backgroundColor="#e7e7e7" width={"90%"} />
</View>
) : (
<Checkbox
value={item.bought}
color={"#f58749"}
onValueChange={() =>
updateGroceryItem(item.id, { bought: !item.bought })
}
/>
)}
</ListItem.Part>
</ListItem>
<View paddingL-10 paddingV-15 flexS row centerV>
<View
style={{
width: 25,
aspectRatio: 1,
borderRadius: 50,
backgroundColor: "red",
marginHorizontal: 10,
}}
></View>
<Text color="#858585" text70>Requested by Austin</Text>
</View>
</View>
)}
</View>
);
};
const styles = StyleSheet.create({
checkbox:{
borderRadius: 50,
borderWidth: 1,
color: "#bfbfbf",
borderColor: "#bfbfbf",
}
})
export default GroceryItem;

2
components/pages/grocery/GroceryList.tsx
View File

@ -83,7 +83,7 @@ const GroceryList = () => {
message={"Welcome to your grocery list"}
isWelcome={false}
>
<View row spread>
<View row spread gap-5>
<View
backgroundColor="#e2eed8"
padding-8

25
components/shared/DrawerButton.tsx
View File

@ -1,5 +1,7 @@
import React from "react";
import { StyleSheet } from "react-native";
import { Button, View, Text } from "react-native-ui-lib";
interface IDrawerButtonProps {
bgColor: string;
color: string;
@ -7,6 +9,7 @@ interface IDrawerButtonProps {
icon: React.ReactNode;
title: string;
}
const DrawerButton = (props: IDrawerButtonProps) => {
return (
<Button
@ -18,9 +21,7 @@ const DrawerButton = (props: IDrawerButtonProps) => {
iconSource={() => (
<View
backgroundColor={props.bgColor}
width={60}
height={60}
style={{ borderRadius: 50 }}
style={styles.iconContainer}
centerV
centerH
>
@ -34,18 +35,16 @@ const DrawerButton = (props: IDrawerButtonProps) => {
flexDirection: "column",
justifyContent: "space-between",
paddingVertical: 15,
// Shadow for iOS
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 10, // This will create a blurry shadow
// Shadow for Android
elevation: 1,
}}
></Button>
);
};
export default DrawerButton;
const styles = StyleSheet.create({
iconContainer: {
width: '70%',
aspectRatio: 1,
borderRadius: 50,
},
});

2
components/shared/HeaderTemplate.tsx
View File

@ -10,7 +10,7 @@ const HeaderTemplate = (props: {
}) => {
const { user, profileData } = useAuthContext();
return (
<View row centerV padding-25>
<View row centerV marginV-15>
<View
backgroundColor="pink"
height={65}

6
contexts/DumpContext.tsx
View File

@ -28,19 +28,19 @@ export const BrainDumpProvider: React.FC<{ children: React.ReactNode }> = ({
id: 0,
title: "Favorite Weekend Activities",
description:
"What's something fun we can do together this weekend? Maybe a new game, a picnic, or trying out a family recipe. Everyone share one idea!",
"What's something fun we can do together this weekend? Maybe a new game, a picnic?",
},
{
id: 1,
title: "What’s For Dinner",
description:
"What’s one meal you’d love to have for dinner this week? Let’s get creative with new ideas we haven’t tried yet.",
"What’s one meal you’d love to have for dinner this week?",
},
{
id: 2,
title: "The Best Thing About Today",
description:
"What was the highlight of your day? Let’s each take a moment to share something good that happened, no matter how small.",
"What was the highlight of your day? Let’s each take a moment to share something!",
},
{
id: 3,