Implemented pre-loading external style functionality

src/components/FilterTile.vue

@@ -15,14 +15,19 @@
           @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 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 />
@@ -31,6 +36,7 @@
 
 <script>
 import KeyboardShortcutInfo from '@/components/KeyboardShortcutInfo';
+import ThemeSelector from '@/components/ThemeSelector';
 
 import IconDeafault from '@/assets/icons/layout-default.svg';
 import IconHorizontal from '@/assets/icons/layout-horizontal.svg';
@@ -45,9 +51,11 @@ export default {
   },
   props: {
     displayLayout: String,
+    availableThemes: Object,
   },
   components: {
     KeyboardShortcutInfo,
+    ThemeSelector,
     IconDeafault,
     IconHorizontal,
     IconVertical,
@@ -92,7 +100,7 @@ export default {
     display: flex;
     align-items: center;
     align-items: stretch;
-    background: linear-gradient(0deg, $background 0%, $header-color 100%);
+    background: linear-gradient(0deg, var(--background) 0%, $header-color 100%);
   }
   form {
     border-radius: 0 0 20px 0;
@@ -100,7 +108,7 @@ export default {
     background: $header-color;
     label {
         display: inline;
-        color: $ascent;
+        color: var(--primary);
         margin: 0.5rem;
         display: inline;
     }
@@ -112,8 +120,8 @@ export default {
       outline: none;
       border: none;
       border-radius: 12px;
-      background: $background;
-      color: $ascent;
+      background: var(--background);
+      color: var(--primary);
       &:focus {
         background: $bg-with-opacity;
       }
@@ -121,7 +129,7 @@ export default {
     .clear-search {
       position: absolute;
       margin: 1em 0 0 -2em;
-      color: $ascent;
+      color: var(--primary);
       opacity: 0.5;
       border-radius: 50px;
       cursor: pointer;
@@ -133,13 +141,13 @@ export default {
   }
   .options-container {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: flex-end;
     justify-content: flex-end;
     flex: 1;
     padding: 0 1rem;
     border-radius: 20px 0 0;
-    background: $background;
+    background: var(--background);
 
     span.options-label {
       font-size: 0.8rem;
@@ -148,6 +156,13 @@ export default {
       text-align: left;
     }
 
+    .theme-selector {
+      align-items: center;
+      display: flex;
+      height: 100%;
+      padding: 0 1rem;
+    }
+
     .display-options {
       color: $ascent-with-opacity;
       svg {
@@ -159,14 +174,14 @@ export default {
         margin: 0.2rem;
         padding: 0.2rem;
         text-align: center;
-        background: $background;
+        background: var(--background);
         border: 1px solid currentColor;
         border-radius: 4px;
         opacity: 0.8;
         cursor: pointer;
         &:hover, &.selected {
           background: $ascent-with-opacity;
-          path { fill: $background; }
+          path { fill: var(--background); }
         }
       }
     }

src/components/ThemeSelector.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="theme-selector-section" v-if="themes" >
+    <span class="theme-label">Themes</span>
+    <v-select :options="themeNames" v-model="selectedTheme" label="Theme" class="theme-dropdown" />
+  </div>
+</template>
+
+<script>
+
+import ThemeHelper from '@/utils/ThemeHelper';
+
+export default {
+  name: 'ThemeSelector',
+  props: {
+    themes: Object,
+  },
+  watch: {
+    selectedTheme(newTheme) {
+      this.themeHelper.theme = newTheme;
+    },
+  },
+  data() {
+    return {
+      selectedTheme: 'Default',
+      themeHelper: new ThemeHelper(),
+      loading: true,
+    };
+  },
+  computed: {
+    themeNames: function themeNames() { return Object.keys(this.themes); },
+  },
+  created() {
+    const added = Object.keys(this.themes).map(
+      name => this.themeHelper.add(name, this.themes[name]),
+    );
+    Promise.all(added).then(sheets => {
+      console.log(`${sheets.length} themes loaded`);
+      this.loading = false;
+      this.themeHelper.theme = 'Deafault';
+    });
+  },
+};
+</script>
+
+<style lang="scss">
+
+@import '../../src/styles/color-pallet.scss';
+@import 'vue-select/src/scss/vue-select.scss';
+
+.theme-dropdown {
+  div.vs__dropdown-toggle {
+    border-color: var(--primary);
+    min-width: 10rem;
+    height: 2rem;
+  }
+  span.vs__selected, li.vs__dropdown-option {
+    color: var(--primary);
+  }
+  button.vs__clear, svg.vs__open-indicator {
+    fill: var(--primary);
+  }
+  ul.vs__dropdown-menu {
+    width: auto;
+    background: var(--background);
+  }
+  li.vs__dropdown-option--highlight {
+    background: var(--primary);
+    color: var(--background);
+  }
+}
+
+.theme-selector-section {
+  display: flex;
+  flex-direction: column;
+  opacity: 0.8;
+  span.theme-label {
+    font-size: 0.8rem;
+    color: var(--primary);
+    margin: 1px 0 2px 0;
+  }
+  &:hover {
+    opacity: 1;
+  }
+}
+
+</style>