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 isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`);
const progressPercentage = cycleIssues
? Math.round((groupedIssues.completed.length / cycleIssues?.length) * 100)
: null;
return (
<>
<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 items-center justify-start gap-2 text-sm">
<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]">
{Math.round(
(groupedIssues.completed.length / cycleIssues?.length) * 100
)}
%
{progressPercentage ? `${progressPercentage}%` : ""}
</span>
) : (
""

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

@ -11,7 +11,7 @@ import cyclesService from "services/cycles.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { CustomMenu, LinearProgressIndicator } from "components/ui";
import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
import { Disclosure, Transition } from "@headlessui/react";
// icons
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">
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<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>
</Link>
{cycle.is_favorite ? (
@ -275,8 +279,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
alt={cycle.owned_by.first_name}
/>
) : (
<span
className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-800 capitalize text-white">
<span 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)}
</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 isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`);
const progressPercentage = moduleIssues
? Math.round((groupedIssues.completed.length / moduleIssues?.length) * 100)
: null;
return (
<>
<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 items-center justify-start gap-2 text-sm">
<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]">
{Math.round(
(groupedIssues.completed.length / moduleIssues?.length) * 100
)}
%
{progressPercentage ? `${progressPercentage}%` : ""}
</span>
) : (
""