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: dropdown issue label

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-03-02 13:29:55 +05:30
parent 1f1fa19432
commit 5ae1f63985
4 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/app/components/issues/select/label.tsx
View File

@ -20,6 +20,7 @@ import issuesServices from "services/issues.service";
import type { IIssueLabels } from "types"; import type { IIssueLabels } from "types";
// fetch-keys // fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys"; import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import { IssueLabelList } from "components/ui";
type Props = { type Props = {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@ -70,12 +71,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
> >
{value && value.length > 0 ? ( {value && value.length > 0 ? (
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1"> <span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
<span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}> <IssueLabelList
{Array.isArray(value) labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
? value.map((v) => issueLabels?.find((l) => l.id === v)?.name).join(", ") || length={3}
"Labels" showLength
: issueLabels?.find((l) => l.id === value)?.name || "Labels"} />
</span>
<span className=" text-[#495057]">{value.length} Labels</span> <span className=" text-[#495057]">{value.length} Labels</span>
</span> </span>
) : ( ) : (

2
apps/app/components/ui/avatar.tsx
View File

@ -18,7 +18,7 @@ type AvatarProps = {
}; };
export const Avatar: React.FC<AvatarProps> = ({ user, index }) => ( export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
<div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-2.5" : ""}`}> <div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`}>
{user && user.avatar && user.avatar !== "" ? ( {user && user.avatar && user.avatar !== "" ? (
<div <div
className={`h-5 w-5 rounded-full border-2 ${ className={`h-5 w-5 rounded-full border-2 ${

1
apps/app/components/ui/index.ts
View File

@ -15,3 +15,4 @@ export * from "./progress-bar";
export * from "./select"; export * from "./select";
export * from "./spinner"; export * from "./spinner";
export * from "./tooltip"; export * from "./tooltip";
export * from "./label-list";

32
apps/app/components/ui/label-list.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
type IssueLabelListProps = {
labels?: (string | undefined)[];
length?: number;
showLength?: boolean;
};
export const IssueLabelList: React.FC<IssueLabelListProps> = ({
labels,
length = 5,
showLength = true,
}) => (
<>
{labels && (
<>
{labels.map((color, index) => (
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
<span
className={`h-4 w-4 flex-shrink-0 rounded-full border border-white
`}
style={{
backgroundColor: color,
}}
/>
</div>
))}
{labels.length > length ? <span>+{labels.length - length}</span> : null}
</>
)}
</>
);