Added more basic config gui functionality

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

Hide file tree

Showing 3 changed files with 69 additions and 2 deletions.
diff --git a/main.html b/main.html
@@ -72,6 +72,14 @@ <h1>User Settings</h1>
                         <div class="setting">
                             <div class="sub-setting" v-for="applicationFileExtension in config.applicationFileExtensions">
                                 <input disabled class="setting-text-input" type="text" v-model="applicationFileExtension">
+                                <svg v-on:click="settingsActionRemoveApplicationFileExtension(applicationFileExtension)" class="setting-action-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 26 26" version="1.1">
+                                    <g id="surface1">
+                                        <path d="M 13.5 3.1875 C 7.804688 3.1875 3.1875 7.804688 3.1875 13.5 C 3.1875 19.195313 7.804688 23.8125 13.5 23.8125 C 19.195313 23.8125 23.8125 19.195313 23.8125 13.5 C 23.8125 7.804688 19.195313 3.1875 13.5 3.1875 Z M 19 15 L 8 15 L 8 12 L 19 12 Z "></path>
+                                    </g>
+                                </svg>
+                            </div>
+                            <div class="sub-setting">
+                                <input class="setting-text-input" type="text" v-on:keypress="settingsActionAddApplicationFileExtension" placeholder="Add here">
                             </div>
                         </div>
                     </div>
@@ -80,6 +88,14 @@ <h1>User Settings</h1>
                         <div class="setting">
                             <div class="sub-setting" v-for="applicationFolder in config.applicationFolders">
                                 <input disabled class="setting-text-input" type="text" v-model="applicationFolder">
+                                <svg v-on:click="settingsActionRemoveApplicationFolder(applicationFolder)" class="setting-action-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 26 26" version="1.1">
+                                    <g id="surface1">
+                                        <path d="M 13.5 3.1875 C 7.804688 3.1875 3.1875 7.804688 3.1875 13.5 C 3.1875 19.195313 7.804688 23.8125 13.5 23.8125 C 19.195313 23.8125 23.8125 19.195313 23.8125 13.5 C 23.8125 7.804688 19.195313 3.1875 13.5 3.1875 Z M 19 15 L 8 15 L 8 12 L 19 12 Z "></path>
+                                    </g>
+                                </svg>
+                            </div>
+                            <div class="sub-setting">
+                                <input class="setting-text-input" type="text" v-on:keypress="settingsActionAddApplicationFolder" placeholder="Add here">
                             </div>
                         </div>
                     </div>

diff --git a/src/ts/renderer.ts b/src/ts/renderer.ts
@@ -96,6 +96,42 @@ const vue = new Vue({
         searchResultWidth: (): string => {
             return `width: ${config.searchResultHeight}px;`;
         },
+        settingsActionAddApplicationFileExtension: (event: KeyboardEvent): void => {
+            if (event.key !== "Enter") {
+                return;
+            }
+
+            const elem = event.target as HTMLInputElement;
+            const newApplicationFileExtension = elem.value;
+            if (newApplicationFileExtension !== undefined && newApplicationFileExtension.length > 0) {
+                config.applicationFileExtensions.push(newApplicationFileExtension);
+                vue.updateUserConfig();
+                elem.value = "";
+            }
+        },
+        settingsActionAddApplicationFolder: (event: KeyboardEvent): void => {
+            if (event.key !== "Enter") {
+                return;
+            }
+
+            const elem = event.target as HTMLInputElement;
+            const newApplicationFolder = elem.value;
+            if (newApplicationFolder !== undefined && newApplicationFolder.length > 0) {
+                config.applicationFolders.push(newApplicationFolder);
+                vue.updateUserConfig();
+                elem.value = "";
+            }
+        },
+        settingsActionRemoveApplicationFileExtension: (applicationFileExtension: string): void => {
+            const indexToRemove = config.applicationFileExtensions.indexOf(applicationFileExtension);
+            config.applicationFileExtensions.splice(indexToRemove, 1);
+            vue.updateUserConfig();
+        },
+        settingsActionRemoveApplicationFolder: (applicationFolder: string): void => {
+            const indexToRemove = config.applicationFolders.indexOf(applicationFolder);
+            config.applicationFolders.splice(indexToRemove, 1);
+            vue.updateUserConfig();
+        },
         updateAppConfig: (): void => {
             ipcRenderer.send(IpcChannels.updateAppConfig, appConfig);
         },

diff --git a/styles/app.css b/styles/app.css
@@ -138,9 +138,10 @@ div.settings-container {
 }
 
 div.setting-group {
-    padding: var(--side-padding) 0;
+    padding: calc(2* var(--side-padding)) 0;
     display: flex;
     flex-direction: row;
+    border-bottom: 1px solid var(--text-color);
 }
 
 div.setting-title {
@@ -158,6 +159,7 @@ div.setting {
 div.sub-setting {
     display: flex;
     flex-direction: row;
+    align-items: center;
 }
 
 input.setting-text-input {
@@ -167,13 +169,26 @@ input.setting-text-input {
     color: var(--text-color);
     width: 100%;
     font-size: 1rem;
-    padding: 5px 3px;
+    padding: 5px;
+    margin-bottom: 5px;
+    box-sizing: border-box;
+}
+
+input.setting-text-input:last-child {
+    margin-bottom: 0;
 }
 
 input.setting-text-input:focus {
     border: 1px solid var(--accent-color);
 }
 
+svg.setting-action-icon {
+    width: 20px;
+    height: 20px;
+    fill: var(--text-color);
+    padding-left: 10px;
+}
+
 ::-webkit-scrollbar {
     width: var(--scrollbar-size);
     height: var(--scrollbar-size);