feat: add launch MO2 button

src/assets/scss/layout.scss

@@ -24,3 +24,11 @@
 .l-end {
   justify-content: flex-end;
 }
+
+.l-space-around {
+  justify-content: space-around;
+}
+
+.l-space-between {
+  justify-content: space-between;
+}

src/components/FileSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Input :label="label" :oninput="onFilePathChange" :value="filePath" />
-    <div class="l-row">
+    <div class="l-row c-file-input__actions">
       <Button
         type="primary"
         @click="openFileSelectDialog"
@@ -61,6 +61,10 @@ export default class FileSelect extends Vue {
 <style scoped lang="scss">
 @import "~@/assets/scss";
 
+.c-file-input__actions {
+  margin-top: $size-spacing;
+}
+
 .c-file-input__browse {
   margin-right: $size-spacing;
 }

src/components/NavBar.vue

@@ -124,6 +124,7 @@ nav {
   #nav__launch-button {
     align-self: center;
     margin-top: 30px;
+    margin-bottom: $size-spacing;
   }
 
   #nav__launcher-info {

src/components/PageContent.vue

@@ -7,6 +7,7 @@
       class="c-page-content__body"
       v-bind:class="{
         'c-page-content__body--small-height': height === 'small',
+        'c-page-content__body--auto-height': height === 'auto',
         'c-page-content__body--small-width': width === 'small',
         'c-page-content__body--large-spacing': width !== 'small'
       }"
@@ -22,7 +23,7 @@ import { Prop } from "vue-property-decorator";
 
 export default class PageContent extends Vue {
   @Prop({ required: false }) title!: string;
-  @Prop({ default: "large" }) height!: "small" | "large";
+  @Prop({ default: "auto" }) height!: "small" | "large" | "auto";
   @Prop({ default: "large" }) width!: "small" | "large";
 }
 </script>
@@ -61,6 +62,10 @@ export default class PageContent extends Vue {
   padding: $size-spacing--x-large;
 }
 
+.c-page-content__body--auto-height {
+  height: auto;
+}
+
 .c-page-content__body--small-height {
   height: 120px;
 }

src/components/controls/Button.vue

@@ -32,8 +32,6 @@ export default class Button extends Vue {
   justify-content: center;
   padding: 0;
   user-select: none;
-  margin-top: $size-spacing;
-  margin-bottom: $size-spacing;
 
   // TODO these shouldn't have to be set specifically here
   // but they were originally only set on the <p> tag

src/enums/IPCEvents.ts

@@ -8,5 +8,9 @@ export const enum IPCEvents {
   CLOSE = "close",
   MINIMIZE = "MINIMIZE",
 
-  SHOW_OPEN_DIALOG = "SHOW_OPEN_DIALOG"
+  SHOW_OPEN_DIALOG = "SHOW_OPEN_DIALOG",
+
+  LAUNCH_MO2 = "LAUNCH_MO2",
+
+  ERROR = "ERROR"
 }

src/main/ipcHandler.ts

@@ -36,14 +36,15 @@ ipcMain.on("open-modlist-profile", async (_event, { path }) => {
 });
 
 // Launch MO2. Error ID: B03-05
-ipcMain.on("launch-mo2", () => {
+ipcMain.handle(IPCEvents.LAUNCH_MO2, () => {
   try {
     toLog("Launching MO2");
     const moPath = path.join(
       userPreferences.get(USER_PREFERENCE_KEYS.MOD_DIRECTORY),
-      "\\ModOrganizer.exe"
+      "/ModOrganizer.exe"
     );
-    childProcess.exec('"' + moPath + '"');
+    toLog(`MO2 path: ${moPath}`);
+    childProcess.exec(`"${moPath}"`);
   } catch (err) {
     sendError("B03-05-00", "Error while opening MO2!", err);
   }
@@ -71,3 +72,7 @@ ipcMain.on(IPCEvents.MINIMIZE, () => {
 ipcMain.handle(IPCEvents.SHOW_OPEN_DIALOG, async () => {
   return dialog.showOpenDialog({ properties: ["openDirectory"] });
 });
+
+ipcMain.handle(IPCEvents.ERROR, async (event, message: string) => {
+  await dialog.showMessageBox({ message, title: "Invalid directory" });
+});

src/views/Home.vue

@@ -4,7 +4,7 @@
       <News />
     </PageContent>
 
-    <PageContent title="Patron Highlight" width="small">
+    <PageContent title="Patron Highlight" width="small" height="large">
       <Patrons />
     </PageContent>
   </Page>

src/views/Settings.vue

@@ -1,18 +1,29 @@
 <template>
   <Page>
     <PageContent title="Settings" width="large">
-      <FileSelect
-        :on-file-path-change="onSkyrimDirectoryChange"
-        :initial-file-path="initialSkyrimDirectory"
-        :clear-file-path-prop="clearSkyrimDirectory"
-        label="Skyrim Directory"
-      />
-      <FileSelect
-        :on-file-path-change="onModDirectoryChange"
-        :initial-file-path="initialModDirectory"
-        :clear-file-path-prop="clearModDirectory"
-        label="Ultimate Skyrim Directory"
-      />
+      <div class="c-settings l-column">
+        <div class="c-settings__directories l-row l-space-between">
+          <FileSelect
+            :on-file-path-change="onSkyrimDirectoryChange"
+            :initial-file-path="initialSkyrimDirectory"
+            :clear-file-path-prop="clearSkyrimDirectory"
+            label="Skyrim Directory"
+          />
+          <FileSelect
+            :on-file-path-change="onModDirectoryChange"
+            :initial-file-path="initialModDirectory"
+            :clear-file-path-prop="clearModDirectory"
+            label="Ultimate Skyrim Directory"
+          />
+        </div>
+
+        <div class="l-row c-settings__launchMO">
+          <div class="c-settings__launchMO-label">ModOrganiser 2</div>
+          <Button type="primary" @click="launchMO2">
+            Launch
+          </Button>
+        </div>
+      </div>
     </PageContent>
   </Page>
 </template>
@@ -24,6 +35,8 @@ import PageContent from "@/components/PageContent.vue";
 import { USER_PREFERENCE_KEYS, userPreferences } from "@/main/config";
 import Button from "@/components/controls/Button.vue";
 import FileSelect from "@/components/FileSelect.vue";
+import { ipcRenderer } from "electron";
+import { IPCEvents } from "@/enums/IPCEvents";
 
 @Component({
   components: {
@@ -59,7 +72,47 @@ export default class Settings extends Vue {
   clearModDirectory() {
     userPreferences.delete(USER_PREFERENCE_KEYS.MOD_DIRECTORY);
   }
+
+  launchMO2() {
+    if (
+      userPreferences.has(USER_PREFERENCE_KEYS.MOD_DIRECTORY) &&
+      userPreferences.get(USER_PREFERENCE_KEYS.MOD_DIRECTORY) !== ""
+    ) {
+      ipcRenderer.invoke(IPCEvents.LAUNCH_MO2);
+    } else {
+      ipcRenderer.invoke(
+        IPCEvents.ERROR,
+        "No mod directory specified, please select one on the settings tab."
+      );
+    }
+  }
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+@import "~@/assets/scss";
+
+.c-settings {
+  font-size: $font-size--body;
+  line-height: $line-height__body;
+
+  width: 100%;
+}
+
+.c-settings__directories {
+  border-bottom: 1px solid $colour-background--light;
+  margin-bottom: $size-spacing;
+  padding-bottom: $size-spacing;
+}
+
+.c-settings__launchMO {
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  margin-top: $size-spacing;
+}
+
+.c-settings__launchMO-label {
+  margin-right: $size-spacing;
+}
+</style>