UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: выравнивание карточек внутреннего контура

2026-04-24 11:56:23 +03:00 · 2026-04-24 11:56:23 +03:00 · 655ff7fc4a
parent a8b6f9f9ce
commit 655ff7fc4a
2 changed files with 81 additions and 62 deletions
--- a/plane-src/apps/web/core/components/issues/issue-layouts/kanban/internal-contour-card.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-layouts/kanban/internal-contour-card.tsx
@ -8,7 +8,7 @@ import { useMemo } from "react";
 import { CalendarDays, MoreHorizontal } from "lucide-react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { PriorityIcon, StateGroupIcon, getStateGroupColor } from "@plane/propel/icons";
 import type { IIssueDisplayProperties, TIssue } from "@plane/types";
 import { Avatar } from "@plane/ui";
 import { cn, getFileURL, renderFormattedDate, renderFormattedPayloadDate } from "@plane/utils";
@ -21,10 +21,7 @@ import { useMember } from "@/hooks/store/use-member";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectState } from "@/hooks/store/use-project-state";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import {
-  NodedcWorkItemCard,
-  getNodedcWorkItemCardAppearance,
-} from "../shared/nodedc-work-item-card";
+import { NodedcWorkItemCard, getNodedcWorkItemCardAppearance } from "../shared/nodedc-work-item-card";
 import type { TRenderQuickActions } from "../list/list-view-types";

 type Props = {
@ -74,30 +71,60 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
  const sourceContourName = issue.source_project_name ?? getProjectById(issue.project_id)?.name ?? t("common.none");
  const selectedState = getStateById(issue.state_id);
  const projectStateIds = issue.project_id ? getProjectStateIds(issue.project_id) : [];
-  const { pillBackgroundClasses, iconBubbleClasses } = getNodedcWorkItemCardAppearance(isActive);
-  const statusIconColor =
-    selectedState?.color ?? (isActive ? "rgb(var(--nodedc-on-card-active-rgb))" : "var(--text-color-primary)");
+  const { pillBackgroundClasses } = getNodedcWorkItemCardAppearance(isActive);
+  const statusIconColor = getStateGroupColor(selectedState?.group, selectedState?.color);

  const creatorName = creatorDetails?.display_name ?? t("common.none");
  const dueDateLabel = issue.target_date ? renderFormattedDate(issue.target_date, "d MMM, yyyy") : t("common.none");
+  const cornerControlClasses =
+    "flex h-12 w-12 items-center justify-center rounded-full border-0 bg-white text-[#0B1117] shadow-none outline-none ring-0 transition-transform hover:scale-[1.03]";
+  const dateButton = (
+    <DateDropdown
+      className="h-auto self-start"
+      buttonContainerClassName="h-auto w-auto text-left"
+      value={issue.target_date}
+      rangePreview={{
+        from: issue.start_date,
+        to: issue.target_date,
+      }}
+      onChange={(targetDate) =>
+        updateIssue?.(issue.project_id ?? null, issue.id, {
+          target_date: targetDate ? renderFormattedPayloadDate(targetDate) : null,
+        })
+      }
+      disabled={isReadOnly || !updateIssue}
+      button={
+        <div
+          data-control-link-ignore="true"
+          className={cn(
+            "inline-flex max-w-full items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] leading-4 font-medium",
+            pillBackgroundClasses
+          )}
+        >
+          <CalendarDays className="h-3.5 w-3.5 shrink-0" />
+          <span className="truncate">{dueDateLabel}</span>
+        </div>
+      }
+    />
+  );

  const customActionButton = (
    <div
      data-control-link-ignore="true"
      className={cn(
-        "flex h-8 w-8 cursor-pointer items-center justify-center rounded-full p-1 transition-colors",
+        "flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-black text-white shadow-none ring-0 transition-transform outline-none hover:scale-[1.03]",
        isActive
-          ? "bg-black text-[rgb(var(--nodedc-card-active-rgb))] hover:bg-black/90"
+          ? "text-[rgb(var(--nodedc-card-active-rgb))] hover:bg-black/90"
          : "bg-[#111214] text-white hover:bg-[#0A0B0C]"
      )}
    >
-      <MoreHorizontal className="h-3.5 w-3.5" />
+      <MoreHorizontal className="h-4 w-4" />
    </div>
  );

  const header = (
-    <div className="flex items-center justify-between gap-3">
-      <div className="flex min-w-0 flex-1 items-center gap-3">
+    <div className="relative z-10">
+      <div className="flex min-w-0 items-start gap-2.5 pt-3 pr-[96px] pl-3">
        <div className="shrink-0">
          <Avatar
            src={getFileURL(creatorDetails?.avatar_url ?? "")}
@ -106,28 +133,20 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
            showTooltip={!isMobile}
          />
        </div>
-        <div className="truncate text-body-sm-medium leading-5">{creatorName}</div>
+        <div className="flex min-w-0 flex-col gap-1">
+          <div className="truncate text-body-sm-medium leading-5">{sourceContourName}</div>
+          {dateButton}
+        </div>
      </div>

-      <div className="flex shrink-0 items-center gap-2">
-        {quickActions({
-          issue,
-          parentRef: cardRef,
-          customActionButton,
-        })}
+      <div className="absolute top-0 right-0 flex shrink-0 items-center gap-0">
        <PriorityDropdown
          value={issue.priority}
          onChange={(priority) => updateIssue?.(issue.project_id ?? null, issue.id, { priority })}
          disabled={isReadOnly || !updateIssue}
          button={
-            <div
-              data-control-link-ignore="true"
-              className={cn(
-                "flex h-8 w-8 items-center justify-center rounded-full border-0 shadow-none outline-none",
-                iconBubbleClasses
-              )}
-            >
-              <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
+            <div data-control-link-ignore="true" className={cornerControlClasses}>
+              <PriorityIcon priority={issue.priority} className="h-4 w-4" />
            </div>
          }
        />
@ -138,14 +157,11 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
          onChange={(stateId) => updateIssue?.(issue.project_id ?? null, issue.id, { state_id: stateId })}
          disabled={isReadOnly || !updateIssue}
          button={
-            <div
-              data-control-link-ignore="true"
-              className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}
-            >
+            <div data-control-link-ignore="true" className={cornerControlClasses}>
              <StateGroupIcon
                stateGroup={selectedState?.group ?? "backlog"}
                color={statusIconColor}
-                className="h-3.5 w-3.5"
+                className="h-4 w-4"
                percentage={selectedState?.order}
              />
            </div>
@ -155,6 +171,12 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
    </div>
  );

+  const title = (
+    <div className="flex flex-col items-center">
+      <span>{issue.name}</span>
+    </div>
+  );
+
  const footer = (
    <>
      <MemberDropdown
@ -162,33 +184,25 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
        value={issue.assignee_ids}
        onChange={(assigneeIds) => updateIssue?.(issue.project_id ?? null, issue.id, { assignee_ids: assigneeIds })}
        disabled={isReadOnly || !updateIssue}
+        multiple
+        className="h-11 w-11"
+        buttonContainerClassName="h-11 w-11"
        button={
-          <div data-control-link-ignore="true" className={cn(basePillClasses, pillBackgroundClasses, "min-h-9 pl-1 pr-2")}>
+          <div
+            data-control-link-ignore="true"
+            className={cn(basePillClasses, "h-11 min-w-11 justify-center rounded-full bg-transparent px-0 py-0")}
+          >
            <ButtonAvatars showTooltip={false} userIds={issue.assignee_ids} size="sm" />
          </div>
        }
      />

      <div className="flex items-center justify-end">
-        <DateDropdown
-          value={issue.target_date}
-          rangePreview={{
-            from: issue.start_date,
-            to: issue.target_date,
-          }}
-          onChange={(targetDate) =>
-            updateIssue?.(issue.project_id ?? null, issue.id, {
-              target_date: targetDate ? renderFormattedPayloadDate(targetDate) : null,
-            })
-          }
-          disabled={isReadOnly || !updateIssue}
-          button={
-            <div data-control-link-ignore="true" className={cn(basePillClasses, pillBackgroundClasses)}>
-              <CalendarDays className="h-3.5 w-3.5" />
-              <span className="truncate">{dueDateLabel}</span>
-            </div>
-          }
-        />
+        {quickActions({
+          issue,
+          parentRef: cardRef,
+          customActionButton,
+        })}
      </div>
    </>
  );
@ -196,12 +210,14 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
  return (
    <NodedcWorkItemCard
      isActive={isActive}
-      surfaceClassName="px-0"
-      contentClassName="px-1"
+      surfaceClassName="!rounded-[24px] !p-0"
+      contentClassName="min-h-[220px]"
      header={header}
-      subtitle={sourceContourName}
-      title={issue.name}
+      title={title}
+      titleContainerClassName="px-6 pt-7 pb-14"
+      titleClassName="line-clamp-none w-full text-[15px] leading-5"
      footer={footer}
+      footerClassName="pointer-events-auto absolute inset-x-0 bottom-0 h-12 items-end gap-0"
    />
  );
 });
--- a/plane-src/packages/propel/src/icons/state/helper.tsx
+++ b/plane-src/packages/propel/src/icons/state/helper.tsx
@ -28,13 +28,16 @@ export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "
 export const STATE_GROUP_COLORS: {
  [key in TStateGroups]: string;
 } = {
-  backlog: "#60646C",
-  unstarted: "#60646C",
-  started: "#F59E0B",
-  completed: "#46A758",
-  cancelled: "#9AA4BC",
+  backlog: "#050505",
+  unstarted: "#7C7F85",
+  started: "#050505",
+  completed: "rgb(var(--nodedc-card-active-rgb, 195 255 102))",
+  cancelled: "#050505",
 };

+export const getStateGroupColor = (stateGroup: TStateGroups | undefined, fallbackColor?: string) =>
+  stateGroup ? STATE_GROUP_COLORS[stateGroup] : (fallbackColor ?? STATE_GROUP_COLORS.unstarted);
+
 export const INTAKE_STATE_GROUP_COLORS: { [key in TIntakeStateGroups]: string } = { triage: "#4E5355" };

 export const STATE_GROUP_SIZES: {