Added a data prop to be set when modal is open, in order to disable key bindings

src/components/Configuration/AddItem.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'AddItem',
+  props: {
+    sections: Array,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/Configuration/ConfigContainer.vue

@@ -0,0 +1,50 @@
+<template>
+  <Tabs>
+    <TabItem name="Edit">
+      <div class="first-tab">Todo</div>
+    </TabItem>
+    <TabItem name="Download">
+      <div class="second-tab">
+        <pre>{{this.jsonParser(this.sections)}}</pre>
+      </div>
+    </TabItem>
+    <TabItem name="Add Item">
+      <div class="third-tab">
+        <AddItem :sections="sections" />
+      </div>
+    </TabItem>
+  </Tabs>
+</template>
+
+<script>
+
+import JsonToYaml from '@/utils/JsonToYaml';
+import AddItem from '@/components/Configuration/AddItem';
+
+export default {
+  name: 'ConfigContainer',
+  data() {
+    return {
+      jsonParser: JsonToYaml,
+    };
+  },
+  props: {
+    sections: Array,
+  },
+  components: {
+    AddItem,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+pre {
+  color: var(--config-code-color);
+  background: var(--config-code-background);
+}
+
+.tab-item {
+  overflow-y: auto;
+}
+</style>

src/components/Settings/ConfigLauncher.vue

@@ -1,20 +1,15 @@
 <template>
   <div class="config-options">
+    <!-- Button and label -->
     <span>Config</span>
     <div class="config-buttons">
       <IconSpanner v-tooltip="tooltip('Update configuration locally')" @click="showEditor()" />
     </div>
-    <modal :name="modalName" :resizable="true" width="80%" height="80%">
-      <Tabs>
-        <TabItem name="Edit">
-          <div class="first-tab">Todo</div>
-        </TabItem>
-        <TabItem name="Download">
-          <div class="second-tab">
-            <pre>{{this.jsonParser(this.sections)}}</pre>
-          </div>
-        </TabItem>
-      </Tabs>
+
+    <!-- Modal containing all the configuration options -->
+    <modal :name="modalName" :resizable="true" width="80%" height="80%"
+      @closed="$emit('modalChanged', false)">
+      <ConfigContainer :sections="sections" />
     </modal>
   </div>
 </template>
@@ -22,19 +17,18 @@
 <script>
 
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
-import JsonToYaml from '@/utils/JsonToYaml';
+import ConfigContainer from '@/components/Configuration/ConfigContainer';
 
 export default {
-  name: 'ConfigEditor',
+  name: 'ConfigLauncher',
   data() {
     return {
       modalName: 'CONF-EDITOR',
-      input: '',
-      jsonParser: JsonToYaml,
     };
   },
   components: {
     IconSpanner,
+    ConfigContainer,
   },
   props: {
     sections: Array,
@@ -42,6 +36,7 @@ export default {
   methods: {
     showEditor: function show() {
       this.$modal.show(this.modalName);
+      this.$emit('modalChanged', true);
     },
     updateConfig() {
       // this.$emit('iconSizeUpdated', iconSize);
@@ -54,7 +49,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
 .config-options {
   display: flex;
   flex-direction: column;

src/components/Settings/KeyboardShortcutInfo.vue

@@ -21,13 +21,13 @@ export default {
   data() {
     return {
       shouldHide: true, // False = show/ true = hide. Intuitive, eh?
+      timeDelay: 3000, // Short delay in ms before popup appears
     };
   },
   methods: {
     /**
-     * If the session storage item exists, true will be returned
-     * Otherwise, if not then false is returned.
-     * Note the !! just converts 'false' to false, as strings resolve to true
+     * Returns true if the key exists in session storage, otherwise false
+     * And the !! just converts 'false' to false, as strings resolve to true
      */
     shouldHideWelcomeMessage() {
       return !!localStorage[localStorageKeys.HIDE_WELCOME_BANNER];
@@ -39,7 +39,11 @@ export default {
     hideWelcomeHelper() {
       this.shouldHide = true;
       localStorage.setItem(localStorageKeys.HIDE_WELCOME_BANNER, true);
-      window.removeEventListener('keyup');
+      window.removeEventListener('keyup', this.keyPressEvent);
+    },
+    /* Passed to window function, to add/ remove event listener */
+    keyPressEvent(event) {
+      if (event.keyCode === 27) this.hideWelcomeHelper();
     },
   },
   /**
@@ -50,11 +54,8 @@ export default {
   mounted() {
     const shouldHide = this.shouldHideWelcomeMessage();
     if (!shouldHide) {
-      window.setTimeout(() => { this.shouldHide = shouldHide; }, 3000);
-      window.addEventListener('keyup', (ev) => {
-        // User pressed the escape key. Trigger permanent dismissal of dialog
-        if (ev.keyCode === 27) this.hideWelcomeHelper();
-      });
+      window.setTimeout(() => { this.shouldHide = shouldHide; }, this.timeDelay);
+      window.addEventListener('keyup', this.keyPressEvent);
     } else { // Meh, component not needed.
       // No point wasting valuable bytes of your 32GB Ram, lets kill it
       this.$destroy();

src/components/Settings/SearchBar.vue

@@ -1,6 +1,6 @@
 <template>
   <form>
-    <label for="filter-tiles">Search</label>
+    <label for="filter-tiles">Search {{active}}</label>
     <input
       id="filter-tiles"
       v-model="input"
@@ -21,6 +21,9 @@ import ArrowKeyNavigation from '@/utils/ArrowKeyNavigation';
 
 export default {
   name: 'FilterTile',
+  props: {
+    active: Boolean,
+  },
   data() {
     return {
       input: '', // Users current search term
@@ -31,6 +34,8 @@ export default {
     window.addEventListener('keydown', (event) => {
       const currentElem = document.activeElement.id;
       const { key, keyCode } = event;
+      /* If a modal is open, then do nothing */
+      if (!this.active) return;
       if (/^[a-zA-Z]$/.test(key) && currentElem !== 'filter-tiles') {
         /* Letter key pressed - start searching */
         this.$refs.filter.focus();

src/components/Settings/SettingsContainer.vue

@@ -1,12 +1,16 @@
 <template>
   <section>
-    <SearchBar @user-is-searchin="userIsTypingSomething" ref="SearchBar" v-if="searchVisible" />
+    <SearchBar ref="SearchBar"
+      @user-is-searchin="userIsTypingSomething"
+      v-if="searchVisible"
+      :active="!modalOpen"
+    />
     <div class="options-container" v-if="settingsVisible">
       <ThemeSelector :themes="availableThemes"
         :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
       <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
       <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
-      <ConfigEditor :sections="sections" />
+      <ConfigLauncher :sections="sections" @modalChanged="modalChanged" />
     </div>
     <KeyboardShortcutInfo />
   </section>
@@ -15,7 +19,7 @@
 <script>
 import Defaults from '@/utils/defaults';
 import SearchBar from '@/components/Settings/SearchBar';
-import ConfigEditor from '@/components/Settings/ConfigEditor';
+import ConfigLauncher from '@/components/Settings/ConfigLauncher';
 import ThemeSelector from '@/components/Settings/ThemeSelector';
 import LayoutSelector from '@/components/Settings/LayoutSelector';
 import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
@@ -29,10 +33,11 @@ export default {
     availableThemes: Object,
     appConfig: Object,
     sections: Array,
+    modalOpen: Boolean,
   },
   components: {
     SearchBar,
-    ConfigEditor,
+    ConfigLauncher,
     ThemeSelector,
     LayoutSelector,
     ItemSizeSelector,
@@ -51,6 +56,9 @@ export default {
     updateIconSize(iconSize) {
       this.$emit('change-icon-size', iconSize);
     },
+    modalChanged(changedTo) {
+      this.$emit('change-modal-visibility', changedTo);
+    },
     getInitialTheme() {
       return this.appConfig.theme || '';
     },
@@ -63,7 +71,7 @@ export default {
   },
   data() {
     return {
-      searchVisible: Defaults.visibleComponents.searchBar,
+      searchVisible: Defaults.visibleComponents.searchBar && !this.modalOpen,
       settingsVisible: Defaults.visibleComponents.settings,
     };
   },

src/styles/color-palette.scss

@@ -51,4 +51,6 @@
   --footer-text-color-link:  var(--primary);
   --welcome-popup-background: var(--background-darker);
   --welcome-popup-text-color: var(--primary);
+  --config-code-background: #fff;
+  --config-code-color: var(--background);
 }

src/views/Home.vue

@@ -5,11 +5,13 @@
       @user-is-searchin="searching"
       @change-display-layout="setLayoutOrientation"
       @change-icon-size="setItemSize"
+      @change-modal-visibility="updateModalVisibility"
       :displayLayout="layout"
       :iconSize="itemSizeBound"
       :availableThemes="getExternalCSSLinks()"
       :appConfig="appConfig"
       :sections="getSections(sections)"
+      :modalOpen="modalOpen"
       class="filter-container"
     />
     <!-- Main content, section for each group of items -->
@@ -54,6 +56,7 @@ export default {
     searchValue: '',
     layout: '',
     itemSizeBound: '',
+    modalOpen: false, // When true, keybindings are disabled
   }),
   computed: {
     layoutOrientation: {
@@ -126,6 +129,10 @@ export default {
     setItemSize(itemSize) {
       this.iconSize = itemSize;
     },
+    /* Update data when modal is open (so that key bindings can be disabled) */
+    updateModalVisibility(modalState) {
+      this.modalOpen = modalState;
+    },
     /* Returns an array of links to external CSS from the Config */
     getExternalCSSLinks() {
       const availibleThemes = {};