UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: горизонтализация hero-блока и затемнение подложек home
This commit is contained in:
DCCONSTRUCTIONS
parent
3034ba5089
commit
4c436a949e
|
|
@ -232,6 +232,8 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
|
|||
/>
|
||||
)}
|
||||
|
||||
<HomeRecentIssueDecks project={selectedProject} workspaceSlug={workspaceSlugValue} />
|
||||
|
||||
<HomeProjectInsights
|
||||
project={selectedProject}
|
||||
analytics={selectedProjectAnalytics}
|
||||
|
|
@ -240,8 +242,6 @@ export const DashboardWidgets = observer(function DashboardWidgets(props: Dashbo
|
|||
locale={currentLocale || "ru-RU"}
|
||||
/>
|
||||
|
||||
<HomeRecentIssueDecks project={selectedProject} workspaceSlug={workspaceSlugValue} />
|
||||
|
||||
{!isWikiApp && <NoProjectsEmptyState />}
|
||||
|
||||
{hasDashboardContent ? (
|
||||
|
|
|
|||
|
|
@ -190,15 +190,15 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
|||
<div className="text-14 font-semibold text-primary">Темп активности</div>
|
||||
<div className="text-12 text-secondary">Последние 7 дней переходов и взаимодействий внутри сводки.</div>
|
||||
</div>
|
||||
<div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">
|
||||
<div className="nodedc-home-soft-badge rounded-full px-3 py-1.5 text-12 text-secondary">
|
||||
{recentTouchpoints} событий
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative overflow-hidden rounded-[24px] border border-white/6 bg-black/12 p-4">
|
||||
<div className="nodedc-home-subpanel relative overflow-hidden p-4">
|
||||
<div className="absolute inset-x-6 top-4 bottom-4 grid grid-cols-4 gap-4 opacity-25">
|
||||
{["col-1", "col-2", "col-3", "col-4"].map((key) => (
|
||||
<div key={key} className="border-r border-dashed border-white/8 last:border-r-0" />
|
||||
<div key={key} className="border-r border-dashed border-white/6 last:border-r-0" />
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
|
@ -268,7 +268,7 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
|||
|
||||
<div className="relative z-[1] mt-4 grid grid-cols-7 gap-2">
|
||||
{activitySeries.map((point) => (
|
||||
<div key={point.key} className="rounded-2xl bg-white/4 px-2 py-2 text-center">
|
||||
<div key={point.key} className="nodedc-home-soft-badge rounded-2xl px-2 py-2 text-center">
|
||||
<div className="text-[11px] tracking-[0.14em] text-placeholder uppercase">{point.label}</div>
|
||||
<div className="mt-1 text-13 font-semibold text-primary">{point.value}</div>
|
||||
</div>
|
||||
|
|
@ -279,9 +279,9 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
|||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-[28px] border border-white/6 bg-[rgba(var(--nodedc-accent-rgb),0.08)] p-5">
|
||||
<div className="nodedc-home-chart-panel 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.18)] text-[rgb(var(--nodedc-accent-rgb))]">
|
||||
<div className="grid size-11 place-items-center rounded-2xl bg-[rgba(0,0,0,0.28)] text-[rgb(var(--nodedc-accent-rgb))]">
|
||||
<UsersRound className="size-5" />
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -311,17 +311,19 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[28px] border border-white/6 bg-black/12 p-5">
|
||||
<div className="nodedc-home-chart-panel p-5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-13 font-semibold text-primary">Ритм исполнения</div>
|
||||
<div className="text-12 text-secondary">Сколько уже закрыто и какой объём ещё держим открытым.</div>
|
||||
</div>
|
||||
<div className="rounded-full bg-white/6 px-3 py-1.5 text-12 text-secondary">{completionRate}%</div>
|
||||
<div className="nodedc-home-soft-badge rounded-full px-3 py-1.5 text-12 text-secondary">
|
||||
{completionRate}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 space-y-4">
|
||||
<div className="rounded-[22px] bg-white/4 p-4">
|
||||
<div className="nodedc-home-subpanel p-4">
|
||||
<div className="flex items-center justify-between gap-3 text-12">
|
||||
<span className="text-secondary">Закрытые задачи</span>
|
||||
<span className="font-semibold text-primary">{completedIssues}</span>
|
||||
|
|
@ -334,7 +336,7 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[22px] bg-white/4 p-4">
|
||||
<div className="nodedc-home-subpanel p-4">
|
||||
<div className="flex items-center justify-between gap-3 text-12">
|
||||
<span className="text-secondary">Открытый остаток</span>
|
||||
<span className="font-semibold text-primary">{openIssues}</span>
|
||||
|
|
@ -350,7 +352,7 @@ export function HomeProjectInsights(props: HomeProjectInsightsProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[22px] border border-dashed border-white/8 bg-white/3 p-4 text-12 text-secondary">
|
||||
<div className="nodedc-home-subpanel p-4 text-12 text-secondary">
|
||||
<span className="font-semibold text-primary">{project ? project.identifier : "Workspace"}</span>
|
||||
<span> держит </span>
|
||||
<span className="font-semibold text-primary">{totalIssues}</span>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,7 @@
|
|||
// plane types
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import type { IUser, TProjectAnalyticsCount } from "@plane/types";
|
||||
// plane ui
|
||||
// hooks
|
||||
import { useCurrentTime } from "@/hooks/use-current-time";
|
||||
import { HomeCardShell } from "./home-card-shell";
|
||||
import { getCompletionRate, type THomeProjectData } from "./home.utils";
|
||||
|
||||
export interface IUserGreetingsView {
|
||||
|
|
@ -52,49 +49,38 @@ export function UserGreetingsView(props: IUserGreetingsView) {
|
|||
const completionRate = getCompletionRate(selectedProjectAnalytics);
|
||||
|
||||
return (
|
||||
<HomeCardShell
|
||||
tone="accent"
|
||||
eyebrow={workspaceName ?? "Workspace Home"}
|
||||
title={`${t("good")} ${t(greeting)}, ${user?.first_name} ${user?.last_name}`}
|
||||
description={`${weekDay}, ${date} ${timeString}`}
|
||||
contentClassName="p-5"
|
||||
>
|
||||
<div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]">
|
||||
<div className="rounded-[28px] border border-white/6 bg-black/10 p-4">
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-white/8 px-3 py-1.5 text-12 text-secondary">
|
||||
<span>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</span>
|
||||
<span>Главная панель workspace</span>
|
||||
</div>
|
||||
<div className="mt-4 max-w-2xl text-13 leading-6 text-secondary">
|
||||
Домашняя страница теперь собирает проектный фокус, recent activity, быстрые ссылки и стикеры в один рабочий
|
||||
экран без переходов по разделам.
|
||||
<section className="nodedc-home-card px-5 py-4">
|
||||
<div className="grid items-stretch gap-3 xl:grid-cols-[minmax(0,1fr)_280px_220px]">
|
||||
<div className="flex min-w-0 items-center">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[11px] font-semibold tracking-[0.22em] text-placeholder uppercase">
|
||||
{workspaceName ?? "Workspace Home"}
|
||||
</div>
|
||||
<h2 className="mt-1 truncate text-24 font-semibold text-primary">
|
||||
{`${t("good")} ${t(greeting)}, ${user?.first_name} ${user?.last_name}`}
|
||||
</h2>
|
||||
<div className="mt-1 text-13 text-secondary">{`${weekDay}, ${date} ${timeString}`}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
|
||||
<div className="rounded-[24px] border border-white/6 bg-black/10 p-4">
|
||||
<div className="text-12 font-medium text-secondary">Текущий фокус</div>
|
||||
<div className="mt-2 text-16 font-semibold text-primary">
|
||||
{selectedProject ? selectedProject.name : "Выберите проект слева"}
|
||||
</div>
|
||||
<div className="mt-1 text-12 text-secondary">
|
||||
{selectedProject ? selectedProject.identifier : "Домашняя сводка перестроится под выбранную карточку."}
|
||||
</div>
|
||||
<div className="nodedc-home-subpanel flex min-h-[108px] flex-col justify-center px-4 py-3">
|
||||
<div className="text-12 font-medium text-secondary">Текущий фокус</div>
|
||||
<div className="mt-2 line-clamp-2 text-18 font-semibold text-primary">
|
||||
{selectedProject ? selectedProject.name : "Выберите проект слева"}
|
||||
</div>
|
||||
<div className="mt-1 text-12 text-secondary">
|
||||
{selectedProject ? selectedProject.identifier : "Домашняя сводка перестроится под выбранную карточку."}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[24px] border border-white/6 bg-black/10 p-4">
|
||||
<div className="text-12 font-medium text-secondary">Прогресс фокуса</div>
|
||||
<div className="mt-2 text-16 font-semibold text-primary">
|
||||
{selectedProject ? `${completionRate}%` : "—"}
|
||||
</div>
|
||||
<div className="mt-1 text-12 text-secondary">
|
||||
{selectedProject
|
||||
? "Закрытые задачи относительно общего объёма."
|
||||
: "Станет доступен после выбора проекта."}
|
||||
</div>
|
||||
<div className="nodedc-home-subpanel flex min-h-[108px] flex-col justify-center px-4 py-3">
|
||||
<div className="text-12 font-medium text-secondary">Прогресс фокуса</div>
|
||||
<div className="mt-2 text-18 font-semibold text-primary">{selectedProject ? `${completionRate}%` : "—"}</div>
|
||||
<div className="mt-1 text-12 text-secondary">
|
||||
{selectedProject ? "Закрытые задачи относительно общего объёма." : "Станет доступен после выбора проекта."}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HomeCardShell>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1545,11 +1545,11 @@
|
|||
outline: none !important;
|
||||
border-radius: 2rem !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.034) 0%, rgba(255, 255, 255, 0.012) 100%),
|
||||
rgba(255, 255, 255, 0.028) !important;
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.026) 0%, rgba(255, 255, 255, 0.008) 100%),
|
||||
rgba(10, 10, 12, 0.58) !important;
|
||||
box-shadow:
|
||||
0 18px 40px rgba(0, 0, 0, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.028) !important;
|
||||
0 18px 40px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
|
||||
-webkit-backdrop-filter: blur(28px);
|
||||
backdrop-filter: blur(28px);
|
||||
}
|
||||
|
|
@ -1560,15 +1560,15 @@
|
|||
inset: 0;
|
||||
z-index: 0;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(var(--nodedc-accent-rgb), 0.12), transparent 34%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.014) 0%, transparent 100%);
|
||||
radial-gradient(circle at top right, rgba(var(--nodedc-accent-rgb), 0.08), transparent 34%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nodedc-home-card[data-tone="accent"] {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.042) 0%, rgba(255, 255, 255, 0.016) 100%),
|
||||
rgba(var(--nodedc-accent-rgb), 0.12) !important;
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
|
||||
rgba(var(--nodedc-accent-rgb), 0.1) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-card[data-tone="accent"]::before {
|
||||
|
|
@ -1713,31 +1713,37 @@
|
|||
|
||||
.nodedc-home-metric-card {
|
||||
border-radius: 1.5rem !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.012) 100%), rgba(0, 0, 0, 0.14);
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%),
|
||||
rgba(7, 7, 9, 0.58);
|
||||
padding: 1rem;
|
||||
box-shadow:
|
||||
0 14px 28px rgba(0, 0, 0, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.016) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-metric-card-accent {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.042) 0%, rgba(255, 255, 255, 0.016) 100%),
|
||||
rgba(var(--nodedc-accent-rgb), 0.12);
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0.008) 100%),
|
||||
rgba(7, 7, 9, 0.62);
|
||||
}
|
||||
|
||||
.nodedc-home-chart-panel {
|
||||
border-radius: 1.75rem !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.012) 100%), rgba(0, 0, 0, 0.14);
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%),
|
||||
rgba(7, 7, 9, 0.56);
|
||||
padding: 1rem;
|
||||
box-shadow:
|
||||
0 18px 34px rgba(0, 0, 0, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.016) !important;
|
||||
}
|
||||
|
||||
.nodedc-home-progress-track {
|
||||
height: 0.55rem;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.nodedc-home-progress-fill {
|
||||
|
|
@ -1746,6 +1752,21 @@
|
|||
background: linear-gradient(90deg, rgba(var(--nodedc-accent-rgb), 0.94) 0%, rgba(255, 255, 255, 0.92) 100%);
|
||||
}
|
||||
|
||||
.nodedc-home-subpanel {
|
||||
border-radius: 1.5rem !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%),
|
||||
rgba(6, 6, 8, 0.64) !important;
|
||||
box-shadow:
|
||||
0 14px 28px rgba(0, 0, 0, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.01) !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.nodedc-workspace-list-row:hover {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.044) 0%, rgba(255, 255, 255, 0.018) 100%),
|
||||
|
|
|
|||
Loading…
Reference in New Issue