LegacyConsoleArchive/LCE-Hub-LCE_Emerald_Launcher
1
0
Fork 0
mirror of https://github.com/LCE-Hub/LCE-Emerald-Launcher.git synced 2026-09-24 17:11:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(DownloadOverlay): full redesign

Browse Source
This commit is contained in:
neoapps-dev
2026-09-14 17:07:39 +03:00
parent d18ac334ce
commit 7fca7f8de9
4 changed files with 65 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/AchievementToast.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ export function AchievementToast({
}
className={onClick ? "cursor-pointer" : ""}
>
<div className="flex gap-3 p-1 min-w-[380px] max-w-[380px] min-h-[100px] mc-options-bg">
<div className="flex gap-3 p-1 min-w-[380px] max-w-[380px] min-h-[80px] mc-options-bg">
<div className="h-[54px] w-[54px] flex-shrink-0 flex items-center justify-center bg-[url(/images/empty.png)] bg-cover bg-center bg-no-repeat self-center">
{getIcon()}
</div>
src/components/layout/DownloadOverlay.tsx
+56 -52
View File
@@ -20,15 +20,15 @@ export const DownloadOverlay = memo(function DownloadOverlay({ downloadProgress,
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: -10 }}
transition={{ duration: 0.15 }}
className="absolute top-14 right-8 z-100 w-72 bg-[#1a1a1a] border-2 border-[#555] shadow-2xl"
className="absolute top-14 right-8 z-100 w-100 mc-options-bg"
style={{ imageRendering: "pixelated" }}
>
<div className="px-3 pt-2.5 pb-2 border-b border-white/10">
<span className="text-[13px] text-[#FFFF55] mc-text-shadow uppercase tracking-widest">
<div className="px-3 pt-2.5 pb-2">
<span className="text-xl text-[#333333] mc-text-shadow">
{t("download.title")}
</span>
</div>
<div className="flex flex-col gap-1.5 px-3 py-2 max-h-[260px] overflow-y-auto custom-scrollbar">
<div className="flex flex-col gap-1.5 py-2 max-h-[260px] overflow-y-auto custom-scrollbar mc-options-fg">
{downloadingIds.map((id) => {
const pct = downloadProgress[id] ?? 0;
const edition = editions.find((e) => e.instanceId === id || e.id === id);
@@ -38,62 +38,66 @@ export const DownloadOverlay = memo(function DownloadOverlay({ downloadProgress,
? id.replace(/^runner_/, "")
: t("download.gameFiles"));
return (
<div key={id} className="flex items-center gap-2.5">
{edition?.logo ? (
edition.logo.startsWith("http") || edition.logo.startsWith("/images") ? (
<img
src={edition.logo}
alt=""
className="w-6 h-6 object-contain shrink-0"
style={{ imageRendering: "pixelated" }}
/>
) : (
<ScreenshotImage
path={edition.logo}
alt=""
className="w-6 h-6 object-contain shrink-0"
style={{ imageRendering: "pixelated" }}
/>
)
) : edition?.titleImage ? (
edition.titleImage.startsWith("http") || edition.titleImage.startsWith("/images") ? (
<img
src={edition.titleImage}
alt=""
className="w-6 h-6 object-contain shrink-0"
style={{ imageRendering: "pixelated" }}
/>
) : (
<ScreenshotImage
path={edition.titleImage}
alt=""
className="w-6 h-6 object-contain shrink-0"
style={{ imageRendering: "pixelated" }}
/>
)
) : (
<div className="w-6 h-6 flex items-center justify-center border border-[#555] bg-black/40 shrink-0">
<svg className="w-3 h-3 text-[#FFFF55]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
</div>
)}
<div key={id} className="flex items-center mc-options-bg">
<div className="flex-1 min-w-0 flex flex-col gap-1">
<span className="text-[11px] text-white mc-text-shadow truncate leading-tight">
<div className="flex-1 flex flex-row justify-between">
<div className="flex-1 flex flex-row">
{edition?.logo ? (
edition.logo.startsWith("http") || edition.logo.startsWith("/images") ? (
<img
src={edition.logo}
alt=""
className="w-6 h-6 object-contain shrink-0"
style={{ imageRendering: "pixelated" }}
/>
) : (
<ScreenshotImage
path={edition.logo}
alt=""
className="w-6 h-6 object-contain shrink-0"
style={{ imageRendering: "pixelated" }}
/>
)
) : edition?.titleImage ? (
edition.titleImage.startsWith("http") || edition.titleImage.startsWith("/images") ? (
<img
src={edition.titleImage}
alt=""
className="w-6 h-6 object-contain shrink-0"
style={{ imageRendering: "pixelated" }}
/>
) : (
<ScreenshotImage
path={edition.titleImage}
alt=""
className="w-6 h-6 object-contain shrink-0"
style={{ imageRendering: "pixelated" }}
/>
)
) : (
<div className="w-6 h-6 flex items-center justify-center border border-[#555] bg-black/40 shrink-0">
<svg className="w-3 h-3 text-[#FFFF55]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" />
<line x1="12" y1="15" x2="12" y2="3" />
</svg>
</div>
)}
<span className="text-sm text-[#333333] truncate leading-tight shrink-0 self-center pl-1">
{name}
</span>
</div>
<span className="text-sm text-[#333333] w-7 text-right shrink-0 pr-1">
{Math.floor(pct)}%
</span>
</div>
<div className="flex items-center gap-1.5">
<div className="flex-1 h-2 border border-white/30 bg-black/60">
<div className="flex-1 h-3 border border-[#666666] bg-[#666666]">
<div
className="h-full bg-[#FFFF55]"
className="h-full bg-[#00ff61]"
style={{ width: `${pct}%` }}
/>
</div>
<span className="text-[10px] text-gray-400 mc-text-shadow w-7 text-right shrink-0 leading-none">
{Math.floor(pct)}%
</span>
</div>
</div>
</div>
src/css/index.css
+8
View File
@@ -72,6 +72,14 @@
image-rendering: pixelated;
}
.mc-options-fg { /*neo: tysm https://leanrada.com/9-slicer/ */
border-image: url("/images/empty.png") 30 30 30 30 fill / 30px 30px 30px 30px;
border-width: 12px;
border-style: solid;
border-color: transparent;
image-rendering: pixelated;
}
.mc-lce-tab {
background: linear-gradient(180deg, #c0c0c0 0%, #a0a0a0 100%);
border: 2px solid #808080;