binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1254] chore: list layout indentation enhancement and cycle list page ui improvement (#4435)

Browse source 
* chore: list layout indentation improvement

* chore: cycle list layout spacing and date ui updated

* chore: platform ui improvement
This commit is contained in:
Anmol Singh Bhatia 2024-05-11 14:47:56 +05:30 • committed by GitHub
parent 2ef3c06da0
commit 3355be9c9c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 58 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web/components/cycles/board/cycles-board-card.tsx
View file

@ -2,7 +2,7 @@ import { FC, MouseEvent, useRef } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { useRouter } from "next/router";
import { Info } from "lucide-react";
import { CalendarCheck2, CalendarClock, Info, MoveRight } from "lucide-react";
// types
import type { TCycleGroups } from "@plane/types";
// ui
@ -226,12 +226,14 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
</Tooltip>
<div className="flex items-center justify-between">
{isDateValid ? (
<span className="text-xs text-custom-text-300">
{renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
</span>
) : (
<span className="text-xs text-custom-text-400">No due date</span>
{isDateValid && (
<div className="h-6 flex items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs px-2 cursor-default">
<CalendarClock className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{renderFormattedDate(startDate)}</span>
<MoveRight className="h-3 w-3 flex-shrink-0" />
<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{renderFormattedDate(endDate)}</span>
</div>
)}
</div>
</div>

14
web/components/cycles/list/cycle-list-item-action.tsx
View file

@ -1,6 +1,6 @@
import React, { FC, MouseEvent } from "react";
import { observer } from "mobx-react";
import { User2 } from "lucide-react";
import { CalendarCheck2, CalendarClock, MoveRight, User2 } from "lucide-react";
// types
import { ICycle, TCycleGroups } from "@plane/types";
// ui
@ -106,9 +106,15 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
return (
<>
<div className="text-xs text-custom-text-300 flex-shrink-0">
{renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
</div>
{renderDate && (
<div className="h-6 flex items-center gap-1.5 text-custom-text-300 border-[0.5px] border-custom-border-300 rounded text-xs px-2 cursor-default">
<CalendarClock className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{renderFormattedDate(startDate)}</span>
<MoveRight className="h-3 w-3 flex-shrink-0" />
<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{renderFormattedDate(endDate)}</span>
</div>
)}
{currentCycle && (
<div

2
web/components/cycles/list/cycles-list-item.tsx
View file

@ -94,7 +94,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
) : progress === 100 ? (
<Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
) : (
<span className="text-xs text-custom-text-300">{`${progress}%`}</span>
<span className="text-[9px] text-custom-text-300">{`${progress}%`}</span>
)}
</CircularProgressIndicator>
}