thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: active cycle stats tab sticky (#1092)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-05-20 03:08:23 +05:30 committed by GitHub
parent 8cbe6c4b36
commit 1fed5f7846
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/components/cycles/active-cycle-details.tsx
View File

@ -449,7 +449,7 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
</div> </div>
</div> </div>
</div> </div>
<div className="border-brand-base h-60 overflow-y-auto p-4"> <div className="border-brand-base h-60 overflow-y-scroll">
<ActiveCycleProgressStats issues={issues ?? []} /> <ActiveCycleProgressStats issues={issues ?? []} />
</div> </div>
</div> </div>

11
apps/app/components/cycles/active-cycle-stats.tsx
View File

@ -73,7 +73,10 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ issues }) => {
} }
}} }}
> >
<Tab.List as="div" className="flex flex-wrap items-center justify-start gap-4 text-sm"> <Tab.List
as="div"
className="flex sticky top-0 z-10 bg-brand-base w-full px-4 pt-4 pb-1 flex-wrap items-center justify-start gap-4 text-sm"
>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${ `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${
@ -93,10 +96,10 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ issues }) => {
Labels Labels
</Tab> </Tab>
</Tab.List> </Tab.List>
<Tab.Panels className="flex w-full"> <Tab.Panels className="flex w-full px-4 pb-4">
<Tab.Panel <Tab.Panel
as="div" as="div"
className="flex flex-col w-full mt-2 gap-1 items-center text-brand-secondary" className="flex flex-col w-full mt-2 gap-1 overflow-y-scroll items-center text-brand-secondary"
> >
{members?.map((member, index) => { {members?.map((member, index) => {
const totalArray = issues?.filter((i) => i?.assignees?.includes(member.member.id)); const totalArray = issues?.filter((i) => i?.assignees?.includes(member.member.id));
@ -147,7 +150,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ issues }) => {
</Tab.Panel> </Tab.Panel>
<Tab.Panel <Tab.Panel
as="div" as="div"
className="flex flex-col w-full mt-2 gap-1 items-center text-brand-secondary" className="flex flex-col w-full mt-2 gap-1 overflow-y-scroll items-center text-brand-secondary"
> >
{issueLabels?.map((label, index) => { {issueLabels?.map((label, index) => {
const totalArray = issues?.filter((i) => i?.labels?.includes(label.id)); const totalArray = issues?.filter((i) => i?.labels?.includes(label.id));