Commit 6b85b3d5 authored by Alejandro Celaya's avatar Alejandro Celaya Committed by Alejandro Celaya

Add slide-in animation for pending updates notification

parent 23c83fef
import { Link, Panel } from '@hypothesis/frontend-shared'; import { Link, Panel } from '@hypothesis/frontend-shared';
import classnames from 'classnames';
import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks'; import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
import scrollIntoView from 'scroll-into-view'; import scrollIntoView from 'scroll-into-view';
...@@ -133,8 +134,15 @@ function NotebookView({ loadAnnotationsService, streamer }: NotebookViewProps) { ...@@ -133,8 +134,15 @@ function NotebookView({ loadAnnotationsService, streamer }: NotebookViewProps) {
{groupName} {groupName}
</h1> </h1>
</header> </header>
<div className="absolute w-full z-5 left-0 top-7"> <div className="absolute w-full z-5 left-0 lg:top-8 top-5">
<div className="container flex flex-row-reverse"> <div
className={classnames(
'container flex flex-row-reverse relative',
// Compensate for container's right padding, which is defined in
// tailwind.config.mjs
'right-[4rem]',
)}
>
{pendingUpdatesNotification && <PendingUpdatesNotification />} {pendingUpdatesNotification && <PendingUpdatesNotification />}
</div> </div>
</div> </div>
......
...@@ -55,7 +55,10 @@ function PendingUpdatesNotification({ ...@@ -55,7 +55,10 @@ function PendingUpdatesNotification({
} }
return ( return (
<div role="status" className="animate-fade-in"> <div
role="status"
className="absolute right-0 animate-updates-notification-slide-in"
>
<Button <Button
onClick={applyPendingUpdates} onClick={applyPendingUpdates}
unstyled unstyled
...@@ -70,7 +73,7 @@ function PendingUpdatesNotification({ ...@@ -70,7 +73,7 @@ function PendingUpdatesNotification({
> >
<RefreshIcon /> <RefreshIcon />
{!collapsed && ( {!collapsed && (
<span data-testid="full-notification"> <span data-testid="full-notification" className="whitespace-nowrap">
Load <span className="font-bold">{pendingUpdateCount}</span> updates{' '} Load <span className="font-bold">{pendingUpdateCount}</span> updates{' '}
<span className="sr-only">by pressing l</span> <span className="sr-only">by pressing l</span>
</span> </span>
......
...@@ -23,6 +23,7 @@ export default { ...@@ -23,6 +23,7 @@ export default {
'fade-out': 'fade-out 0.3s forwards', 'fade-out': 'fade-out 0.3s forwards',
'pulse-fade-out': 'pulse-fade-out 5s ease-in-out forwards', 'pulse-fade-out': 'pulse-fade-out 5s ease-in-out forwards',
'slide-in-from-right': 'slide-in-from-right 0.3s forwards ease-in-out', 'slide-in-from-right': 'slide-in-from-right 0.3s forwards ease-in-out',
'updates-notification-slide-in': 'updates-notification-slide-in 0.3s ease-in'
}, },
boxShadow: { boxShadow: {
// A more prominent shadow than the one used by tailwind, intended for // A more prominent shadow than the one used by tailwind, intended for
...@@ -175,6 +176,16 @@ export default { ...@@ -175,6 +176,16 @@ export default {
opacity: '1', opacity: '1',
}, },
}, },
'updates-notification-slide-in': {
'0%': {
opacity: '0',
right: '-15px',
},
'100%': {
opacity: '1',
right: '0',
},
},
}, },
screens: { screens: {
touch: { raw: '(pointer: coarse)' }, touch: { raw: '(pointer: coarse)' },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment