UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: доработка главной сводки и быстрых проектов
This commit is contained in:
DCCONSTRUCTIONS
parent
7d520c7aaf
commit
ba996998e8
|
|
@ -23,7 +23,7 @@ import { useTranslation } from "@plane/i18n";
|
|||
import { InboxIcon, PlusIcon, ProjectIcon } from "@plane/propel/icons";
|
||||
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
|
||||
import { Tooltip } from "@plane/propel/tooltip";
|
||||
import { copyUrlToClipboard, joinUrlPath } from "@plane/utils";
|
||||
import { cn, copyUrlToClipboard, joinUrlPath } from "@plane/utils";
|
||||
import { TopNavPowerK } from "@/components/navigation";
|
||||
import { useCommandPalette } from "@/hooks/store/use-command-palette";
|
||||
import { useProject } from "@/hooks/store/use-project";
|
||||
|
|
@ -246,9 +246,15 @@ export const ProjectShellTopToolbar = observer(function ProjectShellTopToolbar()
|
|||
}).sort((a, b) => a.sort_order - b.sort_order),
|
||||
[pathname, workspacePreferences, workspaceSlug]
|
||||
);
|
||||
const workspaceSlugValue = workspaceSlug?.toString();
|
||||
const isWorkspaceHome = pathname === `/${workspaceSlugValue}` || pathname === `/${workspaceSlugValue}/`;
|
||||
|
||||
return (
|
||||
<div className="z-20 w-full flex-shrink-0 px-4 pt-4 pb-3">
|
||||
<div
|
||||
className={cn("z-20 w-full flex-shrink-0 px-4 pt-4 pb-3", {
|
||||
"nodedc-home-top-toolbar": isWorkspaceHome,
|
||||
})}
|
||||
>
|
||||
<div className="nodedc-glass-modal flex w-full flex-wrap items-center justify-between gap-4 rounded-[1.6rem] px-4 py-3">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<div className="nodedc-toolbar-group relative flex items-center gap-1 overflow-visible">
|
||||
|
|
|
|||
|
|
@ -14,10 +14,11 @@ type HomePageHeaderProps = {
|
|||
selectedProject?: THomeProjectData;
|
||||
selectedProjectAnalytics?: TProjectAnalyticsCount;
|
||||
recents?: TActivityEntityData[];
|
||||
workspaceName?: string;
|
||||
};
|
||||
|
||||
export function HomePageHeader(props: HomePageHeaderProps) {
|
||||
const { currentUser, selectedProject, selectedProjectAnalytics, recents } = props;
|
||||
const { currentUser, selectedProject, selectedProjectAnalytics, recents, workspaceName } = props;
|
||||
const { currentLocale } = useTranslation();
|
||||
const { currentTime } = useCurrentTime();
|
||||
|
||||
|
|
@ -48,6 +49,7 @@ export function HomePageHeader(props: HomePageHeaderProps) {
|
|||
{ label: "Открытые задачи", value: openIssues.toString(), caption: "в работе" },
|
||||
{ label: "Касания 7 дней", value: recentTouchpoints.toString(), caption: "recent" },
|
||||
];
|
||||
const workspaceDisplayName = workspaceName?.trim() || "Workspace";
|
||||
|
||||
return (
|
||||
<section className="nodedc-home-hero">
|
||||
|
|
@ -57,26 +59,19 @@ export function HomePageHeader(props: HomePageHeaderProps) {
|
|||
</div>
|
||||
|
||||
<div className="nodedc-home-hero-grid">
|
||||
<div className="nodedc-home-hero-title-cell">
|
||||
<h1>WORKSPACE HOME</h1>
|
||||
<p>
|
||||
{selectedProject
|
||||
? `${selectedProject.identifier} в фокусе домашней сводки.`
|
||||
: "Выберите проект для фокуса, Ганта и рабочей аналитики."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="nodedc-home-market-band">
|
||||
<div className="min-w-0">
|
||||
<div className="text-12 font-semibold text-black/[0.58]">Фокус</div>
|
||||
<div className="mt-1 flex min-w-0 items-center gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-24 leading-none font-semibold text-black">
|
||||
<div className="truncate text-24 leading-none font-semibold text-black nodedc-home-market-focus-title">
|
||||
{selectedProject?.name ?? "Workspace"}
|
||||
</div>
|
||||
<div className="mt-1 truncate text-12 font-medium text-black/[0.54]">
|
||||
{selectedProject?.description || selectedProject?.identifier || "Координационный обзор"}
|
||||
</div>
|
||||
{selectedProject?.identifier && (
|
||||
<div className="mt-1 truncate text-12 font-medium text-black/[0.54]">
|
||||
{selectedProject.identifier}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -86,7 +81,7 @@ export function HomePageHeader(props: HomePageHeaderProps) {
|
|||
<div key={metric.label} className="min-w-0">
|
||||
<div className="truncate text-12 font-medium text-black/[0.58]">{metric.label}</div>
|
||||
<div className="mt-1 text-[26px] leading-none font-semibold text-black">{metric.value}</div>
|
||||
<div className="mt-2 h-2 overflow-hidden rounded-full bg-black/[0.18]">
|
||||
<div className="nodedc-home-market-progress">
|
||||
<div
|
||||
className="h-full rounded-full bg-black"
|
||||
style={{
|
||||
|
|
@ -102,6 +97,11 @@ export function HomePageHeader(props: HomePageHeaderProps) {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="nodedc-home-hero-title-cell">
|
||||
<div className="nodedc-home-hero-title-label">Workspace</div>
|
||||
<h1>{workspaceDisplayName}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { CalendarDays, Check, Filter, SlidersHorizontal } from "lucide-react";
|
||||
import { Check, Filter, SlidersHorizontal, X } from "lucide-react";
|
||||
import type { ChartDataType, IGanttBlock } from "@plane/types";
|
||||
import { cn } from "@plane/utils";
|
||||
import { getItemPositionWidth } from "@/components/gantt-chart/views/helpers";
|
||||
|
|
@ -249,11 +249,12 @@ const sortPreviewItems = (items: TGanttTimelinePreviewItem[], sortMode: TGanttPr
|
|||
});
|
||||
|
||||
export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
|
||||
const { emptyMessage, isLoading = false, items, locale, subtitle, title } = props;
|
||||
const { emptyMessage, isLoading = false, items, locale } = props;
|
||||
const [activeRange, setActiveRange] = useState<TGanttPreviewRange>("Live");
|
||||
const [activePanel, setActivePanel] = useState<"filters" | "view" | null>(null);
|
||||
const [activeDateFilters, setActiveDateFilters] = useState<TGanttPreviewDateFilter[]>([]);
|
||||
const [activeStatusFilters, setActiveStatusFilters] = useState<TGanttPreviewStatusFilter[]>([]);
|
||||
const [selectedPreviewItemId, setSelectedPreviewItemId] = useState<string | null>(null);
|
||||
const [showFullTaskName, setShowFullTaskName] = useState(false);
|
||||
const [sortMode, setSortMode] = useState<TGanttPreviewSortMode>("target_date_asc");
|
||||
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
|
@ -329,6 +330,15 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
|
|||
const hiddenItemsCount = Math.max(items.length - timeline.blocks.length, 0);
|
||||
const activeFilterCount =
|
||||
activeDateFilters.length + activeStatusFilters.length + (sortMode === "target_date_asc" ? 0 : 1);
|
||||
const selectedPreviewItem =
|
||||
timeline.blocks.find((item) => item.id === selectedPreviewItemId) ?? timeline.blocks.find((item) => item.id === items[0]?.id);
|
||||
const selectedPreviewItemDate = selectedPreviewItem?.target_date
|
||||
? getDateFromValue(selectedPreviewItem.target_date)
|
||||
: undefined;
|
||||
const selectedPreviewItemStartDate = selectedPreviewItem?.start_date
|
||||
? getDateFromValue(selectedPreviewItem.start_date)
|
||||
: undefined;
|
||||
const formatPreviewDate = (date?: Date) => (date ? getShortDateLabel(date, locale) : "Нет");
|
||||
|
||||
const toggleStatusFilter = (filterKey: TGanttPreviewStatusFilter) =>
|
||||
setActiveStatusFilters((currentFilters) =>
|
||||
|
|
@ -350,6 +360,13 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
|
|||
setSortMode("target_date_asc");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedPreviewItemId) return;
|
||||
if (timeline.blocks.some((item) => item.id === selectedPreviewItemId)) return;
|
||||
|
||||
setSelectedPreviewItemId(null);
|
||||
}, [selectedPreviewItemId, timeline.blocks]);
|
||||
|
||||
useEffect(() => {
|
||||
const scrollElement = scrollContainerRef.current;
|
||||
if (!scrollElement || isLoading) return;
|
||||
|
|
@ -366,28 +383,24 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
|
|||
return (
|
||||
<section className="nodedc-home-gantt-card">
|
||||
<div className="nodedc-home-gantt-toolbar">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<div className="grid size-10 shrink-0 place-items-center rounded-full bg-black text-[rgb(var(--nodedc-card-active-rgb))]">
|
||||
<CalendarDays className="size-4" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-18 leading-none font-semibold text-primary">{title}</div>
|
||||
{subtitle && <div className="mt-1 truncate text-12 text-secondary">{subtitle}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="nodedc-home-gantt-toolbar-spacer" aria-hidden="true" />
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{GANTT_RANGES.map((item) => (
|
||||
<button
|
||||
key={item}
|
||||
type="button"
|
||||
aria-pressed={activeRange === item}
|
||||
className={cn("nodedc-home-gantt-chip", { "nodedc-home-gantt-chip-active": activeRange === item })}
|
||||
onClick={() => setActiveRange(item)}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
))}
|
||||
<div className="nodedc-home-gantt-controls">
|
||||
<div className="nodedc-home-gantt-range-group" aria-label="Масштаб Ганта">
|
||||
{GANTT_RANGES.map((item) => (
|
||||
<button
|
||||
key={item}
|
||||
type="button"
|
||||
aria-pressed={activeRange === item}
|
||||
className={cn("nodedc-home-gantt-range-button", {
|
||||
"nodedc-home-gantt-range-button-active": activeRange === item,
|
||||
})}
|
||||
onClick={() => setActiveRange(item)}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="nodedc-home-gantt-action-group">
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -405,6 +418,7 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
|
|||
type="button"
|
||||
className={cn("nodedc-home-gantt-round-button", {
|
||||
"nodedc-home-gantt-round-button-active": activeFilterCount > 0 || activePanel === "filters",
|
||||
"nodedc-home-gantt-filter-button-has-count": activeFilterCount > 0,
|
||||
})}
|
||||
aria-expanded={activePanel === "filters"}
|
||||
aria-label="Фильтры задач Ганта"
|
||||
|
|
@ -412,6 +426,7 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
|
|||
onClick={() => setActivePanel((currentPanel) => (currentPanel === "filters" ? null : "filters"))}
|
||||
>
|
||||
<Filter className="size-4" />
|
||||
{activeFilterCount > 0 && <span className="nodedc-home-gantt-filter-count">{activeFilterCount}</span>}
|
||||
</button>
|
||||
|
||||
{activePanel === "view" && (
|
||||
|
|
@ -551,6 +566,38 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{selectedPreviewItemId && selectedPreviewItem && (
|
||||
<div className="nodedc-home-gantt-inspector">
|
||||
<button
|
||||
type="button"
|
||||
className="nodedc-home-gantt-inspector-close"
|
||||
aria-label="Закрыть карточку задачи"
|
||||
onClick={() => setSelectedPreviewItemId(null)}
|
||||
>
|
||||
<X className="size-4" />
|
||||
</button>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] font-semibold tracking-[0.18em] text-white/45 uppercase">
|
||||
{selectedPreviewItem.identifier}
|
||||
</div>
|
||||
<div className="mt-2 text-17 font-semibold leading-snug text-white">{selectedPreviewItem.name}</div>
|
||||
<div className="mt-4 grid grid-cols-2 gap-2 text-12">
|
||||
<div className="rounded-[1rem] bg-black/20 px-3 py-2">
|
||||
<div className="text-white/42">Начало</div>
|
||||
<div className="mt-1 font-semibold text-white">{formatPreviewDate(selectedPreviewItemStartDate)}</div>
|
||||
</div>
|
||||
<div className="rounded-[1rem] bg-black/20 px-3 py-2">
|
||||
<div className="text-white/42">Срок</div>
|
||||
<div className="mt-1 font-semibold text-white">{formatPreviewDate(selectedPreviewItemDate)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 text-12 leading-5 text-white/58">
|
||||
Клик по строке или полосе Ганта выбирает задачу без перехода в полную карточку.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative z-[1] space-y-3 pt-12">
|
||||
{isLoading ? (
|
||||
Array.from({ length: 4 }, (_, index) => (
|
||||
|
|
@ -560,7 +607,19 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
|
|||
timeline.blocks.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="nodedc-home-gantt-row"
|
||||
className={cn("nodedc-home-gantt-row", {
|
||||
"nodedc-home-gantt-row-selected": selectedPreviewItemId === item.id,
|
||||
})}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Показать карточку задачи ${item.name}`}
|
||||
onClick={() => setSelectedPreviewItemId(item.id)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key !== "Enter" && event.key !== " ") return;
|
||||
|
||||
event.preventDefault();
|
||||
setSelectedPreviewItemId(item.id);
|
||||
}}
|
||||
style={{
|
||||
gridTemplateColumns: `${GANTT_LABEL_COLUMN_WIDTH}px ${timeline.timelineWidth}px`,
|
||||
}}
|
||||
|
|
@ -579,6 +638,13 @@ export function GanttTimelinePreview(props: TGanttTimelinePreviewProps) {
|
|||
<div className="nodedc-home-gantt-track" style={{ width: `${timeline.timelineWidth}px` }}>
|
||||
<div
|
||||
className={cn("nodedc-home-gantt-bar", `nodedc-home-gantt-bar-${item.tone}`)}
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
aria-label={`Показать карточку задачи ${item.name}`}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
setSelectedPreviewItemId(item.id);
|
||||
}}
|
||||
style={{
|
||||
left: `${item.left}px`,
|
||||
width: `${item.width}px`,
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import { cn } from "@plane/utils";
|
|||
// hooks
|
||||
import { useHome } from "@/hooks/store/use-home";
|
||||
import { useProject } from "@/hooks/store/use-project";
|
||||
import { useWorkspace } from "@/hooks/store/use-workspace";
|
||||
// plane web components
|
||||
import { HomePageHeader } from "@/plane-web/components/home/header";
|
||||
import { ProjectService } from "@/services/project";
|
||||
|
|
@ -23,7 +24,7 @@ import { WorkspaceService } from "@/services/workspace.service";
|
|||
import { HomeCardShell } from "./home-card-shell";
|
||||
import { HomeGanttPreview } from "./home-gantt-preview";
|
||||
import { HomeRecentIssueDecks } from "./home-recent-issue-decks";
|
||||
import { HomeActivityTrendCard, HomeOperationsOverview } from "./home-project-insights";
|
||||
import { HomeActivityTrendCard, HomeOperationsCard, HomeRhythmRecentOverview } from "./home-project-insights";
|
||||
import { HomeProjectStack } from "./home-project-stack";
|
||||
import { aggregateProjectAnalytics, type THomeProjectData } from "./home.utils";
|
||||
import { StickiesWidget } from "../stickies/widget";
|
||||
|
|
@ -81,6 +82,7 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
|
|||
const pathname = usePathname();
|
||||
// store hooks
|
||||
const { toggleWidgetSettings, widgetsMap, showWidgetSettings, loading } = useHome();
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { loader, joinedProjectIds, getPartialProjectById, fetchProjectAnalyticsCount, getProjectAnalyticsCountById } =
|
||||
useProject();
|
||||
// plane hooks
|
||||
|
|
@ -190,21 +192,15 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
|
|||
].filter(Boolean);
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full flex-col gap-6">
|
||||
<HomePageHeader
|
||||
currentUser={currentUser}
|
||||
selectedProject={selectedProject}
|
||||
selectedProjectAnalytics={selectedProjectAnalytics}
|
||||
recents={workspaceRecents}
|
||||
/>
|
||||
<div className="nodedc-home-dashboard-shell relative flex h-full w-full flex-col">
|
||||
<ManageWidgetsModal
|
||||
workspaceSlug={workspaceSlugValue}
|
||||
isModalOpen={showWidgetSettings}
|
||||
handleOnClose={() => toggleWidgetSettings(false)}
|
||||
/>
|
||||
|
||||
<div className="grid gap-5 xl:grid-cols-[minmax(320px,360px)_minmax(0,1fr)] xl:items-stretch">
|
||||
<div className="min-w-0">
|
||||
<div className="nodedc-home-dashboard-grid grid xl:grid-cols-[minmax(320px,360px)_minmax(0,1fr)] xl:items-stretch">
|
||||
<div className="flex min-w-0">
|
||||
<HomeProjectStack
|
||||
className="h-full"
|
||||
projects={homeProjects}
|
||||
|
|
@ -215,13 +211,20 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
|
|||
onSelectProject={setSelectedProjectId}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 space-y-5">
|
||||
<div className="nodedc-home-main-column min-w-0">
|
||||
<HomePageHeader
|
||||
currentUser={currentUser}
|
||||
selectedProject={selectedProject}
|
||||
selectedProjectAnalytics={selectedProjectAnalytics}
|
||||
recents={workspaceRecents}
|
||||
workspaceName={currentWorkspace?.name}
|
||||
/>
|
||||
<HomeGanttPreview
|
||||
project={selectedProject}
|
||||
analytics={selectedProjectAnalytics}
|
||||
workspaceSlug={workspaceSlugValue}
|
||||
/>
|
||||
<HomeOperationsOverview
|
||||
<HomeRhythmRecentOverview
|
||||
project={selectedProject}
|
||||
analytics={selectedProjectAnalytics}
|
||||
analyticsCollection={analyticsCollection}
|
||||
|
|
@ -232,13 +235,22 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<HomeActivityTrendCard
|
||||
project={selectedProject}
|
||||
analytics={selectedProjectAnalytics}
|
||||
analyticsCollection={analyticsCollection}
|
||||
recents={workspaceRecents}
|
||||
locale={currentLocale}
|
||||
/>
|
||||
<div className="nodedc-home-lower-grid grid xl:grid-cols-[minmax(320px,360px)_minmax(0,1fr)]">
|
||||
<HomeOperationsCard
|
||||
project={selectedProject}
|
||||
analytics={selectedProjectAnalytics}
|
||||
analyticsCollection={analyticsCollection}
|
||||
recents={workspaceRecents}
|
||||
locale={currentLocale}
|
||||
/>
|
||||
<HomeActivityTrendCard
|
||||
project={selectedProject}
|
||||
analytics={selectedProjectAnalytics}
|
||||
analyticsCollection={analyticsCollection}
|
||||
recents={workspaceRecents}
|
||||
locale={currentLocale}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<HomeRecentIssueDecks project={selectedProject} workspaceSlug={workspaceSlugValue} />
|
||||
|
||||
|
|
|
|||
|
|
@ -293,111 +293,125 @@ export function HomeActivityTrendCard(props: HomeProjectInsightsProps) {
|
|||
);
|
||||
}
|
||||
|
||||
export function HomeOperationsOverview(props: HomeProjectInsightsProps) {
|
||||
const { recentActivitySlot } = props;
|
||||
export function HomeRhythmCard(props: HomeProjectInsightsProps) {
|
||||
const {
|
||||
completedIssues,
|
||||
completionRate,
|
||||
metricCards,
|
||||
openIssues,
|
||||
progressRows,
|
||||
project,
|
||||
recentTouchpoints,
|
||||
totalIssues,
|
||||
} = useHomeProjectInsightData(props);
|
||||
|
||||
return (
|
||||
<section className="grid gap-4 xl:grid-cols-[minmax(0,0.95fr)_minmax(0,0.95fr)_minmax(300px,1.1fr)]">
|
||||
<div className="nodedc-home-subpanel space-y-4 p-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="grid size-11 place-items-center rounded-2xl bg-[rgba(var(--nodedc-accent-rgb),0.14)] text-[rgb(var(--nodedc-accent-rgb))]">
|
||||
<UsersRound className="size-5" />
|
||||
<section className="nodedc-home-subpanel nodedc-home-rhythm-card space-y-4 p-5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-15 font-semibold text-primary">Ритм исполнения</div>
|
||||
<div className="text-12 text-secondary">Закрытый объём и открытый остаток по фокусу.</div>
|
||||
</div>
|
||||
<div className="grid size-11 place-items-center rounded-full bg-black text-[rgb(var(--nodedc-card-active-rgb))]">
|
||||
<CheckCircle2 className="size-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{metricCards.map((metric) => (
|
||||
<div key={metric.label} className="rounded-[1.15rem] bg-black/[0.12] p-3">
|
||||
<div className="text-11 leading-4 text-secondary">{metric.label}</div>
|
||||
<div className="mt-2 text-18 leading-none font-semibold text-primary">{metric.value}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-15 font-semibold text-primary">Операционный срез</div>
|
||||
<div className="text-12 text-secondary">Команда, циклы и модули относительно текущего workspace.</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-3 text-12">
|
||||
<span className="text-secondary">Закрытые задачи</span>
|
||||
<span className="font-semibold text-primary">{completedIssues}</span>
|
||||
</div>
|
||||
<div className="nodedc-home-focus-track">
|
||||
<div
|
||||
className="nodedc-home-focus-fill"
|
||||
style={{ width: `${totalIssues > 0 ? (completedIssues / totalIssues) * 100 : 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{progressRows.map((row) => {
|
||||
const percent = row.max > 0 ? Math.max((row.value / row.max) * 100, row.value > 0 ? 10 : 0) : 0;
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-3 text-12">
|
||||
<span className="text-secondary">Открытый остаток</span>
|
||||
<span className="font-semibold text-primary">{openIssues}</span>
|
||||
</div>
|
||||
<div className="nodedc-home-focus-track">
|
||||
<div
|
||||
className="nodedc-home-focus-fill opacity-65"
|
||||
style={{
|
||||
width: `${totalIssues > 0 ? (openIssues / totalIssues) * 100 : 0}%`,
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div key={row.label} className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-3 text-12">
|
||||
<span className="text-secondary">{row.label}</span>
|
||||
<span className="font-semibold text-primary">{row.value}</span>
|
||||
</div>
|
||||
<div className="nodedc-home-focus-track">
|
||||
<div className="nodedc-home-focus-fill" style={{ width: `${Math.min(percent, 100)}%` }} />
|
||||
</div>
|
||||
<div className="text-12 leading-5 text-secondary">
|
||||
<span className="font-semibold text-primary">{project ? project.identifier : "Workspace"}</span>
|
||||
<span> держит </span>
|
||||
<span className="font-semibold text-primary">{totalIssues}</span>
|
||||
<span> задач и </span>
|
||||
<span className="font-semibold text-primary">{recentTouchpoints}</span>
|
||||
<span> недавних касаний.</span>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function HomeOperationsCard(props: HomeProjectInsightsProps) {
|
||||
const {
|
||||
progressRows,
|
||||
} = useHomeProjectInsightData(props);
|
||||
|
||||
return (
|
||||
<section className="nodedc-home-subpanel nodedc-home-operations-card space-y-4 p-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="grid size-11 place-items-center rounded-2xl bg-[rgba(var(--nodedc-accent-rgb),0.14)] text-[rgb(var(--nodedc-accent-rgb))]">
|
||||
<UsersRound className="size-5" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-15 font-semibold text-primary">Операционный срез</div>
|
||||
<div className="text-12 text-secondary">Команда, циклы и модули относительно текущего workspace.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{progressRows.map((row) => {
|
||||
const percent = row.max > 0 ? Math.max((row.value / row.max) * 100, row.value > 0 ? 10 : 0) : 0;
|
||||
|
||||
return (
|
||||
<div key={row.label} className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-3 text-12">
|
||||
<span className="text-secondary">{row.label}</span>
|
||||
<span className="font-semibold text-primary">{row.value}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="nodedc-home-focus-track">
|
||||
<div className="nodedc-home-focus-fill" style={{ width: `${Math.min(percent, 100)}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="nodedc-home-subpanel space-y-4 p-5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-15 font-semibold text-primary">Ритм исполнения</div>
|
||||
<div className="text-12 text-secondary">Закрытый объём и открытый остаток по фокусу.</div>
|
||||
</div>
|
||||
<div className="grid size-11 place-items-center rounded-full bg-black text-[rgb(var(--nodedc-card-active-rgb))]">
|
||||
<CheckCircle2 className="size-5" />
|
||||
</div>
|
||||
</div>
|
||||
export function HomeRhythmRecentOverview(props: HomeProjectInsightsProps) {
|
||||
const { recentActivitySlot } = props;
|
||||
const { completionRate } = useHomeProjectInsightData(props);
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{metricCards.map((metric) => (
|
||||
<div key={metric.label} className="rounded-[1.15rem] bg-black/[0.12] p-3">
|
||||
<div className="text-11 leading-4 text-secondary">{metric.label}</div>
|
||||
<div className="mt-2 text-18 leading-none font-semibold text-primary">{metric.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-3 text-12">
|
||||
<span className="text-secondary">Закрытые задачи</span>
|
||||
<span className="font-semibold text-primary">{completedIssues}</span>
|
||||
</div>
|
||||
<div className="nodedc-home-focus-track">
|
||||
<div
|
||||
className="nodedc-home-focus-fill"
|
||||
style={{ width: `${totalIssues > 0 ? (completedIssues / totalIssues) * 100 : 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-3 text-12">
|
||||
<span className="text-secondary">Открытый остаток</span>
|
||||
<span className="font-semibold text-primary">{openIssues}</span>
|
||||
</div>
|
||||
<div className="nodedc-home-focus-track">
|
||||
<div
|
||||
className="nodedc-home-focus-fill opacity-65"
|
||||
style={{
|
||||
width: `${totalIssues > 0 ? (openIssues / totalIssues) * 100 : 0}%`,
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-12 leading-5 text-secondary">
|
||||
<span className="font-semibold text-primary">{project ? project.identifier : "Workspace"}</span>
|
||||
<span> держит </span>
|
||||
<span className="font-semibold text-primary">{totalIssues}</span>
|
||||
<span> задач и </span>
|
||||
<span className="font-semibold text-primary">{recentTouchpoints}</span>
|
||||
<span> недавних касаний.</span>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<section className="nodedc-home-ops-recent-grid grid gap-4 xl:grid-cols-[minmax(0,0.95fr)_minmax(320px,1.05fr)]">
|
||||
<HomeRhythmCard {...props} />
|
||||
|
||||
<div className="nodedc-home-subpanel p-5">
|
||||
{recentActivitySlot ? (
|
||||
|
|
@ -423,6 +437,15 @@ export function HomeOperationsOverview(props: HomeProjectInsightsProps) {
|
|||
);
|
||||
}
|
||||
|
||||
export function HomeOperationsOverview(props: HomeProjectInsightsProps) {
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<HomeRhythmRecentOverview {...props} />
|
||||
<HomeOperationsCard {...props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
||||
return (
|
||||
<div className="grid gap-5">
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
import { FolderOpenDot, Layers3, Search, UsersRound } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import type { TActivityEntityData, TProjectAnalyticsCount } from "@plane/types";
|
||||
import { Logo } from "@plane/propel/emoji-icon-picker";
|
||||
import { cn } from "@plane/utils";
|
||||
|
|
@ -29,6 +30,7 @@ const ACTIVE_CARD_HEIGHT = 248;
|
|||
const STACK_OFFSET = 88;
|
||||
|
||||
export function HomeProjectStack(props: HomeProjectStackProps) {
|
||||
const router = useRouter();
|
||||
const {
|
||||
className,
|
||||
projects,
|
||||
|
|
@ -201,7 +203,7 @@ export function HomeProjectStack(props: HomeProjectStackProps) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4 rounded-[24px] bg-black/10 p-4 xl:mt-auto">
|
||||
<div className="nodedc-home-project-quick-section mt-4 rounded-[24px] bg-black/10 p-4 xl:mt-auto">
|
||||
<div className="mb-3 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-13 font-semibold text-primary">Быстрый выбор</div>
|
||||
|
|
@ -213,45 +215,64 @@ export function HomeProjectStack(props: HomeProjectStackProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="nodedc-home-project-quick-list">
|
||||
{orderedProjects.map((project: THomeProjectData) => {
|
||||
const analytics = analyticsMap[project.id];
|
||||
const isActive = project.id === selectedProject?.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={project.id}
|
||||
type="button"
|
||||
className={cn("nodedc-toolbar-pill inline-flex items-center gap-2", {
|
||||
"!bg-[rgb(var(--nodedc-card-active-rgb))] !text-[rgb(var(--nodedc-on-card-active-rgb))]":
|
||||
project.id === selectedProject?.id,
|
||||
})}
|
||||
onClick={() => onSelectProject(project.id)}
|
||||
className="nodedc-home-project-quick-button"
|
||||
data-active={isActive}
|
||||
aria-label={
|
||||
isActive ? `Открыть рабочую область проекта ${project.name}` : `Выбрать проект ${project.name}`
|
||||
}
|
||||
onClick={() => {
|
||||
if (isActive) {
|
||||
router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
|
||||
return;
|
||||
}
|
||||
|
||||
onSelectProject(project.id);
|
||||
}}
|
||||
>
|
||||
<Logo logo={project.logo_props} size={14} />
|
||||
<span>{project.identifier}</span>
|
||||
<span className="text-[11px] opacity-70">{getCompletionRate(analytics)}%</span>
|
||||
<span className="nodedc-home-project-quick-main">
|
||||
<span className="nodedc-home-project-quick-logo">
|
||||
<Logo logo={project.logo_props} size={14} />
|
||||
</span>
|
||||
<span className="truncate">{project.identifier}</span>
|
||||
</span>
|
||||
<span className="nodedc-home-project-quick-metric">
|
||||
<span className="nodedc-home-project-quick-dot" aria-hidden="true" />
|
||||
<span>{getCompletionRate(analytics)}%</span>
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{selectedProject && (
|
||||
<div className="mt-4 grid grid-cols-2 gap-3 rounded-[22px] bg-white/[0.04] p-3 md:grid-cols-3">
|
||||
<div className="rounded-2xl bg-black/10 px-3 py-2">
|
||||
<div className="nodedc-home-project-focus-grid mt-4 grid grid-cols-2 gap-3 md:grid-cols-3">
|
||||
<div className="nodedc-home-project-focus-item px-3 py-2">
|
||||
<div className="text-[11px] tracking-[0.18em] text-placeholder uppercase">Фокус</div>
|
||||
<div className="mt-1 text-13 font-semibold text-primary">{selectedProject.identifier}</div>
|
||||
<div className="nodedc-home-project-focus-value mt-1 text-13 font-semibold text-primary">
|
||||
{selectedProject.identifier}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-black/10 px-3 py-2">
|
||||
<div className="nodedc-home-project-focus-item px-3 py-2">
|
||||
<div className="flex items-center gap-1 text-[11px] tracking-[0.18em] text-placeholder uppercase">
|
||||
<UsersRound className="size-3.5" />
|
||||
<span>Команда</span>
|
||||
</div>
|
||||
<div className="mt-1 text-13 font-semibold text-primary">
|
||||
<div className="nodedc-home-project-focus-value mt-1 text-13 font-semibold text-primary">
|
||||
{analyticsMap[selectedProject.id]?.total_members ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-black/10 px-3 py-2">
|
||||
<div className="nodedc-home-project-focus-item px-3 py-2">
|
||||
<div className="text-[11px] tracking-[0.18em] text-placeholder uppercase">Контур</div>
|
||||
<div className="mt-1 text-13 font-semibold text-primary">
|
||||
<div className="nodedc-home-project-focus-value mt-1 text-13 font-semibold text-primary">
|
||||
{activityCountByProject[selectedProject.id] ?? 0} касаний
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -57,8 +57,8 @@ export const WorkspaceHomeView = observer(function WorkspaceHomeView() {
|
|||
)}
|
||||
<>
|
||||
<HomePeekOverviewsRoot />
|
||||
<ContentWrapper className="mx-auto scrollbar-hide gap-6 bg-transparent px-page-x">
|
||||
<div className="nodedc-workspace-page-shell mx-auto w-full max-w-[1480px]">
|
||||
<ContentWrapper className="nodedc-home-route-surface mx-auto scrollbar-hide gap-6 px-page-x">
|
||||
<div className="nodedc-workspace-page-shell nodedc-home-page-shell mx-auto w-full">
|
||||
<DashboardWidgets currentUser={currentUser} />
|
||||
</div>
|
||||
</ContentWrapper>
|
||||
|
|
|
|||
|
|
@ -389,15 +389,15 @@ export function VoiceTaskerGlobalControl({ workspaceSlug }: Props) {
|
|||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"shadow-lg pointer-events-auto flex size-11 items-center justify-center rounded-full border-[0.5px] transition",
|
||||
"pointer-events-auto flex size-11 items-center justify-center border-0 bg-transparent p-0 shadow-none outline-none transition",
|
||||
isAvailable
|
||||
? "border-pink-500/40 bg-pink-500 hover:bg-pink-600 text-white"
|
||||
: "cursor-not-allowed border-subtle bg-layer-2 text-tertiary"
|
||||
? "text-[rgb(var(--nodedc-accent-rgb))] hover:text-[rgb(var(--nodedc-card-active-rgb))]"
|
||||
: "cursor-not-allowed text-tertiary"
|
||||
)}
|
||||
disabled={!isAvailable}
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<Mic className="size-5" />
|
||||
<Mic className="size-7" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1790,6 +1790,60 @@
|
|||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.nodedc-home-route-surface {
|
||||
min-height: 100vh;
|
||||
background: #333333 !important;
|
||||
}
|
||||
|
||||
main:has(.nodedc-home-route-surface) {
|
||||
background: #333333 !important;
|
||||
}
|
||||
|
||||
.nodedc-home-page-shell {
|
||||
max-width: min(1840px, calc(100vw - 5rem));
|
||||
}
|
||||
|
||||
.nodedc-home-top-toolbar > .nodedc-glass-modal {
|
||||
max-width: min(1840px, calc(100vw - 5rem));
|
||||
margin-inline: auto;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
padding-inline: 0 !important;
|
||||
box-shadow: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
.nodedc-home-top-toolbar {
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
|
||||
.nodedc-home-dashboard-shell {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.nodedc-home-dashboard-grid {
|
||||
align-items: stretch;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.nodedc-home-lower-grid {
|
||||
gap: 0.75rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.nodedc-home-project-panel {
|
||||
margin-top: 1.75rem;
|
||||
height: calc(100% - 1.75rem) !important;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.nodedc-home-main-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.nodedc-home-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -1797,17 +1851,16 @@
|
|||
border: 0 !important;
|
||||
outline: none !important;
|
||||
border-radius: 1.9rem !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.008) 100%), rgba(10, 10, 12, 0.74) !important;
|
||||
padding: 1rem;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022) !important;
|
||||
-webkit-backdrop-filter: blur(28px);
|
||||
backdrop-filter: blur(28px);
|
||||
background: transparent !important;
|
||||
padding: 0;
|
||||
box-shadow: none !important;
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.nodedc-home-hero {
|
||||
padding: 1.2rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1817,42 +1870,58 @@
|
|||
justify-content: flex-end;
|
||||
gap: 0.8rem;
|
||||
min-height: 1.75rem;
|
||||
padding: 0.15rem 0.35rem 0.85rem;
|
||||
padding: 0.1rem 0.35rem 0.45rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.nodedc-home-hero-grid {
|
||||
--nodedc-home-title-width: 13.25rem;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 1rem;
|
||||
position: relative;
|
||||
min-height: 8.55rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.nodedc-home-hero-grid {
|
||||
grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.nodedc-home-hero-title-cell {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
min-height: 8rem;
|
||||
min-height: 8.55rem;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
justify-content: center;
|
||||
border-radius: 1.7rem;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.006)), rgba(0, 0, 0, 0.18);
|
||||
background: #474747 !important;
|
||||
padding: 1.25rem;
|
||||
padding-right: max(1.25rem, calc(100% - var(--nodedc-home-title-width)));
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-hero-title-cell h1 {
|
||||
max-width: 16rem;
|
||||
max-width: 18rem;
|
||||
color: var(--text-color-primary);
|
||||
font-size: clamp(2rem, 3vw, 3.35rem);
|
||||
font-size: clamp(1.05rem, 1.25vw, 1.45rem);
|
||||
font-weight: 700;
|
||||
line-height: 0.92;
|
||||
line-height: 1.02;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.nodedc-home-hero-title-label {
|
||||
margin-bottom: 0.45rem;
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nodedc-home-hero-title-cell p {
|
||||
margin-top: 0.75rem;
|
||||
color: var(--text-color-secondary);
|
||||
|
|
@ -1886,21 +1955,58 @@
|
|||
}
|
||||
|
||||
.nodedc-home-market-band {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: var(--nodedc-home-title-width);
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
min-height: 8rem;
|
||||
min-height: 8.55rem;
|
||||
align-items: flex-end;
|
||||
gap: 1.5rem;
|
||||
border-radius: 1.7rem;
|
||||
gap: 1rem;
|
||||
border-radius: 1.7rem !important;
|
||||
background: rgb(var(--nodedc-card-active-rgb)) !important;
|
||||
padding: 1.25rem;
|
||||
padding: 1rem;
|
||||
color: rgb(var(--nodedc-on-card-active-rgb));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.42),
|
||||
0 18px 42px rgba(0, 0, 0, 0.18) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-market-focus-title {
|
||||
line-height: 1.22 !important;
|
||||
}
|
||||
|
||||
.nodedc-home-market-progress {
|
||||
height: 1.05rem;
|
||||
margin-top: 0.5rem;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.nodedc-home-hero-grid {
|
||||
display: flex;
|
||||
min-height: auto;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.nodedc-home-hero-title-cell,
|
||||
.nodedc-home-market-band {
|
||||
position: relative;
|
||||
inset: auto;
|
||||
width: 100%;
|
||||
min-height: 6rem;
|
||||
}
|
||||
|
||||
.nodedc-home-hero-title-cell {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.nodedc-home-market-band {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
|
@ -1913,11 +2019,10 @@
|
|||
isolation: isolate;
|
||||
min-height: 30rem;
|
||||
border-radius: 2rem !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.026) 0%, rgba(255, 255, 255, 0.008) 100%), rgba(8, 8, 10, 0.78) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
|
||||
-webkit-backdrop-filter: blur(28px);
|
||||
backdrop-filter: blur(28px);
|
||||
background: #050506 !important;
|
||||
box-shadow: none !important;
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-toolbar {
|
||||
|
|
@ -1926,11 +2031,67 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-toolbar-spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-range-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
border-radius: 999px;
|
||||
background: #171718;
|
||||
padding: 0.2rem;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.045),
|
||||
0 14px 28px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-range-button {
|
||||
display: inline-flex;
|
||||
height: 2.15rem;
|
||||
min-width: 2.15rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0 !important;
|
||||
outline: none !important;
|
||||
border-radius: 999px !important;
|
||||
background: transparent !important;
|
||||
padding-inline: 0.82rem;
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
transition:
|
||||
background 160ms ease,
|
||||
color 160ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-range-button:hover {
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-range-button-active {
|
||||
background: rgb(var(--nodedc-card-active-rgb)) !important;
|
||||
color: rgb(var(--nodedc-on-card-active-rgb)) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.42),
|
||||
0 10px 22px rgba(var(--nodedc-card-active-rgb), 0.18);
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-chip {
|
||||
display: inline-flex;
|
||||
height: 2.35rem;
|
||||
|
|
@ -1961,10 +2122,34 @@
|
|||
border: 0 !important;
|
||||
outline: none !important;
|
||||
border-radius: 999px !important;
|
||||
background: rgba(0, 0, 0, 0.42) !important;
|
||||
background: #151516 !important;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-filter-button-has-count {
|
||||
display: inline-flex !important;
|
||||
width: auto;
|
||||
min-width: 3.85rem;
|
||||
gap: 0.45rem;
|
||||
padding-inline: 0.72rem;
|
||||
background: rgba(0, 0, 0, 0.56) !important;
|
||||
color: var(--text-color-primary) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-filter-count {
|
||||
display: grid;
|
||||
width: 1.25rem;
|
||||
min-width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: #08080a;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-round-button:hover {
|
||||
background: rgba(0, 0, 0, 0.58) !important;
|
||||
}
|
||||
|
|
@ -1979,6 +2164,12 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: #0f0f10;
|
||||
padding: 0.2rem;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.03),
|
||||
0 14px 28px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-popover {
|
||||
|
|
@ -2092,7 +2283,7 @@
|
|||
margin: 0 1.25rem 1.25rem;
|
||||
overflow: hidden;
|
||||
border-radius: 1.75rem;
|
||||
background: rgba(0, 0, 0, 0.28);
|
||||
background: #050506;
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-scroll {
|
||||
|
|
@ -2121,7 +2312,9 @@
|
|||
position: relative;
|
||||
min-height: 23.5rem;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 4.2rem;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 4.2rem,
|
||||
#050506;
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-floating {
|
||||
|
|
@ -2141,6 +2334,48 @@
|
|||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-inspector {
|
||||
position: absolute;
|
||||
top: 5.35rem;
|
||||
left: calc(12rem + 2.25rem);
|
||||
z-index: 6;
|
||||
width: min(31rem, calc(100% - 16rem));
|
||||
min-height: 11.5rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.065);
|
||||
border-radius: 1.65rem;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.025) 44%, rgba(255, 255, 255, 0.08)),
|
||||
rgba(34, 34, 38, 0.58);
|
||||
padding: 1rem 1.05rem 1.05rem 3.85rem;
|
||||
box-shadow:
|
||||
0 22px 60px rgba(0, 0, 0, 0.42),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.16);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(1.22);
|
||||
backdrop-filter: blur(28px) saturate(1.22);
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-inspector-close {
|
||||
position: absolute;
|
||||
top: 0.72rem;
|
||||
left: 0.72rem;
|
||||
display: grid;
|
||||
width: 2.35rem;
|
||||
min-width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
place-items: center;
|
||||
border: 0 !important;
|
||||
outline: none !important;
|
||||
border-radius: 1.05rem !important;
|
||||
background: rgba(0, 0, 0, 0.44) !important;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-inspector-close:hover {
|
||||
background: rgba(0, 0, 0, 0.62) !important;
|
||||
color: rgb(var(--nodedc-card-active-rgb));
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-grid {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
|
|
@ -2239,6 +2474,20 @@
|
|||
align-items: center;
|
||||
gap: 1rem;
|
||||
min-height: 3.45rem;
|
||||
cursor: pointer;
|
||||
border-radius: 1.05rem;
|
||||
transition:
|
||||
background 140ms ease,
|
||||
color 140ms ease;
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-row:hover,
|
||||
.nodedc-home-gantt-row-selected {
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-row-selected .nodedc-home-gantt-row-label {
|
||||
color: rgb(var(--nodedc-card-active-rgb));
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-row-compact {
|
||||
|
|
@ -2257,7 +2506,7 @@
|
|||
left: 0;
|
||||
z-index: 2;
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(90deg, rgba(7, 7, 9, 0.94) 0%, rgba(7, 7, 9, 0.72) 76%, transparent 100%);
|
||||
background: linear-gradient(90deg, #050506 0%, rgba(5, 5, 6, 0.78) 76%, transparent 100%);
|
||||
padding: 0.45rem 0.75rem 0.45rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -2275,6 +2524,7 @@
|
|||
height: 1.4rem;
|
||||
min-width: 2.5rem;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nodedc-home-gantt-bar-accent {
|
||||
|
|
@ -2757,6 +3007,131 @@
|
|||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-list {
|
||||
display: flex;
|
||||
width: calc(100% + 2rem);
|
||||
margin-inline: -1rem;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 1.25rem;
|
||||
background: rgba(8, 8, 10, 0.62);
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 3.22rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
border: 0 !important;
|
||||
outline: none !important;
|
||||
border-radius: 0 !important;
|
||||
background: rgba(255, 255, 255, 0.028) !important;
|
||||
padding: 0.7rem 0.9rem;
|
||||
color: var(--text-color-primary);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 520;
|
||||
text-align: left;
|
||||
transition:
|
||||
background 160ms ease,
|
||||
color 160ms ease,
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-button + .nodedc-home-project-quick-button {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-button:first-child {
|
||||
border-top-left-radius: 1.25rem !important;
|
||||
border-top-right-radius: 1.25rem !important;
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-button:last-child {
|
||||
border-bottom-right-radius: 1.25rem !important;
|
||||
border-bottom-left-radius: 1.25rem !important;
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-button:hover {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: var(--text-color-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-button[data-active="true"] {
|
||||
background: rgba(255, 255, 255, 0.13) !important;
|
||||
color: var(--text-color-primary);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-main {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.62rem;
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-logo {
|
||||
display: grid;
|
||||
width: 1.7rem;
|
||||
min-width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-button[data-active="true"] .nodedc-home-project-quick-logo {
|
||||
background: rgba(var(--nodedc-card-active-rgb), 0.92);
|
||||
color: #0a0a0b;
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-metric {
|
||||
display: inline-flex;
|
||||
min-width: max-content;
|
||||
align-items: center;
|
||||
gap: 0.38rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 650;
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-dot {
|
||||
display: block;
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.58);
|
||||
}
|
||||
|
||||
.nodedc-home-project-quick-button[data-active="true"] .nodedc-home-project-quick-dot {
|
||||
background: rgb(var(--nodedc-card-active-rgb));
|
||||
}
|
||||
|
||||
.nodedc-home-project-focus-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.nodedc-home-project-focus-item {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
padding-inline: 0.75rem !important;
|
||||
}
|
||||
|
||||
.nodedc-home-project-focus-value {
|
||||
min-width: 0;
|
||||
line-height: 1.2;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.nodedc-home-user-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -3020,6 +3395,14 @@
|
|||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.01) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-operations-card {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0.006) 100%),
|
||||
rgba(10, 10, 12, 0.68) !important;
|
||||
-webkit-backdrop-filter: blur(28px);
|
||||
backdrop-filter: blur(28px);
|
||||
}
|
||||
|
||||
.nodedc-home-soft-badge {
|
||||
background: rgba(0, 0, 0, 0.34) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.01) !important;
|
||||
|
|
|
|||
Loading…
Reference in New Issue