Refactored the Search functionality into its own component

src/assets/icons/icon-size-large.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="expand-arrows-alt" class="svg-inline--fa fa-expand-arrows-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z"></path></svg>

src/assets/icons/icon-size-medium.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="expand" class="svg-inline--fa fa-expand fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"></path></svg>

src/assets/icons/icon-size-small.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="compress-arrows-alt" class="svg-inline--fa fa-compress-arrows-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z"></path></svg>

src/components/Settings/FilterTile.vue

@@ -1,199 +0,0 @@
-<template>
-  <section>
-    <form>
-      <label for="filter-tiles">Search</label>
-      <input
-        id="filter-tiles"
-        v-model="input"
-        ref="filter"
-        placeholder="Start typing to filter tiles..."
-        v-on:input="userIsTypingSomething"
-        @keydown.esc="clearFilterInput" />
-        <i v-if="input.length > 0"
-          class="el-icon-circle-close clear-search"
-          title="Clear search"
-          @click="clearFilterInput"></i>
-      </form>
-      <div class="options-container">
-        <div class="theme-selector">
-          <ThemeSelector :themes="availableThemes" />
-        </div>
-        <div>
-        <span class="options-label">Layout</span>
-          <div class="display-options">
-            <IconDeafault @click="updateDisplayLayout('default')"
-              :class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" />
-            <IconHorizontal class="layout-icon" @click="updateDisplayLayout('horizontal')"
-              :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" />
-            <IconVertical class="layout-icon" @click="updateDisplayLayout('vertical')"
-              :class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" />
-          </div>
-        </div>
-      </div>
-      <KeyboardShortcutInfo />
-  </section>
-</template>
-
-<script>
-import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo';
-import ThemeSelector from '@/components/Settings/ThemeSelector';
-
-import IconDeafault from '@/assets/icons/layout-default.svg';
-import IconHorizontal from '@/assets/icons/layout-horizontal.svg';
-import IconVertical from '@/assets/icons/layout-vertical.svg';
-
-export default {
-  name: 'FilterTile',
-  data() {
-    return {
-      input: '',
-    };
-  },
-  props: {
-    displayLayout: String,
-    availableThemes: Object,
-  },
-  components: {
-    KeyboardShortcutInfo,
-    ThemeSelector,
-    IconDeafault,
-    IconHorizontal,
-    IconVertical,
-  },
-  methods: {
-    userIsTypingSomething() {
-      this.$emit('user-is-searchin', this.input);
-    },
-    clearFilterInput() {
-      this.input = '';
-      this.userIsTypingSomething();
-      document.activeElement.blur();
-    },
-    updateDisplayLayout(layout) {
-      this.$emit('change-display-layout', layout);
-    },
-  },
-  mounted() {
-    window.addEventListener('keyup', (event) => {
-      const { key, keyCode } = event;
-      if (/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
-        try {
-          this.input += key;
-          this.$refs.filter.focus();
-          this.userIsTypingSomething();
-        } catch (e) {
-          // Do nothing
-        }
-      } else if (keyCode === 27) {
-        this.clearFilterInput();
-      }
-    });
-  },
-};
-</script>
-
-<style scoped lang="scss">
-
-  section {
-    display: flex;
-    align-items: center;
-    align-items: stretch;
-    background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
-  }
-  form {
-    border-radius: 0 0 20px 0;
-    padding: 0 0.2rem 0.2rem 0;
-    background: var(--background-darker);
-    label {
-        display: inline;
-        color: var(--primary);
-        margin: 0.5rem;
-        display: inline;
-    }
-    input {
-      display: inline-block;
-      width: 200px;
-      padding: 0.5rem;
-      margin: 0.5rem;
-      outline: none;
-      border: none;
-      border-radius: 12px;
-      background: var(--background);
-      color: var(--primary);
-      &:focus {
-        background: var(--background-transparent);
-      }
-    }
-    .clear-search {
-      position: absolute;
-      margin: 1em 0 0 -2em;
-      color: var(--primary);
-      opacity: 0.5;
-      border-radius: 50px;
-      cursor: pointer;
-      &:hover {
-        opacity: 1;
-        background: var(--background-darker);
-      }
-    }
-  }
-  .options-container {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
-    justify-content: flex-end;
-    flex: 1;
-    padding: 0 1rem;
-    border-radius: 20px 0 0;
-    background: var(--background);
-
-    span.options-label {
-      font-size: 0.8rem;
-      color: var(--primary-transparent);
-      width: 5.5rem;
-      text-align: left;
-    }
-
-    .theme-selector {
-      align-items: center;
-      display: flex;
-      height: 100%;
-      padding: 0 1rem;
-    }
-
-    .display-options {
-      color: var(--primary-transparent);
-      svg {
-        path {
-          fill: var(--primary-transparent);
-        }
-        width: 1rem;
-        height: 1rem;
-        margin: 0.2rem;
-        padding: 0.2rem;
-        text-align: center;
-        background: var(--background);
-        border: 1px solid currentColor;
-        border-radius: 4px;
-        opacity: 0.8;
-        cursor: pointer;
-        &:hover, &.selected {
-          background: var(--primary-transparent);
-          path { fill: var(--background); }
-        }
-      }
-    }
-  }
-
-  @media screen and (max-width: 600px) {
-    form {
-      flex: 1;
-      border-radius: 0;
-      text-align: center;
-      padding: 0.25rem 0;
-    }
-    .options-container {
-      display: none;
-    }
-  }
-</style>

src/components/Settings/ItemSizeSelector.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <span class="options-label">Icon Size</span>
+    <div class="display-options">
+      <IconSmall @click="updateIconSize('default')"
+        :class="`layout-icon ${iconSize === 'small' ? 'selected' : ''}`" />
+      <IconMedium class="layout-icon" @click="updateIconSize('horizontal')"
+        :class="`layout-icon ${iconSize === 'medium' ? 'selected' : ''}`" />
+      <IconLarge class="layout-icon" @click="updateIconSize('vertical')"
+        :class="`layout-icon ${iconSize === 'large' ? 'selected' : ''}`" />
+    </div>
+  </div>
+</template>
+
+<script>
+import IconSmall from '@/assets/icons/icon-size-small.svg';
+import IconMedium from '@/assets/icons/icon-size-medium.svg';
+import IconLarge from '@/assets/icons/icon-size-large.svg';
+
+export default {
+  name: 'IconSizeSelector',
+  data() {
+    return {
+      input: '',
+    };
+  },
+  props: {
+    iconSize: String,
+  },
+  components: {
+    IconSmall,
+    IconMedium,
+    IconLarge,
+  },
+  methods: {
+    updateIconSize(iconSize) {
+      this.$emit('iconSizeUpdated', iconSize);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+span.options-label {
+  color: var(--primary);
+}
+
+.display-options {
+  color: var(--primary-transparent);
+  svg {
+    path {
+      fill: var(--primary-transparent);
+    }
+    width: 1rem;
+    height: 1rem;
+    margin: 0.2rem;
+    padding: 0.2rem;
+    text-align: center;
+    background: var(--background);
+    border: 1px solid currentColor;
+    border-radius: 4px;
+    opacity: 0.8;
+    cursor: pointer;
+    &:hover, &.selected {
+      background: var(--primary-transparent);
+      path { fill: var(--background); }
+    }
+  }
+}
+
+</style>

src/components/Settings/LayoutSelector.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <span class="options-label">Layout</span>
+    <div class="display-options">
+      <IconDeafault @click="updateDisplayLayout('default')"
+        :class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" />
+      <IconHorizontal class="layout-icon" @click="updateDisplayLayout('horizontal')"
+        :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" />
+      <IconVertical class="layout-icon" @click="updateDisplayLayout('vertical')"
+        :class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" />
+    </div>
+  </div>
+</template>
+
+<script>
+import IconDeafault from '@/assets/icons/layout-default.svg';
+import IconHorizontal from '@/assets/icons/layout-horizontal.svg';
+import IconVertical from '@/assets/icons/layout-vertical.svg';
+
+export default {
+  name: 'LayoutSelector',
+  data() {
+    return {
+      input: '',
+    };
+  },
+  props: {
+    displayLayout: String,
+  },
+  components: {
+    IconDeafault,
+    IconHorizontal,
+    IconVertical,
+  },
+  methods: {
+    updateDisplayLayout(layout) {
+      this.$emit('layoutUpdated', layout);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+span.options-label {
+  color: var(--primary);
+}
+
+.display-options {
+  color: var(--primary-transparent);
+  svg {
+    path {
+      fill: var(--primary-transparent);
+    }
+    width: 1rem;
+    height: 1rem;
+    margin: 0.2rem;
+    padding: 0.2rem;
+    text-align: center;
+    background: var(--background);
+    border: 1px solid currentColor;
+    border-radius: 4px;
+    cursor: pointer;
+    &:hover, &.selected {
+      background: var(--primary-transparent);
+      path { fill: var(--background); }
+    }
+  }
+}
+
+</style>

src/components/Settings/SearchBar.vue

@@ -0,0 +1,113 @@
+<template>
+  <form>
+    <label for="filter-tiles">Search</label>
+    <input
+      id="filter-tiles"
+      v-model="input"
+      ref="filter"
+      placeholder="Start typing to filter tiles..."
+      v-on:input="userIsTypingSomething"
+      @keydown.esc="clearFilterInput" />
+      <i v-if="input.length > 0"
+        class="clear-search"
+        title="Clear search"
+        @click="clearFilterInput">x</i>
+  </form>
+</template>
+
+<script>
+
+export default {
+  name: 'FilterTile',
+  data() {
+    return {
+      input: '',
+    };
+  },
+  methods: {
+    userIsTypingSomething() {
+      this.$emit('user-is-searchin', this.input);
+    },
+    clearFilterInput() {
+      this.input = '';
+      this.userIsTypingSomething();
+      document.activeElement.blur();
+    },
+  },
+  mounted() {
+    window.addEventListener('keyup', (event) => {
+      const { key, keyCode } = event;
+      if (/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
+        try {
+          this.input += key;
+          this.$refs.filter.focus();
+          this.userIsTypingSomething();
+        } catch (e) {
+          // Do nothing
+        }
+      } else if (keyCode === 27) {
+        this.clearFilterInput();
+      }
+    });
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+  section {
+    display: flex;
+    align-items: center;
+    align-items: stretch;
+    background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
+  }
+  form {
+    border-radius: 0 0 20px 0;
+    padding: 0 0.2rem 0.2rem 0;
+    background: var(--background-darker);
+    label {
+        display: inline;
+        color: var(--primary);
+        margin: 0.5rem;
+        display: inline;
+    }
+    input {
+      display: inline-block;
+      width: 200px;
+      padding: 0.5rem;
+      margin: 0.5rem;
+      outline: none;
+      border: none;
+      border-radius: 12px;
+      background: var(--background);
+      color: var(--primary);
+      &:focus {
+        background: var(--background-transparent);
+      }
+    }
+    .clear-search {
+      position: absolute;
+      color: var(--primary);
+      margin: 0.55rem 0 0 -2.2rem;
+      padding: 0 0.4rem;
+      font-style: normal;
+      font-size: 1.5rem;
+      opacity: 0.5;
+      border-radius: 50px;
+      cursor: pointer;
+      &:hover {
+        opacity: 1;
+        background: var(--background-darker);
+      }
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    form {
+      flex: 1;
+      border-radius: 0;
+      text-align: center;
+      padding: 0.25rem 0;
+    }
+  }
+</style>

src/components/Settings/SettingsContainer.vue

@@ -0,0 +1,79 @@
+<template>
+  <section>
+    <SearchBar @user-is-searchin="userIsTypingSomething" ref="SearchBar" />
+    <div class="options-container">
+      <ThemeSelector class="theme-selector" :themes="availableThemes" />
+      <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
+      <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
+    </div>
+    <KeyboardShortcutInfo />
+  </section>
+</template>
+
+<script>
+import SearchBar from '@/components/Settings/SearchBar';
+import ThemeSelector from '@/components/Settings/ThemeSelector';
+import LayoutSelector from '@/components/Settings/LayoutSelector';
+import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
+import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo';
+
+export default {
+  name: 'FilterTile',
+  props: {
+    displayLayout: String,
+    iconSize: String,
+    availableThemes: Object,
+  },
+  components: {
+    SearchBar,
+    ThemeSelector,
+    LayoutSelector,
+    ItemSizeSelector,
+    KeyboardShortcutInfo,
+  },
+  methods: {
+    userIsTypingSomething(something) {
+      this.$emit('user-is-searchin', something);
+    },
+    clearFilterInput() {
+      this.$refs.SearchBar.clearFilterInput();
+    },
+    updateDisplayLayout(layout) {
+      this.$emit('change-display-layout', layout);
+    },
+    updateIconSize(iconSize) {
+      this.$emit('change-icon-size', iconSize);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+  section {
+    display: flex;
+    align-items: center;
+    align-items: stretch;
+    background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
+  }
+  .options-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: flex-end;
+    flex: 1;
+    padding: 0 1rem;
+    border-radius: 20px 0 0;
+    background: var(--background);
+    div {
+      opacity: 0.85;
+      &:hover { opacity: 1; }
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    .options-container {
+      display: none;
+    }
+  }
+</style>

src/components/Settings/ThemeSelector.vue

@@ -54,7 +54,8 @@ export default {
   div.vs__dropdown-toggle {
     border-color: var(--primary);
     min-width: 10rem;
-    height: 2rem;
+    height: 1.8rem;
+    font-size: 0.85rem;
   }
   span.vs__selected, li.vs__dropdown-option {
     color: var(--primary);
@@ -78,15 +79,14 @@ export default {
 .theme-selector-section {
   display: flex;
   flex-direction: column;
-  opacity: 0.8;
+  align-items: flex-start;
+  height: 100%;
+  padding: 0 1rem;
   span.theme-label {
-    font-size: 0.8rem;
+    font-size: 1rem;
     color: var(--primary);
     margin: 1px 0 2px 0;
   }
-  &:hover {
-    opacity: 1;
-  }
 }
 
 </style>

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <!-- Search bar, layout options and settings -->
-    <FilterTile ref="filterComp"
+    <SettingsContainer ref="filterComp"
       @user-is-searchin="searching"
       @change-display-layout="setLayoutOrientation"
       :displayLayout="layout"
@@ -26,7 +26,7 @@
 
 <script>
 
-import FilterTile from '@/components/Settings/FilterTile.vue';
+import SettingsContainer from '@/components/Settings/SettingsContainer.vue';
 import ItemGroup from '@/components/LinkItems/ItemGroup.vue';
 
 export default {
@@ -36,7 +36,7 @@ export default {
     appConfig: Object, // Main site configuation (optional)
   },
   components: {
-    FilterTile,
+    SettingsContainer,
     ItemGroup,
   },
   data: () => ({
@@ -59,7 +59,7 @@ export default {
     },
     /* Updates local data with search value, triggered from filter comp */
     searching(searchValue) {
-      this.searchValue = searchValue;
+      this.searchValue = searchValue || '';
     },
     /* Clears input field, once a searched item is opened */
     finishedSearching() {