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

style: ui fix (#393)

Browse Source 
* style: truncate

* fix: truncate text added to cycle and module card

* fix: progress percentage

* feat: cycle card tooltip

* fix: sidebar fix
This commit is contained in:
Anmol Singh Bhatia 2023-03-07 20:48:19 +05:30 committed by GitHub
parent 88fca3c67c
commit cf94b92be2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,6 +131,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
const isStartValid = new Date(`${cycle?.start_date}`) <= new Date(); const isStartValid = new Date(`${cycle?.start_date}`) <= new Date();
const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`); const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`);
const progressPercentage = cycleIssues
? Math.round((groupedIssues.completed.length / cycleIssues?.length) * 100)
: null;
return ( return (
<> <>
<DeleteCycleModal isOpen={cycleDeleteModal} setIsOpen={setCycleDeleteModal} data={cycle} /> <DeleteCycleModal isOpen={cycleDeleteModal} setIsOpen={setCycleDeleteModal} data={cycle} />
@ -329,12 +332,9 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
<div className="flex w-full items-center justify-between gap-2 "> <div className="flex w-full items-center justify-between gap-2 ">
<div className="flex items-center justify-start gap-2 text-sm"> <div className="flex items-center justify-start gap-2 text-sm">
<span className="font-medium text-gray-500">Progress</span> <span className="font-medium text-gray-500">Progress</span>
{!open ? ( {!open && cycleIssues && progressPercentage ? (
<span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]"> <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
{Math.round( {progressPercentage ? `${progressPercentage}%` : ""}
(groupedIssues.completed.length / cycleIssues?.length) * 100
)}
%
</span> </span>
) : ( ) : (
"" ""

11
apps/app/components/cycles/single-cycle-card.tsx
View File

@ -11,7 +11,7 @@ import cyclesService from "services/cycles.service";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomMenu, LinearProgressIndicator } from "components/ui"; import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
// icons // icons
import { CalendarDaysIcon } from "@heroicons/react/20/solid"; import { CalendarDaysIcon } from "@heroicons/react/20/solid";
@ -235,7 +235,11 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
<div className="flex items-center justify-between gap-1"> <div className="flex items-center justify-between gap-1">
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}> <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<a className="w-full"> <a className="w-full">
<h3 className="text-xl font-semibold leading-5 ">{truncateText(cycle.name,75)}</h3> <Tooltip tooltipContent={cycle.name} position="top-left">
<h3 className="text-xl font-semibold leading-5 ">
{truncateText(cycle.name, 75)}
</h3>
</Tooltip>
</a> </a>
</Link> </Link>
{cycle.is_favorite ? ( {cycle.is_favorite ? (
@ -275,8 +279,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
alt={cycle.owned_by.first_name} alt={cycle.owned_by.first_name}
/> />
) : ( ) : (
<span <span className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-800 capitalize text-white">
className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-800 capitalize text-white">
{cycle.owned_by.first_name.charAt(0)} {cycle.owned_by.first_name.charAt(0)}
</span> </span>
)} )}

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

@ -187,6 +187,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
const isStartValid = new Date(`${module?.start_date}`) <= new Date(); const isStartValid = new Date(`${module?.start_date}`) <= new Date();
const isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`); const isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`);
const progressPercentage = moduleIssues
? Math.round((groupedIssues.completed.length / moduleIssues?.length) * 100)
: null;
return ( return (
<> <>
<LinkModal <LinkModal
@ -415,12 +419,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
<div className="flex w-full items-center justify-between gap-2 "> <div className="flex w-full items-center justify-between gap-2 ">
<div className="flex items-center justify-start gap-2 text-sm"> <div className="flex items-center justify-start gap-2 text-sm">
<span className="font-medium text-gray-500">Progress</span> <span className="font-medium text-gray-500">Progress</span>
{!open && moduleIssues ? ( {!open && moduleIssues && progressPercentage ? (
<span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]"> <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
{Math.round( {progressPercentage ? `${progressPercentage}%` : ""}
(groupedIssues.completed.length / moduleIssues?.length) * 100
)}
%
</span> </span>
) : ( ) : (
"" ""