github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: analytics tab enhancement (#4615)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-05-28 11:53:57 +05:30 committed by GitHub
parent 3f18e2fabc
commit e47ab573a7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 29 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/components/analytics/project-modal/main-content.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { Fragment } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { Tab } from "@headlessui/react"; import { Tab } from "@headlessui/react";
import { ICycle, IModule, IProject } from "@plane/types"; import { ICycle, IModule, IProject } from "@plane/types";
@ -20,20 +20,21 @@ export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props
return ( return (
<Tab.Group as={React.Fragment}> <Tab.Group as={React.Fragment}>
<Tab.List as="div" className="flex space-x-2 border-b border-custom-border-200 px-0 md:px-5 py-0 md:py-3"> <Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200 px-0 md:px-3">
{ANALYTICS_TABS.map((tab) => ( {ANALYTICS_TABS.map((tab) => (
<Tab <Tab key={tab.key} as={Fragment}>
key={tab.key} {({ selected }) => (
className={({ selected }) => <button
`rounded-0 w-full md:w-max md:rounded-3xl border-b md:border border-custom-border-200 focus:outline-none px-0 md:px-4 py-2 text-xs hover:bg-custom-background-80 ${ className={`text-sm group relative flex items-center gap-1 h-[50px] px-3 cursor-pointer transition-all font-medium outline-none ${
selected selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
? "border-custom-primary-100 text-custom-primary-100 md:bg-custom-background-80 md:text-custom-text-200 md:border-custom-border-200" }`}
: "border-transparent"
}`
}
onClick={() => {}}
> >
{tab.title} {tab.title}
<div
className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
/>
</button>
)}
</Tab> </Tab>
))} ))}
</Tab.List> </Tab.List>

26
web/pages/[workspaceSlug]/analytics.tsx
View File

@ -34,23 +34,21 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
{workspaceProjectIds && workspaceProjectIds.length > 0 ? ( {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
<div className="flex h-full flex-col overflow-hidden bg-custom-background-100"> <div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
<Tab.Group as={Fragment} defaultIndex={analytics_tab === "custom" ? 1 : 0}> <Tab.Group as={Fragment} defaultIndex={analytics_tab === "custom" ? 1 : 0}>
<Tab.List as="div" className="flex space-x-2 border-b border-custom-border-200 px-0 py-0 md:px-5 md:py-3"> <Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200 px-0 md:px-5">
{ANALYTICS_TABS.map((tab) => ( {ANALYTICS_TABS.map((tab) => (
<Tab <Tab key={tab.key} as={Fragment}>
key={tab.key} {({ selected }) => (
className={({ selected }) => <button
`rounded-0 w-full border-b border-custom-border-200 px-0 py-2 text-xs hover:bg-custom-background-80 focus:outline-none md:w-max md:rounded-3xl md:border md:px-4 ${ className={`text-sm group relative flex items-center gap-1 h-[50px] px-3 cursor-pointer transition-all font-medium outline-none ${
selected selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
? "border-custom-primary-100 text-custom-primary-100 md:border-custom-border-200 md:bg-custom-background-80 md:text-custom-text-200" }`}
: "border-transparent"
}`
}
onClick={() => {
router.query.analytics_tab = tab.key;
router.push(router);
}}
> >
{tab.title} {tab.title}
<div
className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
/>
</button>
)}
</Tab> </Tab>
))} ))}
</Tab.List> </Tab.List>