Refactored the Search functionality into its own component

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>