Merge pull request #666 from Zagrios/feature/add-unselect-all-mods-button

[feature] add "unselect all" action in mods panel

(cherry picked from commit c73bde2cd9)
This commit is contained in:
MathieuG-P
2024-11-25 21:03:04 +01:00
parent 4805e74a2a
commit efebd221c9
13 changed files with 56 additions and 18 deletions
+2 -1
View File
@@ -87,7 +87,8 @@
"latest": "Neueste",
"description": "Beschreibung",
"dropdown": {
"uninstall-all": "Alle deinstallieren"
"uninstall-all": "Alle deinstallieren",
"unselect-all": "Alle abwählen"
}
}
}
+2 -1
View File
@@ -87,7 +87,8 @@
"latest": "Latest",
"description": "Description",
"dropdown": {
"uninstall-all": "Uninstall all"
"uninstall-all": "Uninstall all",
"unselect-all": "Unselect all"
}
}
}
+2 -1
View File
@@ -87,7 +87,8 @@
"latest": "Último",
"description": "Descripción",
"dropdown": {
"uninstall-all": "Desinstalar todos"
"uninstall-all": "Desinstalar todos",
"unselect-all": "Deseleccionar todo"
}
}
}
+2 -1
View File
@@ -87,7 +87,8 @@
"latest": "Récent",
"description": "Description",
"dropdown": {
"uninstall-all": "Tout désinstaller"
"uninstall-all": "Tout désinstaller",
"unselect-all": "Tout désélectionner"
}
}
}
+2 -1
View File
@@ -87,7 +87,8 @@
"latest": "最新",
"description": "說明",
"dropdown": {
"uninstall-all": "全てアンインストールする"
"uninstall-all": "全てアンインストールする",
"unselect-all": "すべて選択解除"
}
}
}
+2 -1
View File
@@ -87,7 +87,8 @@
"latest": "Latest",
"description": "Описание",
"dropdown": {
"uninstall-all": "Удалить всё"
"uninstall-all": "Удалить всё",
"unselect-all": "Снять все выделения"
}
}
}
+2 -1
View File
@@ -87,7 +87,8 @@
"latest": "最新",
"description": "描述",
"dropdown": {
"uninstall-all": "全部移除"
"uninstall-all": "全部移除",
"unselect-all": "取消全選"
}
}
}
+2 -1
View File
@@ -87,7 +87,8 @@
"latest": "最新",
"description": "描述",
"dropdown": {
"uninstall-all": "全部卸载"
"uninstall-all": "全部卸载",
"unselect-all": "取消全选"
}
}
}
@@ -271,7 +271,7 @@ export class BsModsManagerService {
return Array.from(
new Map<string, Mod>(
availableMods.reduce((res, mod) => {
if (this.isDependency(mod, mods, availableMods)) {
if (mod.required || this.isDependency(mod, mods, availableMods)) {
res.push([mod.name, mod]);
}
return res;
@@ -350,13 +350,13 @@ export class BsModsManagerService {
}
public async installMods(mods: Mod[], version: BSVersion): Promise<InstallModsResult> {
const deps = await this.resolveDependencies(mods, version);
mods.push(...deps);
if (!mods?.length) {
throw "no-mods";
}
const deps = await this.resolveDependencies(mods, version);
mods.push(...deps);
const bsipa = mods.find(mod => mod.name.toLowerCase() === "bsipa");
if (bsipa) {
mods = mods.filter(mod => mod.name.toLowerCase() !== "bsipa");
@@ -60,8 +60,9 @@ import { ChevronTopIcon } from "./icons/chevron-top-icon.component";
import { EyeCrossIcon } from "./icons/eye-cross-icon.component";
import { ShortcutIcon } from "./icons/shortcut-icon.component";
import { BackupRestoreIcon } from "./icons/backup-restore-icon.component";
import { CancelIcon } from "./icons/cancel-icon.component";
export type BsmIconType = BsvMapCharacteristic | ("settings" | "trash" | "favorite" | "folder" | "bsNote" | "check" | "three-dots" | "twitch" | "eye" | "play" | "checkCircleIcon" | "discord" | "info" | "eye-cross" | "terminal" | "desktop" | "oculus" | "add" | "cross" | "task" | "github" | "close" | "thumbUpFill" | "timerFill" | "pause" | "twitter" | "sync" | "chevron-top" | "copy" | "steam" | "edit" | "export" | "patreon" | "search" | "bsMapDifficulty" | "link" | "unlink" | "download" | "filter" | "mee6" | "volume-up" | "volume-off" | "volume-down" | "shortcut" | "backup-restore" | "fr-FR-flag" | "es-ES-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag");
export type BsmIconType = BsvMapCharacteristic | ("settings" | "trash" | "favorite" | "folder" | "bsNote" | "check" | "three-dots" | "twitch" | "eye" | "play" | "checkCircleIcon" | "discord" | "info" | "eye-cross" | "terminal" | "desktop" | "oculus" | "add" | "cross" | "task" | "github" | "close" | "thumbUpFill" | "timerFill" | "pause" | "twitter" | "sync" | "chevron-top" | "copy" | "steam" | "edit" | "export" | "patreon" | "search" | "bsMapDifficulty" | "link" | "unlink" | "download" | "filter" | "mee6" | "volume-up" | "volume-off" | "volume-down" | "shortcut" | "backup-restore" | "cancel" | "fr-FR-flag" | "es-ES-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag");
export const BsmIcon = memo(({ className, icon, style }: { className?: string; icon: BsmIconType; style?: CSSProperties }) => {
// TODO : Very ugly very messy, need to find a better way to do this
@@ -250,6 +251,11 @@ export const BsmIcon = memo(({ className, icon, style }: { className?: string; i
if (icon === "backup-restore") {
return <BackupRestoreIcon className={className} style={style} />;
}
if(icon === "cancel"){
return <CancelIcon className={className} style={style} />;
}
return <TrashIcon className={className} style={style} />;
};
@@ -0,0 +1,9 @@
import { createSvgIcon } from "../svg-icon.type";
export const CancelIcon = createSvgIcon((props, ref) => {
return (
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
<path d="M480-421.37 592.17-309.2q11.72 11.72 29.32 11.6 17.6-.12 29.31-11.83 11.72-11.72 11.72-29.32t-11.72-29.32L538.63-480 650.8-592.17q11.72-11.72 11.72-29.32T650.8-650.8q-11.71-11.72-29.31-11.72-17.6 0-29.32 11.72L480-538.63 367.83-650.8q-11.72-11.72-29.2-11.72-17.48 0-29.2 11.72-11.71 11.71-11.71 29.31 0 17.6 11.71 29.32L421.37-480 309.2-367.83q-11.72 11.72-11.6 29.2.12 17.48 11.83 29.2 11.72 11.71 29.32 11.71t29.32-11.71L480-421.37Zm0 349.5q-84.91 0-159.35-32.1-74.43-32.1-129.51-87.17-55.07-55.08-87.17-129.51-32.1-74.44-32.1-159.35t32.1-159.35q32.1-74.43 87.17-129.51 55.08-55.07 129.51-87.17 74.44-32.1 159.35-32.1t159.35 32.1q74.43 32.1 129.51 87.17 55.07 55.08 87.17 129.51 32.1 74.44 32.1 159.35t-32.1 159.35q-32.1 74.43-87.17 129.51-55.08 55.07-129.51 87.17-74.44 32.1-159.35 32.1Zm0-91q133.04 0 225.09-92.04 92.04-92.05 92.04-225.09 0-133.04-92.04-225.09-92.05-92.04-225.09-92.04-133.04 0-225.09 92.04-92.04 92.05-92.04 225.09 0 133.04 92.04 225.09 92.05 92.04 225.09 92.04ZM480-480Z"/>
</svg>
)
})
@@ -9,10 +9,18 @@ import { Mod } from "shared/models/mods/mod.interface";
import { ModItem } from "./mod-item.component";
import { useService } from "renderer/hooks/use-service.hook";
type Props = { modsMap: Map<string, Mod[]>; installed: Map<string, Mod[]>; modsSelected: Mod[]; onModChange: (selected: boolean, mod: Mod) => void; moreInfoMod?: Mod; onWantInfos: (mod: Mod) => void };
type Props = {
modsMap: Map<string, Mod[]>;
installed: Map<string, Mod[]>;
modsSelected: Mod[];
onModChange: (selected: boolean, mod: Mod) => void;
moreInfoMod?: Mod;
onWantInfos: (mod: Mod) => void
unselectAllMods?: () => void;
};
export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreInfoMod, onWantInfos, unselectAllMods }: Props) {
export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreInfoMod, onWantInfos }: Props) {
const pageState = useService(PageStateService);
const modsManager = useService(BsModsManagerService);
@@ -70,7 +78,10 @@ export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreIn
<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 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={[{ text: "pages.version-viewer.mods.mods-grid.header-bar.dropdown.uninstall-all", icon: "trash", onClick: handleUninstallAll }]} />
<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={[
{ text: "pages.version-viewer.mods.mods-grid.header-bar.dropdown.unselect-all", icon: "cancel", onClick: () => unselectAllMods?.() },
{ text: "pages.version-viewer.mods.mods-grid.header-bar.dropdown.uninstall-all", icon: "trash", onClick: () => handleUninstallAll?.() }
]} />
</span>
{Array.from(modsMap.keys()).map(
@@ -116,6 +116,10 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
});
};
const unselectAllMods = () => {
setModsSelected(() => []);
};
useEffect(() => {
const subs: Subscription[] = [];
@@ -181,7 +185,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
return (
<>
<div className="grow overflow-scroll w-full min-h-0 scrollbar-thin scrollbar-thumb-neutral-900 scrollbar-thumb-rounded-full">
<ModsGrid modsMap={modsAvailable} installed={modsInstalled} modsSelected={modsSelected} onModChange={handleModChange} moreInfoMod={moreInfoMod} onWantInfos={handleMoreInfo} />
<ModsGrid modsMap={modsAvailable} installed={modsInstalled} modsSelected={modsSelected} onModChange={handleModChange} moreInfoMod={moreInfoMod} onWantInfos={handleMoreInfo} unselectAllMods={unselectAllMods} />
</div>
<div className="h-10 shrink-0 flex items-center justify-between px-3">
<BsmButton className="text-center rounded-md px-2 py-[2px]" text="pages.version-viewer.mods.buttons.more-infos" typeColor="cancel" withBar={false} disabled={!moreInfoMod} onClick={handleOpenMoreInfo} style={{ width: downloadWith }} />