UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: полировка внешних контуров и дизайн-кода
This commit is contained in:
@@ -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"
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user