Adds buttons for layout change options

src/components/FilterTile.vue

@@ -14,10 +14,13 @@
           title="Clear search"
           @click="clearFilterInput"></i>
       </form>
-      <div class="space-filler">
+      <div class="options-container">
-        <span>hello</span>
+        <span class="options-label">Layout</span>
-        <span>world</span>
+        <div class="display-options">
-        <i class="fas fa-rocket" style="color: red;"></i>
+          <i class="fas fa-th" @click="updateDisplayLayout('default')"></i>
+          <i class="fas fa-grip-vertical" @click="updateDisplayLayout('vertical')"></i>
+          <i class="fas fa-grip-horizontal" @click="updateDisplayLayout('horizontal')"></i>
+        </div>
       </div>
       <KeyboardShortcutInfo />
   </section>
@@ -45,6 +48,9 @@ export default {
       this.userIsTypingSomething();
       document.activeElement.blur();
     },
+    updateDisplayLayout(layout) {
+      this.$emit('change-display-layout', layout);
+    },
   },
   mounted() {
     window.addEventListener('keyup', (event) => {
@@ -112,11 +118,41 @@ export default {
       }
     }
   }
-  .space-filler {
+  .options-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: flex-end;
     flex: 1;
+    padding: 0 1rem;
     border-radius: 20px 0 0;
     background: $background;
+
+    span.options-label {
+      font-size: 0.8rem;
+      color: #5cabca;
+      width: 6rem;
+      text-align: left;
+    }
+
+    i.fas {
+      min-width: 1.2rem;
+      font-size: 1rem;
+      margin: 0.2rem;
+      padding: 0.2rem;
+      text-align: center;
+      color: #5cabca;
+      background: #05070e;
+      border: 1px solid #5cabca;
+      border-radius: 4px;
+      opacity: 0.8;
+      cursor: pointer;
+      &:hover {
+        opacity: 1;
+      }
+    }
   }
+
   @media screen and (max-width: 600px) {
     form {
       flex: 1;
@@ -124,7 +160,7 @@ export default {
       text-align: center;
       padding: 0.25rem 0;
     }
-    .space-filler {
+    .options-container {
       display: none;
     }
   }

src/components/KeyboardShortcutInfo.vue

@@ -30,12 +30,13 @@ export default {
       return !!localStorage.hideWelcomeHelpers;
     },
     /**
-     * Sets the session storage to 'true', so that it won't be shown again
+     * Update session storage, so that it won't be shown again
-     * Then sets the state, also to true, so that it'll be hidden immediatley
+     * Trigger the hide function, and remove the event listerner
      */
     hideWelcomeHelper() {
-      localStorage.setItem('hideWelcomeHelpers', true);
       this.shouldHide = true;
+      localStorage.setItem('hideWelcomeHelpers', true);
+      window.removeEventListener('keyup');
     },
   },
   /**

src/views/Home.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="home">
     <Header :pageInfo="getPageInfo(pageInfo)" />
-    <FilterTile @user-is-searchin="searching" class="filter-container" ref="filterComp" />
+    <FilterTile ref="filterComp"
+      @user-is-searchin="searching"
+      @change-display-layout="changeDisplayLayout"
+      class="filter-container"
+    />
     <div class="item-group-container">
       <ItemGroup
         v-for="(section, index) in sections"
@@ -36,13 +40,17 @@ export default {
     searchTile: '',
   }),
   methods: {
-    finishedSearching() {
+    changeDisplayLayout(layout) {
-      this.$refs.filterComp.clearFilterInput();
+      console.log('Display layout will update', layout);
     },
     /* Returns true if the user is currently searching */
     searching(searchTile) {
       this.searchTile = searchTile;
     },
+    /* Clears input field, once a searched item is opened */
+    finishedSearching() {
+      this.$refs.filterComp.clearFilterInput();
+    },
     /* Extracts the website name from domain, used for the searching functionality */
     getDomainFromUrl(url) {
       const urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d.-]+)\.(?:[a-z.]{2,10})(?:[/\w.-]*)*/;
@@ -77,11 +85,15 @@ export default {
       }
       return defaults;
     },
+    /* Injects font-awesome's script tag, used for item icons */
+    initiateFontAwesome() {
+      const fontAwesomeScript = document.createElement('script');
+      fontAwesomeScript.setAttribute('src', 'https://kit.fontawesome.com/def7c3ce4c.js');
+      document.head.appendChild(fontAwesomeScript);
+    },
   },
   mounted() {
-    const fontAwesomeScript = document.createElement('script');
+    this.initiateFontAwesome();
-    fontAwesomeScript.setAttribute('src', 'https://kit.fontawesome.com/def7c3ce4c.js');
-    document.head.appendChild(fontAwesomeScript);
   },
 };
 </script>