From baeaf4f73dd074b2283726398de6eb2600f2ed65 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 21 Jan 2023 03:42:29 -0800 Subject: [PATCH] Implement shadow on DialogHeader in static modals --- components/AboutModal/index.tsx | 11 +---- components/ChangelogModal/index.scss | 7 ++- components/ChangelogModal/index.tsx | 12 +---- components/CharacterModal/index.tsx | 28 ++++++++++++ components/DialogContent/index.scss | 6 +++ components/DialogContent/index.tsx | 68 ++++++++++++++++++++++++++-- components/RoadmapModal/index.tsx | 10 +--- components/WeaponModal/index.tsx | 1 - 8 files changed, 108 insertions(+), 35 deletions(-) diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx index 227f093f..bc11f179 100644 --- a/components/AboutModal/index.tsx +++ b/components/AboutModal/index.tsx @@ -29,19 +29,10 @@ const AboutModal = () => { event.preventDefault()} onEscapeKeyDown={() => {}} > -
- {t('menu.about')} - - - - - -
- -

diff --git a/components/ChangelogModal/index.scss b/components/ChangelogModal/index.scss index 4a4a3597..bd9a1756 100644 --- a/components/ChangelogModal/index.scss +++ b/components/ChangelogModal/index.scss @@ -1,6 +1,5 @@ .Changelog.DialogContent { gap: 0; - padding-bottom: $unit-4x; & > div:not(.DialogHeader) { padding: 0 $unit-4x; @@ -30,6 +29,11 @@ display: grid; grid-template-rows: 1fr auto; gap: $unit; + + & > h4 { + font-weight: $medium; + font-size: $font-regular; + } } .items { @@ -66,6 +70,7 @@ li { margin-bottom: $unit-half; + font-size: $font-regular; } } } diff --git a/components/ChangelogModal/index.tsx b/components/ChangelogModal/index.tsx index a5422610..c7c870e3 100644 --- a/components/ChangelogModal/index.tsx +++ b/components/ChangelogModal/index.tsx @@ -26,20 +26,10 @@ const ChangelogModal = () => { event.preventDefault()} onEscapeKeyDown={() => {}} > -

- - {t('menu.changelog')} - - - - - - -
-
diff --git a/components/CharacterModal/index.tsx b/components/CharacterModal/index.tsx index c1b9b90d..0446d20a 100644 --- a/components/CharacterModal/index.tsx +++ b/components/CharacterModal/index.tsx @@ -81,17 +81,45 @@ const CharacterModal = ({ // UI state const [open, setOpen] = useState(false) + const [scrolled, setScrolled] = useState(false) const [formValid, setFormValid] = useState(false) // Classes const headerClasses = classNames({ DialogHeader: true, + Short: true, Scrolled: scrolled, }) + + // Callbacks and Hooks + const onScroll = useCallback((event: Event) => { + // const dialogContent = event.target as HTMLDivElement + // const { scrollTop } = dialogContent + // if (scrollTop > 150) { + // console.log(scrollTop, scrollTop % 5) + // if (scrollTop > 20) setScrolled(true) + // else setScrolled(false) + // console.log('scrollTop', scrollTop) + // } + }, []) + useEffect(() => { setOpen(modalOpen) }, [modalOpen]) + useEffect(() => { + //add eventlistener to window + // const dialogContent = document.querySelector('.DialogContent') + // if (dialogContent) { + // dialogContent.addEventListener('scroll', onScroll, { passive: true }) + // // remove event on unmount to prevent a memory leak with the cleanup + // return () => { + // // what does passive do? + // dialogContent.removeEventListener('scroll', onScroll) + // } + // } + }, []) + // Character properties: Perpetuity const [perpetuity, setPerpetuity] = useState(false) diff --git a/components/DialogContent/index.scss b/components/DialogContent/index.scss index 4955f130..47fc570d 100644 --- a/components/DialogContent/index.scss +++ b/components/DialogContent/index.scss @@ -49,8 +49,14 @@ width: 100%; } + .Scrollable { + overflow-y: auto; + } + .DialogHeader { background: var(--dialog-bg); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0); + border-bottom: 1px solid rgba(0, 0, 0, 0); display: flex; align-items: center; gap: $unit-2x; diff --git a/components/DialogContent/index.tsx b/components/DialogContent/index.tsx index 6086da4c..7c1211eb 100644 --- a/components/DialogContent/index.tsx +++ b/components/DialogContent/index.tsx @@ -1,15 +1,20 @@ -import React from 'react' +import React, { useEffect } from 'react' import * as DialogPrimitive from '@radix-ui/react-dialog' import classNames from 'classnames' -import './index.scss' +import { DialogClose, DialogTitle } from '~components/Dialog' import Overlay from '~components/Overlay' +import CrossIcon from '~public/icons/Cross.svg' +import './index.scss' + interface Props extends React.DetailedHTMLProps< React.DialogHTMLAttributes, HTMLDivElement > { + header?: React.ReactNode + title?: string onEscapeKeyDown: (event: KeyboardEvent) => void onOpenAutoFocus: (event: Event) => void } @@ -18,10 +23,60 @@ const DialogContent = React.forwardRef(function dialog( { children, ...props }, forwardedRef ) { + // Classes const classes = classNames(props.className, { DialogContent: true, }) + // Refs + const headerRef = React.createRef() + const containerRef = React.createRef() + + // Elements + const genericHeader = ( +
+ + {props.title ? props.title : ''} + + + + + + +
+ ) + + // Handlers + function handleScroll(event: React.UIEvent) { + const headerElement = headerRef.current + const scrollTop = event.currentTarget?.scrollTop + const boxShadowBase = '0 2px 8px' + const maxValue = 50 + + if (headerElement && scrollTop >= 0) { + const input = scrollTop > maxValue ? maxValue : scrollTop + + const boxShadowOpacity = mapRange(input, 0, maxValue, 0.0, 0.16) + const borderOpacity = mapRange(input, 0, maxValue, 0.0, 0.24) + console.log( + `Scroll top: ${scrollTop}, interpolated opacity: ${boxShadowOpacity}` + ) + + headerElement.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, ${boxShadowOpacity})` + headerElement.style.borderBottomColor = `rgba(0, 0, 0, ${borderOpacity})` + } + } + + function mapRange( + value: number, + low1: number, + high1: number, + low2: number, + high2: number + ) { + return low2 + ((high2 - low2) * (value - low1)) / (high1 - low1) + } + return ( @@ -32,7 +87,14 @@ const DialogContent = React.forwardRef(function dialog( onEscapeKeyDown={props.onEscapeKeyDown} ref={forwardedRef} > - {children} + {props.title ? genericHeader : ''} +
+ {children} +
diff --git a/components/RoadmapModal/index.tsx b/components/RoadmapModal/index.tsx index 61df0b89..770a9c3a 100644 --- a/components/RoadmapModal/index.tsx +++ b/components/RoadmapModal/index.tsx @@ -27,18 +27,10 @@ const RoadmapModal = () => { event.preventDefault()} onEscapeKeyDown={() => {}} > -
- {t('title')} - - - - - -
-

{t('blurb')}

diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx index 5f582189..7f8857fe 100644 --- a/components/WeaponModal/index.tsx +++ b/components/WeaponModal/index.tsx @@ -346,7 +346,6 @@ const WeaponModal = ({ } return ( - // TODO: Refactor into Dialog component {children}