New thunderstore UI

ebkr · Jul 30, 2024 · b846867 · b846867
1 parent ca35974
commit b846867
Show file tree

Hide file tree

Showing 30 changed files with 969 additions and 326 deletions.
diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+14.20.1
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
         "build-osx": "quasar build --mode electron -T mac",
         "publish": "quasar build --mode electron --publish always",
         "publish-win": "quasar build --mode electron -T win32 --publish always",
-        "publish-linux":  "quasar build --mode electron -T linux --publish always",
+        "publish-linux": "quasar build --mode electron -T linux --publish always",
         "test:unit": "jest --updateSnapshot",
         "test:unit:ci": "jest --ci",
         "test:unit:coverage": "jest --coverage",
@@ -72,8 +72,10 @@
         "@types/adm-zip": "^0.4.34",
         "@types/async-lock": "^1.1.2",
         "@types/chai": "^4.2.11",
+        "@types/electron": "^1.6.10",
         "@types/fs-extra": "^8.0.1",
         "@types/lodash.debounce": "^4.0.7",
+        "@types/mocha": "^10.0.7",
         "@types/node": "^12.12.12",
         "@types/quill": "^2.0.3",
         "@types/sinon": "^10.0.2",
@@ -88,7 +90,7 @@
         "babel-jest": "^27.0.2",
         "chai": "^4.2.0",
         "devtron": "^1.4.0",
-        "electron": "^11.1.1",
+        "electron": "11.5.0",
         "electron-builder": "22.10.5",
         "electron-debug": "^3.0.1",
         "electron-devtools-installer": "^3.0.0",
@@ -126,5 +128,6 @@
         "node": ">= 10.18.1",
         "npm": ">= 6.13.4",
         "yarn": ">= 1.21.1"
-    }
+    },
+    "packageManager": "yarn@1.22.22"
 }
diff --git a/src-electron/main-process/electron-main.js b/src-electron/main-process/electron-main.js
@@ -39,6 +39,8 @@ function createWindow() {
     mainWindow = new BrowserWindow({
         width: windowSize.width,
         height: windowSize.height,
+        minWidth: 1200,
+        minHeight: 700,
         useContentSize: true,
         webPreferences: {
             nodeIntegration: true,
@@ -47,7 +49,8 @@ function createWindow() {
             contextIsolation: false,
         },
         icon: path.join(__dirname, 'icon.png'),
-        autoHideMenuBar: process.env.PROD
+        autoHideMenuBar: process.env.PROD,
+        frame: false
     });
 
     if (windowSize.maximized) {

diff --git a/src-electron/main-process/ipcListeners.js b/src-electron/main-process/ipcListeners.js
@@ -34,6 +34,19 @@ ipcMain.on('get-appData-directory', ()=>{
     browserWindow.webContents.send('receive-appData-directory', app.getPath('appData'));
 });
 
+ipcMain.on('window-minimize', () => {
+    browserWindow.minimize();
+})
+ipcMain.on('window-maximize', () => {
+    if(browserWindow.isMaximized())
+        browserWindow.unmaximize();
+    else
+        browserWindow.maximize();
+})
+ipcMain.on('window-close', () => {
+    browserWindow.close();
+})
+
 ipcMain.on('get-is-portable', ()=>{
     let isPortable = false;
     switch(process.platform){
@@ -68,4 +81,3 @@ ipcMain.on('show-open-dialog', (arg, fileOpts) => {
     browserWindow.webContents.send('receive-open-dialog', r);
   });
 });
-
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,30 @@
 <template>
     <div>
+        <div class="titlebar">
+            <div class="titlebar_start">
+                <p class="titlebar_title">{{ appName }}</p>
+                <p class="titlebar_version">{{ appVersion }}</p>
+            </div>
+            <div class="titlebar_buttons">
+                <div class="btn" @click="() => ipcRenderer.send('window-minimize')">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.47 8.47">
+                        <path
+                            d="M 0.71464503,4.235 H 7.7550979" stroke="currentColor" fill="currentColor"  stroke-linecap="round" stroke-width="1.59"/>
+                    </svg>
+                </div>
+                <div class="btn" @click="() => ipcRenderer.send('window-maximize')">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.47 8.47">
+                        <path
+                            d="M 0.70215499,0.70215499 H 7.767847 V 7.7678511 H 0.70215499 Z" stroke="currentColor" fill="none" stroke-linecap="round" stroke-width="1.59" />
+                    </svg>
+                </div>
+                <div class="closebutton btn" @click="() => ipcRenderer.send('window-close')">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.47 8.47">
+                        <path d="m7.67.794-6.88 6.88m0-6.88 6.88 6.88" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-width="1.59" />
+                    </svg>
+                </div>
+            </div>
+        </div>
         <router-view v-if="visible"/>
         <ErrorModal />
     </div>
@@ -53,7 +78,8 @@ import ErrorModal from './components/modals/ErrorModal.vue';
     }
 })
 export default class App extends mixins(UtilityMixin) {
-    private visible: boolean = false;
+    public visible: boolean = false;
+    readonly ipcRenderer = ipcRenderer;
 
     async created() {
         // Load settings using the default game before the actual game is selected.
@@ -123,5 +149,13 @@ export default class App extends mixins(UtilityMixin) {
         BindLoaderImpl.bind();
     }
 
+    get appName(): string {
+        return ManagerInformation.APP_NAME;
+    }
+
+    get appVersion(): string {
+        return ManagerInformation.VERSION.toString();
+    }
+
 }
 </script>
diff --git a/src/components/buttons/DonateButton.vue b/src/components/buttons/DonateButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <Link :url="mod.getDonationLink()"
+    <Link :url="mod?.getDonationLink()"
           :target="'external'"
           class="card-footer-item"
           v-tooltip.left="{content: 'Donate to the mod author', distance: 0}">

diff --git a/src/components/config-components/ConfigEditLayout.vue b/src/components/config-components/ConfigEditLayout.vue
@@ -6,13 +6,13 @@
             hero-type="is-info"
         />
         <br/>
-        <div class="sticky-top sticky-top--buttons margin-right">
-            <button class="button is-info margin-right margin-right--half-width" @click="save">Save</button>
+        <div class="sticky-top sticky-top--buttons page-padding">
+            <button class="button is-info margin-right--half-width" @click="save">Save</button>
             <button class="button is-danger" @click="cancel">Cancel</button>
         </div>
-        <div v-if="configFile.getPath().toLowerCase().endsWith('.cfg')" class="margin-right non-selectable">
-            <h3 class='subtitle is-3'>Sections</h3>
-            <ul>
+        <div v-if="configFile.getPath().toLowerCase().endsWith('.cfg')" class="non-selectable">
+            <h3 class='subtitle is-3 page-padding'>Sections</h3>
+            <ul class="page-padding">
                 <li v-for="(value, key) in dumpedConfigVariables" :key="`${key}-${value.toString()}-tab`">
                     <a :href="`#${key}`">{{ key }}</a>
                 </li>
@@ -42,7 +42,7 @@
                                 <input
                                     type="range"
                                     class="slider is-fullwidth is-circle is-small"
-                                    v-on:input="e => setConfigLineValue(line, e.target.value)"
+                                    @input="setConfigLineValue(line, $event.target.value)"
                                     :value="parseFloat(line.value)"
                                     :min="line.getMinRange()"
                                     :max="line.getMaxRange()" />
@@ -83,11 +83,11 @@ import BepInExConfigUtils from '../../utils/BepInExConfigUtils';
     export default class ConfigEditLayout extends Vue {
 
         @Prop({required: true})
-        private configFile!: ConfigFile;
+        readonly configFile!: ConfigFile;
 
-        private fileText: string = "";
+        fileText: string = "";
 
-        private dumpedConfigVariables: { [section: string]: { [variable: string]: ConfigLine } } = {};
+        dumpedConfigVariables: { [section: string]: { [variable: string]: ConfigLine } } = {};
 
         async created() {
             const fs = FsProvider.instance;
@@ -150,15 +150,15 @@ import BepInExConfigUtils from '../../utils/BepInExConfigUtils';
                 .trim();
         }
 
-        toggleEntryExpansion(key: string, variable: string) {
+        toggleEntryExpansion(key: string | number, variable: string | number) {
             const oldLine = this.dumpedConfigVariables[key][variable];
             const newLine = new ConfigLine(oldLine.value, oldLine.comments, oldLine.allowedValues);
             newLine.commentsExpanded = !oldLine.commentsExpanded;
             this.dumpedConfigVariables[key][variable] = newLine;
             this.dumpedConfigVariables = JSON.parse(JSON.stringify(this.dumpedConfigVariables));
         }
 
-        setConfigLineValue(line: ConfigLine, value: number) {
+        setConfigLineValue(line: ConfigLine, value: number | string) {
             line.value = value.toString();
         }
 

diff --git a/src/components/config-components/ConfigSelectionLayout.vue b/src/components/config-components/ConfigSelectionLayout.vue
@@ -12,15 +12,15 @@
                 </p>
             </div>
         </div>
-        <div class='is-shadowless'>
+        <div class='is-shadowless page-padding'>
             <div class='no-padding-left card-header-title'>
 
-                <div class="input-group input-group--flex margin-right">
+                <div class="input-group input-group--flex">
                     <label for="local-search" class="non-selectable">Search</label>
                     <input id="local-search" v-model='filterText' class="input margin-right" type="text" placeholder="Search for config files"/>
                 </div>
 
-                <div class="input-group margin-right">
+                <div class="input-group">
                     <label for="config-sort-order" class="non-selectable">Sort</label>
                     <select id="config-sort-order" class="select select--content-spacing margin-right margin-right--half-width" v-model="sortOrder">
                         <option v-for="(key, index) in getSortOrderOptions()" :key="`${index}-deprecated-position-option`">
@@ -36,7 +36,7 @@
 
             </div>
         </div>
-        <div class="margin-right">
+        <div>
             <div v-for="(file, index) in sortedConfigFiles" :key="`config-file-${file.getName()}`">
                 <ExpandableCard
                     :id="index"
@@ -80,9 +80,9 @@ import ProfileModList from '../../r2mm/mods/ProfileModList';
         private configFiles: ConfigFile[] = [];
         private shownConfigFiles: ConfigFile[] = [];
 
-        private filterText: string = '';
-        private sortOrder: SortConfigFile = SortConfigFile.NAME;
-        private sortDirection: SortDirection = SortDirection.STANDARD;
+        filterText: string = '';
+        sortOrder: SortConfigFile = SortConfigFile.NAME;
+        sortDirection: SortDirection = SortDirection.STANDARD;
 
         @Watch('filterText')
         textChanged() {

diff --git a/src/components/importing/LocalFileImportModal.vue b/src/components/importing/LocalFileImportModal.vue
@@ -82,20 +82,20 @@ import LocalModInstallerProvider from '../../providers/ror2/installing/LocalModI
 export default class LocalFileImportModal extends Vue {
 
     @Prop({default: false, type: Boolean})
-    private visible!: boolean;
+    visible!: boolean;
 
-    private fileToImport: string | null = null;
-    private waitingForSelection: boolean = false;
-    private validationMessage: string | null = null;
+    fileToImport: string | null = null;
+    waitingForSelection: boolean = false;
+    validationMessage: string | null = null;
 
-    private modName = "";
-    private modAuthor = "Unknown";
-    private modDescription = "";
-    private modVersionMajor = 0;
-    private modVersionMinor = 0;
-    private modVersionPatch = 0;
+    modName = "";
+    modAuthor = "Unknown";
+    modDescription = "";
+    modVersionMajor = 0;
+    modVersionMinor = 0;
+    modVersionPatch = 0;
 
-    private resultingManifest = new ManifestV2();
+    resultingManifest = new ManifestV2();
 
     @Watch("visible")
     private visiblityChanged() {
@@ -104,7 +104,7 @@ export default class LocalFileImportModal extends Vue {
         this.validationMessage = null;
     }
 
-    private async selectFile() {
+    async selectFile() {
         this.waitingForSelection = true;
         InteractionProvider.instance.selectFile({
             buttonLabel: "Select file",
@@ -121,7 +121,7 @@ export default class LocalFileImportModal extends Vue {
         })
     }
 
-    private async assumeDefaults() {
+    async assumeDefaults() {
 
         this.modName = "";
         this.modAuthor = "Unknown";
@@ -180,7 +180,7 @@ export default class LocalFileImportModal extends Vue {
         this.modVersionPatch = inferred.modVersionPatch;
     }
 
-    private inferFieldValuesFromFile(file: string): ImportFieldAttributes {
+    inferFieldValuesFromFile(file: string): ImportFieldAttributes {
         const fileSafe = file.split("\\").join("/");
         const fileName = path.basename(fileSafe, path.extname(fileSafe));
         const hyphenSeparated = fileName.split("-");
@@ -227,23 +227,23 @@ export default class LocalFileImportModal extends Vue {
         return data;
     }
 
-    private santizeVersionNumber(vn: string): VersionNumber {
+    santizeVersionNumber(vn: string): VersionNumber {
         const modVersionSplit = vn.split(".");
         const modVersionString = `${this.versionPartToNumber(modVersionSplit[0])}.${this.versionPartToNumber(modVersionSplit[1])}.${this.versionPartToNumber(modVersionSplit[2])}`;
         return new VersionNumber(modVersionString);
     }
 
-    private versionPartToNumber(input: string | undefined) {
+    versionPartToNumber(input: string | undefined) {
         return (input || "0").split(new RegExp("[^0-9]+"))
             .filter(value => value.trim().length > 0)
             .shift() || "0";
     }
 
-    private emitClose() {
+    emitClose() {
         this.$emit("close-modal");
     }
 
-    private importFile() {
+    importFile() {
         if (this.fileToImport === null) {
             return;
         }

diff --git a/src/components/modals/CategorySelectorModal.vue b/src/components/modals/CategorySelectorModal.vue
@@ -36,13 +36,13 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 export default class ChangeSelectorModal extends Vue {
 
     @Prop({required: true})
-    private title!: string;
+    readonly title!: string;
 
     @Prop({required: true})
-    private selectedCategories!: string[]
+    readonly selectedCategories!: string[]
 
     @Prop({required: true})
-    private selectableCategories!: string[]
+    readonly selectableCategories!: string[]
 
     emitSelected(event: Event) {
         this.$emit("selected-category", event);