Added basic config gui

oliverschwendener · Sep 21, 2018 · 3b626bb · 3b626bb
1 parent 342cb34
commit 3b626bb
Show file tree

Hide file tree

Showing 14 changed files with 168 additions and 28 deletions.
diff --git a/main.html b/main.html
@@ -19,16 +19,16 @@
             <div class="user-input-container" :style="userInputContainerStyle()">
                 <input id="user-input" class="user-input" :style="userInputStyle()" type="text" v-model="userInput" :autofocus="{ 'autofocus' : autoFocus }"
                     v-on:keyDown="handleKeyPress">
-                <div class="search-icon-container" :style="searchResultWidth()" v-html="searchIcon"></div>
+                <div class="search-icon-container" :style="searchResultWidth()" v-html="searchIcon"></div>                
             </div>
 
             <div class="output-container" :style="outputContainerHeight()">
 
-                <div class="command-line-output-container" :class="{ 'hidden' : commandLineOutput.length === 0 }">
+                <div class="command-line-output-container" v-if="commandLineOutput.length > 0">
                     <pre v-for="line in commandLineOutput">{{ line }}</pre>
                 </div>
 
-                <div class="search-results-container" :class="{ 'hidden' : searchResults.length === 0}">
+                <div class="search-results-container" v-if="searchResults.length > 0">
                     <div :id="searchResult.id" class="search-result" :style="searchResultHeight()" :class="{ 'active' : searchResult.active }"
                         v-for="(searchResult, searchIndex) in searchResults" v-on:click="handleClick" v-on:mouseenter="handleMouseEnter(searchIndex)">
                         <div class="search-result-icon">
@@ -45,6 +45,16 @@
                     </div>
                 </div>
 
+                <div class="settings-container" v-if="settingsVisible">
+                    <h1>Settings</h1>
+                    <div class="setting-group">
+                        <div class="setting-title">Config file path</div>
+                        <div class="setting">
+                            <input type="text" v-model="appConfig.userSettingsFilePath">
+                        </div>
+                    </div>
+                </div>
+
             </div>
 
         </div>

diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@types/electron-is-dev": "^0.3.0",
+    "@types/electron-store": "^1.3.0",
     "@types/jest": "^23.3.1",
     "@types/mathjs": "^4.4.1",
     "coveralls": "^3.0.2",
@@ -66,6 +67,7 @@
   },
   "dependencies": {
     "electron-is-dev": "^0.3.0",
+    "electron-store": "^2.0.0",
     "electron-updater": "^3.1.2",
     "fuse.js": "^3.2.1",
     "mathjs": "^5.1.1",

diff --git a/src/ts/app-config/app-config-repository.ts b/src/ts/app-config/app-config-repository.ts
@@ -0,0 +1,6 @@
+import { AppConfig } from "./app-config";
+
+export interface AppConfigRepository {
+    getAppConfig(): AppConfig;
+    setAppConfig(newAppConfig: AppConfig): void;
+}
diff --git a/src/ts/app-config/app-config.ts b/src/ts/app-config/app-config.ts
@@ -0,0 +1,3 @@
+export interface AppConfig {
+    userSettingsFilePath: string;
+}
diff --git a/src/ts/app-config/default-app-config.ts b/src/ts/app-config/default-app-config.ts
@@ -0,0 +1,7 @@
+import { AppConfig } from "./app-config";
+import { join } from "path";
+import { homedir } from "os";
+
+export const defaultAppConfig: AppConfig = {
+    userSettingsFilePath: join(homedir(), "ueli.config.json"),
+};
diff --git a/src/ts/app-config/electorn-store-app-config-repository.ts b/src/ts/app-config/electorn-store-app-config-repository.ts
@@ -0,0 +1,28 @@
+import { AppConfigRepository } from "./app-config-repository";
+import Store = require("electron-store");
+import { AppConfig } from "./app-config";
+import { join } from "path";
+import { homedir } from "os";
+
+export class ElectronStoreAppConfigRepository implements AppConfigRepository {
+    private store: Store;
+    private configKey = "app-config";
+    private defaultAppConfig: AppConfig = {
+        userSettingsFilePath: join(homedir(), "ueli.config.json"),
+    };
+
+    constructor() {
+        this.store = new Store();
+    }
+
+    public getAppConfig(): AppConfig {
+        const appConfig = this.store.get(this.configKey);
+        return appConfig !== undefined
+            ? appConfig
+            : this.defaultAppConfig;
+    }
+
+    public setAppConfig(newAppConfig: AppConfig): void {
+        this.store.set(this.configKey, newAppConfig);
+    }
+}
diff --git a/src/ts/config-file-repository.ts b/src/ts/config-file-repository.ts
@@ -1,5 +1,5 @@
-import * as fs from "fs";
 import { ConfigOptions } from "./config-options";
+import { readFileSync, existsSync, writeFileSync } from "fs";
 
 export class ConfigFileRepository {
     private defaultConfig: ConfigOptions;
@@ -9,14 +9,14 @@ export class ConfigFileRepository {
         this.defaultConfig = defaultConfig;
         this.configFilePath = configFilePath;
 
-        if (!fs.existsSync(this.configFilePath)) {
+        if (!existsSync(this.configFilePath)) {
             this.saveConfig(this.defaultConfig);
         }
     }
 
     public getConfig(): ConfigOptions {
         try {
-            const fileContent = fs.readFileSync(this.configFilePath, "utf-8");
+            const fileContent = readFileSync(this.configFilePath, "utf-8");
             const parsed = JSON.parse(fileContent) as ConfigOptions;
 
             const mergedConfig = Object.assign(this.defaultConfig, parsed); // Apply defaults if some settings are not set
@@ -28,6 +28,6 @@ export class ConfigFileRepository {
     }
 
     public saveConfig(config: ConfigOptions): void {
-        fs.writeFileSync(this.configFilePath, JSON.stringify(config, null, 2), "utf-8");
+        writeFileSync(this.configFilePath, JSON.stringify(config, null, 2), "utf-8");
     }
 }
diff --git a/src/ts/helpers/ueli-helpers.ts b/src/ts/helpers/ueli-helpers.ts
@@ -4,7 +4,6 @@ import { homedir } from "os";
 export class UeliHelpers {
     public static readonly productName = "ueli";
     public static readonly ueliCommandPrefix = "ueli:";
-    public static readonly configFilePath = join(homedir(), "ueli.config.json");
     public static readonly countFilePath = join(homedir(), "ueli.count.json");
     public static readonly shortcutPrefix = "!";
     public static readonly searchResultDescriptionSeparator = "▸";

diff --git a/src/ts/ipc-channels.ts b/src/ts/ipc-channels.ts
@@ -21,4 +21,6 @@ export class IpcChannels {
     public static readonly resetCommandlineOutput = "reset-commandline-output";
     public static readonly resetUserInput = "reset-user-input";
     public static readonly showHelp = "show-help";
+    public static readonly showSettings = "show-settings";
+    public static readonly hideSettings = "hide-settings";
 }
diff --git a/src/ts/main.ts b/src/ts/main.ts
@@ -1,7 +1,7 @@
 import { app, BrowserWindow, globalShortcut, ipcMain, Menu, MenuItem, Tray, screen } from "electron";
 import { autoUpdater } from "electron-updater";
-import * as fs from "fs";
-import * as path from "path";
+import { watchFile, unwatchFile } from "fs";
+import { join } from "path";
 import { FilePathExecutionArgumentValidator } from "./execution-argument-validators/file-path-execution-argument-validator";
 import { ExecutionService } from "./execution-service";
 import { FilePathExecutor } from "./executors/file-path-executor";
@@ -22,14 +22,15 @@ import { CountFileRepository } from "./count-file-repository";
 import { ProductionIpcEmitter } from "./production-ipc-emitter";
 import { AutoCompletionService } from "./auto-completion/autocompletion-service";
 import { FilePathAutoCompletionValidator } from "./auto-completion/file-path-autocompletion-validator";
+import { ElectronStoreAppConfigRepository } from "./app-config/electorn-store-app-config-repository";
 
 let mainWindow: BrowserWindow;
 let trayIcon: Tray;
-const delayWhenHidingCommandlineOutputInMs = 25;
 
+const delayWhenHidingCommandlineOutputInMs = 25;
 const filePathExecutor = new FilePathExecutor();
-
-let config = new ConfigFileRepository(defaultConfig, UeliHelpers.configFilePath).getConfig();
+const appConfigRepository = new ElectronStoreAppConfigRepository();
+let config = new ConfigFileRepository(defaultConfig, appConfigRepository.getAppConfig().userSettingsFilePath).getConfig();
 let inputValidationService = new InputValidationService(config, new InputValidatorSearcherCombinationManager(config).getCombinations());
 const ipcEmitter = new ProductionIpcEmitter();
 let executionService = new ExecutionService(
@@ -90,7 +91,7 @@ function createTrayIcon(): void {
         trayIcon.destroy();
     }
 
-    trayIcon = new Tray(Injector.getTrayIconPath(platform(), path.join(__dirname, "../")));
+    trayIcon = new Tray(Injector.getTrayIconPath(platform(), join(__dirname, "../")));
     trayIcon.setToolTip(UeliHelpers.productName);
     trayIcon.setContextMenu(Menu.buildFromTemplate([
         { click: showWindow, label: "Show" },
@@ -198,7 +199,7 @@ function hideMainWindow(): void {
 }
 
 function reloadApp(): void {
-    config = new ConfigFileRepository(defaultConfig, UeliHelpers.configFilePath).getConfig();
+    config = new ConfigFileRepository(defaultConfig, appConfigRepository.getAppConfig().userSettingsFilePath).getConfig();
     inputValidationService = new InputValidationService(config, new InputValidatorSearcherCombinationManager(config).getCombinations());
     executionService = new ExecutionService(
         new ExecutionArgumentValidatorExecutorCombinationManager(config).getCombinations(),
@@ -231,11 +232,11 @@ function resetWindowToDefaultSizeAndPosition(): void {
 }
 
 function watchConfigFile(): void {
-    fs.watchFile(UeliHelpers.configFilePath, reloadApp);
+    watchFile(appConfigRepository.getAppConfig().userSettingsFilePath, reloadApp);
 }
 
 function unwatchConfigFile(): void {
-    fs.unwatchFile(UeliHelpers.configFilePath);
+    unwatchFile(appConfigRepository.getAppConfig().userSettingsFilePath);
 }
 
 function quitApp(): void {
@@ -295,3 +296,11 @@ ipcMain.on(IpcChannels.showHelp, (): void => {
 ipcMain.on(IpcChannels.ueliCheckForUpdates, (): void => {
     autoUpdater.checkForUpdates();
 });
+
+ipcMain.on(IpcChannels.showSettings, (): void => {
+    updateWindowSize(config.maxSearchResultCount);
+});
+
+ipcMain.on(IpcChannels.hideSettings, (): void => {
+    updateWindowSize(0);
+});
diff --git a/src/ts/renderer.ts b/src/ts/renderer.ts
@@ -7,21 +7,26 @@ import { UeliHelpers } from "./helpers/ueli-helpers";
 import { defaultConfig } from "./default-config";
 import { UserInputHistoryManager } from "./user-input-history-manager";
 import { Injector } from "./injector";
+import { ElectronStoreAppConfigRepository } from "./app-config/electorn-store-app-config-repository";
 import Vue from "vue";
 
-const config = new ConfigFileRepository(defaultConfig, UeliHelpers.configFilePath).getConfig();
+const appConfigRepository = new ElectronStoreAppConfigRepository();
+const config = new ConfigFileRepository(defaultConfig, appConfigRepository.getAppConfig().userSettingsFilePath).getConfig();
+const appConfig = new ElectronStoreAppConfigRepository().getAppConfig();
 const userInputHistoryManager = new UserInputHistoryManager();
 const iconSet = Injector.getIconSet(platform());
 
 document.addEventListener("keyup", handleGlobalKeyPress);
 
 const vue = new Vue({
     data: {
+        appConfig,
         autoFocus: true,
         colorTheme: `./styles/${config.colorTheme}.css`,
         commandLineOutput: [] as string[],
         searchIcon: iconSet.searchIcon,
         searchResults: [] as SearchResultItemViewModel[],
+        settingsVisible: false,
         userInput: "",
         userStylesheet: `file:///${config.userStylesheet}`,
         userStylesheetIsAvailable: config.userStylesheet !== undefined && config.userStylesheet.length > 0,
@@ -58,13 +63,18 @@ const vue = new Vue({
                 ipcRenderer.send(IpcChannels.exitCommandLineTool);
             } else if (event.key === "F1") {
                 ipcRenderer.send(IpcChannels.showHelp);
+            } else if (event.ctrlKey && event.key === "i") {
+                toggleSettings();
             }
         },
         handleMouseEnter: (index: number): void => {
             if (config.allowMouseInteraction) {
                 changeActiveItemByIndex(index);
             }
         },
+        handleSettingsIconClick: (): void => {
+            toggleSettings();
+        },
         outputContainerHeight: (): string => {
             return `height: calc(100vh - ${config.userInputHeight}px);`;
         },
@@ -93,7 +103,7 @@ const vue = new Vue({
     watch: {
         userInput: (val: string): void => {
             vue.commandLineOutput = [] as string[];
-            ipcRenderer.send(IpcChannels.getSearch, val);
+            handleSearch(val);
         },
     },
 });
@@ -107,12 +117,23 @@ ipcRenderer.on(IpcChannels.autoCompleteResponse, (event: Electron.Event, arg: st
 });
 
 ipcRenderer.on(IpcChannels.commandLineOutput, (event: Electron.Event, arg: string): void => {
-    vue.commandLineOutput.push(arg);
+    handleCommandLineOutput(arg);
 });
 
 ipcRenderer.on(IpcChannels.resetCommandlineOutput, resetCommandLineOutput);
 ipcRenderer.on(IpcChannels.resetUserInput, resetUserInput);
 
+function handleSearch(searchTerm: string): void {
+    vue.settingsVisible = false;
+    ipcRenderer.send(IpcChannels.getSearch, searchTerm);
+}
+
+function handleCommandLineOutput(data: string): void {
+    vue.searchResults = [];
+    vue.settingsVisible = false;
+    vue.commandLineOutput.push(data);
+}
+
 function handleInputHistoryBrowsing(direction: string): void {
     const newUserInput = direction === "prev"
         ? userInputHistoryManager.getPrevious()
@@ -244,3 +265,22 @@ function focusOnInput(): void {
 function resetCommandLineOutput(): void {
     vue.commandLineOutput = [];
 }
+
+function toggleSettings(): void {
+    if (vue.settingsVisible) {
+        hideSettings();
+    } else {
+        showSettings();
+    }
+    vue.settingsVisible = !vue.settingsVisible;
+}
+
+function hideSettings(): void {
+    ipcRenderer.send(IpcChannels.hideSettings);
+}
+
+function showSettings(): void {
+    vue.searchResults = [];
+    resetCommandLineOutput();
+    ipcRenderer.send(IpcChannels.showSettings);
+}
diff --git a/src/ts/search-plugins/ueli-commands-plugin.ts b/src/ts/search-plugins/ueli-commands-plugin.ts
@@ -1,7 +1,6 @@
 import { SearchResultItem } from "../search-result-item";
 import { SearchPlugin } from "./search-plugin";
 import { IpcChannels } from "../ipc-channels";
-import { UeliHelpers } from "../helpers/ueli-helpers";
 import { ipcMain } from "electron";
 
 const ueliCommands: UeliCommand[] = [
@@ -13,10 +12,6 @@ const ueliCommands: UeliCommand[] = [
         executionArgument: IpcChannels.ueliExit,
         name: "Exit ueli",
     } as UeliCommand,
-    {
-        executionArgument: UeliHelpers.configFilePath,
-        name: "Edit configuration file",
-    } as UeliCommand,
     {
         executionArgument: IpcChannels.ueliCheckForUpdates,
         name: "Check for updates",

diff --git a/styles/app.css b/styles/app.css
@@ -12,6 +12,7 @@ body {
     padding: 0;
     background-color: var(--background-color);
     color: var(--text-color);
+    font-family: var(--font-family);
 }
 
 div.container {
@@ -72,7 +73,6 @@ div.search-results-container {
 }   
 
 div.search-result {
-    font-family: var(--font-family);
     display: flex;
     flex-direction: row;
     cursor: pointer;
@@ -120,7 +120,6 @@ span {
 }
 
 span.search-result-name.active {
-    font-family: var(--font-family);
     font-weight: 600;
 }
 
@@ -134,6 +133,10 @@ span.search-result-description.active {
     display: block;
 }
 
+div.settings-container {
+    padding: 0 var(--side-padding);
+}
+
 ::-webkit-scrollbar {
     width: var(--scrollbar-size);
     height: var(--scrollbar-size);