Skip to content

Commit

Permalink
fix: can wheel to scroll in entry preview toast, fix RSSNext#953
Browse files Browse the repository at this point in the history 
Signed-off-by: Innei <tukon479@gmail.com>
  • Loading branch information
@Innei
Innei committed Oct 15, 2024
1 parent 737d40c commit 936ad86
Showing 1 changed file with 76 additions and 76 deletions.
152 changes: 76 additions & 76 deletions apps/renderer/src/modules/ai/ai-daily/daily.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import type { Variant } from "framer-motion"
import { m, useAnimationControls } from "framer-motion"
import type { Components } from "hast-util-to-jsx-runtime"
import { useEffect, useState } from "react"
Expand Down Expand Up @@ -276,7 +277,7 @@ const createRelatedEntryLink = (variant: "toast" | "modal") => (props: LinkProps
const EntryToastPreview = ({ entryId }: { entryId: string }) => {
useAuthQuery(Queries.entries.byId(entryId))

const variants = {
const variants: Record<string, Variant> = {
enter: {
x: 0,
opacity: 1,
Expand Down Expand Up @@ -306,89 +307,88 @@ const EntryToastPreview = ({ entryId }: { entryId: string }) => {
if (!isDisplay) return null

return (
<>
<m.div
tabIndex={-1}
initial="initial"
animate={controller}
onPointerDown={stopPropagation}
onPointerDownCapture={stopPropagation}
variants={variants}
transition={{
type: "spring",
mass: 0.4,
tension: 120,
friction: 1.4,
}}
exit="exit"
layout="size"
className={cn(
"shadow-perfect relative flex flex-col items-center rounded-xl border bg-theme-background p-8",
"mr-4 mt-4 max-h-[500px] w-[60ch] max-w-full overflow-auto",
)}
>
<div className="flex w-full gap-3">
<FeedIcon
fallback
className="mask-squircle mask"
feed={feed}
entry={entry.entries}
size={36}
/>
<div className="flex min-w-0 grow flex-col">
<div className="w-[calc(100%-10rem)] space-x-1">
<span className="font-semibold">{entry.entries.author}</span>
<span className="text-zinc-500">·</span>
<span className="text-zinc-500">
<RelativeTime date={entry.entries.publishedAt} />
</span>
</div>
<m.div
tabIndex={-1}
initial="initial"
animate={controller}
onPointerDown={stopPropagation}
onPointerDownCapture={stopPropagation}
variants={variants}
onWheel={stopPropagation}
transition={{
type: "spring",
mass: 0.4,
tension: 120,
friction: 1.4,
}}
exit="exit"
layout="size"
className={cn(
"shadow-perfect relative flex flex-col items-center rounded-xl border bg-theme-background p-8",
"mr-4 mt-4 max-h-[500px] w-[60ch] max-w-full overflow-auto",
)}
>
<div className="flex w-full gap-3">
<FeedIcon
fallback
className="mask-squircle mask"
feed={feed}
entry={entry.entries}
size={36}
/>
<div className="flex min-w-0 grow flex-col">
<div className="w-[calc(100%-10rem)] space-x-1">
<span className="font-semibold">{entry.entries.author}</span>
<span className="text-zinc-500">·</span>
<span className="text-zinc-500">
<RelativeTime date={entry.entries.publishedAt} />
</span>
</div>
<div
className={cn(
"relative mt-0.5 whitespace-pre-line text-base",
!!entry.collections && "pr-5",
)}
>
<div
className={cn(
"relative mt-0.5 whitespace-pre-line text-base",
!!entry.collections && "pr-5",
"rounded-xl p-3 align-middle text-[15px]",
"rounded-tl-none bg-zinc-600/5 dark:bg-zinc-500/20",
"mt-1 -translate-x-3",
)}
>
<div
className={cn(
"rounded-xl p-3 align-middle text-[15px]",
"rounded-tl-none bg-zinc-600/5 dark:bg-zinc-500/20",
"mt-1 -translate-x-3",
)}
>
{entry.entries.description}
{entry.entries.description}

{!!entry.entries.media?.length && (
<div className="mt-1 flex w-full gap-2 overflow-x-auto">
{entry.entries.media.map((media, i, mediaList) => (
<Media
key={media.url}
src={media.url}
type={media.type}
previewImageUrl={media.preview_image_url}
className="size-28 shrink-0 cursor-zoom-in"
loading="lazy"
proxy={{
width: 224,
height: 224,
}}
onClick={(e) => {
e.stopPropagation()
previewMedia(mediaList, i)
}}
/>
))}
</div>
)}
</div>
{!!entry.collections && <StarIcon />}
{!!entry.entries.media?.length && (
<div className="mt-1 flex w-full gap-2 overflow-x-auto">
{entry.entries.media.map((media, i, mediaList) => (
<Media
key={media.url}
src={media.url}
type={media.type}
previewImageUrl={media.preview_image_url}
className="size-28 shrink-0 cursor-zoom-in"
loading="lazy"
proxy={{
width: 224,
height: 224,
}}
onClick={(e) => {
e.stopPropagation()
previewMedia(mediaList, i)
}}
/>
))}
</div>
)}
</div>

{/* End right column */}
{!!entry.collections && <StarIcon />}
</div>

{/* End right column */}
</div>
</m.div>
</>
</div>
</m.div>
)
}

Expand Down

0 comments on commit 936ad86

Please sign in to comment.