xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: improve preview media action buttons layout and styling 

- Restructure preview media action buttons container
- Remove unnecessary pointer-events-none class from inner div
- Wrap action buttons in an additional container for better overflow handling
- Maintain existing functionality for download and open in browser actions

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei 2025-02-11 16:15:25 +08:00
parent 220e2e0843
commit f642cdd274
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
1 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
apps/renderer/src/components/ui/media/preview-media.tsx
View File

@ -110,39 +110,41 @@ const Wrapper: Component<{
>
{children}
<RootPortal to={sideContent ? null : undefined}>
<m.div
animate={animateController}
className={cn(
"pointer-events-none absolute inset-x-0 bottom-0 z-[99] flex justify-end gap-3 p-2 text-white/70 [&_button]:hover:text-white",
"overflow-hidden",
sideContent ? "rounded-bl-xl" : "rounded-xl",
"bg-black/30",
)}
onClick={stopPropagation}
>
{showActions && (
<Fragment>
{IN_ELECTRON && (
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-[99] overflow-hidden">
<m.div
animate={animateController}
className={cn(
"flex justify-end gap-3 p-2 text-white/70 [&_button]:hover:text-white",
sideContent ? "rounded-bl-xl" : "rounded-xl",
"bg-black/30",
)}
onClick={stopPropagation}
>
{showActions && (
<Fragment>
{IN_ELECTRON && (
<ActionButton
tooltip={t("common:words.download")}
onClick={() => {
tipcClient?.download(src)
}}
>
<i className="i-mgc-download-2-cute-re" />
</ActionButton>
)}
<ActionButton
tooltip={t("common:words.download")}
tooltip={t(COPY_MAP.OpenInBrowser())}
onClick={() => {
tipcClient?.download(src)
window.open(src)
}}
>
<i className="i-mgc-download-2-cute-re" />
<i className="i-mgc-external-link-cute-re" />
</ActionButton>
)}
<ActionButton
tooltip={t(COPY_MAP.OpenInBrowser())}
onClick={() => {
window.open(src)
}}
>
<i className="i-mgc-external-link-cute-re" />
</ActionButton>
</Fragment>
)}
</m.div>
</Fragment>
)}
</m.div>
</div>
</RootPortal>
</div>
{!!sideContent && (