zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into chore/add-beatsaber-desktop-version-info

Browse Source
This commit is contained in:
Zagrios
2025-02-25 14:42:24 +01:00
parent 14f079b50c 3f10d5917f
commit ea7527d952
21 changed files with 157 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx
+65
View File
@@ -7,6 +7,8 @@ import useDoubleClick from "use-double-click";
import { useOnUpdate } from "renderer/hooks/use-on-update.hook";
import striptags from "striptags";
import { safeGt } from "shared/helpers/semver.helpers";
import Tippy from "@tippyjs/react";
import { useTranslationV2 } from "renderer/hooks/use-translation.hook";
type Props = {
className?: string;
@@ -21,6 +23,68 @@ type Props = {
onUninstall?: () => void;
};
type FileSizeProps = {
fileSize?: number;
wantInfoStyle: CSSProperties;
};
function FileSizeText({ fileSize, wantInfoStyle }: Readonly<FileSizeProps>) {
const { text: t } = useTranslationV2();
const verifyFileSize = fileSize !== undefined;
const isMediumMod = verifyFileSize && fileSize > 1024 * 1024 * 50; // 50MB
const isLargeMod = verifyFileSize && fileSize > 1024 * 1024 * 100; // 100MB
const getFormattedSize = () : string => {
if (!verifyFileSize || fileSize === 0)
return `-`;
if (fileSize < 1024 * 1024)
return `${(fileSize/1024).toFixed(2)}KB`;
return `${(fileSize/1024/1024).toFixed(2)}MB`;
};
const getWarningText = () : string => {
if (isLargeMod)
return `pages.version-viewer.mods.mods-grid.mod-item.this-is-a-very-large-mod`;
if (isMediumMod)
return `pages.version-viewer.mods.mods-grid.mod-item.this-is-a-large-mod`;
return "";
};
const getTheme = () : string => {
if (isLargeMod)
return 'red';
if (isMediumMod)
return 'yellow';
return "";
};
const getTextColor = () : string => {
if (isLargeMod)
return "text-red-400";
if (isMediumMod)
return "text-yellow-400";
return "";
};
return (
<Tippy
content={t(getWarningText())}
placement="left"
theme={getTheme()}
disabled={!(isLargeMod || isMediumMod)}
delay={[50, 0]} >
<span className={`min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90 ${getTextColor()}`} style={wantInfoStyle}>
{getFormattedSize()}
</span>
</Tippy>
);
}
export function ModItem({ className, mod, installedVersion, isDependency, isSelected, onChange, wantInfo, onWantInfo, disabled, onUninstall }: Props) {
const themeColor = useThemeColor("second-color");
@@ -65,6 +129,7 @@ export function ModItem({ className, mod, installedVersion, isDependency, isSele
<span className="min-w-0 text-center bg-inherit py-2 px-1 text-sm border-t-2 border-b-2 group-hover:brightness-90" style={wantInfoStyle}>
{mod.version.modVersion}
</span>
<FileSizeText fileSize={mod.version.fileSize} wantInfoStyle={wantInfoStyle} />
<span title={striptags(mod.mod?.description ?? "", { tagReplacementText: " " })} className="px-3 bg-inherit whitespace-nowrap text-ellipsis overflow-hidden py-2 text-sm border-t-2 border-b-2 group-hover:brightness-90" style={wantInfoStyle}>
{striptags(mod.mod?.summary ?? "", { tagReplacementText: " " })}
</span>
src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx
+3 -2
View File
@@ -58,14 +58,15 @@ export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreIn
return (
modsMap && (
<div className="grid gap-y-1 grid-cols-[40px_min-content_min-content_min-content_1fr_min-content] bg-light-main-color-2 dark:bg-main-color-2 text-main-color-1 dark:text-light-main-color-1">
<div className="grid gap-y-1 grid-cols-[40px_min-content_min-content_min-content_min-content_1fr_min-content] bg-light-main-color-2 dark:bg-main-color-2 text-main-color-1 dark:text-light-main-color-1">
<span className="absolute z-10 top-0 w-full h-8 bg-inherit rounded-tl-md" />
<span className="z-10 sticky flex items-center justify-end top-0 bg-inherit border-b-2 border-main-color-1 rounded-tl-md">
<BsmButton className="rounded-full h-6 w-6 p-[2px]" withBar={false} icon="search" onClick={handleToogleFilter} />
</span>
<span className="z-10 sticky top-0 flex items-center bg-inherit border-main-color-1 border-b-2 h-8 px-1 whitespace-nowrap">{filterEnabled ? <motion.input autoFocus className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md h-6 px-2" initial={{ width: 0 }} animate={{ width: "250px" }} transition={{ ease: "easeInOut", duration: 0.15 }} onChange={e => handleInput(e.target.value)} /> : <span className="w-full text-center">{t("pages.version-viewer.mods.mods-grid.header-bar.name")}</span>}</span>
<span className="z-10 sticky top-0 flex items-center bg-inherit border-main-color-1 border-b-2 h-8 px-1 whitespace-nowrap">{filterEnabled ? <motion.input autoFocus className="bg-light-main-color-1 dark:bg-main-color-1 rounded-md h-6 px-2" initial={{ width: 0 }} animate={{ width: "200px" }} transition={{ ease: "easeInOut", duration: 0.15 }} onChange={e => handleInput(e.target.value)} /> : <span className="w-full text-center">{t("pages.version-viewer.mods.mods-grid.header-bar.name")}</span>}</span>
<span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 px-2 whitespace-nowrap">{t("pages.version-viewer.mods.mods-grid.header-bar.installed")}</span>
<span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 px-2 whitespace-nowrap">{t("pages.version-viewer.mods.mods-grid.header-bar.latest")}</span>
<span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 px-2 whitespace-nowrap">{t("pages.version-viewer.mods.mods-grid.header-bar.size")}</span>
<span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 whitespace-nowrap">{t("pages.version-viewer.mods.mods-grid.header-bar.description")}</span>
<span className="z-10 sticky top-0 bg-inherit border-b-2 border-main-color-1 h-8 flex justify-start items-center py-1 pl-[3px] min-w-[50px]">
<BsmDropdownButton className="h-full aspect-square relative rounded-full bg-light-main-color-1 dark:bg-main-color-3" withBar={false} icon="three-dots" buttonClassName="!rounded-full !p-[2px] !bg-light-main-color-2 dark:!bg-main-color-2 hover:!bg-light-main-color-1 dark:hover:!bg-main-color-3" menuTranslationY="5px" items={[
src/renderer/index.css
+16
View File
@@ -114,6 +114,22 @@
@apply border-r-neutral-900;
}
.tippy-box[data-theme~='red'] {
@apply bg-neutral-900;
@apply text-red-400;
}
.tippy-box[data-theme~='red'][data-placement^='left'] > .tippy-arrow::before {
@apply border-l-neutral-900;
}
.tippy-box[data-theme~='yellow'] {
@apply bg-neutral-900;
@apply text-yellow-400;
}
.tippy-box[data-theme~='yellow'][data-placement^='left'] > .tippy-arrow::before {
@apply border-l-neutral-900;
}
.bg-theme-1 { @apply bg-light-main-color-1 dark:bg-main-color-1; }
.bg-theme-2 { @apply bg-light-main-color-2 dark:bg-main-color-2; }
.bg-theme-3 { @apply bg-light-main-color-3 dark:bg-main-color-3; }