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

…tton [feature] add "unselect all" action in mods panel
Zagrios · Nov 20, 2024 · c73bde2 · c73bde2
2 parents 6c6d473 + 66bab11
commit c73bde2
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 13 deletions.
diff --git a/assets/jsons/translations/de.json b/assets/jsons/translations/de.json
@@ -105,7 +105,8 @@
                         "latest": "Neueste",
                         "description": "Beschreibung",
                         "dropdown": {
-                            "uninstall-all": "Alle deinstallieren"
+                            "uninstall-all": "Alle deinstallieren",
+                            "unselect-all": "Alle abwählen"
                         }
                     }
                 },

diff --git a/assets/jsons/translations/en.json b/assets/jsons/translations/en.json
@@ -105,7 +105,8 @@
                         "latest": "Latest",
                         "description": "Description",
                         "dropdown": {
-                            "uninstall-all": "Uninstall all"
+                            "uninstall-all": "Uninstall all",
+                            "unselect-all": "Unselect all"
                         }
                     }
                 },

diff --git a/assets/jsons/translations/es.json b/assets/jsons/translations/es.json
@@ -105,7 +105,8 @@
                         "latest": "Último",
                         "description": "Descripción",
                         "dropdown": {
-                            "uninstall-all": "Desinstalar todos"
+                            "uninstall-all": "Desinstalar todos",
+                            "unselect-all": "Deseleccionar todo"
                         }
                     }
                 },

diff --git a/assets/jsons/translations/fr.json b/assets/jsons/translations/fr.json
@@ -105,7 +105,8 @@
                         "latest": "Récent",
                         "description": "Description",
                         "dropdown": {
-                            "uninstall-all": "Tout désinstaller"
+                            "uninstall-all": "Tout désinstaller",
+                            "unselect-all": "Tout désélectionner"
                         }
                     }
                 },

diff --git a/assets/jsons/translations/ja.json b/assets/jsons/translations/ja.json
@@ -105,7 +105,8 @@
                         "latest": "最新",
                         "description": "說明",
                         "dropdown": {
-                            "uninstall-all": "全てアンインストールする"
+                            "uninstall-all": "全てアンインストールする",
+                            "unselect-all": "すべて選択解除"
                         }
                     }
                 },

diff --git a/assets/jsons/translations/ko.json b/assets/jsons/translations/ko.json
@@ -105,7 +105,8 @@
                         "latest": "최신",
                         "description": "설명",
                         "dropdown": {
-                            "uninstall-all": "모두 제거"
+                            "uninstall-all": "모두 제거",
+                            "unselect-all": "모두 선택 해제"
                         }
                     }
                 },

diff --git a/assets/jsons/translations/ru.json b/assets/jsons/translations/ru.json
@@ -105,7 +105,8 @@
                         "latest": "Latest",
                         "description": "Описание",
                         "dropdown": {
-                            "uninstall-all": "Удалить всё"
+                            "uninstall-all": "Удалить всё",
+                            "unselect-all": "Снять все выделения"
                         }
                     }
                 },

diff --git a/assets/jsons/translations/zh-tw.json b/assets/jsons/translations/zh-tw.json
@@ -105,7 +105,8 @@
                         "latest": "最新",
                         "description": "描述",
                         "dropdown": {
-                            "uninstall-all": "全部移除"
+                            "uninstall-all": "全部移除",
+                            "unselect-all": "取消全選"
                         }
                     }
                 },

diff --git a/assets/jsons/translations/zh.json b/assets/jsons/translations/zh.json
@@ -105,7 +105,8 @@
                         "latest": "最新",
                         "description": "描述",
                         "dropdown": {
-                            "uninstall-all": "全部卸载"
+                            "uninstall-all": "全部卸载",
+                            "unselect-all": "取消全选"
                         }
                     }
                 },

diff --git a/src/renderer/components/svgs/bsm-icon.component.tsx b/src/renderer/components/svgs/bsm-icon.component.tsx
@@ -65,9 +65,10 @@ import { SongDetailDiffCharactertistic } from "shared/models/maps/song-details-c
 import { CleanIcon } from "./icons/clean-icon.component";
 import { BrowseIcon } from "./icons/browse-icon.component";
 import { AddFileIcon } from "./icons/add-file-icon.component";
+import { CancelIcon } from "./icons/cancel-icon.component";
 
 
-export type BsmIconType = SongDetailDiffCharactertistic | ("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" | "web-site" | "clean" | "browse" | "add-file" | "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" | "ko-KR-flag");
+export type BsmIconType = SongDetailDiffCharactertistic | ("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" | "web-site" | "clean" | "browse" | "add-file" | "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" | "ko-KR-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
@@ -276,6 +277,10 @@ export const BsmIcon = memo(({ className, icon, style }: { className?: string; i
             return <AddFileIcon className={className} style={style} />;
         }
 
+        if(icon === "cancel"){
+            return <CancelIcon className={className} style={style} />;
+        }
+
         return <TrashIcon className={className} style={style} />;
 
 

diff --git a/src/renderer/components/svgs/icons/cancel-icon.component.tsx b/src/renderer/components/svgs/icons/cancel-icon.component.tsx
@@ -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>
+    )
+})
diff --git a/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx b/src/renderer/components/version-viewer/slides/mods/mods-grid.component.tsx
@@ -16,9 +16,10 @@ type Props = {
     disabled?: boolean;
     uninstallMod?: (mods: Mod) => void;
     uninstallAllMods?: () => void;
+    unselectAllMods?: () => void;
 };
 
-export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreInfoMod, onWantInfos, disabled, uninstallMod, uninstallAllMods }: Props) {
+export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreInfoMod, onWantInfos, disabled, uninstallMod, uninstallAllMods, unselectAllMods }: Props) {
 
     const [filter, setFilter] = useState("");
     const [filterEnabled, setFilterEnabled] = useState(false);
@@ -66,7 +67,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: () => uninstallAllMods?.() }]} />
+                    <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: () => uninstallAllMods?.() }
+                    ]} />
                 </span>
 
                 {Array.from(modsMap.keys()).map(

diff --git a/src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx b/src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx
@@ -133,6 +133,10 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
         })
     };
 
+    const unselectAllMods = () => {
+        setModsSelected(() => []);
+    }
+
     const loadMods = (): Promise<void> => {
         if (os.isOffline) {
             return Promise.resolve();
@@ -209,7 +213,18 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
         return (
             <>
                 <div className="grow overflow-y-scroll w-full min-h-0 scrollbar-default p-0 m-0">
-                    <ModsGrid modsMap={modsAvailable} installed={modsInstalled} modsSelected={modsSelected} onModChange={handleModChange} moreInfoMod={moreInfoMod} onWantInfos={handleMoreInfo} disabled={uninstalling || installing} uninstallMod={uninstallMod} uninstallAllMods={uninstallAllMods}/>
+                    <ModsGrid
+                        modsMap={modsAvailable}
+                        installed={modsInstalled}
+                        modsSelected={modsSelected}
+                        onModChange={handleModChange}
+                        moreInfoMod={moreInfoMod}
+                        onWantInfos={handleMoreInfo}
+                        disabled={uninstalling || installing}
+                        uninstallMod={uninstallMod}
+                        uninstallAllMods={uninstallAllMods}
+                        unselectAllMods={unselectAllMods}
+                    />
                 </div>
                 <div className="shrink-0 flex items-center justify-between px-3 py-2">
                     <BsmButton className="flex items-center justify-center rounded-md px-1 h-8" text="pages.version-viewer.mods.buttons.more-infos" typeColor="cancel" withBar={false} disabled={!moreInfoMod} onClick={handleOpenMoreInfo} style={{ width: downloadWith }}/>