~ Improved layout of browser option dialog

+ Implemented display of current settings value
+ Implemented selecting and setting new browser option path value

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.

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="bg-light" style="display:flex; flex-direction: column; height:100%; justify-content: center; margin: 0;">
-      <div class="card bg-light" style="width:100%;margin:0 auto">
+      <div class="card bg-light" style="height:100%;width:100%;">
-        <div class="card-body">
+        <div class="card-body row" style="height:100%;width:100%;">
-          <h4 class="card-title">Hello</h4>
+          <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 tabs from "../components/tabs";
-import BBCodeParser from "../chat/bbcode";
 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;

electron/common.ts

@@ -32,7 +32,7 @@ export class GeneralSettings {
     risingSystemLogLevel: log.LevelOption = 'info';
     risingDisableWindowsHighContrast =  false;
     browserPath = '';
-    browserArgs = '';
+    browserArgs = '%s';
 }
 
 // //tslint:disable

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();
 }