Skip to content

Commit

Permalink
minor calendar cleanup (#3219)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pablodanswer
pablodanswer authored Nov 23, 2024
1 parent 62a4aa1 commit 5dfafc8
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 19 deletions.
34 changes: 23 additions & 11 deletions web/src/components/search/filtering/Filters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ import { Calendar } from "@/components/ui/calendar";
import { Popover, PopoverTrigger } from "@/components/ui/popover";
import { PopoverContent } from "@radix-ui/react-popover";
import { CalendarIcon } from "lucide-react";
import { buildDateString, getTimeAgoString } from "@/lib/dateUtils";
import {
buildDateString,
getDateRangeString,
getTimeAgoString,
} from "@/lib/dateUtils";

const SectionTitle = ({ children }: { children: string }) => (
<div className="font-bold text-xs mt-2 flex">{children}</div>
Expand Down Expand Up @@ -116,7 +120,9 @@ export function SourceSelector({
<div className="cursor-pointer">
<SectionTitle>Time Range</SectionTitle>
<p className="text-sm text-default mt-2">
{getTimeAgoString(timeRange?.from!) || "Select a time range"}
{timeRange?.from
? getDateRangeString(timeRange.from, timeRange.to)
: "Since"}
</p>
</div>
</PopoverTrigger>
Expand Down Expand Up @@ -463,7 +469,7 @@ export function HorizontalSourceSelector({
<div
className={`
border
max-w-36
max-w-64
border-border
rounded-lg
bg-background
Expand All @@ -486,22 +492,28 @@ export function HorizontalSourceSelector({
>
<CalendarIcon className="h-4 w-4" />

{timeRange?.from ? getTimeAgoString(timeRange.from) : "Since"}
{timeRange?.from
? getDateRangeString(timeRange.from, timeRange.to)
: "Since"}
</div>
</PopoverTrigger>
<PopoverContent
className="bg-background border-border border rounded-md z-[200] p-0"
align="start"
>
<Calendar
mode="single"
selected={timeRange ? new Date(timeRange.from) : undefined}
onSelect={(date) => {
const selectedDate = date || new Date();
const today = new Date();
mode="range"
selected={
timeRange
? { from: new Date(timeRange.from), to: new Date(timeRange.to) }
: undefined
}
onSelect={(daterange) => {
const initialDate = daterange?.from || new Date();
const endDate = daterange?.to || new Date();
setTimeRange({
from: selectedDate > today ? today : selectedDate,
to: today,
from: initialDate,
to: endDate,
selectValue: timeRange?.selectValue || "",
});
}}
Expand Down
19 changes: 11 additions & 8 deletions web/src/components/ui/calendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,24 +34,27 @@ function Calendar({
table: "w-full border-collapse space-y-1",
head_row: "flex",
head_cell:
"text-neutral-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-neutral-400",
"text-calendar-text-muted rounded-md w-9 font-normal text-[0.8rem] dark:text-calendar-text-muted-dark",
row: "flex w-full mt-2",
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected])]:bg-neutral-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50 dark:[&:has([aria-selected])]:bg-neutral-800",
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-calendar-bg-outside-selected [&:has([aria-selected])]:bg-calendar-bg-selected first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-calendar-bg-outside-selected-dark dark:[&:has([aria-selected])]:bg-calendar-bg-selected-dark",
day: cn(
buttonVariants({ variant: "ghost" }),
"h-9 w-9 p-0 font-normal aria-selected:opacity-100"
),
day_range_end: "day-range-end !text-neutral-200",
day_range_end:
"day-range-end bg-calendar-range-end !text-calendar-text-end",
day_selected:
"bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
"bg text-calendar-text-selected hover:bg-calendar-bg-selected hover:text-calendar-text-selected dark:bg-calendar-bg-selected-dark dark:text-calendar-text-selected-dark dark:hover:bg-calendar-bg-selected-dark dark:hover:text-calendar-text-selected-dark ",
day_today:
"bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
"bg-calendar-today-bg text-calendar-today-text dark:bg-calendar-today-bg-dark dark:text-calendar-today-text-dark",
day_outside:
"day-outside text-neutral-500 opacity-50 aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 aria-selected:opacity-30 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400",
day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
"day-outside text-calendar-text-muted opacity-50 aria-selected:bg-calendar-bg-outside-selected aria-selected:text-calendar-text-muted aria-selected:opacity-30 dark:text-calendar-text-muted-dark dark:aria-selected:bg-calendar-bg-outside-selected-dark dark:aria-selected:text-calendar-text-muted-dark",
day_disabled:
"text-calendar-text-muted opacity-50 dark:text-calendar-text-muted-dark",
day_range_middle:
"aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50",
"aria-selected:bg-calendar-range-middle aria-selected:text-calendar-text-in-range dark:aria-selected:bg-calendar-range-middle-dark dark:aria-selected:text-calendar-text-in-range-dark",
day_hidden: "invisible",
day_range_start: "bg-white text-text-900",
...classNames,
}}
components={{
Expand Down
23 changes: 23 additions & 0 deletions web/src/lib/dateUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,29 @@ export const buildDateString = (date: Date | null) => {
)} days ago`
: "Select a time range";
};

export const getDateRangeString = (from: Date | null, to: Date | null) => {
if (!from || !to) return null;

const now = new Date();
const fromDiffMs = now.getTime() - from.getTime();
const toDiffMs = now.getTime() - to.getTime();

const fromDiffDays = Math.floor(fromDiffMs / (1000 * 60 * 60 * 24));
const toDiffDays = Math.floor(toDiffMs / (1000 * 60 * 60 * 24));

const fromString = getTimeAgoString(from);
const toString = getTimeAgoString(to);

if (fromString === toString) return fromString;

if (toDiffDays === 0) {
return `${fromString} - Today`;
}

return `${fromString} - ${toString}`;
};

export const getTimeAgoString = (date: Date | null) => {
if (!date) return null;

Expand Down
29 changes: 29 additions & 0 deletions web/tailwind-themes/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,35 @@ module.exports = {
"text-800": "var(--text-800)",
"text-900": "var(--text-900)",
"text-950": "var(--text-950)",
// Light mode
// Light mode
"calendar-bg-selected": "var(--background-800)",
"calendar-bg-outside-selected": "var(--background-200)",
"calendar-text-muted": "var(--text-400)",
"calendar-text-selected": "var(--white)",
"calendar-range-middle": "var(--neutral-800)",
"calendar-range-end": "var(--white)",
"calendar-text-in-range": "var(--text-200)",
"calendar-text-end": "var(--text-900)",

// Dark mode
"calendar-bg-outside-selected-dark": "var(--background-700)",
"calendar-text-muted-dark": "var(--text-500)",
"calendar-text-selected-dark": "var(--white)",
"calendar-range-middle-dark": "var(--background-800)",
"calendar-text-in-range-dark": "var(--text-200)",

// Hover effects
"calendar-hover-bg": "var(--background-200)",
"calendar-hover-bg-dark": "var(--background-700)",
"calendar-hover-text": "var(--text-800)",
"calendar-hover-text-dark": "var(--text-200)",

// Today's date
"calendar-today-bg": "var(--background-100)",
"calendar-today-bg-dark": "var(--background-800)",
"calendar-today-text": "var(--text-800)",
"calendar-today-text-dark": "var(--text-200)",

"user-text": "var(--text-800)",

Expand Down

0 comments on commit 5dfafc8

Please sign in to comment.