From c8bef8d29e22c5543ede12a7602d68fa9bd0c656 Mon Sep 17 00:00:00 2001 From: Oliver Schwendener Date: Fri, 21 Sep 2018 15:07:13 +0200 Subject: [PATCH] Added basic stuff for config gui --- main.html | 181 ++++++++++++++++++++++++++++++++++++++++- src/ts/ipc-channels.ts | 2 + src/ts/main.ts | 24 +++--- src/ts/renderer.ts | 11 ++- styles/app.css | 37 +++++++++ 5 files changed, 240 insertions(+), 15 deletions(-) diff --git a/main.html b/main.html index a6d56ee38..7bcfeebe8 100644 --- a/main.html +++ b/main.html @@ -11,7 +11,7 @@
- +
@@ -46,11 +46,186 @@
-

Settings

+

App Settings

Config file path
- + +
+
+ +

User Settings

+
+
allowMouseInteraction
+
+ +
+
+
+
alwaysShowOnPrimaryDisplay
+
+ +
+
+
+
applicationFileExtensions
+
+
+ +
+
+
+
+
applicationFolders
+
+
+ +
+
+
+
+
autoStartApp
+
+ +
+
+
+
colorTheme
+
+ +
+
+
+
customCommands
+
+
+ + + + +
+
+
+
+
fallbackWebSearches
+
+
+ +
+
+
+
+
fileSearchOptions
+
+
+ + +
+
+
+
+
hotKey
+
+ +
+
+
+
logExecution
+
+ +
+
+
+
maxSearchResultCount
+
+ +
+
+
+
rescanInterval
+
+ +
+
+
+
searchEngineThreshold
+
+ +
+
+
+
searchEnvironmentVariables
+
+ +
+
+
+
searchOperatingSystemSettings
+
+ +
+
+
+
searchResultDescriptionFontSize
+
+ +
+
+
+
searchResultHeight
+
+ +
+
+
+
searchResultNameFontSize
+
+ +
+
+
+
shortcuts
+
+
+ + + +
+
+
+
+
userInputFontSize
+
+ +
+
+
+
userInputHeight
+
+ +
+
+
+
userStylesheet
+
+ +
+
+
+
webSearches
+
+
+ + + + +
+
+
+
+
windowWidth
+
+
diff --git a/src/ts/ipc-channels.ts b/src/ts/ipc-channels.ts index 86fd0c121..5c5abb01f 100644 --- a/src/ts/ipc-channels.ts +++ b/src/ts/ipc-channels.ts @@ -23,4 +23,6 @@ export class IpcChannels { public static readonly showHelp = "show-help"; public static readonly showSettings = "show-settings"; public static readonly hideSettings = "hide-settings"; + public static readonly updateAppConfig = "update-app-config"; + public static readonly updateUserConfig = "update-user-config"; } diff --git a/src/ts/main.ts b/src/ts/main.ts index 444d0e9b2..06f62711b 100644 --- a/src/ts/main.ts +++ b/src/ts/main.ts @@ -23,6 +23,8 @@ 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"; +import { AppConfig } from "./app-config/app-config"; +import { ConfigOptions } from "./config-options"; let mainWindow: BrowserWindow; let trayIcon: Tray; @@ -30,7 +32,8 @@ let trayIcon: Tray; const delayWhenHidingCommandlineOutputInMs = 25; const filePathExecutor = new FilePathExecutor(); const appConfigRepository = new ElectronStoreAppConfigRepository(); -let config = new ConfigFileRepository(defaultConfig, appConfigRepository.getAppConfig().userSettingsFilePath).getConfig(); +const userConfigRepository = new ConfigFileRepository(defaultConfig, appConfigRepository.getAppConfig().userSettingsFilePath); +let config = userConfigRepository.getConfig(); let inputValidationService = new InputValidationService(config, new InputValidatorSearcherCombinationManager(config).getCombinations()); const ipcEmitter = new ProductionIpcEmitter(); let executionService = new ExecutionService( @@ -78,7 +81,6 @@ function createMainWindow(): void { } registerGlobalHotKey(); - watchConfigFile(); if (!isInDevelopment) { checkForUpdates(); @@ -231,16 +233,7 @@ function resetWindowToDefaultSizeAndPosition(): void { updateWindowSize(0); } -function watchConfigFile(): void { - watchFile(appConfigRepository.getAppConfig().userSettingsFilePath, reloadApp); -} - -function unwatchConfigFile(): void { - unwatchFile(appConfigRepository.getAppConfig().userSettingsFilePath); -} - function quitApp(): void { - unwatchConfigFile(); destroyTrayIcon(); unregisterAllGlobalShortcuts(); app.quit(); @@ -304,3 +297,12 @@ ipcMain.on(IpcChannels.showSettings, (): void => { ipcMain.on(IpcChannels.hideSettings, (): void => { updateWindowSize(0); }); + +ipcMain.on(IpcChannels.updateAppConfig, (event: Electron.Event, updatedAppConfig: AppConfig) => { + appConfigRepository.setAppConfig(updatedAppConfig); +}); + +ipcMain.on(IpcChannels.updateUserConfig, (event: Electron.Event, updatedUserConfig: ConfigOptions) => { + config = updatedUserConfig; + userConfigRepository.saveConfig(updatedUserConfig); +}); diff --git a/src/ts/renderer.ts b/src/ts/renderer.ts index 8cb979dfd..07ee9a5ec 100644 --- a/src/ts/renderer.ts +++ b/src/ts/renderer.ts @@ -22,8 +22,8 @@ const vue = new Vue({ data: { appConfig, autoFocus: true, - colorTheme: `./styles/${config.colorTheme}.css`, commandLineOutput: [] as string[], + config, searchIcon: iconSet.searchIcon, searchResults: [] as SearchResultItemViewModel[], settingsVisible: false, @@ -33,6 +33,9 @@ const vue = new Vue({ }, el: "#vue-root", methods: { + colorTheme: (): string => { + return `./styles/${config.colorTheme}.css`; + }, handleClick: (): void => { if (config.allowMouseInteraction) { handleEnterPress(); @@ -93,6 +96,12 @@ const vue = new Vue({ searchResultWidth: (): string => { return `width: ${config.searchResultHeight}px;`; }, + updateAppConfig: (): void => { + ipcRenderer.send(IpcChannels.updateAppConfig, appConfig); + }, + updateUserConfig: (): void => { + ipcRenderer.send(IpcChannels.updateUserConfig, config); + }, userInputContainerStyle: (): string => { return `height: ${config.userInputHeight}px;`; }, diff --git a/styles/app.css b/styles/app.css index d0cd257ae..8e382eda6 100644 --- a/styles/app.css +++ b/styles/app.css @@ -137,6 +137,43 @@ div.settings-container { padding: 0 var(--side-padding); } +div.setting-group { + padding: var(--side-padding) 0; + display: flex; + flex-direction: row; +} + +div.setting-title { + font-size: 1rem; + padding-right: var(--side-padding); + display: flex; + align-items: center; + width: 35%; +} + +div.setting { + width: 65%; +} + +div.sub-setting { + display: flex; + flex-direction: row; +} + +input.setting-text-input { + background: transparent; + border: 1px solid var(--text-color); + outline: none; + color: var(--text-color); + width: 100%; + font-size: 1rem; + padding: 5px 3px; +} + +input.setting-text-input:focus { + border: 1px solid var(--accent-color); +} + ::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size);