feat: sticky layout

taskany-inc · Sep 26, 2024 · d6560b6 · d6560b6
1 parent b12c287
commit d6560b6
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "@sentry/nextjs": "7.99.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.6",
-    "@taskany/bricks": "5.48.1",
+    "@taskany/bricks": "5.50.0",
     "@taskany/colors": "1.13.0",
     "@taskany/icons": "2.0.7",
     "@tippyjs/react": "4.2.6",

diff --git a/src/components/DashboardPage/DashboardPage.tsx b/src/components/DashboardPage/DashboardPage.tsx
@@ -23,7 +23,7 @@ import { tr } from './DashboardPage.i18n';
 export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: ExternalPageProps) => {
     const { preset } = useFiltersPreset({ defaultPresetFallback });
 
-    const { currentPreset, queryState, projectsSort } = useUrlFilterParams({
+    const { currentPreset, queryState, projectsSort, view } = useUrlFilterParams({
         preset,
     });
 
@@ -75,6 +75,7 @@ export const DashboardPage = ({ user, ssrTime, defaultPresetFallback }: External
             user={user}
             ssrTime={ssrTime}
             title={tr('title')}
+            scrollerShadow={view === 'kanban' ? 70 : 0}
             header={
                 <FiltersPanel
                     title={getPageTitle({

diff --git a/src/components/Kanban/Kanban.module.css b/src/components/Kanban/Kanban.module.css
@@ -1,5 +1,11 @@
 .KanbanState{
-    margin-bottom: var(--gap-m);
+    padding: var(--gap-m) 0;
+    position: sticky;
+    width: 100%;
+    top: calc(var(--gap-l) + var(--gap-s));
+    background: var(--background);
+    background: linear-gradient(var(--background) 70%, rgba(0, 0, 0, 0) 100%);
+    z-index: 2;
 }
 
 .KanbanLink {
@@ -12,4 +18,4 @@
 
 .KanbanLink:not(:last-child) {
     margin-bottom: var(--gap-sm);
-}
+}
diff --git a/src/components/Page/Page.module.css b/src/components/Page/Page.module.css
@@ -19,6 +19,11 @@
 .PageContent {
     flex: 1;
     overflow: auto;
-    margin: var(--gap-xs) var(--gap-sm) 0;
-    padding: var(--gap-m) var(--gap-s);
+}
+
+.PageScroller {
+    margin: 0 var(--gap-sm);
+    padding: 0 var(--gap-s);
+    padding-top: calc(var(--gap-m) + var(--gap-xs));
+    box-sizing: border-box;
 }
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { KanbanScroller } from '@taskany/bricks/harmony';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
@@ -37,6 +38,7 @@ interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
     title?: string;
     header: React.ReactNode;
     children?: React.ReactNode;
+    scrollerShadow?: number;
 }
 
 const mapThemeOnId = { light: 0, dark: 1 } as const;
@@ -53,7 +55,15 @@ const toastOptions: ToastOptions = {
     },
 };
 
-export const Page: React.FC<PageProps> = ({ user, ssrTime, title = 'Untitled', children, header, ...attrs }) => {
+export const Page: React.FC<PageProps> = ({
+    user,
+    ssrTime,
+    title = 'Untitled',
+    children,
+    header,
+    scrollerShadow,
+    ...attrs
+}) => {
     const { setPreview } = useGoalPreview();
     const { data: userSettings = user?.settings } = trpc.user.settings.useQuery();
     const { data: config } = trpc.appConfig.get.useQuery();
@@ -103,8 +113,10 @@ export const Page: React.FC<PageProps> = ({ user, ssrTime, title = 'Untitled', c
 
                 <main className={s.PageMain} {...attrs}>
                     {header}
-                    <div className={s.PageContent} {...pageContent.attr}>
-                        {children}
+                    <div className={s.PageContent}>
+                        <KanbanScroller className={s.PageScroller} shadow={scrollerShadow} {...pageContent.attr}>
+                            {children}
+                        </KanbanScroller>
                     </div>
                     <PageFooter />
                 </main>

diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.module.css b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.module.css
@@ -18,4 +18,12 @@
     color: var(--text-ghost);
     font-size: inherit;
     font-weight: inherit;
+}
+
+.ProjectListItemCollapsableHeader_sticky {
+    cursor: pointer;
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    background-color: var(--background);
 }
diff --git a/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx b/src/components/ProjectListItemCollapsable/ProjectListItemCollapsable.tsx
@@ -1,5 +1,6 @@
 import React, { ComponentProps, MouseEventHandler, ReactNode } from 'react';
 import { nullable } from '@taskany/bricks';
+import cn from 'classnames';
 import { TreeView, TreeViewNode, TreeViewTitle, Text } from '@taskany/bricks/harmony';
 import { IconServersOutline } from '@taskany/icons';
 
@@ -21,6 +22,7 @@ interface ProjectListItemCollapsableProps extends Omit<ComponentProps<typeof Tre
     onClick?: MouseEventHandler<HTMLElement>;
     titleSize?: 'm' | 'l';
     actionButtonView?: 'default' | 'icons';
+    sticky?: boolean;
 }
 
 export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProps> = ({
@@ -34,6 +36,7 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
     interactive = true,
     actionButtonView,
     onClick,
+    sticky,
     ...props
 }) => {
     const projectComponent = (
@@ -77,7 +80,11 @@ export const ProjectListItemCollapsable: React.FC<ProjectListItemCollapsableProp
         <TreeView className={className} {...projectListItem.attr}>
             <TreeViewNode
                 interactive={interactive}
-                title={<TreeViewTitle>{projectComponent}</TreeViewTitle>}
+                title={
+                    <TreeViewTitle className={cn({ [s.ProjectListItemCollapsableHeader_sticky]: sticky })}>
+                        {projectComponent}
+                    </TreeViewTitle>
+                }
                 {...props}
             >
                 {goals}

diff --git a/src/components/ProjectListItemConnected/ProjectListItemConnected.tsx b/src/components/ProjectListItemConnected/ProjectListItemConnected.tsx
@@ -77,6 +77,7 @@ export const ProjectListItemConnected: FC<ProjectListItemConnectedProps> = ({
                 href={routes.project(project.id, view ? `view=${view}` : undefined)}
                 onClick={onProjectClickHandler}
                 project={project}
+                sticky={isKanbanView}
                 parent={isKanbanView ? parent : undefined}
                 goals={
                     <TreeViewElement>

diff --git a/src/components/ProjectPage/ProjectPage.tsx b/src/components/ProjectPage/ProjectPage.tsx
@@ -28,7 +28,7 @@ export const ProjectPage = ({ user, ssrTime, params: { id }, defaultPresetFallba
 
     const { preset } = useFiltersPreset({ defaultPresetFallback });
 
-    const { queryState } = useUrlFilterParams({
+    const { queryState, view } = useUrlFilterParams({
         preset,
     });
 
@@ -84,6 +84,7 @@ export const ProjectPage = ({ user, ssrTime, params: { id }, defaultPresetFallba
             <Page
                 user={user}
                 ssrTime={ssrTime}
+                scrollerShadow={view === 'kanban' ? 70 : 0}
                 title={tr
                     .raw('title', {
                         project: project?.title,