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

fix: ui changes (#306)

Browse Source 
* fix: sidebar date range

* fix: renamed key with id in filters

* fix: replace progress bar

* chore: react progress bar package removed

* fix: progress chart legends position

* fix: progress chart legends alignment fix
This commit is contained in:
Anmol Singh Bhatia 2023-02-20 19:00:40 +05:30 committed by GitHub
parent e5934e0b07
commit 202096500e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 190 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/components/core/issues-view-filter.tsx
View File

@ -197,7 +197,7 @@ export const IssuesFilterView: React.FC<Props> = ({ issues }) => {
}`} }`}
onClick={() => setProperties(key as keyof Properties)} onClick={() => setProperties(key as keyof Properties)}
> >
{replaceUnderscoreIfSnakeCase(key)} {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
</button> </button>
); );
})} })}

20
apps/app/components/core/sidebar/progress-chart.tsx
View File

@ -46,6 +46,16 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
const ChartData = getChartData(); const ChartData = getChartData();
return ( return (
<div className="relative h-[200px] w-full "> <div className="relative h-[200px] w-full ">
<div className="flex justify-start items-start gap-4 text-xs">
<div className="flex justify-center items-center gap-1">
<span className="h-2 w-2 bg-green-600 rounded-full" />
<span>Ideal</span>
</div>
<div className="flex justify-center items-center gap-1">
<span className="h-2 w-2 bg-[#8884d8] rounded-full" />
<span>Current</span>
</div>
</div>
<div className="flex items-center justify-center h-full w-full absolute -left-8 py-3 text-xs"> <div className="flex items-center justify-center h-full w-full absolute -left-8 py-3 text-xs">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<AreaChart <AreaChart
@ -80,16 +90,6 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
</AreaChart> </AreaChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
<div className="z-10 flex flex-col absolute top-2 right-2 justify-center items-start gap-1 text-xs">
<div className="flex justify-center items-center gap-2">
<span className="h-2 w-2 bg-green-600" />
<span>Ideal</span>
</div>
<div className="flex justify-center items-center gap-2">
<span className="h-2 w-2 bg-[#8884d8]" />
<span>Current</span>
</div>
</div>
</div> </div>
); );
}; };

4
apps/app/components/core/sidebar/single-progress-stats.tsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import { CircularProgressbar } from "react-circular-progressbar"; import { ProgressBar } from "components/ui";
type TSingleProgressStatsProps = { type TSingleProgressStatsProps = {
title: any; title: any;
@ -18,7 +18,7 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
<div className="flex items-center justify-end w-1/2 gap-1 px-2"> <div className="flex items-center justify-end w-1/2 gap-1 px-2">
<div className="flex h-5 justify-center items-center gap-1 "> <div className="flex h-5 justify-center items-center gap-1 ">
<span className="h-4 w-4 "> <span className="h-4 w-4 ">
<CircularProgressbar value={completed} maxValue={total} strokeWidth={10} /> <ProgressBar value={completed} maxValue={total} />
</span> </span>
<span className="w-8 text-right">{Math.floor((completed / total) * 100)}%</span> <span className="w-8 text-right">{Math.floor((completed / total) * 100)}%</span>
</div> </div>

148
apps/app/components/cycles/sidebar.tsx
View File

@ -7,9 +7,6 @@ import { mutate } from "swr";
// react-hook-form // react-hook-form
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// react-circular-progressbar
import { CircularProgressbar } from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";
import { Popover, Transition } from "@headlessui/react"; import { Popover, Transition } from "@headlessui/react";
import DatePicker from "react-datepicker"; import DatePicker from "react-datepicker";
// icons // icons
@ -22,7 +19,7 @@ import {
UserIcon, UserIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
// ui // ui
import { CustomSelect, Loader } from "components/ui"; import { CustomSelect, Loader, ProgressBar } from "components/ui";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// services // services
@ -148,61 +145,93 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
)} )}
/> />
</div> </div>
<Popover className="flex justify-center items-center relative rounded-lg"> <div className="flex justify-center items-center gap-2 rounded-md border bg-transparent h-full p-2 px-4 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none">
{({ open }) => ( <Popover className="flex justify-center items-center relative rounded-lg">
<> {({ open }) => (
<Popover.Button <>
className={`group flex items-center gap-2 rounded-md border bg-transparent h-full w-full p-2 px-4 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${ <Popover.Button
open ? "bg-gray-100" : "" className={`group flex items-center ${open ? "bg-gray-100" : ""}`}
}`} >
> <CalendarDaysIcon className="h-4 w-4 flex-shrink-0 mr-2" />
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0" /> <span>
<span> {renderShortNumericDateFormat(`${cycle.start_date}`)
{renderShortNumericDateFormat(`${cycle.start_date}`) ? renderShortNumericDateFormat(`${cycle.start_date}`)
? renderShortNumericDateFormat(`${cycle.start_date}`) : "N/A"}
: "N/A"}{" "} </span>
-{" "} </Popover.Button>
{renderShortNumericDateFormat(`${cycle.end_date}`)
? renderShortNumericDateFormat(`${cycle.end_date}`)
: "N/A"}
</span>
</Popover.Button>
<Transition <Transition
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-200" enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1" enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150" leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute top-10 left-0 z-20 transform overflow-hidden"> <Popover.Panel className="absolute top-10 -left-10 z-20 transform overflow-hidden">
<DatePicker <DatePicker
selected={startDateRange} selected={startDateRange}
onChange={(dates) => { onChange={(date) => {
const [start, end] = dates; submitChanges({
submitChanges({ start_date: renderDateFormat(date),
start_date: renderDateFormat(start), });
end_date: renderDateFormat(end), setStartDateRange(date);
}); }}
if (setStartDateRange) { selectsStart
setStartDateRange(start); startDate={startDateRange}
} endDate={endDateRange}
if (setEndDateRange) { inline
setEndDateRange(end); />
} </Popover.Panel>
}} </Transition>
startDate={startDateRange} </>
endDate={endDateRange} )}
selectsRange </Popover>
inline <Popover className="flex justify-center items-center relative rounded-lg">
/> {({ open }) => (
</Popover.Panel> <>
</Transition> <Popover.Button
</> className={`group flex items-center ${open ? "bg-gray-100" : ""}`}
)} >
</Popover> <span>
-{" "}
{renderShortNumericDateFormat(`${cycle.end_date}`)
? renderShortNumericDateFormat(`${cycle.end_date}`)
: "N/A"}
</span>
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute top-10 -right-20 z-20 transform overflow-hidden">
<DatePicker
selected={endDateRange}
onChange={(date) => {
submitChanges({
end_date: renderDateFormat(date),
});
setEndDateRange(date);
}}
selectsEnd
startDate={startDateRange}
endDate={endDateRange}
minDate={startDateRange}
inline
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
</div> </div>
<div className="flex items-center justify-between pb-3"> <div className="flex items-center justify-between pb-3">
<h4 className="text-sm font-medium">{cycle.name}</h4> <h4 className="text-sm font-medium">{cycle.name}</h4>
@ -278,10 +307,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cy
<div className="flex items-center gap-2 sm:basis-1/2"> <div className="flex items-center gap-2 sm:basis-1/2">
<div className="grid flex-shrink-0 place-items-center"> <div className="grid flex-shrink-0 place-items-center">
<span className="h-4 w-4"> <span className="h-4 w-4">
<CircularProgressbar <ProgressBar
value={groupedIssues.completed.length} value={groupedIssues.completed.length}
maxValue={cycleIssues?.length} maxValue={cycleIssues?.length}
strokeWidth={10}
/> />
</span> </span>
</div> </div>

150
apps/app/components/modules/sidebar.tsx
View File

@ -16,8 +16,6 @@ import {
Squares2X2Icon, Squares2X2Icon,
TrashIcon, TrashIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
// progress-bar
import { CircularProgressbar } from "react-circular-progressbar";
import { Popover, Transition } from "@headlessui/react"; import { Popover, Transition } from "@headlessui/react";
import DatePicker from "react-datepicker"; import DatePicker from "react-datepicker";
@ -31,12 +29,11 @@ import { LinkModal, SidebarProgressStats } from "components/core";
import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules"; import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
import ProgressChart from "components/core/sidebar/progress-chart"; import ProgressChart from "components/core/sidebar/progress-chart";
import "react-circular-progressbar/dist/styles.css";
// components // components
// ui // ui
import { CustomSelect, Loader } from "components/ui"; import { CustomSelect, Loader, ProgressBar } from "components/ui";
// helpers // helpers
import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper"; import { renderDateFormat, renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";
import { groupBy } from "helpers/array.helper"; import { groupBy } from "helpers/array.helper";
// types // types
@ -190,61 +187,93 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
)} )}
/> />
</div> </div>
<Popover className="flex justify-center items-center relative rounded-lg"> <div className="flex justify-center items-center gap-2 rounded-md border bg-transparent h-full p-2 px-4 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none">
{({ open }) => ( <Popover className="flex justify-center items-center relative rounded-lg">
<> {({ open }) => (
<Popover.Button <>
className={`group flex items-center gap-2 rounded-md border bg-transparent h-full w-full p-2 px-4 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${ <Popover.Button
open ? "bg-gray-100" : "" className={`group flex items-center ${open ? "bg-gray-100" : ""}`}
}`} >
> <CalendarDaysIcon className="h-4 w-4 flex-shrink-0 mr-2" />
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0" /> <span>
<span> {renderShortNumericDateFormat(`${module?.start_date}`)
{renderShortNumericDateFormat(`${module?.start_date}`) ? renderShortNumericDateFormat(`${module?.start_date}`)
? renderShortNumericDateFormat(`${module?.start_date}`) : "N/A"}
: "N/A"}{" "} </span>
-{" "} </Popover.Button>
{renderShortNumericDateFormat(`${module?.target_date}`)
? renderShortNumericDateFormat(`${module?.target_date}`)
: "N/A"}
</span>
</Popover.Button>
<Transition <Transition
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-200" enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1" enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150" leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute top-10 left-0 z-20 transform overflow-hidden"> <Popover.Panel className="absolute top-10 -left-10 z-20 transform overflow-hidden">
<DatePicker <DatePicker
selected={startDateRange} selected={startDateRange}
onChange={(dates) => { onChange={(date) => {
const [start, end] = dates; submitChanges({
submitChanges({ start_date: renderDateFormat(date),
start_date: start?.toISOString(), });
target_date: end?.toISOString(), setStartDateRange(date);
}); }}
if (setStartDateRange) { selectsStart
setStartDateRange(start); startDate={startDateRange}
} endDate={endDateRange}
if (setEndDateRange) { inline
setEndDateRange(end); />
} </Popover.Panel>
}} </Transition>
startDate={startDateRange} </>
endDate={endDateRange} )}
selectsRange </Popover>
inline <Popover className="flex justify-center items-center relative rounded-lg">
/> {({ open }) => (
</Popover.Panel> <>
</Transition> <Popover.Button
</> className={`group flex items-center ${open ? "bg-gray-100" : ""}`}
)} >
</Popover> <span>
-{" "}
{renderShortNumericDateFormat(`${module?.target_date}`)
? renderShortNumericDateFormat(`${module?.target_date}`)
: "N/A"}
</span>
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute top-10 -right-20 z-20 transform overflow-hidden">
<DatePicker
selected={endDateRange}
onChange={(date) => {
submitChanges({
target_date: renderDateFormat(date),
});
setEndDateRange(date);
}}
selectsEnd
startDate={startDateRange}
endDate={endDateRange}
minDate={startDateRange}
inline
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
</div> </div>
<div className="flex items-center justify-between pb-3"> <div className="flex items-center justify-between pb-3">
<h4 className="text-sm font-medium">{module.name}</h4> <h4 className="text-sm font-medium">{module.name}</h4>
@ -297,10 +326,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
<div className="flex items-center gap-2 sm:basis-1/2"> <div className="flex items-center gap-2 sm:basis-1/2">
<div className="grid flex-shrink-0 place-items-center"> <div className="grid flex-shrink-0 place-items-center">
<span className="h-4 w-4"> <span className="h-4 w-4">
<CircularProgressbar <ProgressBar
value={groupedIssues.completed.length} value={groupedIssues.completed.length}
maxValue={moduleIssues?.length} maxValue={moduleIssues?.length}
strokeWidth={10}
/> />
</span> </span>
</div> </div>

1
apps/app/package.json
View File

@ -25,7 +25,6 @@
"next-pwa": "^5.6.0", "next-pwa": "^5.6.0",
"react": "18.2.0", "react": "18.2.0",
"react-beautiful-dnd": "^13.1.1", "react-beautiful-dnd": "^13.1.1",
"react-circular-progressbar": "^2.1.0",
"react-color": "^2.19.3", "react-color": "^2.19.3",
"react-datepicker": "^4.8.0", "react-datepicker": "^4.8.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",

10
pnpm-lock.yaml
View File

@ -44,7 +44,6 @@ importers:
postcss: ^8.4.14 postcss: ^8.4.14
react: 18.2.0 react: 18.2.0
react-beautiful-dnd: ^13.1.1 react-beautiful-dnd: ^13.1.1
react-circular-progressbar: ^2.1.0
react-color: ^2.19.3 react-color: ^2.19.3
react-datepicker: ^4.8.0 react-datepicker: ^4.8.0
react-dom: 18.2.0 react-dom: 18.2.0
@ -74,7 +73,6 @@ importers:
next-pwa: 5.6.0_next@12.3.2 next-pwa: 5.6.0_next@12.3.2
react: 18.2.0 react: 18.2.0
react-beautiful-dnd: 13.1.1_biqbaboplfbrettd7655fr4n2y react-beautiful-dnd: 13.1.1_biqbaboplfbrettd7655fr4n2y
react-circular-progressbar: 2.1.0_react@18.2.0
react-color: 2.19.3_react@18.2.0 react-color: 2.19.3_react@18.2.0
react-datepicker: 4.8.0_biqbaboplfbrettd7655fr4n2y react-datepicker: 4.8.0_biqbaboplfbrettd7655fr4n2y
react-dom: 18.2.0_react@18.2.0 react-dom: 18.2.0_react@18.2.0
@ -8866,14 +8864,6 @@ packages:
- react-native - react-native
dev: false dev: false
/react-circular-progressbar/2.1.0_react@18.2.0:
resolution: {integrity: sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==}
peerDependencies:
react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
dependencies:
react: 18.2.0
dev: false
/react-color/2.19.3_react@18.2.0: /react-color/2.19.3_react@18.2.0:
resolution: {integrity: sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==} resolution: {integrity: sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==}
peerDependencies: peerDependencies: