UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: новый канон внешних контуров и стандартизация свойств
This commit is contained in:
@@ -5,6 +5,8 @@
|
||||
*/
|
||||
|
||||
import { observer } from "mobx-react";
|
||||
import { SignalHigh } from "lucide-react";
|
||||
import { ISSUE_PRIORITIES } from "@plane/constants";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { LabelPropertyIcon, PriorityPropertyIcon } from "@plane/propel/icons";
|
||||
import type { TIssue } from "@plane/types";
|
||||
@@ -25,17 +27,19 @@ type Props = {
|
||||
export const ExternalContoursIssueContentProperties = observer(function ExternalContoursIssueContentProperties(props: Props) {
|
||||
const { workspaceSlug, targetProjectId, issue, issueOperations, isEditable } = props;
|
||||
const { t } = useTranslation();
|
||||
const selectedLabels = issue.label_details ?? [];
|
||||
const priorityDetails = ISSUE_PRIORITIES.find((priority) => priority.key === issue?.priority);
|
||||
|
||||
if (!issue || !issue?.id) return <></>;
|
||||
|
||||
return (
|
||||
<div className="nodedc-external-section flex w-full flex-col px-4 py-4">
|
||||
<div className="flex w-full flex-col">
|
||||
<div className="w-full overflow-y-auto">
|
||||
<h5 className="mb-2 text-body-sm-medium">{t("external_contours_page.properties.section_title")}</h5>
|
||||
<div className={`${!isEditable ? "opacity-60" : ""}`}>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="nodedc-external-panel flex min-h-12 items-center gap-3 px-4 py-3">
|
||||
<div className="flex w-2/5 flex-shrink-0 items-center gap-1.5 text-13 text-tertiary">
|
||||
<div className="nodedc-external-property-row">
|
||||
<div className="nodedc-external-property-label">
|
||||
<PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>{t("priority")}</span>
|
||||
</div>
|
||||
@@ -43,24 +47,51 @@ export const ExternalContoursIssueContentProperties = observer(function External
|
||||
value={issue?.priority}
|
||||
onChange={(val) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { priority: val })}
|
||||
disabled={!isEditable}
|
||||
buttonVariant="border-with-text"
|
||||
className="w-3/5 flex-grow rounded-full px-3 hover:bg-white/6"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName="h-auto w-min whitespace-nowrap"
|
||||
buttonVariant="transparent-without-text"
|
||||
className="flex-1"
|
||||
buttonContainerClassName="h-full w-full"
|
||||
button={
|
||||
<div className="nodedc-external-property-control text-[13px] font-medium">
|
||||
{issue.priority && issue.priority !== "none" ? (
|
||||
<PriorityPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
|
||||
) : (
|
||||
<SignalHigh className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
|
||||
)}
|
||||
<span className={issue.priority && issue.priority !== "none" ? "text-primary" : "text-tertiary"}>
|
||||
{issue.priority && issue.priority !== "none"
|
||||
? priorityDetails?.title
|
||||
: t("external_contours_page.form.priority")}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="nodedc-external-panel flex min-h-12 items-center gap-3 px-4 py-3">
|
||||
<div className="flex w-2/5 flex-shrink-0 items-center gap-1.5 text-13 text-tertiary">
|
||||
<div className="nodedc-external-property-row">
|
||||
<div className="nodedc-external-property-label">
|
||||
<LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>{t("labels")}</span>
|
||||
</div>
|
||||
<div className="h-full min-h-8 w-3/5 flex-grow pt-1">
|
||||
<div className="h-full min-h-8 flex-1">
|
||||
<IssueLabelSelect
|
||||
value={issue.label_ids || []}
|
||||
onChange={(labelIds) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { label_ids: labelIds })}
|
||||
projectId={targetProjectId}
|
||||
disabled={!isEditable}
|
||||
rootClassName="w-full"
|
||||
buttonContainerClassName="h-full w-full"
|
||||
label={
|
||||
<div className="nodedc-external-property-control text-[13px] font-medium">
|
||||
<LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
|
||||
<span className={selectedLabels.length > 0 ? "truncate text-primary" : "truncate text-tertiary"}>
|
||||
{selectedLabels.length > 0
|
||||
? selectedLabels.length === 1
|
||||
? selectedLabels[0]?.name
|
||||
: `${selectedLabels.length} ${t("labels").toLocaleLowerCase()}`
|
||||
: t("labels")}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user