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: issue label ui updated (#1653)

Browse Source 
* style: issue label ui updated

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2023-07-25 12:07:16 +05:30 committed by GitHub
parent 1db9030f20
commit bc076e69f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 63 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/app/components/core/board-view/single-issue.tsx
View File

@ -23,7 +23,7 @@ import {
ViewAssigneeSelect,
ViewDueDateSelect,
ViewEstimateSelect,
ViewLabelSelect,
ViewIssueLabel,
ViewPrioritySelect,
ViewStateSelect,
} from "components/issues";
@ -365,13 +365,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
/>
)}
{properties.labels && issue.labels.length > 0 && (
<ViewLabelSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
isNotAllowed={isNotAllowed}
user={user}
selfPositioned
/>
<ViewIssueLabel issue={issue} maxRender={2} />
)}
{properties.assignee && (
<ViewAssigneeSelect

14
apps/app/components/core/list-view/single-issue.tsx
View File

@ -14,10 +14,10 @@ import {
ViewAssigneeSelect,
ViewDueDateSelect,
ViewEstimateSelect,
ViewLabelSelect,
ViewIssueLabel,
ViewPrioritySelect,
ViewStateSelect,
} from "components/issues/view-select";
} from "components/issues";
// hooks
import useIssueView from "hooks/use-issues-view";
// ui
@ -279,15 +279,7 @@ export const SingleListIssue: React.FC<Props> = ({
isNotAllowed={isNotAllowed}
/>
)}
{properties.labels && issue.labels.length > 0 && (
<ViewLabelSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
position="right"
user={user}
isNotAllowed={isNotAllowed}
/>
)}
{properties.labels && <ViewIssueLabel issue={issue} maxRender={3} />}
{properties.assignee && (
<ViewAssigneeSelect
issue={issue}

12
apps/app/components/core/spreadsheet-view/single-issue.tsx
View File

@ -10,7 +10,7 @@ import {
ViewAssigneeSelect,
ViewDueDateSelect,
ViewEstimateSelect,
ViewLabelSelect,
ViewIssueLabel,
ViewPrioritySelect,
ViewStateSelect,
} from "components/issues";
@ -311,15 +311,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
)}
{properties.labels && (
<div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
<ViewLabelSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
position="left"
tooltipPosition={tooltipPosition}
customButton
user={user}
isNotAllowed={isNotAllowed}
/>
<ViewIssueLabel issue={issue} maxRender={1} />
</div>
)}

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

@ -13,3 +13,4 @@ export * from "./my-issues-list-item";
export * from "./parent-issues-list-modal";
export * from "./sidebar";
export * from "./sub-issues-list";
export * from "./label";

55
apps/app/components/issues/label.tsx Normal file
View File

@ -0,0 +1,55 @@
import React from "react";
// components
import { Tooltip } from "components/ui";
// types
import { IIssue } from "types";
type Props = {
issue: IIssue;
maxRender?: number;
};
export const ViewIssueLabel: React.FC<Props> = ({ issue, maxRender = 1 }) => (
<>
{issue.label_details.length > 0 ? (
issue.label_details.length <= maxRender ? (
<>
{issue.label_details.map((label, index) => (
<div
key={label.id}
className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
>
<Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name}>
<div className="flex items-center gap-1.5 text-custom-text-200">
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor: label?.color ?? "#000000",
}}
/>
{label.name}
</div>
</Tooltip>
</div>
))}
</>
) : (
<div className="flex cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
<Tooltip
position="top"
tooltipHeading="Labels"
tooltipContent={issue.label_details.map((l) => l.name).join(", ")}
>
<div className="flex items-center gap-1.5 text-custom-text-200">
<span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
{`${issue.label_details.length} Labels`}
</div>
</Tooltip>
</div>
)
) : (
""
)}
</>
);