From 0015494e190b65886a9158868c143c5515d79ad8 Mon Sep 17 00:00:00 2001
From: Greyhoof <132987288+greyhoof@users.noreply.github.com>
Date: Tue, 5 Sep 2023 20:44:35 +0200
Subject: [PATCH] ~ Improved layout of browser option dialog + Implemented
 display of current settings value + Implemented selecting and setting new
 browser option path value

---
 chat/localize.ts           |  3 ++
 electron/BrowserOption.vue | 81 ++++++++++++++++++++++++++++++--------
 electron/common.ts         |  2 +-
 electron/main.ts           | 25 ++++++++++++
 4 files changed, 93 insertions(+), 18 deletions(-)

diff --git a/chat/localize.ts b/chat/localize.ts
index c7a1e9b..baa905e 100644
--- a/chat/localize.ts
+++ b/chat/localize.ts
@@ -190,10 +190,13 @@ Current log location: {1}`,
     'settings.hwAcceleration': 'Enable hardware acceleration (requires restart)',
     'settings.bbCodeBar': 'Show BBCode formatting bar',
     'settings.browserOption': 'Set command for opening clicked links',
+    'settings.browserOptionHeader': 'Browser Settings',
     'settings.browserOptionTitle': 'Browser Path',
     'settings.browserOptionPath': 'Path to browser executable',
     'settings.browserOptionArguments': 'Arguments to pass to executable',
     'settings.browserOptionArgumentsHelp': 'Arguments are separated by spaces. Use %s to insert the URL.',
+    'settings.browserOptionBrowse': 'Browse',
+    'settings.browserOptionSave': 'Save',
     'fixLogs.action': 'Fix corrupted logs',
     'fixLogs.text': `There are a few reason log files can become corrupted - log files from old versions with bugs that have since been fixed or incomplete file operations caused by computer crashes are the most common.
 If one of your log files is corrupted, you may get an "Unknown Type" error when you log in or when you open a specific tab. You may also experience other issues.
diff --git a/electron/BrowserOption.vue b/electron/BrowserOption.vue
index c4d4a7f..a0e9a5e 100644
--- a/electron/BrowserOption.vue
+++ b/electron/BrowserOption.vue
@@ -1,22 +1,52 @@
 <template>
-  <div style="display: flex;flex-direction:column;height:100%" :class="getThemeClass()" @auxclick.prevent>
+  <div class="card-full" style="display:flex;flex-direction:column;height:100%;" :class="getThemeClass()" @auxclick.prevent>
     <div v-html="styling"></div>
     <div style="display:flex;align-items:stretch;border-bottom-width:1px" class="border-bottom" id="window-browser-settings">
-      <h4 style="padding:2px 0">{{l('settings.browserOptionTitle')}}</h4>
+      <h4 style="padding:2px 0">{{l('settings.browserOptionHeader')}}</h4>
       <div style="flex:1;display:flex;justify-content:flex-end;-webkit-app-region:drag" class="btn-group"
            id="windowButtons">
         <i class="far fa-window-minimize btn btn-light" @click.stop="minimize()"></i>
-        <i class="far btn btn-light" :class="'fa-window-' + (isMaximized ? 'restore' : 'maximize')" @click="maximize()"></i>
+<!--        <i class="far btn btn-light" :class="'fa-window-' + (isMaximized ? 'restore' : 'maximize')" @click="maximize()"></i>-->
         <span class="btn btn-light" @click.stop="close()">
                     <i class="fa fa-times fa-lg"></i>
                 </span>
       </div>
     </div>
-    <div style="display:flex; flex-direction: column; height:100%; justify-content: center">
-      <div class="card bg-light" style="width:100%;margin:0 auto">
-        <div class="card-body">
-          <h4 class="card-title">Hello</h4>
-
+    <div class="bg-light" style="display:flex; flex-direction: column; height:100%; justify-content: center; margin: 0;">
+      <div class="card bg-light" style="height:100%;width:100%;">
+        <div class="card-body row" style="height:100%;width:100%;">
+          <h4 class="card-title">{{l('settings.browserOptionTitle')}}</h4>
+          <div class="form-group col-12">
+            <label class="control-label" for="browserPath">{{l('settings.browserOptionPath')}}</label>
+            <div class="row">
+              <div class="col-10">
+                <input class="form-control" id="browserPath" v-model="this.browserPath"/>
+              </div>
+              <div class="col-2">
+                <button class="btn btn-primary" @click.prevent.stop="browseForPath()">{{l('settings.browserOptionBrowse')}}</button>
+              </div>
+            </div>
+          </div>
+          <div class="form-group col-12">
+            <label class="control-label" for="browserArgs">{{l('settings.browserOptionArguments')}}</label>
+            <div class="row">
+              <div class="col-12">
+                <input class="form-control" id="browserArgs" v-model="this.browserArgs"/>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12">
+                <small class="form-text text-muted">{{l('settings.browserOptionArgumentsHelp')}}</small>
+              </div>
+            </div>
+          </div>
+          <div class="form-group col-12">
+            <div class="row">
+              <div class="col-2">
+                <button class="btn btn-primary" @click="">{{l('settings.browserOptionSave')}}</button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -24,6 +54,7 @@
 </template>
 
 <script lang="ts">
+import * as electron from 'electron';
 import {Component, Hook} from '@f-list/vue-ts';
 import * as remote from '@electron/remote';
 import Vue from 'vue';
@@ -32,12 +63,13 @@ import {GeneralSettings} from './common';
 import fs from "fs";
 import path from "path";
 import Modal from "../components/Modal.vue";
-import tabs from "../components/tabs";
 import modal from "../components/Modal.vue";
-import core from "../chat/core";
-import BBCodeParser from "../chat/bbcode";
+import tabs from "../components/tabs";
 import logs from "../chat/Logs.vue";
 import chat from "../chat/ChatView.vue";
+import {ipcRenderer} from "electron";
+import {EIconStore} from "../learn/eicon/store";
+import log from "electron-log";
 
 const browserWindow = remote.getCurrentWindow();
 @Component({
@@ -53,7 +85,6 @@ export default class BrowserOption extends Vue {
   browserArgs = '';
 
   get styling(): string {
-    console.log("HELLO");
     try {
       return `<style>${fs.readFileSync(path.join(__dirname, `themes/${this.settings.theme}.css`), 'utf8').toString()}</style>`;
     } catch (e) {
@@ -65,6 +96,12 @@ export default class BrowserOption extends Vue {
     }
   }
 
+  @Hook('mounted')
+  async mounted(): Promise<void> {
+    this.browserPath = this.settings.browserPath;
+    this.browserArgs = this.settings.browserArgs;
+  }
+
   minimize(): void {
     browserWindow.minimize();
   }
@@ -102,19 +139,29 @@ export default class BrowserOption extends Vue {
     }
   }
 
-  async load(): Promise<void> {
-    this.browserPath = this.settings.browserPath;
-    this.browserArgs = this.settings.browserArgs;
-  }
-
   async submit(): Promise<void> {
     this.settings.browserPath = this.browserPath;
     this.settings.browserArgs = this.browserArgs;
   }
+
+  browseForPath(): void {
+    ipcRenderer.invoke('browser-option-browse').then((result) => {
+      this.browserPath = result;
+    });
+  }
 }
 </script>
 
 <style lang="scss">
+  .card-full {
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+  }
+
   #windowButtons .btn {
     border-top: 0;
     font-size: 14px;
diff --git a/electron/common.ts b/electron/common.ts
index 3c09c84..9906507 100644
--- a/electron/common.ts
+++ b/electron/common.ts
@@ -32,7 +32,7 @@ export class GeneralSettings {
     risingSystemLogLevel: log.LevelOption = 'info';
     risingDisableWindowsHighContrast =  false;
     browserPath = '';
-    browserArgs = '';
+    browserArgs = '%s';
 }
 
 // //tslint:disable
diff --git a/electron/main.ts b/electron/main.ts
index 4dea7d1..944317b 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -53,6 +53,7 @@ import DownloadItem = electron.DownloadItem;
 import { AdCoordinatorHost } from '../chat/ads/ad-coordinator-host';
 import { IpcMainEvent } from 'electron';
 import { BlockerIntegration } from './blocker/blocker';
+import core from "../chat/core";
 
 //tslint:disable-next-line:no-require-imports
 const pck = require('./package.json');
@@ -290,6 +291,13 @@ function openBrowserSettings(): electron.BrowserWindow | undefined {
         show: false,
         icon: process.platform === 'win32' ? winIcon : pngIcon,
         frame: false,
+        width: 500,
+        height: 350,
+        minWidth: 500,
+        minHeight: 368,
+        maxWidth: 500,
+        maxHeight: 368,
+        maximizable: false,
         webPreferences: {
             webviewTag: true, nodeIntegration: true, nodeIntegrationInWorker: true, spellcheck: true,
             enableRemoteModule: true, contextIsolation: false, partition: 'persist:fchat'
@@ -696,6 +704,23 @@ function onReady(): void {
         for(const w of electron.webContents.getAllWebContents()) w.send('update-zoom', zl);
     });
 
+    electron.ipcMain.handle('browser-option-browse', async () => {
+        log.debug('settings.browserOption.browse');
+        console.log('settings.browserOption.browse', JSON.stringify(settings));
+        const dir = electron.dialog.showOpenDialogSync(
+            {
+                defaultPath: settings.browserPath,
+                properties: ['openFile'],
+                filters: [{ name: 'Executables', extensions: ['exe'] }]
+            });
+        if(dir !== undefined) {
+            settings.browserPath = dir[0];
+            setGeneralSettings(settings);
+        }
+
+        return settings.browserPath;
+    });
+
     createWindow();
 }