ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-08-25 13:49: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

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}