[feat-76] added drag n drop in mods slide dropdown

This commit is contained in:
silentrald
2024-12-08 23:33:44 +08:00
parent 431494da94
commit c978d4689e
12 changed files with 24 additions and 2 deletions
+1
View File
@@ -106,6 +106,7 @@
"latest": "Neueste",
"description": "Beschreibung",
"dropdown": {
"import-mods": "Mods importieren",
"uninstall-all": "Alle deinstallieren",
"unselect-all": "Alle abwählen"
}
+1
View File
@@ -106,6 +106,7 @@
"latest": "Latest",
"description": "Description",
"dropdown": {
"import-mods": "Import mods",
"uninstall-all": "Uninstall all",
"unselect-all": "Unselect all"
}
+1
View File
@@ -106,6 +106,7 @@
"latest": "Último",
"description": "Descripción",
"dropdown": {
"import-mods": "Importar mods",
"uninstall-all": "Desinstalar todos",
"unselect-all": "Deseleccionar todo"
}
+1
View File
@@ -106,6 +106,7 @@
"latest": "Récent",
"description": "Description",
"dropdown": {
"import-mods": "Importer des mods",
"uninstall-all": "Tout désinstaller",
"unselect-all": "Tout désélectionner"
}
+1
View File
@@ -106,6 +106,7 @@
"latest": "最新",
"description": "說明",
"dropdown": {
"import-mods": "モッドをインポート",
"uninstall-all": "全てアンインストールする",
"unselect-all": "すべて選択解除"
}
+1
View File
@@ -106,6 +106,7 @@
"latest": "최신",
"description": "설명",
"dropdown": {
"import-mods": "모드 가져오기",
"uninstall-all": "모두 제거",
"unselect-all": "모두 선택 해제"
}
+1
View File
@@ -106,6 +106,7 @@
"latest": "Latest",
"description": "Описание",
"dropdown": {
"import-mods": "Импортировать моды",
"uninstall-all": "Удалить всё",
"unselect-all": "Снять все выделения"
}
+1
View File
@@ -106,6 +106,7 @@
"latest": "最新",
"description": "描述",
"dropdown": {
"import-mods": "導入模組",
"uninstall-all": "全部移除",
"unselect-all": "取消全選"
}
+1
View File
@@ -106,6 +106,7 @@
"latest": "最新",
"description": "描述",
"dropdown": {
"import-mods": "导入模组",
"uninstall-all": "全部卸载",
"unselect-all": "取消全选"
}
@@ -375,6 +375,7 @@ export class BsModsManagerService {
files: [],
};
let modsInstalledCount = 0;
let modFilesCount = 0;
const abortController = new AbortController();
(async () => {
@@ -395,6 +396,8 @@ export class BsModsManagerService {
const modFiles = await this.importMod(modPath, modsPendingFolder);
if (modFiles.length > 0) {
++modsInstalledCount;
modFilesCount += modFiles.length;
log.info(modFiles);
externalMod.name = path.basename(modPath, path.extname(modPath));
externalMod.files = modFiles;
@@ -410,7 +413,7 @@ export class BsModsManagerService {
if (modsInstalledCount === 0) {
throw new CustomError("No \"dll\" found in any of the files dropped", "no-dlls");
}
log.info("Successfully imported", modsInstalledCount, "mods from", paths.length, "files");
log.info("Successfully imported", modsInstalledCount, "mods from", paths.length, "files paths. Total files/folders added", modFilesCount);
})
.catch(error => {
obs.error(error);
@@ -17,9 +17,10 @@ type Props = {
uninstallMod?: (mods: Mod) => void;
uninstallAllMods?: () => void;
unselectAllMods?: () => void;
openModsDropZone?: () => void;
};
export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreInfoMod, onWantInfos, disabled, uninstallMod, uninstallAllMods, unselectAllMods }: Props) {
export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreInfoMod, onWantInfos, disabled, uninstallMod, uninstallAllMods, unselectAllMods, openModsDropZone }: Props) {
const [filter, setFilter] = useState("");
const [filterEnabled, setFilterEnabled] = useState(false);
@@ -68,6 +69,7 @@ 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 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.import-mods", icon: "download", onClick: () => openModsDropZone?.() },
{ 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?.() }
]} />
@@ -45,6 +45,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
const isOnline = useObservable(() => os.isOnline$);
const [installing, setInstalling] = useState(false);
const [uninstalling, setUninstalling] = useState(false);
const [modsDropZoneOpen, setModsDropZoneOpen] = useState(false);
const downloadRef = useRef(null);
const [downloadWith, setDownloadWidth] = useState(0);
@@ -170,6 +171,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
};
const importMods = (files: string[]): void => {
setModsDropZoneOpen(false);
modsManager.importMods(files, version);
};
@@ -287,6 +289,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
uninstallMod={uninstallMod}
uninstallAllMods={uninstallAllMods}
unselectAllMods={unselectAllMods}
openModsDropZone={() => setModsDropZoneOpen(true)}
/>
</div>
<div className="shrink-0 flex items-center justify-between px-3 py-2">
@@ -310,10 +313,15 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
onFiles={importMods}
text={t("pages.version-viewer.mods.drop-zone.text")}
subtext={t("pages.version-viewer.mods.drop-zone.subtext")}
open={modsDropZoneOpen}
onClose={modsDropZoneOpen ? () => setModsDropZoneOpen(false) : undefined}
filters={[
{ name: ".zip", extensions: ["zip"] },
{ name: ".dll", extensions: ["dll"] }
]}
dialogOptions={{ dialog: {
properties: ["openFile", "multiSelections"],
}}}
>
<div className="relative flex flex-col grow-0 bg-light-main-color-2 dark:bg-main-color-2 size-full rounded-md shadow-black shadow-center overflow-hidden">{renderContent()}</div>
</Dropzone>