Added more functionality for config gui

oliverschwendener · Sep 21, 2018 · 375e03e · 375e03e
1 parent 7f1c01b
commit 375e03e
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 25 deletions.
diff --git a/main.html b/main.html
@@ -18,7 +18,7 @@
 
             <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">
+                    v-on:keyDown="handleUserInputKeyPress">
                 <div class="search-icon-container" :style="searchResultWidth()" v-html="searchIcon"></div>                
             </div>
 
@@ -80,6 +80,9 @@ <h1>User Settings</h1>
                             </div>
                             <div class="sub-setting">
                                 <input class="setting-text-input" type="text" v-on:keypress="settingsActionAddApplicationFileExtension" placeholder="Add here">
+                                <svg class="setting-action-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
+                                    <path d="M13.5,3.188C7.805,3.188,3.188,7.805,3.188,13.5S7.805,23.813,13.5,23.813S23.813,19.195,23.813,13.5 S19.195,3.188,13.5,3.188z M19,15h-4v4h-3v-4H8v-3h4V8h3v4h4V15z"></path>
+                                </svg>
                             </div>
                         </div>
                     </div>
@@ -96,6 +99,9 @@ <h1>User Settings</h1>
                             </div>
                             <div class="sub-setting">
                                 <input class="setting-text-input" type="text" v-on:keypress="settingsActionAddApplicationFolder" placeholder="Add here">
+                                <svg class="setting-action-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
+                                    <path d="M13.5,3.188C7.805,3.188,3.188,7.805,3.188,13.5S7.805,23.813,13.5,23.813S23.813,19.195,23.813,13.5 S19.195,3.188,13.5,3.188z M19,15h-4v4h-3v-4H8v-3h4V8h3v4h4V15z"></path>
+                                </svg>
                             </div>
                         </div>
                     </div>
@@ -108,17 +114,19 @@ <h1>User Settings</h1>
                     <div class="setting-group">
                         <div class="setting-title">colorTheme</div>
                         <div class="setting">
-                            <input class="setting-text-input" type="text" v-model="config.colorTheme" v-on:blur="updateUserConfig">
+                            <select class="setting-select" v-model="config.colorTheme" v-on:change="updateUserConfig">
+                                <option v-for="availableColorTheme in availableColorThemes" :value="availableColorTheme">{{ availableColorTheme }}</option>
+                            </select>
                         </div>
                     </div>
                     <div class="setting-group">
                         <div class="setting-title">customCommands</div>
                         <div class="setting">
                             <div class="sub-setting" v-for="customCommand in config.customCommands">
-                                <input class="setting-text-input" type="text" v-model="customCommand.name">
-                                <input class="setting-text-input" type="text" v-model="customCommand.executionArgument">
-                                <input class="setting-text-input" type="text" v-model="customCommand.prefix">
-                                <input class="setting-text-input" type="text" v-model="customCommand.icon">
+                                <input disabled class="setting-text-input" type="text" v-model="customCommand.name">
+                                <input disabled class="setting-text-input" type="text" v-model="customCommand.executionArgument">
+                                <input disabled class="setting-text-input" type="text" v-model="customCommand.prefix">
+                                <input disabled class="setting-text-input" type="text" v-model="customCommand.icon">
                             </div>
                         </div>
                     </div>

diff --git a/src/ts/available-color-themes.ts b/src/ts/available-color-themes.ts
@@ -0,0 +1,7 @@
+export const availableColorThemes = [
+    "dark",
+    "dark-mono",
+    "light",
+    "light-mono",
+    "atom-one-dark",
+];
diff --git a/src/ts/config-file-repository.ts b/src/ts/config-file-repository.ts
@@ -18,16 +18,28 @@ export class ConfigFileRepository {
         try {
             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
-
-            return mergedConfig;
+            return this.enforceDataTypes(mergedConfig);
         } catch (err) {
             return this.defaultConfig;
         }
     }
 
     public saveConfig(config: ConfigOptions): void {
+        config = this.enforceDataTypes(config);
         writeFileSync(this.configFilePath, JSON.stringify(config, null, 2), "utf-8");
     }
+
+    private enforceDataTypes(config: ConfigOptions): ConfigOptions {
+        config.maxSearchResultCount = Number(config.maxSearchResultCount);
+        config.rescanInterval = Number(config.rescanInterval);
+        config.searchEngineThreshold = Number(config.searchEngineThreshold);
+        config.searchResultDescriptionFontSize = Number(config.searchResultDescriptionFontSize);
+        config.searchResultHeight = Number(config.searchResultHeight);
+        config.searchResultNameFontSize = Number(config.searchResultNameFontSize);
+        config.userInputHeight = Number(config.userInputHeight);
+        config.userInputFontSize = Number(config.userInputFontSize);
+        config.windowWidth = Number(config.windowWidth);
+        return config;
+    }
 }
diff --git a/src/ts/main.ts b/src/ts/main.ts
@@ -1,4 +1,4 @@
-import { app, BrowserWindow, globalShortcut, ipcMain, Menu, MenuItem, Tray, screen } from "electron";
+import { app, BrowserWindow, globalShortcut, ipcMain, Menu, MenuItem, Tray, screen, ipcRenderer } from "electron";
 import { autoUpdater } from "electron-updater";
 import { watchFile, unwatchFile } from "fs";
 import { join } from "path";
@@ -191,6 +191,7 @@ function showWindow() {
 function hideMainWindow(): void {
     mainWindow.webContents.send(IpcChannels.resetCommandlineOutput);
     mainWindow.webContents.send(IpcChannels.resetUserInput);
+    mainWindow.webContents.send(IpcChannels.hideSettings);
 
     setTimeout(() => {
         if (mainWindow !== null && mainWindow !== undefined) {

diff --git a/src/ts/renderer.ts b/src/ts/renderer.ts
@@ -3,11 +3,11 @@ import { IpcChannels } from "./ipc-channels";
 import { platform } from "os";
 import { ipcRenderer } from "electron";
 import { ConfigFileRepository } from "./config-file-repository";
-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 { availableColorThemes } from "./available-color-themes";
 import Vue from "vue";
 
 const appConfigRepository = new ElectronStoreAppConfigRepository();
@@ -22,6 +22,7 @@ const vue = new Vue({
     data: {
         appConfig,
         autoFocus: true,
+        availableColorThemes,
         commandLineOutput: [] as string[],
         config,
         searchIcon: iconSet.searchIcon,
@@ -42,7 +43,15 @@ const vue = new Vue({
                 focusOnInput();
             }
         },
-        handleKeyPress: (event: KeyboardEvent): void => {
+        handleMouseEnter: (index: number): void => {
+            if (config.allowMouseInteraction) {
+                changeActiveItemByIndex(index);
+            }
+        },
+        handleSettingsIconClick: (): void => {
+            toggleSettings();
+        },
+        handleUserInputKeyPress: (event: KeyboardEvent): void => {
             if (event.key === "Enter") {
                 handleEnterPress();
             } else if (event.ctrlKey && event.key === "o") {
@@ -70,14 +79,6 @@ const vue = new Vue({
                 toggleSettings();
             }
         },
-        handleMouseEnter: (index: number): void => {
-            if (config.allowMouseInteraction) {
-                changeActiveItemByIndex(index);
-            }
-        },
-        handleSettingsIconClick: (): void => {
-            toggleSettings();
-        },
         outputContainerHeight: (): string => {
             return `height: calc(100vh - ${config.userInputHeight}px);`;
         },
@@ -167,15 +168,16 @@ ipcRenderer.on(IpcChannels.commandLineOutput, (event: Electron.Event, arg: strin
 
 ipcRenderer.on(IpcChannels.resetCommandlineOutput, resetCommandLineOutput);
 ipcRenderer.on(IpcChannels.resetUserInput, resetUserInput);
+ipcRenderer.on(IpcChannels.hideSettings, hideSettings);
 
 function handleSearch(searchTerm: string): void {
     vue.settingsVisible = false;
     ipcRenderer.send(IpcChannels.getSearch, searchTerm);
 }
 
 function handleCommandLineOutput(data: string): void {
-    vue.searchResults = [];
     vue.settingsVisible = false;
+    vue.searchResults = [];
     vue.commandLineOutput.push(data);
 }
 
@@ -317,15 +319,16 @@ function toggleSettings(): void {
     } else {
         showSettings();
     }
-    vue.settingsVisible = !vue.settingsVisible;
 }
 
 function hideSettings(): void {
     ipcRenderer.send(IpcChannels.hideSettings);
+    vue.settingsVisible = false;
 }
 
 function showSettings(): void {
     vue.searchResults = [];
     resetCommandLineOutput();
     ipcRenderer.send(IpcChannels.showSettings);
+    vue.settingsVisible = true;
 }
diff --git a/styles/app.css b/styles/app.css
@@ -2,6 +2,7 @@
     --side-padding: 15px;
     --scrollbar-size: 8px;
     --icon-size: 55%;
+    --transition-speed: 150ms;
 
     --font-family: "Segoe UI", "Helvetica";
     --font-family-mono: "Consolas", "Courier", monospace;
@@ -141,7 +142,11 @@ div.setting-group {
     padding: calc(2* var(--side-padding)) 0;
     display: flex;
     flex-direction: row;
-    border-bottom: 1px solid var(--text-color);
+    border-bottom: 1px solid var(--scrollbar-foreground-color);
+}
+
+div.setting-group:last-child {
+    border-bottom: none;
 }
 
 div.setting-title {
@@ -150,6 +155,7 @@ div.setting-title {
     display: flex;
     align-items: center;
     width: 35%;
+    font-family: var(--font-family-mono);
 }
 
 div.setting {
@@ -162,9 +168,13 @@ div.sub-setting {
     align-items: center;
 }
 
+div.sub-setting > input.setting-text-input:last-child {
+    margin-bottom: 5px;
+}
+
 input.setting-text-input {
-    background: transparent;
-    border: 1px solid var(--text-color);
+    background-color: var(--scrollbar-background-color);
+    border: 1px solid var(--scrollbar-foreground-color);
     outline: none;
     color: var(--text-color);
     width: 100%;
@@ -174,6 +184,10 @@ input.setting-text-input {
     box-sizing: border-box;
 }
 
+input.setting-text-input:disabled {
+    border: none;
+}
+
 input.setting-text-input:last-child {
     margin-bottom: 0;
 }
@@ -182,13 +196,28 @@ input.setting-text-input:focus {
     border: 1px solid var(--accent-color);
 }
 
+select.setting-select {
+    background-color: var(--scrollbar-background-color);
+    border: 1px solid var(--scrollbar-foreground-color);
+    padding: 5px;
+    color: var(--text-color);
+    font-size: 1rem;
+    outline: none;
+}
+
 svg.setting-action-icon {
+    cursor: pointer;
+    transition: all var(--transition-speed) ease-in-out;
     width: 20px;
     height: 20px;
     fill: var(--text-color);
     padding-left: 10px;
 }
 
+svg.setting-action-icon:hover {
+    fill: var(--accent-color);
+}
+
 ::-webkit-scrollbar {
     width: var(--scrollbar-size);
     height: var(--scrollbar-size);