Spaces:
Running
Running
gpt-engineer-app[bot]
commited on
Commit
·
13b400b
1
Parent(s):
7cc30be
Improve calendar filter UI
Browse filesMake default year view more obvious and add a "deselect all" button to the filter bar.
- src/pages/Calendar.tsx +28 -9
src/pages/Calendar.tsx
CHANGED
@@ -356,6 +356,25 @@ const CalendarPage = () => {
|
|
356 |
const renderLegend = () => {
|
357 |
return (
|
358 |
<div className="flex flex-wrap gap-3 justify-center items-center mb-4">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
359 |
<TooltipProvider>
|
360 |
<Tooltip>
|
361 |
<TooltipTrigger asChild>
|
@@ -380,7 +399,7 @@ const CalendarPage = () => {
|
|
380 |
</Tooltip>
|
381 |
</TooltipProvider>
|
382 |
|
383 |
-
{
|
384 |
<TooltipProvider key={tag}>
|
385 |
<Tooltip>
|
386 |
<TooltipTrigger asChild>
|
@@ -413,18 +432,18 @@ const CalendarPage = () => {
|
|
413 |
</Tooltip>
|
414 |
</TooltipProvider>
|
415 |
))}
|
416 |
-
|
417 |
-
{
|
418 |
<button
|
419 |
onClick={() => {
|
420 |
-
setSelectedCategories(new Set(
|
421 |
-
setShowDeadlines(true);
|
422 |
}}
|
423 |
-
className="text-sm text-
|
424 |
-
px-3 py-1.5 rounded-lg border border-
|
425 |
-
|
426 |
>
|
427 |
-
|
|
|
428 |
</button>
|
429 |
)}
|
430 |
</div>
|
|
|
356 |
const renderLegend = () => {
|
357 |
return (
|
358 |
<div className="flex flex-wrap gap-3 justify-center items-center mb-4">
|
359 |
+
<div className="flex items-center gap-2 bg-white p-1 rounded-lg shadow-sm">
|
360 |
+
<Toggle
|
361 |
+
pressed={!isYearView}
|
362 |
+
onPressedChange={() => setIsYearView(false)}
|
363 |
+
variant="outline"
|
364 |
+
className="border-2 data-[state=on]:border-primary"
|
365 |
+
>
|
366 |
+
Month View
|
367 |
+
</Toggle>
|
368 |
+
<Toggle
|
369 |
+
pressed={isYearView}
|
370 |
+
onPressedChange={() => setIsYearView(true)}
|
371 |
+
variant="outline"
|
372 |
+
className="border-2 data-[state=on]:bg-primary data-[state=on]:text-white data-[state=on]:border-primary"
|
373 |
+
>
|
374 |
+
Year View
|
375 |
+
</Toggle>
|
376 |
+
</div>
|
377 |
+
|
378 |
<TooltipProvider>
|
379 |
<Tooltip>
|
380 |
<TooltipTrigger asChild>
|
|
|
399 |
</Tooltip>
|
400 |
</TooltipProvider>
|
401 |
|
402 |
+
{categories.map(([tag, color]) => (
|
403 |
<TooltipProvider key={tag}>
|
404 |
<Tooltip>
|
405 |
<TooltipTrigger asChild>
|
|
|
432 |
</Tooltip>
|
433 |
</TooltipProvider>
|
434 |
))}
|
435 |
+
|
436 |
+
{selectedCategories.size > 0 && (
|
437 |
<button
|
438 |
onClick={() => {
|
439 |
+
setSelectedCategories(new Set());
|
|
|
440 |
}}
|
441 |
+
className="text-sm text-red-600 bg-red-50 hover:bg-red-100 hover:text-red-700
|
442 |
+
px-3 py-1.5 rounded-lg border border-red-200
|
443 |
+
transition-colors flex items-center gap-2"
|
444 |
>
|
445 |
+
<X className="h-4 w-4" />
|
446 |
+
Deselect All Colors
|
447 |
</button>
|
448 |
)}
|
449 |
</div>
|