SILVER
/
NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: новый канон внешних контуров и стандартизация свойств

This commit is contained in:
DCCONSTRUCTIONS 2026-04-20 11:40:20 +03:00
parent 8fed697531
commit b1f980bc7f
14 changed files with 403 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
HDESIGN-CODE.md
View File

@ -43,8 +43,15 @@
- Все кнопки без жёсткого outline.
- Primary button:
- фон: акцентный или `active_card_rgb`
- текст: чёрный или очень тёмный, если фон светлый
- текст: всегда чёрный или очень тёмный, если фон светлый
- hover: более светлая версия того же цвета
- правило распространяется на все filled CTA:
- `Добавить`
- `Сохранить`
- `Обновить`
- `Принять`
- `Добавить запрос`
- любые акцентные toolbar-кнопки
- Save/update button:
- если это зафиксированный green CTA, текст должен быть контрастным и читаемым
- hover осветляет текущий тон, а не уходит в синий
@ -93,6 +100,70 @@
- светлый фон, если основной экран тёмный
- Search shell внутри popup должен использовать тот же стиль, что и сам popup.
### Reusable классы
- Accent CTA:
- `.nodedc-external-primary-button`
- текст внутри всегда `#0b1117`
- Secondary action:
- `.nodedc-external-action-button`
- Secondary icon action:
- `.nodedc-external-icon-button`
- Readonly property/control surface:
- `.nodedc-external-readonly-value`
- `.nodedc-modal-field`
- External property rows:
- `.nodedc-external-property-row`
- `.nodedc-external-property-label`
- `.nodedc-external-property-value`
- `.nodedc-external-property-control`
- Dropdown shell:
- `.nodedc-dropdown-surface`
- `.nodedc-dropdown-search`
- `.nodedc-dropdown-option`
- External contour card/shell:
- `.nodedc-external-card`
- `.nodedc-external-section`
- `.nodedc-external-content-shell`
### Anchor snippets
```tsx
<Button className="nodedc-external-primary-button">...</Button>
```
```tsx
<IconButton className="nodedc-external-icon-button" ... />
```
```tsx
<div className="nodedc-external-readonly-value">
<SomeIcon className="h-3.5 w-3.5 text-tertiary" />
<span className="text-12 font-medium text-primary">...</span>
</div>
```
```tsx
<div className="nodedc-external-property-row">
<div className="nodedc-external-property-label">
<SomeIcon className="h-4 w-4 flex-shrink-0" />
<span>Label</span>
</div>
<div className="nodedc-external-property-value">
<SomeValue />
</div>
</div>
```
```tsx
<Dropdown
button={
<div className="nodedc-external-property-control text-[13px] font-medium">
<SomeIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
<span className="text-primary">Value</span>
</div>
}
/>
```
## Drag and drop
- Drag overlay использует акцентный контур.
- Delete dropzone:
@ -109,3 +180,6 @@
- Сначала используется существующий shared-класс или shared-component.
- Если shared-слоя нет, создаётся reusable-класс/компонент и уже через него приводятся все похожие места.
- Цель: не точечная покраска одного окна, а единый системный канон.
- Если блок визуально расходится со стилем системы, не добавлять поверх временную wrapper-заплатку. Нужно либо перевести блок на shared-компонент, либо переверстать локальную структуру под shared-классы.
- Для экранов со вкладками/переключателями нельзя оставлять flash старой верстки. Перед refetch нужно очищать stale store-data и показывать loading shell.
- Если карточки или списки разных модулей должны быть одинаковыми по канону, нельзя лечить это внешней обёрткой. Нужно менять сам внутренний layout item-компонента.

30
plane-src/apps/web/ce/components/projects/external-contours/empty-state.tsx Normal file
View File

@ -0,0 +1,30 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
import { Layers3 } from "lucide-react";
import { cn } from "@plane/utils";
type Props = {
title: string;
description?: string;
compact?: boolean;
};
export const ExternalContoursEmptyState = (props: Props) => {
const { title, description, compact = false } = props;
return (
<div className={cn("nodedc-external-empty-state", compact ? "max-w-md" : "max-w-sm")}>
<div className={cn("nodedc-external-empty-media", compact ? "size-22" : "size-24")}>
<Layers3 className={cn(compact ? "size-10" : "size-11")} strokeWidth={1.6} />
</div>
<div className="space-y-2">
<h3 className={cn("font-semibold text-primary", compact ? "text-16" : "text-18")}>{title}</h3>
{description && <p className="mx-auto max-w-sm text-13 leading-6 text-secondary">{description}</p>}
</div>
</div>
);
};

7
plane-src/apps/web/ce/components/projects/external-contours/header.tsx
View File

@ -69,7 +69,12 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
modalState={createIssueModal}
handleModalClose={() => setCreateIssueModal(false)}
/>
<Button variant="primary" size="lg" onClick={() => setCreateIssueModal(true)}>
<Button
variant="primary"
size="lg"
onClick={() => setCreateIssueModal(true)}
className="nodedc-external-primary-button min-w-[10.75rem]"
>
{t("external_contours_page.header.add_request")}
</Button>
</div>

27
plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
View File

@ -8,7 +8,6 @@ import { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react";
import { PanelLeft } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { Badge } from "@plane/propel/badge";
import { Button } from "@plane/propel/button";
import { IconButton } from "@plane/propel/icon-button";
import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
@ -150,8 +149,22 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
<div className="flex items-center gap-2">
<div className="flex items-center gap-x-2">
<IconButton variant="secondary" size="lg" icon={ChevronUpIcon} aria-label="Previous request" onClick={() => redirectToRelativeIssue("prev")} />
<IconButton variant="secondary" size="lg" icon={ChevronDownIcon} aria-label="Next request" onClick={() => redirectToRelativeIssue("next")} />
<IconButton
variant="secondary"
size="lg"
icon={ChevronUpIcon}
aria-label="Previous request"
onClick={() => redirectToRelativeIssue("prev")}
className="nodedc-external-icon-button"
/>
<IconButton
variant="secondary"
size="lg"
icon={ChevronDownIcon}
aria-label="Next request"
onClick={() => redirectToRelativeIssue("next")}
className="nodedc-external-icon-button"
/>
</div>
<div className="flex flex-wrap items-center gap-2">
@ -169,7 +182,9 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
)}
{isSourceAccepted && (
<Badge variant="neutral">{t("external_contours_page.traceability.source_decision_accepted")}</Badge>
<div className="nodedc-external-readonly-value min-h-[2.75rem] w-auto px-4 text-13 font-medium">
{t("external_contours_page.traceability.source_decision_accepted")}
</div>
)}
<Button
@ -211,7 +226,9 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
</>
)}
{isSourceAccepted && (
<Badge variant="neutral">{t("external_contours_page.traceability.source_decision_accepted")}</Badge>
<div className="nodedc-external-readonly-value min-h-10 w-auto px-4 text-13 font-medium">
{t("external_contours_page.traceability.source_decision_accepted")}
</div>
)}
{hasDirectTargetAccess && (
<ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">

51
plane-src/apps/web/ce/components/projects/external-contours/issue-properties.tsx
View File

@ -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>

45
plane-src/apps/web/ce/components/projects/external-contours/issue-root.tsx
View File

@ -8,7 +8,9 @@ import type { Dispatch, SetStateAction } from "react";
import { useEffect, useMemo, useRef } from "react";
import { observer } from "mobx-react";
import type { EditorRefApi } from "@plane/editor";
import { ISSUE_PRIORITIES } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { LabelPropertyIcon, PriorityIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TExternalContourRequest, TIssue, TNameDescriptionLoader } from "@plane/types";
import { EFileAssetType } from "@plane/types";
@ -80,6 +82,7 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
const mirroredAttachments = contourRequest.mirrored_attachments ?? [];
const mirroredComments = contourRequest.mirrored_comments ?? [];
const targetProjectId = issue.project_id || sourceProjectId;
const priorityDetails = ISSUE_PRIORITIES.find((priority) => priority.key === issue.priority);
const { duplicateIssues } = useDebouncedDuplicateIssues(
workspaceSlug,
@ -194,24 +197,38 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
<div className="nodedc-external-section flex flex-col gap-3 px-4 py-4">
<div className="text-body-sm-medium">{t("external_contours_page.properties.section_title")}</div>
<div className="flex flex-col gap-3 text-13 text-secondary">
<div className="nodedc-external-panel flex flex-wrap items-center gap-2 px-4 py-3">
<span className="text-tertiary">{t("priority")}</span>
<span className="rounded-full bg-white/6 px-3 py-1.5 text-12 font-medium text-primary">
{issue.priority || t("none")}
<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>
<div className="nodedc-external-property-value flex-1 text-[13px] font-medium">
<PriorityIcon priority={issue.priority ?? "none"} className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
<span className="text-12 font-medium text-primary">
{issue.priority && issue.priority !== "none"
? priorityDetails?.title ?? t(issue.priority)
: t("external_contours_page.form.priority")}
</span>
</div>
<div className="nodedc-external-panel flex flex-wrap items-center gap-2 px-4 py-3">
<span className="text-tertiary">{t("labels")}</span>
{issue.label_details?.length ? (
issue.label_details.map((label) => (
<div key={label.id} className="flex items-center gap-1 rounded-full bg-white/6 px-3 py-1.5 text-11">
<span className="h-2 w-2 rounded-full" style={{ backgroundColor: label.color }} />
<span>{label.name}</span>
</div>
))
<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>
{issue.label_details?.length ? (
<div className="nodedc-external-property-value flex-1 flex-wrap text-[13px] font-medium">
<LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
<span className="text-12 font-medium text-primary">
{issue.label_details.map((label) => label.name).join(", ")}
</span>
</div>
) : (
<span>{t("common.none")}</span>
<div className="nodedc-external-property-value flex-1 text-[13px] font-medium">
<LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
<span className="text-12 font-medium text-tertiary">{t("labels")}</span>
</div>
)}
</div>
</div>

16
plane-src/apps/web/ce/components/projects/external-contours/list-item.tsx
View File

@ -11,7 +11,7 @@ import { useSearchParams } from "next/navigation";
import { useTranslation } from "@plane/i18n";
import { PriorityIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import { Avatar, Row } from "@plane/ui";
import { Avatar } from "@plane/ui";
import { cn, renderFormattedDate } from "@plane/utils";
import { usePlatformOS } from "@/hooks/use-platform-os";
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
@ -55,10 +55,10 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
href={`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${request.id}`}
onClick={(e) => handleIssueRedirection(e, request.id)}
>
<Row
<div
data-active={selectedInboxIssueId === request.id}
className={cn(
"nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-5 px-5 py-5 transition-all hover:bg-white/5",
"nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-6 px-6 py-5 transition-all hover:bg-white/5",
{ "ring-1 ring-accent-primary/35": selectedInboxIssueId === request.id }
)}
>
@ -90,8 +90,8 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
</div>
</div>
<div className="flex flex-1 items-center justify-center px-2">
<h3 className="line-clamp-3 w-full max-w-[18rem] text-center text-16 leading-7 font-semibold text-primary">
<div className="flex flex-1 items-center justify-center px-3">
<h3 className="line-clamp-3 w-full max-w-[18.5rem] text-center text-16 leading-7 font-semibold text-primary">
{issue.name}
</h3>
</div>
@ -127,12 +127,14 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
{issue.priority && issue.priority !== "none" && (
<Tooltip tooltipHeading={t("priority")} tooltipContent={`${issue.priority ?? t("none")}`}>
<PriorityIcon priority={issue.priority} withContainer className="h-3 w-3" />
<div className="flex size-8 items-center justify-center rounded-full bg-white/6 text-secondary">
<PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
</div>
</Tooltip>
)}
</div>
</div>
</Row>
</div>
</Link>
);
});

17
plane-src/apps/web/ce/components/projects/external-contours/root.tsx
View File

@ -8,14 +8,13 @@ import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { PanelLeft } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { EmptyStateCompact } from "@plane/propel/empty-state";
import { TransferIcon } from "@plane/propel/icons";
import type { TInboxIssueCurrentTab } from "@plane/types";
import { EInboxIssueCurrentTab } from "@plane/types";
import { cn } from "@plane/utils";
import { InboxLayoutLoader } from "@/components/ui/loader/layouts/project-inbox/inbox-layout-loader";
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
import { ExternalContoursContentRoot } from "./content-root";
import { ExternalContoursEmptyState } from "./empty-state";
import { ExternalContoursSidebar } from "./sidebar";
type TExternalContoursRoot = {
@ -46,14 +45,6 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [workspaceSlug, projectId, navigationTab]);
if (loader === "init-loading") {
return (
<div className="relative flex h-full w-full flex-col">
<InboxLayoutLoader />
</div>
);
}
if (error && error?.status === "init-error") {
return (
<div className="relative flex h-full w-full flex-col items-center justify-center gap-3">
@ -99,10 +90,10 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
) : (
<div className="flex h-full w-full items-center justify-center px-8">
<div className="nodedc-external-section max-w-xl px-8 py-10">
<EmptyStateCompact
assetKey="intake"
<ExternalContoursEmptyState
compact
title={t("external_contours_page.empty_state.detail_title")}
assetClassName="size-20"
description={t("external_contours_page.empty_state.detail_description")}
/>
</div>
</div>

42
plane-src/apps/web/ce/components/projects/external-contours/sidebar.tsx
View File

@ -7,12 +7,12 @@
import { useEffect } from "react";
import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import { EmptyStateDetailed } from "@plane/propel/empty-state";
import type { TInboxIssueCurrentTab } from "@plane/types";
import { EInboxIssueCurrentTab } from "@plane/types";
import { cn } from "@plane/utils";
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
import { useAppRouter } from "@/hooks/use-app-router";
import { ExternalContoursEmptyState } from "./empty-state";
import { ExternalContoursListItem } from "./list-item";
type Props = {
@ -31,7 +31,8 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
const router = useAppRouter();
const { t } = useTranslation();
const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds } = useProjectExternalContours();
const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader } =
useProjectExternalContours();
useEffect(() => {
if (workspaceSlug && projectId && filteredRequestIds.length > 0 && inboxIssueId === undefined) {
@ -79,8 +80,14 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
</div>
<div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto px-4 pb-4">
{filteredRequestIds.length > 0 ? (
<div className="space-y-3">
{loader === "init-loading" ? (
<div className="flex h-full items-center justify-center">
<div className="nodedc-external-empty px-6 py-6 text-13 text-secondary">
{t("loading")}...
</div>
</div>
) : filteredRequestIds.length > 0 ? (
<div className="space-y-4">
{filteredRequestIds.map((requestId) => (
<ExternalContoursListItem
key={requestId}
@ -93,23 +100,18 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
</div>
) : (
<div className="flex h-full w-full items-center justify-center">
{currentTab === EInboxIssueCurrentTab.OPEN ? (
<EmptyStateDetailed
assetKey="inbox"
title={t("external_contours_page.empty_state.open_title")}
description={t("external_contours_page.empty_state.open_description")}
assetClassName="size-20"
rootClassName="px-page-x"
/>
) : (
<EmptyStateDetailed
assetKey="inbox"
title={t("external_contours_page.empty_state.closed_title")}
description={t("external_contours_page.empty_state.closed_description")}
assetClassName="size-20"
className="px-10"
/>
<ExternalContoursEmptyState
title={t(
currentTab === EInboxIssueCurrentTab.OPEN
? "external_contours_page.empty_state.open_title"
: "external_contours_page.empty_state.closed_title"
)}
description={t(
currentTab === EInboxIssueCurrentTab.OPEN
? "external_contours_page.empty_state.open_description"
: "external_contours_page.empty_state.closed_description"
)}
/>
</div>
)}
</div>

49
plane-src/apps/web/core/components/issues/select/base.tsx
View File

@ -26,6 +26,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
export type TWorkItemLabelSelectBaseProps = {
buttonClassName?: string;
buttonContainerClassName?: string;
rootClassName?: string;
createLabelEnabled?: boolean;
disabled?: boolean;
getLabelById: (labelId: string) => IIssueLabel | null;
@ -43,6 +44,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
const {
buttonClassName,
buttonContainerClassName,
rootClassName,
createLabelEnabled = false,
disabled = false,
getLabelById,
@ -157,7 +159,9 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
tabIndex={tabIndex}
value={value}
onChange={dropdownOnChange}
className="relative h-full flex-shrink-0"
className={cn("relative h-full flex-shrink-0", rootClassName, {
"w-full": rootClassName?.includes("w-full") || buttonContainerClassName?.includes("w-full"),
})}
multiple
disabled={disabled}
onKeyDown={handleKeyDown}
@ -181,7 +185,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
) : (
<div
className={cn(
"flex h-full items-center justify-center gap-1 rounded-sm border-[0.5px] border-strong px-2 py-1 text-11 hover:bg-layer-1",
"nodedc-modal-field flex h-full items-center justify-center gap-1 px-3 py-1.5 text-11",
buttonClassName
)}
>
@ -192,26 +196,26 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
</button>
{isDropdownOpen && (
<Combobox.Options className="fixed z-10" static>
<Combobox.Options className="fixed z-[120]" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
className="nodedc-dropdown-surface my-1 w-64 min-w-[16rem]"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
<div className="nodedc-dropdown-search">
<SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
<Combobox.Input
as="input"
ref={inputRef}
className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
className="w-full bg-transparent py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
onChange={(event) => setQuery(event.target.value)}
placeholder={t("search")}
displayValue={(assigned: any) => assigned?.name}
onKeyDown={searchInputKeyDown}
/>
</div>
<div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
<div className="mt-2 max-h-56 space-y-1 overflow-y-auto">
{labelsList && filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((label) => {
@ -223,14 +227,16 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
<Combobox.Option
key={label.id}
className={({ active }) =>
`${
active ? "bg-layer-1" : ""
} group flex w-full cursor-pointer items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`
cn(
"nodedc-dropdown-option cursor-pointer",
active ? "bg-white/6" : "",
"text-secondary"
)
}
value={label.id}
>
{({ selected }) => (
<div className="flex w-full justify-between gap-2 rounded-sm">
<div className="flex w-full justify-between gap-2 rounded-[0.9rem]">
<div className="flex items-center justify-start gap-2 truncate">
<span
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
@ -240,7 +246,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
/>
<span className="truncate">{label.name}</span>
</div>
<div className="flex shrink-0 items-center justify-center rounded-sm p-1">
<div className="flex shrink-0 items-center justify-center rounded-[0.9rem] p-1">
<CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
</div>
</div>
@ -249,7 +255,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
);
} else
return (
<div key={label.id} className="border-y border-subtle">
<div key={label.id} className="overflow-hidden rounded-[1rem] bg-white/[0.02]">
<div className="flex items-center gap-2 truncate p-2 text-primary select-none">
<Component className="h-3 w-3" /> {label.name}
</div>
@ -258,14 +264,16 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
<Combobox.Option
key={child.id}
className={({ active }) =>
`${
active ? "bg-layer-1" : ""
} group flex min-w-[14rem] cursor-pointer items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`
cn(
"nodedc-dropdown-option min-w-[14rem] cursor-pointer",
active ? "bg-white/6" : "",
"text-secondary"
)
}
value={child.id}
>
{({ selected }) => (
<div className="flex w-full justify-between gap-2 rounded-sm">
<div className="flex w-full justify-between gap-2 rounded-[0.9rem]">
<div className="flex items-center justify-start gap-2">
<span
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
@ -275,7 +283,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
/>
<span>{child.name}</span>
</div>
<div className="flex items-center justify-center rounded-sm p-1">
<div className="flex items-center justify-center rounded-[0.9rem] p-1">
<CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
</div>
</div>
@ -294,12 +302,11 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
if (!query.length) return;
handleAddLabel(query);
}}
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`}
>
{/* TODO: translate here */}
{query.length ? (
<>
+ Add <span className="text-primary">&quot;{query}&quot;</span> to labels
+ {t("label.create.type")} <span className="text-primary">&quot;{query}&quot;</span>
</>
) : (
t("label.create.type")

4
plane-src/apps/web/core/store/external-contours/project-external-contours.store.ts
View File

@ -178,6 +178,10 @@ export class ProjectExternalContoursStore implements IProjectExternalContoursSto
};
handleCurrentTab = async (workspaceSlug: string, projectId: string, tab: TInboxIssueCurrentTab) => {
this.requestIds = [];
this.requests = {};
this.error = undefined;
this.loader = "init-loading";
this.currentTab = tab;
await this.fetchRequests(workspaceSlug, projectId, tab);
};

129
plane-src/apps/web/styles/globals.css
View File

@ -1108,6 +1108,25 @@
background: rgba(255, 255, 255, 0.1) !important;
}
.nodedc-external-icon-button {
display: grid !important;
place-items: center !important;
width: 2.5rem !important;
min-width: 2.5rem !important;
height: 2.5rem !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.06) !important;
color: var(--text-color-primary) !important;
padding: 0 !important;
}
.nodedc-external-icon-button:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.nodedc-external-primary-button {
min-height: 2.75rem;
border: 0 !important;
@ -1116,11 +1135,119 @@
border-radius: 1.25rem !important;
background: rgb(var(--nodedc-card-active-rgb)) !important;
color: #0b1117 !important;
padding-inline: 1.2rem !important;
padding-inline: 1.45rem !important;
font-weight: 600 !important;
}
.nodedc-external-primary-button:hover {
background: color-mix(in srgb, rgb(var(--nodedc-card-active-rgb)) 82%, white) !important;
color: #0b1117 !important;
}
.nodedc-external-empty-state {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
text-align: center;
}
.nodedc-external-empty-media {
display: grid;
place-items: center;
width: 6.25rem;
height: 6.25rem;
border-radius: 1.85rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.014) 100%),
rgba(255, 255, 255, 0.028);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.018);
}
.nodedc-external-empty-media svg {
color: rgba(255, 255, 255, 0.22);
}
.nodedc-external-readonly-value {
display: flex;
min-height: 2.5rem;
width: 100%;
align-items: center;
gap: 0.6rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.25rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
rgba(255, 255, 255, 0.028) !important;
color: var(--text-color-primary) !important;
padding: 0.65rem 0.95rem !important;
}
.nodedc-external-property-row {
display: flex;
align-items: center;
gap: 1rem;
border: 0 !important;
outline: none !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
border-radius: 1.6rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
rgba(255, 255, 255, 0.028) !important;
-webkit-backdrop-filter: blur(22px);
backdrop-filter: blur(22px);
padding: 0.9rem 1rem !important;
}
.nodedc-external-property-label {
display: flex;
width: 40%;
flex-shrink: 0;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem !important;
color: var(--text-color-tertiary) !important;
}
.nodedc-external-property-value {
display: flex;
min-height: 2.5rem;
width: 100%;
align-items: center;
gap: 0.6rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--text-color-primary) !important;
padding: 0.1rem 0.1rem !important;
}
.nodedc-external-property-control {
display: flex;
min-height: 2.5rem;
width: 100%;
align-items: center;
gap: 0.6rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--text-color-primary) !important;
padding: 0.1rem 0.1rem !important;
transition: background 160ms ease;
}
.nodedc-external-property-control:hover,
.nodedc-external-property-control:focus-within {
background: rgba(255, 255, 255, 0.04) !important;
}
}

1
plane-src/packages/i18n/src/locales/en/translations.ts
View File

@ -306,6 +306,7 @@ export default {
description:
"This screen will host the cross-project request form, the sent requests list, and status pills for each routed task.",
detail_title: "Select a request to view its details.",
detail_description: "Choose a request from the left to open its details, properties, and routing context.",
open_title: "No open requests",
open_description: "Sent and active cross-contour requests will appear here.",
closed_title: "No closed requests",

1
plane-src/packages/i18n/src/locales/ru/translations.ts
View File

@ -463,6 +463,7 @@ export default {
description:
"Здесь появятся форма отправки задачи в другой проект, список отправленных запросов и их статусные маркеры.",
detail_title: "Выберите запрос для просмотра деталей.",
detail_description: "Выберите запрос слева, чтобы открыть детали, свойства и маршрут межконтурной работы.",
open_title: "Нет открытых запросов",
open_description: "Здесь будут отображаться отправленные и активные межконтурные запросы.",
closed_title: "Нет закрытых запросов",