From 5df1d9a091fec792c72fff45ef9acc5afd4a6a2b Mon Sep 17 00:00:00 2001 From: nikec <43032218+niikeec@users.noreply.github.com> Date: Fri, 7 Jul 2023 17:48:08 +0200 Subject: [PATCH] [ENG-893] Fix categories offset (#1086) Fix categories offset --- .../app/$libraryId/overview/Categories.tsx | 135 ++++++++++-------- .../app/$libraryId/overview/Statistics.tsx | 2 +- interface/package.json | 1 + pnpm-lock.yaml | Bin 917158 -> 917577 bytes 4 files changed, 75 insertions(+), 63 deletions(-) diff --git a/interface/app/$libraryId/overview/Categories.tsx b/interface/app/$libraryId/overview/Categories.tsx index c65cd885d..ace0bce69 100644 --- a/interface/app/$libraryId/overview/Categories.tsx +++ b/interface/app/$libraryId/overview/Categories.tsx @@ -3,10 +3,13 @@ import clsx from 'clsx'; import { motion } from 'framer-motion'; import { ArrowLeft, ArrowRight } from 'phosphor-react'; import { RefObject, useEffect, useRef, useState } from 'react'; +import Sticky from 'react-sticky-el'; import { useDraggable } from 'react-use-draggable-scroll'; import { Category, useLibraryQuery } from '@sd/client'; +import { tw } from '@sd/ui'; import { useIsDark } from '~/hooks'; import { useLayoutContext } from '../Layout/Context'; +import { usePageLayoutContext } from '../PageLayout/Context'; import CategoryButton from './CategoryButton'; import { IconForCategory } from './data'; @@ -30,9 +33,13 @@ const CategoryList = [ 'Trash' ] as Category[]; +const ArrowButton = tw.div`absolute top-1/2 z-40 flex h-8 w-8 shrink-0 -translate-y-1/2 items-center p-2 cursor-pointer justify-center rounded-full border border-app-line bg-app/50 hover:opacity-95 backdrop-blur-md transition-all duration-200`; + export const Categories = (props: { selected: Category; onSelectedChanged(c: Category): void }) => { const isDark = useIsDark(); + const { ref: pageRef } = usePageLayoutContext(); + const ref = useRef(null); const { events } = useDraggable(ref as React.MutableRefObject); @@ -56,70 +63,74 @@ export const Categories = (props: { selected: Category; onSelectedChanged(c: Cat index === CategoryList.length - 1 && setLastCategoryVisible((prev) => !prev); }; + const maskImage = `linear-gradient(90deg, transparent 0.1%, rgba(0, 0, 0, 1) ${ + scroll > 0 ? '10%' : '0%' + }, rgba(0, 0, 0, 1) ${lastCategoryVisible ? '95%' : '85%'}, transparent 99%)`; + return ( -
-
handleArrowOnClick('right')} - className={clsx( - scroll > 0 - ? 'cursor-pointer bg-app/50 opacity-100 hover:opacity-95' - : 'pointer-events-none', - 'sticky left-[15px] z-40 -ml-4 mt-4 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-app-line bg-app p-2 opacity-0 backdrop-blur-md transition-all duration-200' - )} - > - + +
+ handleArrowOnClick('right')} + className={clsx('left-3', scroll === 0 && 'pointer-events-none opacity-0')} + > + + + +
+ {categories.data && + CategoryList.map((category, index) => { + const iconString = IconForCategory[category] || 'Document'; + return ( + lastCategoryVisibleHandler(index)} + onViewportLeave={() => lastCategoryVisibleHandler(index)} + viewport={{ + root: ref, + // WARNING: Edge breaks if the values are not postfixed with px or % + margin: '0% -120px 0% 0%' + }} + className={clsx( + 'min-w-fit', + mouseState !== 'dragging' && '!cursor-default' + )} + key={category} + > + props.onSelectedChanged(category)} + /> + + ); + })} +
+ + handleArrowOnClick('left')} + className={clsx( + 'right-3', + lastCategoryVisible && 'pointer-events-none opacity-0' + )} + > + +
-
0 ? '10%' : '0%' - }, rgba(0, 0, 0, 1) ${lastCategoryVisible ? '95%' : '85%'}, transparent 99%)` - }} - > - {categories.data && - CategoryList.map((category, index) => { - const iconString = IconForCategory[category] || 'Document'; - return ( - lastCategoryVisibleHandler(index)} - onViewportLeave={() => lastCategoryVisibleHandler(index)} - viewport={{ - root: ref, - // WARNING: Edge breaks if the values are not postfixed with px or % - margin: '0% -120px 0% 0%' - }} - className={clsx( - 'min-w-fit', - mouseState !== 'dragging' && '!cursor-default' - )} - key={category} - > - props.onSelectedChanged(category)} - /> - - ); - })} -
-
handleArrowOnClick('left')} - className={clsx( - lastCategoryVisible - ? 'pointer-events-none opacity-0 hover:opacity-0' - : 'hover:opacity-95', - 'sticky right-[15px] z-40 mt-4 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full border border-app-line bg-app/50 p-2 backdrop-blur-md transition-all duration-200' - )} - > - -
-
+ ); }; diff --git a/interface/app/$libraryId/overview/Statistics.tsx b/interface/app/$libraryId/overview/Statistics.tsx index f3936f42d..48c88eaa3 100644 --- a/interface/app/$libraryId/overview/Statistics.tsx +++ b/interface/app/$libraryId/overview/Statistics.tsx @@ -106,7 +106,7 @@ export default () => { }); mounted = true; return ( -
+
{/* STAT CONTAINER */}
{Object.entries(stats?.data || []).map(([key, value]) => { diff --git a/interface/package.json b/interface/package.json index 23c0a0dd4..6ed9841c4 100644 --- a/interface/package.json +++ b/interface/package.json @@ -58,6 +58,7 @@ "react-router-dom": "6.9.0", "react-scroll-sync": "^0.11.0", "react-selecto": "^1.22.3", + "react-sticky-el": "^2.1.0", "react-use-draggable-scroll": "^0.4.7", "remix-params-helper": "^0.4.10", "rooks": "^5.14.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0ec00c3eb274b612982d5ffda4d31510e7fe7f73..f1935a70039d5ea1cae132f8063f2baadf925ae8 100644 GIT binary patch delta 324 zcmZ4X*ZgFI#Rg5*$v!qBo84Ha+X5Lp(;Y0?ST=ui`pyjG@o#2z@8jnvF3C*JuGCGP zESN4nd4IgjbXFZ!^~nX=Y|WFy+9!uG0x=U1GXpWp_Q_$a-VY{gvWiasy_MH|`h;pG z)^>GsHXvpPVh$kY1Y)l3>gL=k`#2#6=QtQmXVhU;nI53Yq8gf?ubpV*o|@uj66l-e zoR({3kZPIkq8(IP8d#v8mtI!x?i(867*P-$qMcz9o|o&LQCenRVdfiX5}}`J?C6o{ z6PfO6P~}qTm2VhOm2Z)2YUo`sec=~wjp_V0%xsLt(;ZfGOEVekO;6m)D?NRKFSGmf z1s}QD+r7SWZ}