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

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

@ -1,21 +1,40 @@
import React, { useRef, useState } from "react";
import {LayoutChangeEvent} from "react-native";
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 {
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"]
[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() {
@ -25,7 +44,7 @@ export default function Screen() {
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
const calendarContainerRef = useRef(null);
const { data: events} = useGetEvents()
const { data: events } = useGetEvents();
const onLayout = (event: LayoutChangeEvent) => {
const { height } = event.nativeEvent.layout;
@ -49,21 +68,22 @@ export default function Screen() {
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>
<HeaderTemplate
message={"Let's get your week started!"}
isWelcome={true}
/>
<View
style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }}
ref={calendarContainerRef}
onLayout={onLayout}
>
<View style={{
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
@ -72,14 +92,10 @@ export default function Screen() {
borderRadius: 20,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: "#f9f9f9",
backgroundColor: "white",
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"}
@ -94,32 +110,50 @@ export default function Screen() {
<View>
<SegmentedControl
segments={[
{label: "D"},
{label: "W"},
{label: "M"}
]}
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}
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)
console.log(newDate);
setSelectedDate(newDate);
}}
/>
)}
</View>
<CalendarViewSwitch />
<AddEventDialog />
</View>
);
}
const styles = StyleSheet.create({
segmentslblStyle: {
fontSize: 14,
},
calHeader: {
borderWidth: 0
},
});

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

@ -13,9 +13,16 @@ const BrainDumpPage = () => {
return (
<View>
<ScrollView>
<HeaderTemplate message={"Welcome to your notes!"} isWelcome={false} />
<ScrollView
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
>
<View marginH-25>
<HeaderTemplate
message={"Welcome to your notes!"}
isWelcome={false}
/>
<View>
<View style={styles.searchField} centerV>
<TextField
value={searchText}
@ -35,6 +42,7 @@ const BrainDumpPage = () => {
</View>
<DumpList searchText={searchText} />
</View>
</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,
},
});

47
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,12 +49,14 @@ 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
>
<ListItem
onPress={() => {
setOpenFreqEdit(true);
}}
@ -86,7 +90,7 @@ const GroceryItem = ({
/>
)}
</ListItem.Part>
<ListItem.Part right containerStyle={{ paddingEnd: 20 }}>
<ListItem.Part right containerStyle={{ paddingEnd: item.approved ? 20 : 5 }}>
{!item.approved ? (
<View row >
<Button
@ -125,7 +129,7 @@ const GroceryItem = ({
) : (
<Checkbox
value={item.bought}
color={"#f58749"}
style={styles.checkbox}
onValueChange={() =>
updateGroceryItem(item.id, { bought: !item.bought })
}
@ -133,7 +137,36 @@ const GroceryItem = ({
)}
</ListItem.Part>
</ListItem>
{!item.approved && (
<View>
<View centerH>
<View height={1} backgroundColor="#e7e7e7" width={"90%"} />
</View>
<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,