UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: переход в проект из карточки главной
This commit is contained in:
parent
2642a522f2
commit
cf6fca20aa
|
|
@ -211,6 +211,7 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
|
||||||
analyticsMap={analyticsMap}
|
analyticsMap={analyticsMap}
|
||||||
recents={workspaceRecents}
|
recents={workspaceRecents}
|
||||||
selectedProjectId={selectedProjectId}
|
selectedProjectId={selectedProjectId}
|
||||||
|
workspaceSlug={workspaceSlugValue}
|
||||||
onSelectProject={setSelectedProjectId}
|
onSelectProject={setSelectedProjectId}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { FolderOpenDot, Layers3, Search, UsersRound } from "lucide-react";
|
import { FolderOpenDot, Layers3, Search, UsersRound } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
import type { TActivityEntityData, TProjectAnalyticsCount } from "@plane/types";
|
import type { TActivityEntityData, TProjectAnalyticsCount } from "@plane/types";
|
||||||
import { Logo } from "@plane/propel/emoji-icon-picker";
|
import { Logo } from "@plane/propel/emoji-icon-picker";
|
||||||
import { cn } from "@plane/utils";
|
import { cn } from "@plane/utils";
|
||||||
|
|
@ -19,6 +20,7 @@ type HomeProjectStackProps = {
|
||||||
orientation?: "horizontal" | "vertical";
|
orientation?: "horizontal" | "vertical";
|
||||||
recents?: TActivityEntityData[];
|
recents?: TActivityEntityData[];
|
||||||
selectedProjectId: string | null;
|
selectedProjectId: string | null;
|
||||||
|
workspaceSlug: string;
|
||||||
onSelectProject: (projectId: string) => void;
|
onSelectProject: (projectId: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -34,6 +36,7 @@ export function HomeProjectStack(props: HomeProjectStackProps) {
|
||||||
orientation = "vertical",
|
orientation = "vertical",
|
||||||
recents,
|
recents,
|
||||||
selectedProjectId,
|
selectedProjectId,
|
||||||
|
workspaceSlug,
|
||||||
onSelectProject,
|
onSelectProject,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
|
@ -87,16 +90,26 @@ export function HomeProjectStack(props: HomeProjectStackProps) {
|
||||||
const isActive = project.id === selectedProject?.id;
|
const isActive = project.id === selectedProject?.id;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<div
|
||||||
key={project.id}
|
key={project.id}
|
||||||
type="button"
|
|
||||||
className={cn("nodedc-home-project-card text-left", {
|
className={cn("nodedc-home-project-card text-left", {
|
||||||
"nodedc-home-project-card-horizontal shrink-0": horizontal,
|
"nodedc-home-project-card-horizontal shrink-0": horizontal,
|
||||||
"absolute inset-x-0": !horizontal,
|
"absolute inset-x-0": !horizontal,
|
||||||
"cursor-default": isActive,
|
"cursor-default": isActive,
|
||||||
|
"cursor-pointer": !isActive,
|
||||||
})}
|
})}
|
||||||
data-active={isActive}
|
data-active={isActive}
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
aria-label={`Выбрать проект ${project.name}`}
|
||||||
onClick={() => onSelectProject(project.id)}
|
onClick={() => onSelectProject(project.id)}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.target !== event.currentTarget) return;
|
||||||
|
if (event.key !== "Enter" && event.key !== " ") return;
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
onSelectProject(project.id);
|
||||||
|
}}
|
||||||
style={
|
style={
|
||||||
horizontal
|
horizontal
|
||||||
? { zIndex: visibleProjects.length - index }
|
? { zIndex: visibleProjects.length - index }
|
||||||
|
|
@ -115,10 +128,15 @@ export function HomeProjectStack(props: HomeProjectStackProps) {
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(var(--nodedc-accent-rgb),0.28),transparent_34%),linear-gradient(160deg,rgba(5,5,8,0.08)_0%,rgba(5,5,8,0.42)_34%,rgba(5,5,8,0.84)_100%)]" />
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(var(--nodedc-accent-rgb),0.28),transparent_34%),linear-gradient(160deg,rgba(5,5,8,0.08)_0%,rgba(5,5,8,0.42)_34%,rgba(5,5,8,0.84)_100%)]" />
|
||||||
<div className="relative flex h-full flex-col justify-between p-4">
|
<div className="relative flex h-full flex-col justify-between p-4">
|
||||||
<div className="flex items-start justify-between gap-3">
|
<div className="flex items-start justify-between gap-3">
|
||||||
<div className="inline-flex items-center gap-2 rounded-full bg-black/25 px-2.5 py-1 text-[11px] font-medium text-white/[0.72] backdrop-blur-md">
|
<Link
|
||||||
|
href={`/${workspaceSlug}/projects/${project.id}/issues`}
|
||||||
|
className="inline-flex items-center gap-2 rounded-full bg-black/25 px-2.5 py-1 text-[11px] font-medium text-white/[0.72] backdrop-blur-md transition hover:bg-black/40 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-[rgb(var(--nodedc-accent-rgb))]"
|
||||||
|
aria-label={`Открыть проект ${project.name}`}
|
||||||
|
onClick={(event) => event.stopPropagation()}
|
||||||
|
>
|
||||||
<Logo logo={project.logo_props} size={14} />
|
<Logo logo={project.logo_props} size={14} />
|
||||||
<span>{project.identifier}</span>
|
<span>{project.identifier}</span>
|
||||||
</div>
|
</Link>
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"rounded-full px-2.5 py-1 text-[11px] font-semibold backdrop-blur-md",
|
"rounded-full px-2.5 py-1 text-[11px] font-semibold backdrop-blur-md",
|
||||||
|
|
@ -155,7 +173,7 @@ export function HomeProjectStack(props: HomeProjectStackProps) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue