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

UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: внешний контур, auth empty state и HDESIGN update

This commit is contained in:
DCCONSTRUCTIONS 2026-04-20 13:30:04 +03:00
parent b1f980bc7f
commit 9553c81752
16 changed files with 552 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
HDESIGN-CODE.md
View File

@ -99,6 +99,42 @@
- жёсткие border-outline
- светлый фон, если основной экран тёмный
- Search shell внутри popup должен использовать тот же стиль, что и сам popup.
- Filled CTA внутри popup и модалок подчиняются тому же правилу:
- светлый акцентный фон
- тёмный/чёрный текст
- hover только в более светлый тон того же цвета
### Portal правило
- Если selector/dropdown открывается внутри:
- scroll-контейнера
- detail-pane
- карточки
- properties section
- sidebar
- sticky header
он не должен рендериться inline.
- Такой popup обязан рендериться на верхнем слое через `portal` (`document.body` или эквивалент).
- Inline popup в ограниченном контейнере считается дефектом, потому что даёт:
- клиппинг
- налезание на соседние блоки
- старую “врезанную” верстку
### Portal anchor snippet
```tsx
{isOpen &&
typeof document !== "undefined" &&
createPortal(
<Combobox.Options className="fixed z-[420]" static>
<div
data-prevent-outside-click
className="nodedc-dropdown-surface nodedc-external-popup-anchor"
>
...
</div>
</Combobox.Options>,
document.body
)}
```
### Reusable классы
- Accent CTA:
@ -167,9 +203,9 @@
## Drag and drop
- Drag overlay использует акцентный контур.
- Delete dropzone:
- без красного технического свечения
- без красного технического свечения и без red-tinted text/fill
- текст локализован
- акцентный outline допустим
- акцентный outline обязателен
## Тексты
- Пользовательский UI на русском, если экран русифицирован.
@ -183,3 +219,71 @@
- Если блок визуально расходится со стилем системы, не добавлять поверх временную wrapper-заплатку. Нужно либо перевести блок на shared-компонент, либо переверстать локальную структуру под shared-классы.
- Для экранов со вкладками/переключателями нельзя оставлять flash старой верстки. Перед refetch нужно очищать stale store-data и показывать loading shell.
- Если карточки или списки разных модулей должны быть одинаковыми по канону, нельзя лечить это внешней обёрткой. Нужно менять сам внутренний layout item-компонента.
- Для `Внешних контуров` это значит:
- список карточек правится на уровне `list-item.tsx`, а не через внешний wrapper
- gap между карточками должен совпадать с каноном `Внутреннего контура`
- актуальный gap списка на текущем каноне: `space-y-2`
- toolbar-навигация и inline actions не должны использовать старые квадратные `IconButton` остатки
- свойства `Приоритет / Метки / Статус` не должны рисовать внутренние boxed-chip артефакты
- filled CTA вроде `Добавить запрос` используют `nodedc-external-primary-button` и всегда имеют тёмный текст
- filled CTA используют чёрный/почти-чёрный текст всегда; белый текст на светлом акценте запрещён
- secondary meta-иконки в карточке списка не должны иметь отдельную серую подложку, если по канону это простой inline icon
- popup выбора `Приоритет / Метки` внутри detail view не рендерится inline в property-row; он обязан уходить в `portal`
- секции с dropdown-trigger внутри blur/glass shell обязаны иметь `overflow: visible` и `isolation: isolate`, иначе popup визуально “тонет” внутри блока
- при переключении `Открытые / Закрытые` store обязан очистить stale request list до нового fetch, чтобы пользователь не видел flash старой верстки
- карточка списка `Внешних контуров` правится на уровне `list-item.tsx`, а не внешней обёрткой:
- верхняя и нижняя оси собираются как у карточки `Внутреннего контура`
- gap между карточками совпадает с каноном `Внутреннего контура`
- empty-state иконки без декоративной подложки; если иконка визуально “плывёт”, корректируется сам SVG/media-box
### Внешние контуры: code anchors
- Header CTA:
```tsx
<Button className="nodedc-external-primary-button">...</Button>
```
- List spacing:
```tsx
<div key={routeTab} className="space-y-2">
{filteredRequestIds.map((requestId) => (
<ExternalContoursListItem key={requestId} ... />
))}
</div>
```
- Property control:
```tsx
<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">...</span>
</div>
```
- Root tab switch without stale flash:
```tsx
void handleCurrentTab(workspaceSlug, projectId, nextTab);
router.push(`...currentTab=${nextTab}`);
```
- Store-side tab reset:
```ts
this.requestIds = [];
this.requests = {};
this.loader = "init-loading";
this.currentTab = tab;
```
- Portal popup с фиксированной стратегией:
```tsx
const { styles, attributes } = usePopper(referenceElement, popperElement, {
strategy: "fixed",
placement: placement ?? "bottom-start",
});
```
- Контейнер секции с trigger:
```tsx
<div className="nodedc-external-section overflow-visible px-4 py-4">
...
</div>
```

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

@ -4,7 +4,7 @@
* See the LICENSE file for details.
*/
import { Layers3 } from "lucide-react";
import { Inbox } from "lucide-react";
import { cn } from "@plane/utils";
type Props = {
@ -19,7 +19,7 @@ export const ExternalContoursEmptyState = (props: 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} />
<Inbox className={cn("block shrink-0", compact ? "size-9" : "size-10")} strokeWidth={1.6} />
</div>
<div className="space-y-2">
<h3 className={cn("font-semibold text-primary", compact ? "text-16" : "text-18")}>{title}</h3>

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

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

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

@ -9,7 +9,6 @@ import { observer } from "mobx-react";
import { PanelLeft } from "lucide-react";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { IconButton } from "@plane/propel/icon-button";
import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
import type { TExternalContourRequest, TNameDescriptionLoader } from "@plane/types";
@ -147,24 +146,24 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-x-2">
<IconButton
variant="secondary"
size="lg"
icon={ChevronUpIcon}
<div className="nodedc-external-detail-toolbar">
<div className="nodedc-external-toolbar-cluster">
<button
type="button"
aria-label="Previous request"
onClick={() => redirectToRelativeIssue("prev")}
className="nodedc-external-icon-button"
/>
<IconButton
variant="secondary"
size="lg"
icon={ChevronDownIcon}
>
<ChevronUpIcon className="size-3.5" />
</button>
<button
type="button"
aria-label="Next request"
onClick={() => redirectToRelativeIssue("next")}
className="nodedc-external-icon-button"
/>
>
<ChevronDownIcon className="size-3.5" />
</button>
</div>
<div className="flex flex-wrap items-center gap-2">

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

@ -8,7 +8,7 @@ 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 { LabelPropertyIcon, PriorityIcon, PriorityPropertyIcon } from "@plane/propel/icons";
import type { TIssue } from "@plane/types";
import { PriorityDropdown } from "@/components/dropdowns/priority";
import { IssueLabelSelect } from "@/components/issues/select";
@ -34,7 +34,7 @@ export const ExternalContoursIssueContentProperties = observer(function External
return (
<div className="flex w-full flex-col">
<div className="w-full overflow-y-auto">
<div className="w-full overflow-visible">
<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">
@ -48,12 +48,12 @@ export const ExternalContoursIssueContentProperties = observer(function External
onChange={(val) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { priority: val })}
disabled={!isEditable}
buttonVariant="transparent-without-text"
className="flex-1"
buttonContainerClassName="h-full w-full"
className="flex-1 overflow-visible"
buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible rounded-[1.25rem] border-0 bg-transparent shadow-none outline-none"
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" />
<PriorityIcon priority={issue.priority} className="h-3.5 w-3.5 flex-shrink-0" />
) : (
<SignalHigh className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
)}
@ -72,14 +72,14 @@ export const ExternalContoursIssueContentProperties = observer(function External
<LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
<span>{t("labels")}</span>
</div>
<div className="h-full min-h-8 flex-1">
<div className="h-full min-h-8 flex-1 overflow-visible">
<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"
rootClassName="w-full overflow-visible"
buttonContainerClassName="nodedc-external-property-control-shell h-full w-full overflow-visible rounded-[1.25rem] border-0 bg-transparent shadow-none outline-none"
label={
<div className="nodedc-external-property-control text-[13px] font-medium">
<LabelPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />

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

@ -332,11 +332,11 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
<ExternalContoursRequestTraceability contourRequest={contourRequest} />
<div className="nodedc-external-section px-4 py-4">
<div className="nodedc-external-section overflow-visible px-4 py-4">
<IssueAttachmentRoot workspaceSlug={workspaceSlug} projectId={targetProjectId} issueId={issue.id} disabled={!isEditable} />
</div>
<div className="nodedc-external-section px-4 py-4">
<div className="nodedc-external-section overflow-visible px-4 py-4">
<ExternalContoursIssueContentProperties
workspaceSlug={workspaceSlug}
targetProjectId={targetProjectId}
@ -346,7 +346,7 @@ export const ExternalContoursIssueMainContent = observer(function ExternalContou
/>
</div>
<div className="nodedc-external-section px-4 py-4">
<div className="nodedc-external-section overflow-visible px-4 py-4">
<IssueActivity workspaceSlug={workspaceSlug} projectId={targetProjectId} issueId={issue.id} />
</div>
</div>

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

@ -58,39 +58,43 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
<div
data-active={selectedInboxIssueId === request.id}
className={cn(
"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 }
"nodedc-external-card relative flex min-h-[15rem] cursor-pointer flex-col gap-5 px-6 py-5 transition-all hover:bg-white/5",
{ "ring-0": selectedInboxIssueId === request.id }
)}
>
<div className="flex items-start justify-between gap-3">
<div className="flex min-w-0 items-center gap-3">
<Avatar
src={requester?.avatar_url || ""}
name={requesterName}
size="lg"
showTooltip
/>
<div className="min-w-0">
<div className="truncate text-15 font-semibold text-primary">{requesterName}</div>
<div className="truncate text-13 text-secondary">{contourName}</div>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
<div className="text-11 font-medium text-tertiary">
{issue.project_detail?.identifier || "REQ"}-{issue.sequence_id}
</div>
<div className="flex items-center gap-2">
{request.has_unread_updates && (
<Tooltip tooltipHeading={t("external_contours_page.list.unread_updates")} isMobile={isMobile}>
<span className="size-2 rounded-full bg-accent-primary" />
</Tooltip>
)}
<ExternalContourStatePill request={request} />
<div className="space-y-0.5">
<div className="flex items-center justify-between gap-3">
<div className="flex min-w-0 flex-1 items-center gap-3">
<Avatar
src={requester?.avatar_url || ""}
name={requesterName}
size="md"
showTooltip
/>
<div className="min-w-0">
<div className="truncate text-[15px] leading-5 font-semibold text-primary">{requesterName}</div>
</div>
</div>
<div className="flex shrink-0 items-center gap-2">
<div className="text-11 font-medium text-tertiary">
{issue.project_detail?.identifier || "REQ"}-{issue.sequence_id}
</div>
<div className="flex items-center gap-2">
{request.has_unread_updates && (
<Tooltip tooltipHeading={t("external_contours_page.list.unread_updates")} isMobile={isMobile}>
<span className="size-2 rounded-full bg-accent-primary" />
</Tooltip>
)}
<ExternalContourStatePill request={request} />
</div>
</div>
</div>
<div className="truncate pl-10 text-[12px] font-medium leading-4 text-secondary">{contourName}</div>
</div>
<div className="flex flex-1 items-center justify-center px-3">
<div className="flex flex-1 items-center justify-center px-5 py-2 text-center">
<h3 className="line-clamp-3 w-full max-w-[18.5rem] text-center text-16 leading-7 font-semibold text-primary">
{issue.name}
</h3>
@ -99,14 +103,15 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
<div className="flex items-center justify-between gap-3">
<div className="flex min-w-0 items-center gap-2">
{assigneeDetails.length > 0 ? (
assigneeDetails.map((assignee) => (
<Avatar
key={assignee.id}
src={assignee.avatar_url || ""}
name={assignee.display_name || "NODE.DC"}
size="lg"
showTooltip
/>
assigneeDetails.map((assignee, index) => (
<div key={assignee.id} className={cn(index > 0 && "-ml-2")}>
<Avatar
src={assignee.avatar_url || ""}
name={assignee.display_name || "NODE.DC"}
size="md"
showTooltip
/>
</div>
))
) : (
<Tooltip tooltipHeading={t("assignee")} tooltipContent={t("external_contours_page.list.unassigned")} isMobile={isMobile}>
@ -127,7 +132,7 @@ export const ExternalContoursListItem = observer(function ExternalContoursListIt
{issue.priority && issue.priority !== "none" && (
<Tooltip tooltipHeading={t("priority")} tooltipContent={`${issue.priority ?? t("none")}`}>
<div className="flex size-8 items-center justify-center rounded-full bg-white/6 text-secondary">
<div className="nodedc-external-priority-inline flex size-8 items-center justify-center rounded-full">
<PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
</div>
</Tooltip>

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

@ -28,20 +28,31 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
const { workspaceSlug, projectId, inboxIssueId, navigationTab } = props;
const [isMobileSidebar, setIsMobileSidebar] = useState(true);
const { t } = useTranslation();
const { loader, error, currentTab, currentProjectId, handleCurrentTab, fetchRequests } = useProjectExternalContours();
const { loader, error, currentTab, currentProjectId, requestIds, handleCurrentTab, fetchRequests } =
useProjectExternalContours();
useEffect(() => {
if (!workspaceSlug || !projectId) return;
const resolvedTab = navigationTab || EInboxIssueCurrentTab.OPEN;
const hasProjectChanged = currentProjectId && currentProjectId !== projectId;
if (navigationTab && navigationTab !== currentTab) {
handleCurrentTab(workspaceSlug, projectId, navigationTab);
} else if (hasProjectChanged) {
handleCurrentTab(workspaceSlug, projectId, EInboxIssueCurrentTab.OPEN);
} else {
fetchRequests(workspaceSlug.toString(), projectId.toString(), navigationTab || EInboxIssueCurrentTab.OPEN);
if (hasProjectChanged) {
void handleCurrentTab(workspaceSlug, projectId, EInboxIssueCurrentTab.OPEN);
return;
}
if (currentProjectId === projectId && currentTab === resolvedTab) {
if (loader === "init-loading") return;
if (requestIds.length > 0) return;
}
if (currentTab !== resolvedTab) {
void handleCurrentTab(workspaceSlug, projectId, resolvedTab);
return;
}
void fetchRequests(workspaceSlug.toString(), projectId.toString(), resolvedTab);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [workspaceSlug, projectId, navigationTab]);

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

@ -10,6 +10,7 @@ import { useTranslation } from "@plane/i18n";
import type { TInboxIssueCurrentTab } from "@plane/types";
import { EInboxIssueCurrentTab } from "@plane/types";
import { cn } from "@plane/utils";
import { useSearchParams } from "next/navigation";
import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
import { useAppRouter } from "@/hooks/use-app-router";
import { ExternalContoursEmptyState } from "./empty-state";
@ -30,17 +31,20 @@ const tabNavigationOptions: { key: TInboxIssueCurrentTab; i18n_label: string }[]
export const ExternalContoursSidebar = observer(function ExternalContoursSidebar(props: Props) {
const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
const router = useAppRouter();
const searchParams = useSearchParams();
const { t } = useTranslation();
const { currentTab, handleCurrentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader } =
const { currentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader, handleCurrentTab } =
useProjectExternalContours();
const routeTab = (searchParams.get("currentTab") as TInboxIssueCurrentTab | null) ?? currentTab;
const isTabTransitioning = loader === "init-loading" || routeTab !== currentTab;
useEffect(() => {
if (workspaceSlug && projectId && filteredRequestIds.length > 0 && inboxIssueId === undefined) {
router.push(
`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${filteredRequestIds[0]}`
`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${routeTab}&inboxIssueId=${filteredRequestIds[0]}`
);
}
}, [currentTab, filteredRequestIds, inboxIssueId, projectId, router, workspaceSlug]);
}, [filteredRequestIds, inboxIssueId, projectId, routeTab, router, workspaceSlug]);
return (
<div className="nodedc-external-sidebar-shell h-full w-full flex-shrink-0 border-r border-strong/40">
@ -52,27 +56,27 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
return (
<button
type="button"
key={option.key}
data-active={currentTab === option.key}
className={cn(
key={option.key}
data-active={routeTab === option.key}
className={cn(
"nodedc-external-tab flex flex-1 items-center justify-center gap-2 text-13 font-medium transition-all"
)}
onClick={() => {
if (currentTab !== option.key) {
handleCurrentTab(workspaceSlug, projectId, option.key);
router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
}
}}
>
)}
onClick={() => {
if (routeTab !== option.key) {
void handleCurrentTab(workspaceSlug, projectId, option.key);
router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
}
}}
>
<div>{t(option.i18n_label)}</div>
<div
className={cn(
"rounded-full px-1.5 py-0.5 text-11 font-semibold",
currentTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
routeTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
)}
>
{count}
</div>
</div>
</button>
);
})}
@ -80,14 +84,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">
{loader === "init-loading" ? (
{isTabTransitioning ? (
<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">
<div key={routeTab} className="space-y-2">
{filteredRequestIds.map((requestId) => (
<ExternalContoursListItem
key={requestId}
@ -102,12 +106,12 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
<div className="flex h-full w-full items-center justify-center">
<ExternalContoursEmptyState
title={t(
currentTab === EInboxIssueCurrentTab.OPEN
routeTab === EInboxIssueCurrentTab.OPEN
? "external_contours_page.empty_state.open_title"
: "external_contours_page.empty_state.closed_title"
)}
description={t(
currentTab === EInboxIssueCurrentTab.OPEN
routeTab === EInboxIssueCurrentTab.OPEN
? "external_contours_page.empty_state.open_description"
: "external_contours_page.empty_state.closed_description"
)}

4
plane-src/apps/web/core/components/auth-screens/header.tsx
View File

@ -74,8 +74,8 @@ export function AuthHeaderBase(props: TAuthHeaderBase) {
<div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6 px-2 py-1">
<Link href="/">
<PlaneLockup
height={54}
width={258}
height={84}
width={402}
className="nodedc-auth-logo-lockup text-primary transition-opacity hover:opacity-90"
/>
</Link>

108
plane-src/apps/web/core/components/dropdowns/priority.tsx
View File

@ -6,6 +6,7 @@
import type { ReactNode } from "react";
import { useRef, useState } from "react";
import { createPortal } from "react-dom";
import { usePopper } from "react-popper";
import { SignalHigh } from "lucide-react";
import { Combobox } from "@headlessui/react";
@ -328,6 +329,7 @@ export function PriorityDropdown(props: Props) {
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
// popper-js init
const { styles, attributes } = usePopper(referenceElement, popperElement, {
strategy: "fixed",
placement: placement ?? "bottom-start",
modifiers: [
{
@ -378,7 +380,7 @@ export function PriorityDropdown(props: Props) {
<button
ref={setReferenceElement}
type="button"
className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
className={cn("clickable block h-full w-full border-0 bg-transparent shadow-none outline-none", buttonContainerClassName)}
onClick={handleOnClick}
disabled={disabled}
tabIndex={tabIndex}
@ -390,7 +392,7 @@ export function PriorityDropdown(props: Props) {
ref={setReferenceElement}
type="button"
className={cn(
"clickable block h-full max-w-full outline-none",
"clickable block h-full max-w-full border-0 bg-transparent shadow-none outline-none",
{
"cursor-not-allowed text-secondary": disabled,
"cursor-pointer": !disabled,
@ -428,56 +430,60 @@ export function PriorityDropdown(props: Props) {
button={comboButton}
renderByDefault={renderByDefault}
>
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<div
className="nodedc-dropdown-surface my-1 w-52"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<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-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder={t("search")}
displayValue={(assigned: any) => assigned?.name}
onKeyDown={searchInputKeyDown}
/>
{isOpen &&
typeof document !== "undefined" &&
createPortal(
<Combobox.Options className="fixed z-[760]" static>
<div
data-prevent-outside-click
className="nodedc-dropdown-surface nodedc-external-popup-anchor my-1 w-56"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<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-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder={t("search")}
displayValue={(assigned: any) => assigned?.name}
onKeyDown={searchInputKeyDown}
/>
</div>
<div className="mt-2 max-h-56 space-y-1 overflow-y-auto">
{filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
value={option.value}
className={({ active, selected }) =>
cn(
`nodedc-dropdown-option cursor-pointer ${
active ? "bg-white/6" : ""
} ${selected ? "text-primary" : "text-secondary"}`
)
}
>
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>
))
) : (
<p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
)}
</div>
</div>
<div className="mt-2 max-h-56 space-y-1 overflow-y-auto">
{filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
value={option.value}
className={({ active, selected }) =>
cn(
`nodedc-dropdown-option cursor-pointer ${
active ? "bg-white/6" : ""
} ${selected ? "text-primary" : "text-secondary"}`
)
}
>
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>
))
) : (
<p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
)}
</div>
</div>
</Combobox.Options>
)}
</Combobox.Options>,
document.body
)}
</ComboDropDown>
);
}

8
plane-src/apps/web/core/components/issues/attachment/attachment-upload.tsx
View File

@ -55,9 +55,11 @@ export const IssueAttachmentUpload = observer(function IssueAttachmentUpload(pro
return (
<div
{...getRootProps()}
className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-accent-primary/5 px-4 text-11 text-accent-primary ${
isDragActive ? "border-accent-strong bg-accent-primary/10" : "border-subtle"
} ${isDragReject ? "bg-danger-subtle" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
data-drag-active={isDragActive ? "true" : "false"}
data-drag-reject={isDragReject ? "true" : "false"}
className={`nodedc-attachment-upload flex items-center justify-center px-4 text-11 ${
disabled ? "cursor-not-allowed" : "cursor-pointer"
}`}
>
<input {...getInputProps()} />
<span className="flex items-center gap-2">

7
plane-src/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
View File

@ -25,14 +25,13 @@ export const ProjectViewEmptyState = observer(function ProjectViewEmptyState() {
);
return (
// TODO: Add translation
<EmptyStateDetailed
assetKey="work-item"
title="View work items will appear here"
description="Work items help you track individual pieces of work. With work items, keep track of what's going on, who is working on it, and what's done."
title="Начните с вашего первого рабочего элемента."
description="Рабочие элементы — это строительные блоки вашего проекта: назначайте ответственных, устанавливайте приоритеты и отслеживайте прогресс."
actions={[
{
label: "New work item",
label: "Создайте свой первый рабочий элемент",
onClick: () => {
toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
},

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

@ -5,6 +5,7 @@
*/
import React, { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import type { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
@ -72,6 +73,7 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
const { isMobile } = usePlatformOS();
// popper-js init
const { styles, attributes } = usePopper(referenceElement, popperElement, {
strategy: "fixed",
placement: placement ?? "bottom-start",
});
// derived values
@ -169,7 +171,10 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
<button
type="button"
ref={setReferenceElement}
className={cn("flex h-full cursor-pointer items-center gap-2 text-11", buttonContainerClassName)}
className={cn(
"flex h-full cursor-pointer items-center gap-2 border-0 bg-transparent text-11 shadow-none outline-none",
buttonContainerClassName
)}
onClick={handleOnClick}
>
{label ? (
@ -195,133 +200,137 @@ export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase
)}
</button>
{isDropdownOpen && (
<Combobox.Options className="fixed z-[120]" static>
<div
className="nodedc-dropdown-surface my-1 w-64 min-w-[16rem]"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<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-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-56 space-y-1 overflow-y-auto">
{labelsList && filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((label) => {
const children = labelsList?.filter((l) => l.parent === label.id);
{isDropdownOpen &&
typeof document !== "undefined" &&
createPortal(
<Combobox.Options className="fixed z-[760]" static>
<div
data-prevent-outside-click
className="nodedc-dropdown-surface nodedc-external-popup-anchor my-1 w-64 min-w-[16rem]"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<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-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-56 space-y-1 overflow-y-auto">
{labelsList && filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((label) => {
const children = labelsList?.filter((l) => l.parent === label.id);
if (children.length === 0) {
if (!label.parent)
return (
<Combobox.Option
key={label.id}
className={({ active }) =>
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-[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"
style={{
backgroundColor: label.color,
}}
/>
<span className="truncate">{label.name}</span>
</div>
<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>
)}
</Combobox.Option>
);
} else
return (
<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>
<div>
{children.map((child) => (
<Combobox.Option
key={child.id}
className={({ active }) =>
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-[0.9rem]">
<div className="flex items-center justify-start gap-2">
<span
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: child?.color,
}}
/>
<span>{child.name}</span>
</div>
<div className="flex items-center justify-center rounded-[0.9rem] p-1">
<CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
</div>
if (children.length === 0) {
if (!label.parent)
return (
<Combobox.Option
key={label.id}
className={({ active }) =>
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-[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"
style={{
backgroundColor: label.color,
}}
/>
<span className="truncate">{label.name}</span>
</div>
)}
</Combobox.Option>
))}
<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>
)}
</Combobox.Option>
);
} else
return (
<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>
<div>
{children.map((child) => (
<Combobox.Option
key={child.id}
className={({ active }) =>
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-[0.9rem]">
<div className="flex items-center justify-start gap-2">
<span
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: child?.color,
}}
/>
<span>{child.name}</span>
</div>
<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>
)}
</Combobox.Option>
))}
</div>
</div>
</div>
);
})
) : submitting ? (
<Loader className="h-3.5 w-3.5 animate-spin" />
) : createLabelEnabled ? (
<p
onClick={() => {
if (!query.length) return;
handleAddLabel(query);
}}
className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`}
>
{query.length ? (
<>
+ {t("label.create.type")} <span className="text-primary">&quot;{query}&quot;</span>
</>
) : (
t("label.create.type")
)}
</p>
);
})
) : submitting ? (
<Loader className="h-3.5 w-3.5 animate-spin" />
) : createLabelEnabled ? (
<p
onClick={() => {
if (!query.length) return;
handleAddLabel(query);
}}
className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`}
>
{query.length ? (
<>
+ {t("label.create.type")} <span className="text-primary">&quot;{query}&quot;</span>
</>
) : (
t("label.create.type")
)}
</p>
) : (
<p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
)
) : (
<p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
)
) : (
<p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
)}
<p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
)}
</div>
</div>
</div>
</Combobox.Options>
)}
</Combobox.Options>,
document.body
)}
</Combobox>
);
});

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

@ -178,6 +178,7 @@ export class ProjectExternalContoursStore implements IProjectExternalContoursSto
};
handleCurrentTab = async (workspaceSlug: string, projectId: string, tab: TInboxIssueCurrentTab) => {
this.currentProjectId = projectId;
this.requestIds = [];
this.requests = {};
this.error = undefined;

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

@ -980,14 +980,14 @@
}
.nodedc-external-tab {
min-height: 2.8rem;
min-height: 3rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 999px !important;
background: transparent !important;
color: rgba(255, 255, 255, 0.78) !important;
padding-inline: 1rem !important;
padding-inline: 1.3rem !important;
}
.nodedc-external-tab:hover {
@ -1025,6 +1025,8 @@
.nodedc-external-content-shell {
border: 0 !important;
outline: none !important;
overflow: visible !important;
isolation: isolate;
box-shadow:
0 18px 44px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
@ -1061,6 +1063,8 @@
.nodedc-external-panel {
border: 0 !important;
outline: none !important;
overflow: visible !important;
isolation: isolate;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
border-radius: 1.6rem !important;
background:
@ -1073,6 +1077,8 @@
.nodedc-external-section {
border: 0 !important;
outline: none !important;
overflow: visible !important;
isolation: isolate;
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
@ -1094,14 +1100,14 @@
}
.nodedc-external-action-button {
min-height: 2.75rem;
min-height: 2.85rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.25rem !important;
border-radius: 1.35rem !important;
background: rgba(255, 255, 255, 0.06) !important;
color: var(--text-color-primary) !important;
padding-inline: 1.15rem !important;
padding-inline: 1.25rem !important;
}
.nodedc-external-action-button:hover {
@ -1128,17 +1134,23 @@
}
.nodedc-external-primary-button {
min-height: 2.75rem;
min-height: 2.85rem;
min-width: 13rem;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
border-radius: 1.25rem !important;
border-radius: 1.35rem !important;
background: rgb(var(--nodedc-card-active-rgb)) !important;
color: #0b1117 !important;
padding-inline: 1.45rem !important;
padding-inline: 1.6rem !important;
font-weight: 600 !important;
}
.nodedc-external-primary-button,
.nodedc-external-primary-button * {
color: #0b1117 !important;
}
.nodedc-external-primary-button:hover {
background: color-mix(in srgb, rgb(var(--nodedc-card-active-rgb)) 82%, white) !important;
color: #0b1117 !important;
@ -1159,16 +1171,14 @@
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);
border-radius: 0;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.nodedc-external-empty-media svg {
display: block;
color: rgba(255, 255, 255, 0.22);
}
@ -1189,10 +1199,20 @@
padding: 0.65rem 0.95rem !important;
}
.nodedc-external-readonly-value.nodedc-external-readonly-plain {
min-height: 0;
border-radius: 0 !important;
background: transparent !important;
padding: 0 !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.nodedc-external-property-row {
display: flex;
align-items: center;
gap: 1rem;
position: relative;
border: 0 !important;
outline: none !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
@ -1217,37 +1237,134 @@
.nodedc-external-property-value {
display: flex;
min-height: 2.5rem;
min-height: 0;
width: 100%;
align-items: center;
justify-content: flex-start;
gap: 0.6rem;
position: relative;
z-index: 1;
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;
padding: 0 !important;
}
.nodedc-external-property-control {
display: flex;
min-height: 2.5rem;
min-height: 0;
width: 100%;
align-items: center;
justify-content: flex-start;
gap: 0.6rem;
position: relative;
z-index: 1;
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;
padding: 0 !important;
transition: background 160ms ease;
}
.nodedc-external-property-control-shell {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
}
.nodedc-external-property-control-shell:hover,
.nodedc-external-property-control-shell:focus,
.nodedc-external-property-control-shell:focus-visible,
.nodedc-external-property-control-shell:focus-within {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
.nodedc-external-property-control:hover,
.nodedc-external-property-control:focus-within {
background: rgba(255, 255, 255, 0.04) !important;
background: transparent !important;
}
.nodedc-external-popup-anchor {
z-index: 760 !important;
}
.nodedc-external-detail-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.nodedc-external-toolbar-cluster {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0;
border-radius: 999px;
background: transparent !important;
}
.nodedc-external-priority-inline {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: var(--text-color-secondary) !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
outline: none !important;
}
.nodedc-attachment-upload {
min-height: 4.5rem;
border: 0 !important;
outline: none !important;
box-shadow:
inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.018),
0 10px 28px rgba(0, 0, 0, 0.08) !important;
border-radius: 1.35rem !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.012) 100%),
rgba(255, 255, 255, 0.025) !important;
color: var(--text-color-secondary) !important;
transition:
background 180ms ease,
color 180ms ease,
box-shadow 180ms ease;
}
.nodedc-attachment-upload:hover,
.nodedc-attachment-upload[data-drag-active="true"] {
box-shadow:
inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.018),
0 10px 28px rgba(0, 0, 0, 0.08) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.014) 100%),
rgba(255, 255, 255, 0.035) !important;
color: var(--text-color-primary) !important;
}
.nodedc-attachment-upload[data-drag-reject="true"] {
box-shadow:
inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.018),
0 10px 28px rgba(0, 0, 0, 0.08) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
rgba(255, 255, 255, 0.03) !important;
color: var(--text-color-primary) !important;
}
}