Skip to content

Commit dd63c7f

Browse files
dreamguxiangdreamguxiang
committed
fix(frontend): refine update modal changelog layout (#82)
1 parent 78157a1 commit dd63c7f

1 file changed

Lines changed: 122 additions & 100 deletions

File tree

‎frontend/src/components/UpdateModal.tsx‎

Lines changed: 122 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import React from "react";
2-
import { Button } from "@heroui/react";
3-
import { UnifiedModal } from "@/components/UnifiedModal";
2+
import { Button, ModalContent } from "@heroui/react";
3+
import {
4+
BaseModal,
5+
BaseModalBody,
6+
BaseModalFooter,
7+
BaseModalHeader,
8+
} from "@/components/BaseModal";
49
import { useTranslation } from "react-i18next";
510
import { Browser } from "@wailsio/runtime";
611
import { FaRocket } from "react-icons/fa";
@@ -29,117 +34,134 @@ export const UpdateModal: React.FC<UpdateModalProps> = ({
2934
const { t } = useTranslation();
3035

3136
return (
32-
<UnifiedModal
37+
<BaseModal
3338
size="lg"
3439
isOpen={isOpen}
3540
onOpenChange={(open) => {
3641
if (!open) {
3742
onDismiss();
3843
}
3944
}}
40-
type="primary"
45+
scrollBehavior="inside"
4146
classNames={{
42-
body: "!overflow-hidden",
47+
base: "overflow-hidden bg-white/80! dark:bg-zinc-900/80! backdrop-blur-2xl border-white/40! dark:border-zinc-700/50! shadow-2xl rounded-4xl",
48+
wrapper: "overflow-hidden",
4349
}}
44-
title={
45-
<span className="truncate">
46-
{t("settings.body.version.hasnew")}
47-
{version}
48-
</span>
49-
}
50-
icon={<FaRocket className="w-5 h-5" />}
5150
hideCloseButton
52-
showConfirmButton={false}
53-
showCancelButton={false}
54-
footer={
55-
<div className="flex w-full flex-wrap justify-end gap-2">
56-
<Button variant="light" onPress={onDismiss}>
57-
{t("common.cancel")}
58-
</Button>
59-
<Button variant="flat" onPress={onIgnore}>
60-
{t("settings.body.version.ignore")}
61-
</Button>
62-
<Button color="primary" isLoading={loading} onPress={onUpdate}>
63-
{t("settings.modal.2.footer.download_button")}
64-
</Button>
65-
</div>
66-
}
6751
>
68-
{body ? (
69-
<div className="rounded-2xl bg-default-100/60 dark:bg-zinc-800/60 border border-default-200 dark:border-zinc-700 overflow-hidden">
70-
<div className="px-4 py-3 border-b border-default-200/80 dark:border-zinc-700/80">
71-
<div className="text-small font-semibold text-default-700 dark:text-zinc-200">
72-
{t("downloadpage.changelog.title")}
73-
</div>
74-
<div className="text-tiny text-default-500 dark:text-zinc-400 mt-0.5">
75-
{version}
76-
</div>
77-
</div>
78-
<div className="text-small text-default-600 dark:text-zinc-300 wrap-break-word leading-6 max-h-[50vh] overflow-y-auto px-4 py-3 pr-3 custom-scrollbar">
79-
<ReactMarkdown
80-
remarkPlugins={[remarkGfm]}
81-
components={{
82-
h1: ({ children }) => (
83-
<h1 className="text-xl font-semibold mt-2 mb-2">
84-
{children}
85-
</h1>
86-
),
87-
h2: ({ children }) => (
88-
<h2 className="text-lg font-semibold mt-2 mb-2">
89-
{children}
90-
</h2>
91-
),
92-
h3: ({ children }) => (
93-
<h3 className="text-base font-semibold mt-2 mb-2">
94-
{children}
95-
</h3>
96-
),
97-
p: ({ children }) => <p className="my-1">{children}</p>,
98-
ul: ({ children }) => (
99-
<ul className="list-disc pl-6 my-2">{children}</ul>
100-
),
101-
ol: ({ children }) => (
102-
<ol className="list-decimal pl-6 my-2">{children}</ol>
103-
),
104-
li: ({ children }) => <li className="my-1">{children}</li>,
105-
a: ({ href, children }) => {
106-
const cleanUrl = (url: string) => {
107-
const target = "https://github.com";
108-
const idx = url.lastIndexOf(target);
109-
return idx > 0 ? url.substring(idx) : url;
110-
};
52+
<ModalContent className="shadow-none">
53+
{() => (
54+
<>
55+
<BaseModalHeader className="flex flex-row items-center gap-3">
56+
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-primary-100 bg-primary-50 dark:border-primary-500/20 dark:bg-primary-500/10">
57+
<FaRocket className="h-5 w-5 text-primary-500" />
58+
</div>
59+
<div className="flex flex-col">
60+
<h2 className="text-xl font-bold text-primary-500">
61+
<span className="truncate">
62+
{t("settings.body.version.hasnew")}
63+
{version}
64+
</span>
65+
</h2>
66+
</div>
67+
</BaseModalHeader>
11168

112-
return (
113-
<a
114-
href={href}
115-
target="_blank"
116-
rel="noreferrer"
117-
className="text-primary underline cursor-pointer"
118-
onClick={(e) => {
119-
e.preventDefault();
120-
if (href) {
121-
Browser.OpenURL(cleanUrl(href));
122-
}
69+
<BaseModalBody className="flex min-h-0 flex-1 flex-col !overflow-hidden">
70+
{body ? (
71+
<div className="flex min-h-0 flex-1 flex-col rounded-2xl border border-default-200 bg-default-100/60 overflow-hidden dark:border-zinc-700 dark:bg-zinc-800/60">
72+
<div className="border-b border-default-200/80 px-4 py-3 dark:border-zinc-700/80">
73+
<div className="text-small font-semibold text-default-700 dark:text-zinc-200">
74+
{t("downloadpage.changelog.title")}
75+
</div>
76+
<div className="mt-0.5 text-tiny text-default-500 dark:text-zinc-400">
77+
{version}
78+
</div>
79+
</div>
80+
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-3 pr-3 text-small text-default-600 leading-6 wrap-break-word custom-scrollbar dark:text-zinc-300">
81+
<ReactMarkdown
82+
remarkPlugins={[remarkGfm]}
83+
components={{
84+
h1: ({ children }) => (
85+
<h1 className="text-xl font-semibold mt-2 mb-2">
86+
{children}
87+
</h1>
88+
),
89+
h2: ({ children }) => (
90+
<h2 className="text-lg font-semibold mt-2 mb-2">
91+
{children}
92+
</h2>
93+
),
94+
h3: ({ children }) => (
95+
<h3 className="text-base font-semibold mt-2 mb-2">
96+
{children}
97+
</h3>
98+
),
99+
p: ({ children }) => <p className="my-1">{children}</p>,
100+
ul: ({ children }) => (
101+
<ul className="list-disc pl-6 my-2">{children}</ul>
102+
),
103+
ol: ({ children }) => (
104+
<ol className="list-decimal pl-6 my-2">{children}</ol>
105+
),
106+
li: ({ children }) => <li className="my-1">{children}</li>,
107+
a: ({ href, children }) => {
108+
const cleanUrl = (url: string) => {
109+
const target = "https://github.com";
110+
const idx = url.lastIndexOf(target);
111+
return idx > 0 ? url.substring(idx) : url;
112+
};
113+
114+
return (
115+
<a
116+
href={href}
117+
target="_blank"
118+
rel="noreferrer"
119+
className="text-primary underline cursor-pointer"
120+
onClick={(e) => {
121+
e.preventDefault();
122+
if (href) {
123+
Browser.OpenURL(cleanUrl(href));
124+
}
125+
}}
126+
>
127+
{Array.isArray(children)
128+
? children.map((child) =>
129+
typeof child === "string"
130+
? cleanUrl(child)
131+
: child,
132+
)
133+
: typeof children === "string"
134+
? cleanUrl(children)
135+
: children}
136+
</a>
137+
);
138+
},
139+
hr: () => <hr className="my-3 border-default-200" />,
123140
}}
124141
>
125-
{Array.isArray(children)
126-
? children.map((child) =>
127-
typeof child === "string" ? cleanUrl(child) : child,
128-
)
129-
: typeof children === "string"
130-
? cleanUrl(children)
131-
: children}
132-
</a>
133-
);
134-
},
135-
hr: () => <hr className="my-3 border-default-200" />,
136-
}}
137-
>
138-
{body}
139-
</ReactMarkdown>
140-
</div>
141-
</div>
142-
) : null}
143-
</UnifiedModal>
142+
{body}
143+
</ReactMarkdown>
144+
</div>
145+
</div>
146+
) : null}
147+
</BaseModalBody>
148+
149+
<BaseModalFooter>
150+
<div className="flex w-full flex-wrap justify-end gap-2">
151+
<Button variant="light" onPress={onDismiss}>
152+
{t("common.cancel")}
153+
</Button>
154+
<Button variant="flat" onPress={onIgnore}>
155+
{t("settings.body.version.ignore")}
156+
</Button>
157+
<Button color="primary" isLoading={loading} onPress={onUpdate}>
158+
{t("settings.modal.2.footer.download_button")}
159+
</Button>
160+
</div>
161+
</BaseModalFooter>
162+
</>
163+
)}
164+
</ModalContent>
165+
</BaseModal>
144166
);
145167
};

0 commit comments

Comments
 (0)