✨ Add a dropwdown menu for switching between views

src/components/Settings/ConfigLauncher.vue

@@ -1,10 +1,12 @@
 <template>
-  <div class="config-options">
+  <div class="config-options" v-click-outside="closeViewSwitcher">
     <!-- Button and label -->
-    <span>{{ $t('settings.config-launcher-label') }}</span>
+    <span class="config-label">{{ $t('settings.config-launcher-label') }}</span>
     <div class="config-buttons">
       <IconSpanner @click="showEditor()" tabindex="-2"
         v-tooltip="tooltip($t('settings.config-launcher-tooltip'))" />
+       <IconViewMode @click="openChangeViewMenu()" tabindex="-2"
+        v-tooltip="tooltip($t('settings.config-launcher-tooltip'))" />
     </div>
 
     <!-- Modal containing all the configuration options -->
@@ -19,27 +21,55 @@
       <LanguageSwitcher />
     </modal>
 
+    <!-- Menu for switching view -->
+    <div v-if="viewSwitcherOpen" class="view-switcher">
+      <ul>
+        <li>
+          <router-link to="/home">
+            <IconHome /><span>Default</span>
+          </router-link>
+        </li>
+        <li>
+          <router-link to="/minimal">
+            <IconMinimalView /><span>Minimal</span>
+          </router-link>
+        <li>
+          <router-link to="/workspace">
+            <IconWorkspaceView /><span>Workspace</span>
+          </router-link>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script>
 
-import IconSpanner from '@/assets/interface-icons/config-editor.svg';
 import ConfigContainer from '@/components/Configuration/ConfigContainer';
 import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
 import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
+import IconSpanner from '@/assets/interface-icons/config-editor.svg';
+import IconViewMode from '@/assets/interface-icons/application-change-view.svg';
+import IconHome from '@/assets/interface-icons/application-home.svg';
+import IconWorkspaceView from '@/assets/interface-icons/open-workspace.svg';
+import IconMinimalView from '@/assets/interface-icons/application-minimal.svg';
 
 export default {
   name: 'ConfigLauncher',
   data() {
     return {
       modalNames,
+      viewSwitcherOpen: false,
     };
   },
   components: {
-    IconSpanner,
     ConfigContainer,
     LanguageSwitcher,
+    IconSpanner,
+    IconViewMode,
+    IconHome,
+    IconWorkspaceView,
+    IconMinimalView,
   },
   props: {
     sections: Array,
@@ -48,7 +78,6 @@ export default {
   },
   methods: {
     showEditor: function show() {
-      // TODO: If users first time, then show note explaining that config is only stored locally
       this.$modal.show(modalNames.CONF_EDITOR);
       this.$emit('modalChanged', true);
     },
@@ -64,6 +93,12 @@ export default {
     tooltip(content) {
       return { content, trigger: 'hover focus', delay: 250 };
     },
+    openChangeViewMenu() {
+      this.viewSwitcherOpen = !this.viewSwitcherOpen;
+    },
+    closeViewSwitcher() {
+      this.viewSwitcherOpen = false;
+    },
   },
 };
 </script>
@@ -93,4 +128,38 @@ export default {
     }
   }
 }
+
+.view-switcher {
+  position: absolute;
+  right: 1rem;
+  margin-top: 3rem;
+  z-index: 5;
+  background: var(--background);
+  border: 1px solid var(--settings-text-color);
+  border-radius: var(--curve-factor);
+  box-shadow: var(--settings-container-shadow);
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    li {
+      cursor: pointer;
+      padding: 0.25rem 0.75rem;
+      a {
+        color: var(--settings-text-color);
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+      }
+      &:hover {
+        background: var(--settings-text-color);
+        a { color: var(--background); }
+      }
+      svg {
+        margin: 0 0.25rem 0 0;
+        border: none;
+      }
+    }
+  }
+}
 </style>

src/views/Minimal.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="minimal-home" :style="getBackgroundImage() + setColumnCount()">
+    <!-- Buttons for config and home page -->
+    <div class="minimal-buttons">
+      <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
+        @modalChanged="modalChanged" class="config-launcher" />
+    </div>
+    <!-- Page title and search bar -->
     <div class="title-and-search">
       <router-link to="/">
         <h1>{{ pageInfo.title }}</h1>
@@ -38,6 +44,7 @@
         {{searchValue ? $t('home.no-results') : $t('home.no-data')}}
       </div>
     </div>
+    <div v-else class="no-data"> {{ $t('home.no-data') }} </div>
   </div>
 </template>
 
@@ -48,6 +55,7 @@ import MinimalHeading from '@/components/MinimalView/MinimalHeading.vue';
 import MinimalSearch from '@/components/MinimalView/MinimalSearch.vue';
 import { GetTheme, ApplyLocalTheme, ApplyCustomVariables } from '@/utils/ThemeHelper';
 import Defaults, { localStorageKeys } from '@/utils/defaults';
+import ConfigLauncher from '@/components/Settings/ConfigLauncher';
 
 export default {
   name: 'home',
@@ -60,6 +68,7 @@ export default {
     MinimalSection,
     MinimalHeading,
     MinimalSearch,
+    ConfigLauncher,
   },
   data: () => ({
     searchValue: '',
@@ -178,6 +187,9 @@ export default {
         ApplyCustomVariables(this.theme);
       }
     },
+    modalChanged(modalState) {
+      this.modalOpen = modalState;
+    },
   },
   mounted() {
     this.initiateFontAwesome();
@@ -193,10 +205,10 @@ export default {
 .minimal-home {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   margin: 1rem auto;
   padding-bottom: 1px;
-  min-height: calc(99.9vh - var(--footer-height));
+  padding-top: 10vh;
+  min-height: calc(99vh - var(--footer-height));
   width: 90%;
   max-width: 1000px;
   background: var(--background);
@@ -232,6 +244,13 @@ export default {
   }
 }
 
+ @include phone {
+   .item-group-container {
+    display: flex;
+    flex-direction: column;
+   }
+}
+
 .no-data {
     font-size: 2rem;
     color: var(--background);
@@ -242,4 +261,28 @@ export default {
     border-radius: var(--curve-factor);
 }
 
+.minimal-buttons {
+    position: absolute;
+    top: 0.5rem;
+    right: 1rem;
+    display: flex;
+    .home-page-icon {
+      color: var(--primary);
+      width: 1.5rem;
+      height: 1.5rem;
+      @extend .svg-button;
+    }
+}
+</style>
+
+<style lang="scss">
+.minimal-home .minimal-buttons {
+  .config-launcher span.config-label { display: none; }
+  svg { opacity: var(--dimming-factor); border: none; }
+  &:hover svg { opacity: 1; }
+  .view-switcher {
+    margin-top: 2rem;
+    right: 0;
+  }
+}
 </style>