Skip to content

Commit

Permalink
fix: solve overflow issue in achievement model (RSSNext#1114)
Browse files Browse the repository at this point in the history 
* fix: solve overflow issue in achievement model

* fix: adjust scrollview

Signed-off-by: Innei <i@innei.in>

---------

Signed-off-by: Innei <i@innei.in>
Co-authored-by: Innei <i@innei.in>
  • Loading branch information
@Shenhaoyi @Innei
Shenhaoyi and Innei authored Oct 25, 2024
1 parent 522840b commit f726921
Showing 1 changed file with 78 additions and 75 deletions.
153 changes: 78 additions & 75 deletions apps/renderer/src/modules/achievement/AchievementModalContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Button } from "@follow/components/ui/button/index.js"
import { styledButtonVariant } from "@follow/components/ui/button/variants.js"
import { Input } from "@follow/components/ui/input/Input.js"
import { LoadingCircle, LoadingWithIcon } from "@follow/components/ui/loading/index.jsx"
import { ScrollArea } from "@follow/components/ui/scroll-area/ScrollArea.js"
import { Tooltip, TooltipContent, TooltipTrigger } from "@follow/components/ui/tooltip/index.js"
import type { ExtractBizResponse } from "@follow/models/types"
import { Chain } from "@follow/utils/chain"
Expand Down Expand Up @@ -163,82 +164,84 @@ export const AchievementModalContent: FC = () => {
/>
</small>

<ul className="mt-10 flex w-full grow flex-col gap-2">
{isLoading ? (
<div className="center pointer-events-none grow -translate-y-16">
<LoadingWithIcon icon={<i className="i-mgc-trophy-cute-re" />} size="large" />
</div>
) : (
sortedAchievements?.map((achievement) => {
const copy = achievementActionIdCopyMap[achievement.actionId]
if (!copy) return null

return (
<li key={achievement.id} className="flex items-center justify-between">
<div>
<div className="text-base font-bold">
{t(copy.title)}

{achievement.power && (
<span className="ml-2 inline-flex items-center gap-0.5 text-xs font-normal">
<span className="font-medium opacity-80">{achievement.power}</span>
<i className="i-mgc-power scale-95 text-sm text-accent" />
</span>
)}
</div>
<div className="flex items-center text-sm text-muted-foreground">
{t(copy.description)}
</div>
</div>
{achievement.type === "checking" && (
<div
className={styledButtonVariant({
variant: "outline",
className: "relative border-0 pointer-events-none",
})}
>
<LoadingCircle size="small" className="center absolute inset-0" />
<span className="select-none opacity-0">{t("words.mint")}</span>
<ScrollArea rootClassName="h-0 grow mt-10 w-[calc(100%+2rem)] -mx-4" viewportClassName="px-4">
<ul className="flex w-full flex-col gap-2">
{isLoading ? (
<div className="center pointer-events-none grow -translate-y-16">
<LoadingWithIcon icon={<i className="i-mgc-trophy-cute-re" />} size="large" />
</div>
) : (
sortedAchievements?.map((achievement) => {
const copy = achievementActionIdCopyMap[achievement.actionId]
if (!copy) return null

return (
<li key={achievement.id} className="flex items-center justify-between">
<div>
<div className="text-base font-bold">
{t(copy.title)}

{achievement.power && (
<span className="ml-2 inline-flex items-center gap-0.5 text-xs font-normal">
<span className="font-medium opacity-80">{achievement.power}</span>
<i className="i-mgc-power scale-95 text-sm text-accent" />
</span>
)}
</div>
<div className="flex items-center text-sm text-muted-foreground">
{t(copy.description)}
</div>
</div>
)}
{achievement.type === "incomplete" && (
<IncompleteButton achievement={achievement} refetch={refetch} />
)}
{achievement.type === "received" && (
<div
className={styledButtonVariant({
variant: "outline",
className:
"relative !bg-green-100/50 gap-1 border-green-200 text-green-800 dark:text-foreground dark:!bg-green-100/5 dark:border-green-200/20",
})}
>
<i className="i-mgc-check-filled" />
{t("achievement.all_done")}
</div>
)}

{achievement.type === "audit" && (
<div
className={styledButtonVariant({
variant: "outline",
className:
"relative cursor-not-allowed !bg-zinc-100/50 gap-1 border-zinc-200 text-zinc-800 dark:text-foreground dark:!bg-zinc-100/5 dark:border-zinc-200/20",
})}
>
Validating...
</div>
)}
{achievement.type === "completed" && (
<MintButton
achievementsDataAtom={achievementsDataAtom}
achievement={achievement}
/>
)}
</li>
)
})
)}
</ul>
{achievement.type === "checking" && (
<div
className={styledButtonVariant({
variant: "outline",
className: "relative border-0 pointer-events-none",
})}
>
<LoadingCircle size="small" className="center absolute inset-0" />
<span className="select-none opacity-0">{t("words.mint")}</span>
</div>
)}
{achievement.type === "incomplete" && (
<IncompleteButton achievement={achievement} refetch={refetch} />
)}
{achievement.type === "received" && (
<div
className={styledButtonVariant({
variant: "outline",
className:
"relative !bg-green-100/50 gap-1 border-green-200 text-green-800 dark:text-foreground dark:!bg-green-100/5 dark:border-green-200/20",
})}
>
<i className="i-mgc-check-filled" />
{t("achievement.all_done")}
</div>
)}

{achievement.type === "audit" && (
<div
className={styledButtonVariant({
variant: "outline",
className:
"relative cursor-not-allowed !bg-zinc-100/50 gap-1 border-zinc-200 text-zinc-800 dark:text-foreground dark:!bg-zinc-100/5 dark:border-zinc-200/20",
})}
>
Validating...
</div>
)}
{achievement.type === "completed" && (
<MintButton
achievementsDataAtom={achievementsDataAtom}
achievement={achievement}
/>
)}
</li>
)
})
)}
</ul>
</ScrollArea>
</div>
)
}
Expand Down

0 comments on commit f726921

Please sign in to comment.