From 1e496fed2a14fd43589554bb52995628787e01dc Mon Sep 17 00:00:00 2001 From: Resaki1 Date: Wed, 22 Jan 2025 10:01:14 +0100 Subject: [PATCH 1/7] fixed width cut off of stackview animation --- src/components/Portal/Portal.tsx | 4 ++-- src/routes/StackView/StackView.scss | 11 +++++++++-- src/routes/StackView/StackView.tsx | 4 ++-- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx index 206172fa4c..ba3c6d44a7 100644 --- a/src/components/Portal/Portal.tsx +++ b/src/components/Portal/Portal.tsx @@ -1,6 +1,6 @@ import {FC, HTMLAttributes, PropsWithChildren} from "react"; import FocusLock from "react-focus-lock"; -import ReactDOM from "react-dom"; +import {createPortal} from "react-dom"; import {useWindowEvent} from "utils/hooks/useWindowEvent"; import classNames from "classnames"; import "./Portal.scss"; @@ -37,7 +37,7 @@ export const Portal: FC> = ({onClose, hiddenOverf return theme === "light" ? "accent-color__backlog-blue" : "accent-color__planning-pink"; }; - return ReactDOM.createPortal( + return createPortal(
onClose?.()} role="dialog" {...otherProps}>
{ ) => ( {item.parent && item.parent.position.column === column?.id && ( - <> +
{ ))} ) : null} - +
)} )} From 99781323eae7f57614bb23f5a05b7ba09c46fa1e Mon Sep 17 00:00:00 2001 From: Resaki1 Date: Wed, 22 Jan 2025 10:32:39 +0100 Subject: [PATCH 2/7] fixed vertical cut off when transitioning between stacks with different sizes --- src/routes/StackView/StackView.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/StackView/StackView.scss b/src/routes/StackView/StackView.scss index 741ad38e48..2c560023e4 100644 --- a/src/routes/StackView/StackView.scss +++ b/src/routes/StackView/StackView.scss @@ -39,7 +39,7 @@ $stack-view__min-height: 82px; width: 100vw; border-radius: $note__border-radius; - overflow: hidden; + overflow: visible; @include scrollbar(); } @@ -62,6 +62,7 @@ $stack-view__min-height: 82px; display: flex; flex-direction: row; justify-content: flex-start; + max-height: $stack-content-max-height; gap: $spacing--sm; } From 58aaf01df27309fd30f9bb5f4bc706aa2debb9ee Mon Sep 17 00:00:00 2001 From: Resaki1 Date: Wed, 22 Jan 2025 14:32:20 +0100 Subject: [PATCH 3/7] made color transitions when navigating between two columns identical --- src/components/NoteDialogComponents/NoteDialogHeader.scss | 2 +- src/components/StackNavigation/StackNavigation.tsx | 4 ++-- src/routes/StackView/StackView.scss | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/NoteDialogComponents/NoteDialogHeader.scss b/src/components/NoteDialogComponents/NoteDialogHeader.scss index 0c1be14332..3f8673eadc 100644 --- a/src/components/NoteDialogComponents/NoteDialogHeader.scss +++ b/src/components/NoteDialogComponents/NoteDialogHeader.scss @@ -28,7 +28,7 @@ border-radius: $rounded--full; margin-top: $spacing--base; - transition: all 0.2s ease-in-out; + transition: all 0.2s ease-out; } } } diff --git a/src/components/StackNavigation/StackNavigation.tsx b/src/components/StackNavigation/StackNavigation.tsx index bb56ebdb78..26dc2242c0 100644 --- a/src/components/StackNavigation/StackNavigation.tsx +++ b/src/components/StackNavigation/StackNavigation.tsx @@ -10,8 +10,8 @@ import {StackNavigationDots} from "./Dots/StackNavigationDots"; interface StackNavigationProps { stacks: Note[]; currentStack: string; - prevColumnStack?: string; - nextColumnStack?: string; + prevColumnStack: string | undefined; + nextColumnStack: string | undefined; handleModeration: (stackId: string) => void; } diff --git a/src/routes/StackView/StackView.scss b/src/routes/StackView/StackView.scss index 2c560023e4..cb6af1cac9 100644 --- a/src/routes/StackView/StackView.scss +++ b/src/routes/StackView/StackView.scss @@ -7,7 +7,7 @@ $stack-view__min-height: 82px; .stack-view__portal { backdrop-filter: blur(10px) brightness(0.76) saturate(0); background: rgba(var(--accent-color--light-rgb), 0.42); - transition: all 0.2s ease-in-out; + transition: background 0.2s ease-out; } .stack-view { @@ -26,6 +26,7 @@ $stack-view__min-height: 82px; pointer-events: none; background: transparent; box-shadow: inset 0 0 0 $column__border-width var(--accent-color--light); + transition: box-shadow 0.2s ease-out; } .stack-view__border--moderating { From c75e5d72b4c362117025416aca55ceb00f17e6d5 Mon Sep 17 00:00:00 2001 From: Resaki1 Date: Wed, 22 Jan 2025 16:00:40 +0100 Subject: [PATCH 4/7] added view transition when navigating between two columns --- .../BoardReactionMenu/BoardReactionMenu.tsx | 2 +- .../NoteDialogComponents/NoteDialogHeader.scss | 2 -- src/components/StackNavigation/StackNavigation.tsx | 12 +++++++++--- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/BoardReactionMenu/BoardReactionMenu.tsx b/src/components/BoardReactionMenu/BoardReactionMenu.tsx index bd7ea98278..d1b02a0712 100644 --- a/src/components/BoardReactionMenu/BoardReactionMenu.tsx +++ b/src/components/BoardReactionMenu/BoardReactionMenu.tsx @@ -53,7 +53,7 @@ export const BoardReactionMenu = forwardRef((props: BoardReactionMenuProps, ref: from: {opacity: 0, transform: "scale(0.3, 0.9) translateY(100%)", "pointer-events": "none"}, enter: {opacity: 1, transform: "scale(1, 1) translateY(0%)", "pointer-events": "auto"}, leave: {opacity: 0, transform: "scale(0.3, 0.9) translateY(100%)", "pointer-events": "none"}, - config: {mass: 1, friction: 20, tension: 380}, + config: {mass: 1, friction: 30, tension: 380}, }); return menuTransition( diff --git a/src/components/NoteDialogComponents/NoteDialogHeader.scss b/src/components/NoteDialogComponents/NoteDialogHeader.scss index 3f8673eadc..fbb237ec73 100644 --- a/src/components/NoteDialogComponents/NoteDialogHeader.scss +++ b/src/components/NoteDialogComponents/NoteDialogHeader.scss @@ -27,8 +27,6 @@ background: var(--accent-color--light); border-radius: $rounded--full; margin-top: $spacing--base; - - transition: all 0.2s ease-out; } } } diff --git a/src/components/StackNavigation/StackNavigation.tsx b/src/components/StackNavigation/StackNavigation.tsx index 26dc2242c0..e29eb6c0a4 100644 --- a/src/components/StackNavigation/StackNavigation.tsx +++ b/src/components/StackNavigation/StackNavigation.tsx @@ -28,12 +28,18 @@ export const StackNavigation: FC = ({stacks, currentStack, }; // takes the index of the stack we want to navigate to - // if the index is out of bounds, it will navigate to the previous or next column + // if the index is out of bounds, it will navigate to the previous or next column, animated using the View Transition API const handleNavigation = (index: number) => { const stackId = getStackId(index); if (stackId) { - handleModeration(stackId); - navigate(`../note/${stackId}/stack`); + if (stacks[index]) { + handleModeration(stackId); + navigate(`../note/${stackId}/stack`); + } else + document.startViewTransition(() => { + handleModeration(stackId); + navigate(`../note/${stackId}/stack`); + }); } }; From 42c408e88a7e668a0332536bfe7b9987fc5d773a Mon Sep 17 00:00:00 2001 From: Resaki1 Date: Thu, 23 Jan 2025 13:23:34 +0100 Subject: [PATCH 5/7] only using view transition if it is available --- src/components/StackNavigation/StackNavigation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/StackNavigation/StackNavigation.tsx b/src/components/StackNavigation/StackNavigation.tsx index e29eb6c0a4..8dd0ab2d09 100644 --- a/src/components/StackNavigation/StackNavigation.tsx +++ b/src/components/StackNavigation/StackNavigation.tsx @@ -32,7 +32,7 @@ export const StackNavigation: FC = ({stacks, currentStack, const handleNavigation = (index: number) => { const stackId = getStackId(index); if (stackId) { - if (stacks[index]) { + if (stacks[index] || !document.startViewTransition) { handleModeration(stackId); navigate(`../note/${stackId}/stack`); } else From 47ec6d1e9e08d492f22a367e2bc37ba99d71c412 Mon Sep 17 00:00:00 2001 From: Resaki1 Date: Tue, 11 Feb 2025 17:25:45 +0100 Subject: [PATCH 6/7] changed optional prop definition --- src/components/StackNavigation/StackNavigation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/StackNavigation/StackNavigation.tsx b/src/components/StackNavigation/StackNavigation.tsx index 8dd0ab2d09..403e64664e 100644 --- a/src/components/StackNavigation/StackNavigation.tsx +++ b/src/components/StackNavigation/StackNavigation.tsx @@ -10,8 +10,8 @@ import {StackNavigationDots} from "./Dots/StackNavigationDots"; interface StackNavigationProps { stacks: Note[]; currentStack: string; - prevColumnStack: string | undefined; - nextColumnStack: string | undefined; + prevColumnStack?: string; + nextColumnStack?: string; handleModeration: (stackId: string) => void; } From 459faef20d6f0e1cab0102d9279407557185fef4 Mon Sep 17 00:00:00 2001 From: Resaki1 Date: Wed, 12 Feb 2025 15:24:32 +0100 Subject: [PATCH 7/7] set height of stack view content to fixed value --- src/routes/StackView/StackView.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/StackView/StackView.scss b/src/routes/StackView/StackView.scss index cb6af1cac9..140a69efe9 100644 --- a/src/routes/StackView/StackView.scss +++ b/src/routes/StackView/StackView.scss @@ -36,7 +36,7 @@ $stack-view__min-height: 82px; .stack-view__content { position: relative; - height: auto; + height: calc(100vh - $stack-view__header-height - $stack-view__navigation-height); width: 100vw; border-radius: $note__border-radius;