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

2026-04-20 14:37:14 +03:00
parent 9553c81752
commit 1cf05aad72
6 changed files with 194 additions and 94 deletions
@@ -47,6 +47,7 @@ export const ExternalContoursIssueContentProperties = observer(function External
                value={issue?.priority}
                onChange={(val) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { priority: val })}
                disabled={!isEditable}
+                placement="top-start"
                buttonVariant="transparent-without-text"
                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"
@@ -78,6 +79,7 @@ export const ExternalContoursIssueContentProperties = observer(function External
                  onChange={(labelIds) => issue?.id && issueOperations.update(workspaceSlug, targetProjectId, issue.id, { label_ids: labelIds })}
                  projectId={targetProjectId}
                  disabled={!isEditable}
+                  placement="top-start"
                  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={
@@ -132,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="nodedc-external-priority-inline flex size-8 items-center justify-center rounded-full">
+                <div className="nodedc-external-priority-inline flex items-center justify-center">
                  <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
                </div>
              </Tooltip>
@@ -4,7 +4,7 @@
 * See the LICENSE file for details.
 */

-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TInboxIssueCurrentTab } from "@plane/types";
@@ -35,16 +35,24 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
  const { t } = useTranslation();
  const { currentTab, filteredRequestIds, openRequestIds, closedRequestIds, loader, handleCurrentTab } =
    useProjectExternalContours();
+  const [pendingTab, setPendingTab] = useState<TInboxIssueCurrentTab | null>(null);
  const routeTab = (searchParams.get("currentTab") as TInboxIssueCurrentTab | null) ?? currentTab;
-  const isTabTransitioning = loader === "init-loading" || routeTab !== currentTab;
+  const resolvedTab = pendingTab ?? routeTab;
+  const isTabTransitioning = loader === "init-loading" || pendingTab !== null || routeTab !== currentTab;
+
+  useEffect(() => {
+    if (pendingTab && loader !== "init-loading" && routeTab === pendingTab && currentTab === pendingTab) {
+      setPendingTab(null);
+    }
+  }, [currentTab, loader, pendingTab, routeTab]);

  useEffect(() => {
    if (workspaceSlug && projectId && filteredRequestIds.length > 0 && inboxIssueId === undefined) {
      router.push(
-        `/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${routeTab}&inboxIssueId=${filteredRequestIds[0]}`
+        `/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${resolvedTab}&inboxIssueId=${filteredRequestIds[0]}`
      );
    }
-  }, [filteredRequestIds, inboxIssueId, projectId, routeTab, router, workspaceSlug]);
+  }, [filteredRequestIds, inboxIssueId, projectId, resolvedTab, router, workspaceSlug]);

  return (
    <div className="nodedc-external-sidebar-shell h-full w-full flex-shrink-0 border-r border-strong/40">
@@ -57,12 +65,13 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
                <button
                  type="button"
                  key={option.key}
-                  data-active={routeTab === option.key}
+                  data-active={resolvedTab === option.key}
                  className={cn(
                    "nodedc-external-tab flex flex-1 items-center justify-center gap-2 text-13 font-medium transition-all"
                  )}
                  onClick={() => {
-                    if (routeTab !== option.key) {
+                    if (resolvedTab !== option.key) {
+                      setPendingTab(option.key);
                      void handleCurrentTab(workspaceSlug, projectId, option.key);
                      router.push(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${option.key}`);
                    }
@@ -72,7 +81,7 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
                  <div
                    className={cn(
                      "rounded-full px-1.5 py-0.5 text-11 font-semibold",
-                      routeTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
+                      resolvedTab === option.key ? "bg-accent-primary/15 text-accent-primary" : "bg-white/5 text-secondary"
                    )}
                  >
                    {count}
@@ -91,7 +100,7 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
              </div>
            </div>
          ) : filteredRequestIds.length > 0 ? (
-            <div key={routeTab} className="space-y-2">
+            <div key={resolvedTab} className="space-y-3">
              {filteredRequestIds.map((requestId) => (
                <ExternalContoursListItem
                  key={requestId}
@@ -106,12 +115,12 @@ export const ExternalContoursSidebar = observer(function ExternalContoursSidebar
            <div className="flex h-full w-full items-center justify-center">
              <ExternalContoursEmptyState
                title={t(
-                  routeTab === EInboxIssueCurrentTab.OPEN
+                  resolvedTab === EInboxIssueCurrentTab.OPEN
                    ? "external_contours_page.empty_state.open_title"
                    : "external_contours_page.empty_state.closed_title"
                )}
                description={t(
-                  routeTab === EInboxIssueCurrentTab.OPEN
+                  resolvedTab === EInboxIssueCurrentTab.OPEN
                    ? "external_contours_page.empty_state.open_description"
                    : "external_contours_page.empty_state.closed_description"
                )}
@@ -5,6 +5,7 @@
 */

 import { Fragment, useState } from "react";
+import { createPortal } from "react-dom";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
 import { Loader } from "lucide-react";
@@ -78,6 +79,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    strategy: "fixed",
    placement: "bottom-start",
    modifiers: [
      {
@@ -129,90 +131,93 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
          <button
            ref={setReferenceElement}
            type="button"
-            className="flex h-7.5 items-center rounded-sm border-0 bg-transparent py-0.5 pl-0 pr-2 text-body-xs-medium text-placeholder whitespace-nowrap outline-none hover:bg-layer-transparent-hover active:bg-layer-transparent-active"
+            className="flex h-7.5 items-center rounded-[1rem] border-0 bg-transparent py-0.5 pl-0 pr-2 text-body-xs-medium text-placeholder whitespace-nowrap shadow-none outline-none"
            onClick={() => !projectLabels && fetchLabels()}
          >
            {label}
          </button>
        </Combobox.Button>

-        <Combobox.Options className="fixed z-10">
-          <div
-            className={`nodedc-dropdown-surface z-10 my-1 w-52 whitespace-nowrap`}
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div>
-              <div className="nodedc-dropdown-search">
-                <SearchIcon className="h-3.5 w-3.5 text-tertiary" />
-                <Combobox.Input
-                  className="w-full bg-transparent px-0 py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                  placeholder={t("common.search.label")}
-                  displayValue={(assigned: any) => assigned?.name}
-                  onKeyDown={searchInputKeyDown}
-                  tabIndex={baseTabIndex}
-                />
-              </div>
-            </div>
-            <div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-56 space-y-1 overflow-y-auto`}>
-              {isLoading ? (
-                <p className="text-center text-secondary">{t("common.loading")}</p>
-              ) : filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
-                  <Combobox.Option
-                    key={option.value}
-                    value={option.value}
-                    className={({ selected }) =>
-                      `nodedc-dropdown-option cursor-pointer ${
-                        selected ? "text-primary" : "text-secondary"
-                      }`
-                    }
-                  >
-                    {({ selected }) => (
-                      <>
-                        {option.content}
-                        {selected && (
-                          <div className="flex-shrink-0">
-                            <CheckIcon className={`h-3.5 w-3.5`} />
-                          </div>
+        {typeof document !== "undefined" &&
+          createPortal(
+            <Combobox.Options className="fixed z-[760]" static>
+              <div
+                className="nodedc-dropdown-surface nodedc-external-popup-anchor z-10 my-1 w-56 whitespace-nowrap"
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div>
+                  <div className="nodedc-dropdown-search">
+                    <SearchIcon className="h-3.5 w-3.5 text-tertiary" />
+                    <Combobox.Input
+                      className="w-full bg-transparent px-0 py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
+                      value={query}
+                      onChange={(e) => setQuery(e.target.value)}
+                      placeholder={t("common.search.label")}
+                      displayValue={(assigned: any) => assigned?.name}
+                      onKeyDown={searchInputKeyDown}
+                      tabIndex={baseTabIndex}
+                    />
+                  </div>
+                </div>
+                <div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-56 space-y-1 overflow-y-auto`}>
+                  {isLoading ? (
+                    <p className="px-2 py-2 text-center text-secondary">{t("common.loading")}</p>
+                  ) : filteredOptions.length > 0 ? (
+                    filteredOptions.map((option) => (
+                      <Combobox.Option
+                        key={option.value}
+                        value={option.value}
+                        className={({ selected }) =>
+                          `nodedc-dropdown-option cursor-pointer ${
+                            selected ? "text-primary" : "text-secondary"
+                          }`
+                        }
+                      >
+                        {({ selected }) => (
+                          <>
+                            {option.content}
+                            {selected && (
+                              <div className="flex-shrink-0">
+                                <CheckIcon className={`h-3.5 w-3.5`} />
+                              </div>
+                            )}
+                          </>
                        )}
-                      </>
-                    )}
-                  </Combobox.Option>
-                ))
-              ) : submitting ? (
-                <Loader className="spin h-3.5 w-3.5" />
-              ) : canCreateLabel ? (
-                <Combobox.Option
-                  value={query}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    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 ? (
-                    <>
-                      {/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to
-                      labels
-                    </>
+                      </Combobox.Option>
+                    ))
+                  ) : submitting ? (
+                    <Loader className="spin mx-auto h-3.5 w-3.5" />
+                  ) : canCreateLabel ? (
+                    <Combobox.Option
+                      value={query}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        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")
+                      )}
+                    </Combobox.Option>
                  ) : (
-                    t("label.create.type")
+                    <p className="rounded-[0.9rem] px-2 py-2 text-left text-secondary">
+                      {t("common.search.no_matching_results")}
+                    </p>
                  )}
-                </Combobox.Option>
-                ) : (
-                  <p className="rounded-[0.9rem] px-2 py-2 text-left text-secondary">
-                    {t("common.search.no_matching_results")}
-                  </p>
-                )}
+                </div>
              </div>
-          </div>
-        </Combobox.Options>
+            </Combobox.Options>,
+            document.body
+          )}
      </Combobox>
    </>
  );
@@ -1162,15 +1162,17 @@
    flex-direction: column;
    align-items: center;
    justify-content: center;
-    gap: 1rem;
+    gap: 1.1rem;
    text-align: center;
  }

  .nodedc-external-empty-media {
-    display: grid;
-    place-items: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
    width: 6.25rem;
    height: 6.25rem;
+    margin-inline: auto;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
@@ -1244,6 +1246,8 @@
    gap: 0.6rem;
    position: relative;
    z-index: 1;
+    overflow: visible !important;
+    isolation: isolate;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
@@ -1262,6 +1266,8 @@
    gap: 0.6rem;
    position: relative;
    z-index: 1;
+    overflow: visible !important;
+    isolation: isolate;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
@@ -1280,6 +1286,16 @@
    padding: 0 !important;
  }

+  .nodedc-external-property-value > button,
+  .nodedc-external-property-value > button *,
+  .nodedc-external-property-control-shell,
+  .nodedc-external-property-control-shell * {
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+  }
+
  .nodedc-external-property-control-shell:hover,
  .nodedc-external-property-control-shell:focus,
  .nodedc-external-property-control-shell:focus-visible,
@@ -1310,15 +1326,21 @@
    display: flex;
    align-items: center;
    gap: 0.5rem;
-    padding: 0;
+    padding: 0.25rem !important;
    border-radius: 999px;
-    background: transparent !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
  }

  .nodedc-external-priority-inline {
    display: inline-flex;
    align-items: center;
+    justify-content: center;
    gap: 0.375rem;
+    width: auto !important;
+    min-width: 0 !important;
+    height: auto !important;
+    padding: 0 !important;
    color: var(--text-color-secondary) !important;
    background: transparent !important;
    box-shadow: none !important;