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

fix: bug fixes and ui improvement (#2250)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-09-25 16:15:49 +05:30 committed by GitHub
parent 0e96eddb57
commit de7a672b79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/cycles/single-cycle-list.tsx
View File

@ -149,6 +149,10 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
color: group.color,
}));
const completedIssues = cycle.completed_issues + cycle.cancelled_issues;
const percentage = cycle.total_issues > 0 ? (completedIssues / cycle.total_issues) * 100 : 0;
return (
<div>
<div className="flex flex-col text-xs hover:bg-custom-background-80">
@ -307,7 +311,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
) : cycleStatus === "completed" ? (
<span className="flex gap-1">
<RadialProgressBar progress={100} />
<span>{100} %</span>
<span>{Math.round(percentage)} %</span>
</span>
) : (
<span className="flex gap-1">

78
web/components/labels/single-label.tsx
View File

@ -1,11 +1,13 @@
import React from "react";
import React, { useRef, useState } from "react";
//hook
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// ui
import { CustomMenu } from "components/ui";
// types
import { IIssueLabels } from "types";
//icons
import { RectangleGroupIcon, PencilIcon } from "@heroicons/react/24/outline";
import { PencilIcon } from "@heroicons/react/24/outline";
import { Component, X } from "lucide-react";
type Props = {
@ -20,9 +22,14 @@ export const SingleLabel: React.FC<Props> = ({
addLabelToGroup,
editLabel,
handleLabelDelete,
}) => (
<div className="gap-2 space-y-3 divide-y divide-custom-border-200 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
<div className="group flex items-center justify-between">
}) => {
const [isMenuActive, setIsMenuActive] = useState(false);
const actionSectionRef = useRef<HTMLDivElement | null>(null);
useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
return (
<div className="relative group flex items-center justify-between gap-2 space-y-3 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
<div className="flex items-center gap-3">
<span
className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
@ -32,36 +39,41 @@ export const SingleLabel: React.FC<Props> = ({
/>
<h6 className="text-sm">{label.name}</h6>
</div>
<div className="flex items-center gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
<div className="h-4 w-4">
<CustomMenu
customButton={
<div className="h-4 w-4">
<Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
</div>
}
<div
ref={actionSectionRef}
className={`absolute -top-0.5 right-3 flex items-start gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 ${
isMenuActive ? "opacity-100" : ""
}`}
>
<CustomMenu
customButton={
<div className="h-4 w-4" onClick={() => setIsMenuActive(!isMenuActive)}>
<Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
</div>
}
>
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
<span className="flex items-center justify-start gap-2">
<Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
<span>Convert to group</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => editLabel(label)}>
<span className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" />
<span>Edit label</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
<div className="py-0.5">
<button
className="flex h-4 w-4 items-center justify-start gap-2"
onClick={handleLabelDelete}
>
<CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
<span className="flex items-center justify-start gap-2">
<Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
<span>Convert to group</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => editLabel(label)}>
<span className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" />
<span>Edit label</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
<div className="flex items-center">
<button className="flex items-center justify-start gap-2" onClick={handleLabelDelete}>
<X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
<X className="h-4 w-4 text-custom-sidebar-text-400 flex-shrink-0" />
</button>
</div>
</div>
</div>
</div>
);
);
};

2
web/pages/[workspaceSlug]/me/profile/index.tsx
View File

@ -253,6 +253,7 @@ const Profile: NextPage = () => {
placeholder="Enter your first name"
className="!px-3 !py-2 rounded-md font-medium"
autoComplete="off"
maxLength={24}
/>
</div>
@ -266,6 +267,7 @@ const Profile: NextPage = () => {
placeholder="Enter your last name"
autoComplete="off"
className="!px-3 !py-2 rounded-md font-medium"
maxLength={24}
/>
</div>

10
web/pages/[workspaceSlug]/settings/index.tsx
View File

@ -337,10 +337,10 @@ const WorkspaceSettings: NextPage = () => {
<Disclosure.Panel>
<div className="flex flex-col gap-8">
<span className="text-sm tracking-tight">
The danger zone of the project delete page is a critical area that
requires careful consideration and attention. When deleting a project, all
of the data and resources within that project will be permanently removed
and cannot be recovered.
The danger zone of the workspace delete page is a critical area that
requires careful consideration and attention. When deleting a workspace,
all of the data and resources within that workspace will be permanently
removed and cannot be recovered.
</span>
<div>
<DangerButton
@ -348,7 +348,7 @@ const WorkspaceSettings: NextPage = () => {
className="!text-sm"
outline
>
Delete my project
Delete my workspace
</DangerButton>
</div>
</div>