Skip to content

glimpse-GM-Timeline5 #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JasonMun7 wants to merge 16 commits into
base: main
Choose a base branch
from
Open

glimpse-GM-Timeline5 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
6232e91
Added Native wind and connected With Supabase
JasonMun7 Nov 15, 2023
9804dd7
Comment out supabase create client
JasonMun7 Nov 15, 2023
8184b1f
Updated dependencies
JasonMun7 Jun 26, 2024
d51d083
Updated dependencies and merge updates
JasonMun7 Jun 26, 2024
783e5ed
Added in new types file in order to help with native wind configuration
JasonMun7 Jun 26, 2024
3b8dda1
Merge branch 'main' of https://github.com/Glimpse-Dev/Glimpse-Mobile
JasonMun7 Jul 5, 2024
00186c3
Created the Timeline Component where the current day is being highlig…
JasonMun7 Jul 6, 2024
d71489e
Created the Timeline Component where the current day is being highlig…
JasonMun7 Jul 6, 2024
29789fc
Merge branch 'glimpse-GM-Timeline5' of https://github.com/Glimpse-Dev…
JasonMun7 Jul 6, 2024
8517e01
Merge branch 'glimpse-GM-Timeline5' of https://github.com/Glimpse-Dev…
JasonMun7 Jul 6, 2024
44364d0
Remove .env file from repository and add it to .gitignore
JasonMun7 Jul 6, 2024
50c8197
Completed minor changes with the timeline component including color/f…
JasonMun7 Jul 13, 2024
16ed3b1
Added final touches and changes to the timeline component
JasonMun7 Sep 20, 2024
6db6f0a
Added more styling
JasonMun7 Oct 11, 2024
4c02717
styles
JasonMun7 Oct 11, 2024
74d0eca
Style changes and color changes
JasonMun7 Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,4 @@ yarn-error.*
# The following patterns were generated by expo-cli

expo-env.d.ts
# @end expo-cli
# @end expo-cli
2 changes: 2 additions & 0 deletions app/(tabs)/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import { StyleSheet } from "react-native";

import EditScreenInfo from "../../components/EditScreenInfo";
import { Text, View } from "../../components/Themed";
import Timeline from "../../components/Timeline";

export default function TabOneScreen() {
return (
<View style={styles.container}>
<Timeline />
<Text className="text-xl font-bold text-blue-700">Tab One</Text>
<View
style={styles.separator}
Expand Down
43 changes: 43 additions & 0 deletions components/Timeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// *Imports
import React from "react";
import { Text, View } from "react-native";

// *Constants
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const today = new Date();
const todayIndex = today.getDay();

// *Start of the Timeline Function
export default function Timeline() {

@AndrewCheung360 AndrewCheung360 Nov 1, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if this is included in the component feature, but thinking ahead, we could potentially have a selected state and onSelectedStateChange being passed with the default state being that which corresponds to the current date, but when the user clicks into a previous bubble, they would select a new day which would allow them to view the previous feeds.

const firstDayOfWeek = new Date(today);
firstDayOfWeek.setDate(today.getDate() - todayIndex);

return (
<View className="flex-row space-x-3 items-center">
{days.map((day, index) => {
const dayDate = new Date(firstDayOfWeek);
dayDate.setDate(firstDayOfWeek.getDate() + index);
const dateNumber = dayDate.getDate();

return (
<View key={index} className="flex-col items-center">
<Text className="mb-2 font-semibold">{day}</Text>
<View
className={`w-10 h-10 rounded-full shadow-md shadow-gray-200 flex items-center justify-center ${
todayIndex === index ? "border border-[#5731D6]" : "bg-white"
}`}
>
<Text

@AndrewCheung360 AndrewCheung360 Nov 1, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

// *Imports
import React from "react";
import { Text, View, StyleSheet } from "react-native";
import { LinearGradient } from 'expo-linear-gradient';
import MaskedView from "@react-native-masked-view/masked-view";

// *Constants
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const today = new Date();
const todayIndex = today.getDay();

// *Start of the Timeline Function
export default function Timeline() {
  const firstDayOfWeek = new Date(today);
  firstDayOfWeek.setDate(today.getDate() - todayIndex);

  return (
    <View style={styles.container}>
      {days.map((day, index) => {
        const dayDate = new Date(firstDayOfWeek);
        dayDate.setDate(firstDayOfWeek.getDate() + index);
        const dateNumber = dayDate.getDate();

        return (
          <View key={index} style={styles.dayContainer}>
            <Text style={styles.dayText}>{day}</Text>
            <View
              style={[
                styles.circle,
                todayIndex === index && styles.activeBorder,
              ]}
            >
              {todayIndex === index ? (
                <MaskedView
                  style={styles.maskedView}
                  maskElement={
                    <View style={styles.centerText}>
                      <Text style={styles.maskedText}>{dateNumber}</Text>
                    </View>
                  }
                >
                  <LinearGradient
                    colors={["#D372E5", "#5731D6"]}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.gradient}
                  />
                </MaskedView>
              ) : (
                <Text style={styles.defaultText}>{dateNumber}</Text>
              )}
            </View>
          </View>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    // justifyContent: "space-around",
  },
  dayContainer: {
    flexDirection: "column",
    alignItems: "center",
  },
  dayText: {
    marginBottom: 8,
    fontWeight: "600",
  },
  circle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "white",
    shadowColor: "#gray",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
  },
  activeBorder: {
    borderWidth: 2,
    borderColor: "#5731D6",
  },
  maskedView: {
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  gradient: {
    width: 40,
    height: 40,
  },
  centerText: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  maskedText: {
    fontSize: 16,
    fontWeight: "bold",
    textAlign: "center",
    color: "black",
  },
  defaultText: {
    fontSize: 16,
    fontWeight: "bold",
    textAlign: "center",
    color: "black",
  },
});

I found something called MaskedView, which would allow us to have gradient text. For the border, you could probably just add a linear gradient circle behind the selected circle. Here's some example code for the timeline with just the text change. Not sure if you still want to pursue gradient colored text, but it might be worth looking into if we ever have gradient text components/UI in the future.

@AndrewCheung360 AndrewCheung360 Nov 1, 2024 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just noticed that there does seem to be some sort of thing where the circle becomes transparent for the selected day in the little code snippet I pasted, but hopefully when actually used, we could try to fix that

className={`text-center ${
todayIndex === index ? "text-[#5731D6]" : "text-black"
}`}
>
{dateNumber}
</Text>
</View>
</View>
);
})}
</View>
);
}