From d28f83fe5ef86afba1dbfa914899f5748af69c7f Mon Sep 17 00:00:00 2001 From: DCCONSTRUCTIONS Date: Wed, 29 Apr 2026 22:37:30 +0300 Subject: [PATCH] =?UTF-8?q?UI=20-=20=D0=9C=D0=95=D0=96=D0=9F=D0=A0=D0=9E?= =?UTF-8?q?=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A=D0=9E=D0=9C=D0=9C?= =?UTF-8?q?=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98=D0=AF:=20=D0=B1?= =?UTF-8?q?=D1=8B=D1=81=D1=82=D1=80=D1=8B=D0=B9=20=D0=B2=D1=8B=D0=B1=D0=BE?= =?UTF-8?q?=D1=80=20=D0=BF=D1=80=D0=BE=D0=B5=D0=BA=D1=82=D0=BE=D0=B2=20?= =?UTF-8?q?=D0=BD=D0=B0=20home?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/home/home-project-stack.tsx | 99 ++++++++--------- plane-src/apps/web/styles/globals.css | 101 +++++++++++------- 2 files changed, 113 insertions(+), 87 deletions(-) diff --git a/plane-src/apps/web/core/components/home/home-project-stack.tsx b/plane-src/apps/web/core/components/home/home-project-stack.tsx index 602ec47..944e2f3 100644 --- a/plane-src/apps/web/core/components/home/home-project-stack.tsx +++ b/plane-src/apps/web/core/components/home/home-project-stack.tsx @@ -43,11 +43,16 @@ export function HomeProjectStack(props: HomeProjectStackProps) { } = props; const activeProject = projects.find((project: THomeProjectData) => project.id === selectedProjectId); - const orderedProjects = activeProject + const selectedProject = activeProject ?? projects[0]; + const selectedProjectIndex = Math.max( + projects.findIndex((project: THomeProjectData) => project.id === selectedProject?.id), + 0 + ); + const stackProjects = activeProject ? [activeProject, ...projects.filter((project: THomeProjectData) => project.id !== activeProject.id)] : projects; - const visibleProjects = orderedProjects.slice(0, STACK_VISIBLE_LIMIT); + const visibleProjects = stackProjects.slice(0, STACK_VISIBLE_LIMIT); const activityCountByProject = (recents ?? []).reduce>((acc, activity) => { const projectId = getActivityProjectId(activity); if (!projectId) return acc; @@ -56,8 +61,6 @@ export function HomeProjectStack(props: HomeProjectStackProps) { return acc; }, {}); - const selectedProject = - orderedProjects.find((project: THomeProjectData) => project.id === selectedProjectId) ?? orderedProjects[0]; const stackHeight = visibleProjects.length > 0 ? ACTIVE_CARD_HEIGHT + (visibleProjects.length - 1) * STACK_OFFSET : 228; const isHorizontal = orientation === "horizontal"; @@ -191,19 +194,7 @@ export function HomeProjectStack(props: HomeProjectStackProps) { - {isHorizontal ? ( -
-
- {visibleProjects.map((project: THomeProjectData, index: number) => renderProjectCard(project, index, true))} -
-
- ) : ( -
- {visibleProjects.map((project: THomeProjectData, index: number) => renderProjectCard(project, index, false))} -
- )} - -
+
Быстрый выбор
@@ -216,9 +207,11 @@ export function HomeProjectStack(props: HomeProjectStackProps) {
- {orderedProjects.map((project: THomeProjectData) => { + {projects.map((project: THomeProjectData, index: number) => { const analytics = analyticsMap[project.id]; const isActive = project.id === selectedProject?.id; + const completionRate = getCompletionRate(analytics); + const distanceFromActive = Math.min(Math.abs(index - selectedProjectIndex), 2); return ( ); })}
+
- {selectedProject && ( -
-
-
Фокус
-
- {selectedProject.identifier} -
-
-
-
- - Команда -
-
- {analyticsMap[selectedProject.id]?.total_members ?? 0} -
-
-
-
Контур
-
- {activityCountByProject[selectedProject.id] ?? 0} касаний -
+ {isHorizontal ? ( +
+
+ {visibleProjects.map((project: THomeProjectData, index: number) => renderProjectCard(project, index, true))} +
+
+ ) : ( +
+ {visibleProjects.map((project: THomeProjectData, index: number) => renderProjectCard(project, index, false))} +
+ )} + + {selectedProject && ( +
+
+
Фокус
+
+ {selectedProject.identifier}
- )} -
+
+
+ + Команда +
+
+ {analyticsMap[selectedProject.id]?.total_members ?? 0} +
+
+
+
Контур
+
+ {activityCountByProject[selectedProject.id] ?? 0} касаний +
+
+
+ )} ); } diff --git a/plane-src/apps/web/styles/globals.css b/plane-src/apps/web/styles/globals.css index 0b5eaf3..2974053 100644 --- a/plane-src/apps/web/styles/globals.css +++ b/plane-src/apps/web/styles/globals.css @@ -3168,89 +3168,112 @@ .nodedc-home-project-quick-list { display: flex; - width: calc(100% + 2rem); - margin-inline: -1rem; + width: calc(100% + 1rem); + margin-inline: -0.5rem; flex-direction: column; - gap: 0; - overflow: hidden; - border-radius: 1.25rem; - background: rgba(8, 8, 10, 0.62); + gap: 0.22rem; + overflow: visible; } .nodedc-home-project-quick-button { + position: relative; display: flex; width: 100%; - min-height: 3.22rem; + min-height: 3.18rem; align-items: center; justify-content: space-between; - gap: 0.8rem; + gap: 0.86rem; border: 0 !important; outline: none !important; - border-radius: 0 !important; - background: rgba(255, 255, 255, 0.028) !important; + border-radius: 999px !important; + background: rgba(255, 255, 255, 0.04) !important; padding: 0.7rem 0.9rem; + padding-left: 3.72rem; color: var(--text-color-primary); - font-size: 0.95rem; - font-weight: 520; text-align: left; + opacity: 0.42; transition: background 160ms ease, color 160ms ease, + opacity 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; + background: rgba(255, 255, 255, 0.085) !important; color: var(--text-color-primary); + opacity: 0.92; transform: translateY(-1px); } .nodedc-home-project-quick-button[data-active="true"] { - background: rgba(255, 255, 255, 0.13) !important; + background: rgba(255, 255, 255, 0.115) !important; color: var(--text-color-primary); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); + opacity: 0.82; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.048), + 0 10px 22px rgba(0, 0, 0, 0.12); + } + + .nodedc-home-project-quick-button[data-distance="1"] { + opacity: 0.6; + } + + .nodedc-home-project-quick-button[data-distance="2"] { + opacity: 0.4; } .nodedc-home-project-quick-main { display: flex; min-width: 0; align-items: center; - gap: 0.62rem; } .nodedc-home-project-quick-logo { + position: absolute; + top: 50%; + left: 0.12rem; + transform: translateY(-50%); display: grid; - width: 1.7rem; - min-width: 1.7rem; - height: 1.7rem; + width: 2.92rem; + min-width: 2.92rem; + height: 2.92rem; 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); + background: rgba(255, 255, 255, 0.07); + color: rgba(255, 255, 255, 0.74); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.05), + 0 8px 20px rgba(0, 0, 0, 0.16); } .nodedc-home-project-quick-button[data-active="true"] .nodedc-home-project-quick-logo { - background: rgba(var(--nodedc-card-active-rgb), 0.92); - color: #0a0a0b; + background: rgb(var(--nodedc-card-active-rgb)); + color: rgb(var(--nodedc-on-card-active-rgb)); + } + + .nodedc-home-project-quick-name { + min-width: 0; + color: var(--text-color-primary); + font-size: 0.91rem; + font-weight: 570; + } + + .nodedc-home-project-quick-rate { + min-width: max-content; + color: rgba(255, 255, 255, 0.62); + font-size: 0.76rem; + font-weight: 650; + line-height: 1; + } + + .nodedc-home-project-quick-button[data-active="true"] .nodedc-home-project-quick-rate { + color: rgba(255, 255, 255, 0.78); } .nodedc-home-project-quick-metric { - display: inline-flex; + display: none; min-width: max-content; align-items: center; gap: 0.38rem; @@ -3260,7 +3283,7 @@ } .nodedc-home-project-quick-dot { - display: block; + display: none; width: 0.48rem; height: 0.48rem; border-radius: 999px;