Adds more themes, adds ability to hide unneeded components

src/components/Settings/LayoutSelector.vue

@@ -2,8 +2,8 @@
   <div>
     <span class="options-label">Layout</span>
     <div class="display-options">
-      <IconDeafault @click="updateDisplayLayout('default')" v-tooltip="tooltip('Auto')"
-        :class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" tabindex="2" />
+      <IconDeafault @click="updateDisplayLayout('auto')" v-tooltip="tooltip('Auto')"
+        :class="`layout-icon ${displayLayout === 'auto' ? 'selected' : ''}`" tabindex="2" />
       <IconHorizontal @click="updateDisplayLayout('horizontal')" v-tooltip="tooltip('Horizontal')"
         :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" tabindex="2" />
       <IconVertical @click="updateDisplayLayout('vertical')" v-tooltip="tooltip('Vertical')"

src/components/Settings/SettingsContainer.vue

@@ -1,8 +1,9 @@
 <template>
   <section>
-    <SearchBar @user-is-searchin="userIsTypingSomething" ref="SearchBar" />
-    <div class="options-container">
-      <ThemeSelector :themes="availableThemes" :confTheme="getInitialTheme()"/>
+    <SearchBar @user-is-searchin="userIsTypingSomething" ref="SearchBar" v-if="searchVisible" />
+    <div class="options-container" v-if="settingsVisible">
+      <ThemeSelector :themes="availableThemes"
+        :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
       <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
       <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
     </div>
@@ -11,6 +12,7 @@
 </template>
 
 <script>
+import Defaults from '@/utils/defaults';
 import SearchBar from '@/components/Settings/SearchBar';
 import ThemeSelector from '@/components/Settings/ThemeSelector';
 import LayoutSelector from '@/components/Settings/LayoutSelector';
@@ -48,6 +50,15 @@ export default {
     getInitialTheme() {
       return this.appConfig.theme || '';
     },
+    getUserThemes() {
+      return this.appConfig.cssThemes || [];
+    },
+  },
+  data() {
+    return {
+      searchVisible: Defaults.visibleComponents.searchBar,
+      settingsVisible: Defaults.visibleComponents.settings,
+    };
   },
 };
 </script>

src/components/Settings/ThemeSelector.vue

@@ -20,6 +20,7 @@ export default {
   props: {
     themes: Object,
     confTheme: String,
+    userThemes: Array,
   },
   watch: {
     selectedTheme(newTheme) { this.updateTheme(newTheme); },
@@ -29,7 +30,7 @@ export default {
       selectedTheme: this.getInitialTheme(),
       themeHelper: new ThemeHelper(),
       loading: true,
-      builtInThemes: Defaults.builtInThemes,
+      builtInThemes: Defaults.builtInThemes.concat(this.userThemes),
     };
   },
   computed: {