🔀 Merge pull request #322 from Lissy93/REFACTOR/some-updates

[REFACTOR] Minor Code Updates

docs/showcase.md

@@ -23,13 +23,11 @@
 
 ---
 
-### HomeLAb 3.0
+### EVO Dashboard
 
-> By [@skoogee](https://github.com/skoogee) (http://zhrn.cc)
+> By [@EVOTk](https://github.com/EVOTk)
 
-> Dashy, is the most complete dashboard I ever tried, has all the features, and it sets itself apart from the rest. It is my default homepage now. I am thankful to the developer @Lissy93 for sharing such a wonderful creation.
+![screenshot-evo-dashboard](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/12-evo-dashboard.png)
-
-[![screenshot-12-skoogee-homelab-3](https://i.ibb.co/Sv7cxcg/12-skoogee-homelab-3.png)](https://ibb.co/album/ynSwzm)
 
 ---
 
@@ -80,6 +78,16 @@
 
 ---
 
+### HomeLAb 3.0
+
+> By [@skoogee](https://github.com/skoogee) (http://zhrn.cc)
+
+> Dashy, is the most complete dashboard I ever tried, has all the features, and it sets itself apart from the rest. It is my default homepage now. I am thankful to the developer @Lissy93 for sharing such a wonderful creation.
+
+[![screenshot-12-skoogee-homelab-3](https://i.ibb.co/F5yBTsT/12-skoogee-homelab-3.png)](https://ibb.co/album/ynSwzm)
+
+---
+
 ### Ground Control
 > By [@dtctek](https://github.com/dtctek)
 
@@ -93,14 +101,6 @@
 
 ---
 
-### EVO Dashboard
-
-> By [@EVOTk](https://github.com/EVOTk)
-
-![screenshot-evo-dashboard](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/12-evo-dashboard.png)
-
----
-
 ## Submitting your Dashboard
 
 #### How to Submit

src/assets/locales/en.json

@@ -210,6 +210,10 @@
       "save-disk-tooltip": "Save config to the conf.yml file on disk. This will backup, and then over-write your existing config",
       "export-config-btn": "Export Config",
       "export-config-tooltip": "View and export new config, either to a file, or to clipboard",
+      "cloud-backup-btn": "Backup to Cloud",
+      "cloud-backup-tooltip": "Save encrypted backup of configuration to cloud",
+      "edit-raw-config-btn": "Edit Raw Config",
+      "edit-raw-config-tooltip": "View and modify raw config via JSON editor",
       "cancel-changes-btn": "Cancel Edit",
       "cancel-changes-tooltip": "Reset current modifications, and exit Edit Mode. This will not affect your saved config",
       "edit-mode-name": "Edit Mode",

src/components/Configuration/AppInfoModal.vue

@@ -10,20 +10,18 @@
       <!-- Help Links -->
       <h3>Help & Support</h3>
       For getting support with running or configuring Dashy, see the <a href="https://github.com/Lissy93/dashy/discussions">Discussions</a>
-      <h3>Report a Bug</h3>
-      If you think you've found a bug, then please <a href="https://github.com/Lissy93/dashy/issues/new/choose">raise it on GitHub</a>.
-      <br>Include version you are running, environment info, output of the console (press F12),
-      and any suppoting scerenshots.
       <h3>Supporting Dashy</h3>
       For ways that you can get involved, check out the <a href="https://github.com/Lissy93/dashy/blob/master/docs/contributing.md">Contributing</a> page.
+      <h3>Report a Bug</h3>
+      If you think you've found a bug, then please <a href="https://github.com/Lissy93/dashy/issues/new/choose">raise an Issue</a>.
       <h3>More Info</h3>
       Source: <a href="https://github.com/lissy93/dashy">github.com/lissy93/dashy</a><br>
       Documentation: <a href="https://dashy.to/docs">dashy.to/docs</a>
       <!-- License -->
       <h3>License</h3>
       Licensed under MIT X11. Copyright <a href="https://aliciasykes.com">Alicia Sykes</a> © 2021.<br>
-      For licenses for third-party modules, please see <a href="https://github.com/Lissy93/dashy/blob/master/.github/LEGAL.md">Legal</a>.
+      For licenses for third-party modules, please see <a href="https://github.com/Lissy93/dashy/blob/master/.github/LEGAL.md">Legal</a>.<br>
-      For a list of contributors, and application thank-you's, see <a href="https://github.com/Lissy93/dashy/blob/master/docs/credits.md">Credits</a>
+      For the full list of contributors and thanks, see <a href="https://github.com/Lissy93/dashy/blob/master/docs/credits.md">Credits</a>.
       <!-- App Version -->
       <h3>Version</h3>
       <AppVersion class="app-version" />
@@ -80,8 +78,8 @@ div.about-modal {
     }
   }
   h3 {
-    font-size: 1rem;
+    font-size: 1.2rem;
-    margin: 0.5rem 0 0.2rem 0;
+    margin: 0.75rem 0 0.2rem 0;
     color: var(--about-page-accent);
   }
   a {
@@ -108,3 +106,14 @@ div.about-modal {
 }
 
 </style>
+
+<style lang="scss">
+div.about-modal {
+  .app-version {
+    text-align: left;
+    display: flex;
+    align-items: self-end;
+    p { margin: 0; }
+  }
+}
+</style>

src/components/Configuration/CloudBackupRestore.vue

@@ -68,7 +68,7 @@ import Input from '@/components/FormElements/Input';
 import StoreKeys from '@/utils/StoreMutations';
 import { backup, update, restore } from '@/utils/CloudBackup';
 import { localStorageKeys } from '@/utils/defaults';
-import { InfoHandler, WarningInfoHandler } from '@/utils/ErrorHandler';
+import { InfoHandler, WarningInfoHandler, InfoKeys } from '@/utils/ErrorHandler';
 // Import Icons
 import IconBackup from '@/assets/interface-icons/config-backup.svg';
 import IconRestore from '@/assets/interface-icons/config-restore.svg';
@@ -179,12 +179,12 @@ export default {
     },
     /* If the server returns a warning, then show to user and log it */
     showErrorMsg(errorMsg) {
-      WarningInfoHandler(errorMsg, 'Cloud Backup');
+      WarningInfoHandler(errorMsg, InfoKeys.CLOUD_BACKUP);
       this.$toasted.show(errorMsg, { className: 'toast-error' });
     },
     /* When server returns success message, then show to user and log it */
     showSuccessMsg(msg) {
-      InfoHandler(msg, 'Cloud Backup');
+      InfoHandler(msg, InfoKeys.CLOUD_BACKUP);
       this.$toasted.show(msg, { className: 'toast-success' });
     },
     /* Call to hash function, to hash the users chosen/ entered password */

src/components/Configuration/ConfigContainer.vue

@@ -14,6 +14,10 @@
             <EditIcon class="button-icon"/>
             {{ $t('config.edit-config-button') }}
           </button>
+          <button class="config-button center" @click="openLanguageSwitchModal()">
+            <LanguageIcon class="button-icon"/>
+            {{ $t('config.change-language-button') }}
+          </button>
           <button class="config-button center" @click="() => navigateToTab(3)">
             <CustomCssIcon class="button-icon"/>
             {{ $t('config.edit-css-button') }}
@@ -22,10 +26,6 @@
             <CloudIcon class="button-icon"/>
             {{backupId ? $t('config.edit-cloud-sync-button') : $t('config.cloud-sync-button') }}
           </button>
-          <button class="config-button center" @click="openLanguageSwitchModal()">
-            <LanguageIcon class="button-icon"/>
-            {{ $t('config.change-language-button') }}
-          </button>
           <button class="config-button center" @click="openRebuildAppModal()">
             <RebuildIcon class="button-icon"/>
             {{ $t('config.rebuild-app-button') }}
@@ -153,6 +153,16 @@ export default {
       const lang = getUsersLanguage();
       return lang ? `${lang.flag} ${lang.name}` : '';
     },
+    /* If launching menu from editor, navigate to correct starting tab */
+    navigateToStartingTab() {
+      const navToTab = this.$store.state.navigateConfToTab;
+      const isValidTabIndex = (indx) => typeof indx === 'number' && indx >= 0 && indx <= 5;
+      if (navToTab && isValidTabIndex(navToTab)) this.navigateToTab(navToTab);
+      this.$store.commit(StoreKeys.CONF_MENU_INDEX, undefined);
+    },
+  },
+  mounted() {
+    this.navigateToStartingTab();
   },
 };
 </script>

src/components/Configuration/CustomCss.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="css-editor-outer">
     <!-- Add raw custom CSS -->
-    <div class="css-wrapper">
+    <div class="style-section css-wrapper">
-      <h2 class="css-input-title">Custom CSS</h2>
+      <h3>Custom CSS</h3>
       <textarea class="css-editor" v-model="customCss" />
       <Button class="save-button" :click="save">{{ $t('config.css-save-btn') }}</Button>
       <p class="quick-note">
@@ -10,24 +10,31 @@
         {{ $t('config.css-note-l1') }} {{ $t('config.css-note-l2') }} {{ $t('config.css-note-l3') }}
       </p>
     </div>
-
+    <!-- Theme Selector -->
+    <div class="style-section base-theme-wrapper">
+      <h3>Base Theme</h3>
+      <ThemeSelector :hidePallete="true" />
+    </div>
     <!-- UI color configurator -->
-    <CustomThemeMaker :themeToEdit="currentTheme" class="color-config" />
+    <div class="style-section">
+      <CustomThemeMaker :themeToEdit="currentTheme" class="color-config" />
+    </div>
   </div>
 </template>
 
 <script>
 
 import CustomThemeMaker from '@/components/Settings/CustomThemeMaker';
+import ThemeSelector from '@/components/Settings/ThemeSelector';
 import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
-import { InfoHandler } from '@/utils/ErrorHandler';
 import { localStorageKeys, theme as defaultTheme } from '@/utils/defaults';
 
 export default {
   name: 'StyleEditor',
   components: {
     Button,
+    ThemeSelector,
     CustomThemeMaker,
   },
   computed: {
@@ -77,7 +84,6 @@ export default {
     /* Show success toast and lot update */
     showSuccessMsg() {
       this.$toasted.show('Changes saved successfully');
-      InfoHandler('User syles has been saved', 'Custom CSS');
     },
   },
 };
@@ -92,24 +98,29 @@ div.css-editor-outer {
   display: flex;
   flex-direction: column;
 
+  .style-section {
+    padding: 1rem;
+    &:not(:last-child) { border-bottom: 1px dashed var(--config-settings-color); }
+    h3 {
+      font-size: 1.4rem;
+      margin: 0.5rem 0 0.2rem;
+    }
+  }
+
   div.css-wrapper {
     display: flex;
     flex-direction: column;
   }
-  h2.css-input-title {
-    margin: 0.5rem 0 0.2rem;
-  }
 }
 
 // Save button
-button.save-button{
+button.save-button {
-  background: var(--config-settings-color);
+  background: var(--config-settings-background);
-  color: var(--config-settings-background);
+  color: var(--config-settings-color);
-  border: 1px solid var(--config-settings-background);
+  border: 1px solid var(--config-settings-color);
   &:hover:not(:disabled) {
-    background: var(--config-settings-background);
+    background: var(--config-settings-color);
-    color: var(--config-settings-color);
+    color: var(--config-settings-background);
-    border-color: var(--config-settings-color);
   }
 }
 
@@ -143,14 +154,38 @@ p.quick-note {
   border-radius: var(--curve-factor);
 }
 
+// Base Theme Selector
+.base-theme-wrapper {
+  span.theme-label {
+    display: none;
+  }
+  div.vs__dropdown-toggle {
+    border-color: var(--config-settings-color);
+    min-width: 16rem;
+    max-width: 32rem;
+    height: 2.4rem;
+    font-size: 1rem;
+    margin: 0.5rem;
+  }
+  ul.vs__dropdown-menu {
+    min-width: 16rem;
+    max-width: 32rem;
+    background: var(--config-settings-background);
+    border-top: 1px solid var(--config-settings-color);
+  }
+  li.vs__dropdown-option--highlight {
+    background: var(--config-settings-color);
+    color: var(--config-settings-background);
+  }
+}
+
 // Theme editor
 .color-config.theme-configurator-wrapper {
-  border: 1px solid var(--config-settings-color);
   background: var(--config-settings-background);
   color: var(--config-settings-color);
   position: relative;
   width: 80%;
-  max-width: 24rem;
+  max-width: 32rem;
   margin: 1rem auto;
   box-shadow: none;
   right: 0;
@@ -160,6 +195,12 @@ p.quick-note {
     text-align: left;
     max-height: unset;
   }
+  .misc-input {
+    width: 6rem;
+  }
+  .misc-input.long-input {
+    width: 18rem;
+  }
 }
 
 </style>

src/components/Configuration/JsonEditor.vue

@@ -54,7 +54,7 @@ import axios from 'axios';
 import ProgressBar from 'rsup-progress';
 import VJsoneditor from 'v-jsoneditor';
 import jsYaml from 'js-yaml';
-import ErrorHandler, { InfoHandler } from '@/utils/ErrorHandler';
+import ErrorHandler, { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
 import configSchema from '@/utils/ConfigSchema.json';
 import StoreKeys from '@/utils/StoreMutations';
 import { localStorageKeys, serviceEndpoints, modalNames } from '@/utils/defaults';
@@ -122,7 +122,7 @@ export default {
     },
     /* Applies changes to the local state, begins edit mode and closes modal */
     startPreview() {
-      InfoHandler('Applying changes to local state...', 'Config Update');
+      InfoHandler('Applying changes to local state...', InfoKeys.RAW_EDITOR);
       const data = this.jsonData;
       this.$store.commit(StoreKeys.SET_APP_CONFIG, data.appConfig);
       this.$store.commit(StoreKeys.SET_PAGE_INFO, data.pageInfo);
@@ -152,7 +152,7 @@ export default {
         } else {
           this.showToast(this.$t('config-editor.error-msg-cannot-save'), false);
         }
-        InfoHandler('Config has been written to disk succesfully', 'Config Update');
+        InfoHandler('Config has been written to disk succesfully', InfoKeys.RAW_EDITOR);
         this.$store.commit(StoreKeys.SET_CONFIG, this.jsonData);
         this.progress.end();
       })
@@ -180,7 +180,7 @@ export default {
       if (data.appConfig.theme) {
         localStorage.setItem(localStorageKeys.THEME, data.appConfig.theme);
       }
-      InfoHandler('Config has succesfully been saved in browser storage', 'Config Update');
+      InfoHandler('Config has succesfully been saved in browser storage', InfoKeys.RAW_EDITOR);
       this.showToast(this.$t('config-editor.success-msg-local'), true);
     },
     /* Clears config from browser storage, only removing relevant items  */

src/components/InteractiveEditor/EditModeSaveMenu.vue

@@ -15,20 +15,6 @@
       <p class="section-sub-title">
         {{ $t('interactive-editor.menu.config-save-methods-subheading') }}
       </p>
-      <Button
-        :click="openExportConfigMenu"
-        v-tooltip="tooltip($t('interactive-editor.menu.export-config-tooltip'))"
-      >
-        {{ $t('interactive-editor.menu.export-config-btn') }}
-        <ExportIcon />
-      </Button>
-      <Button
-        :click="reset"
-        v-tooltip="tooltip($t('interactive-editor.menu.cancel-changes-tooltip'))"
-      >
-        {{ $t('interactive-editor.menu.cancel-changes-btn') }}
-        <CancelIcon />
-      </Button>
       <Button
         :click="saveLocally"
         v-tooltip="tooltip($t('interactive-editor.menu.save-locally-tooltip'))"
@@ -43,6 +29,34 @@
         {{ $t('interactive-editor.menu.save-disk-btn') }}
         <SaveToDiskIcon />
       </Button>
+      <Button
+        :click="openExportConfigMenu"
+        v-tooltip="tooltip($t('interactive-editor.menu.export-config-tooltip'))"
+      >
+        {{ $t('interactive-editor.menu.export-config-btn') }}
+        <ExportIcon />
+      </Button>
+      <Button
+        :click="openCloudBackupMenu"
+        v-tooltip="tooltip($t('interactive-editor.menu.cloud-backup-tooltip'))"
+      >
+        {{ $t('interactive-editor.menu.cloud-backup-btn') }}
+        <CloudBackupIcon />
+      </Button>
+      <Button
+        :click="openRawConfigEditor"
+        v-tooltip="tooltip($t('interactive-editor.menu.edit-raw-config-tooltip'))"
+      >
+        {{ $t('interactive-editor.menu.edit-raw-config-btn') }}
+        <EditRawIcon />
+      </Button>
+      <Button
+        :click="reset"
+        v-tooltip="tooltip($t('interactive-editor.menu.cancel-changes-tooltip'))"
+      >
+        {{ $t('interactive-editor.menu.cancel-changes-btn') }}
+        <CancelIcon />
+      </Button>
     </div>
     <!-- Open Modal Buttons -->
     <div class="edit-banner-section edit-site-config-buttons">
@@ -88,6 +102,8 @@ import ExportIcon from '@/assets/interface-icons/interactive-editor-export-chang
 import CancelIcon from '@/assets/interface-icons/interactive-editor-cancel-changes.svg';
 import AppConfigIcon from '@/assets/interface-icons/interactive-editor-app-config.svg';
 import PageInfoIcon from '@/assets/interface-icons/interactive-editor-page-info.svg';
+import CloudBackupIcon from '@/assets/interface-icons/cloud-backup-restore.svg';
+import EditRawIcon from '@/assets/interface-icons/config-edit-json.svg';
 
 export default {
   name: 'EditModeSaveMenu',
@@ -101,6 +117,8 @@ export default {
     AppConfigIcon,
     PageInfoIcon,
     EditAppConfig,
+    CloudBackupIcon,
+    EditRawIcon,
   },
   computed: {
     config() {
@@ -131,6 +149,16 @@ export default {
       this.$modal.show(modalNames.EDIT_APP_CONFIG);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
     },
+    openCloudBackupMenu() {
+      this.$store.commit(StoreKeys.CONF_MENU_INDEX, 2);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+      this.$modal.show(modalNames.CONF_EDITOR);
+    },
+    openRawConfigEditor() {
+      this.$store.commit(StoreKeys.CONF_MENU_INDEX, 1);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+      this.$modal.show(modalNames.CONF_EDITOR);
+    },
     tooltip(content) {
       return { content, trigger: 'hover focus', delay: 250 };
     },

src/components/InteractiveEditor/ExportConfigMenu.vue

@@ -36,7 +36,7 @@ import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
 import DownloadConfigIcon from '@/assets/interface-icons/config-download-file.svg';
 import CopyConfigIcon from '@/assets/interface-icons/interactive-editor-copy-clipboard.svg';
-import { InfoHandler } from '@/utils/ErrorHandler';
+import { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
 
 export default {
   name: 'ExportConfigMenu',
@@ -70,13 +70,13 @@ export default {
       document.body.appendChild(element);
       element.click();
       document.body.removeChild(element);
-      InfoHandler('Config downloaded as YAML file', 'Interactive Editor');
+      InfoHandler('Config downloaded as YAML file', InfoKeys.EDITOR);
     },
     copyConfigToClipboard() {
       const config = this.convertJsonToYaml();
       navigator.clipboard.writeText(config);
       this.$toasted.show(this.$t('config.data-copied-msg'));
-      InfoHandler('Config copied to clipboard', 'Interactive Editor');
+      InfoHandler('Config copied to clipboard', InfoKeys.EDITOR);
     },
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);

src/components/Settings/ThemeSelector.vue

@@ -12,6 +12,7 @@
     />
     </div>
     <IconPalette
+      v-if="!hidePallete"
       class="color-button"
       @click="openThemeConfigurator"
       v-tooltip="$t('theme-maker.title')"
@@ -38,6 +39,9 @@ import IconPalette from '@/assets/interface-icons/config-color-palette.svg';
 
 export default {
   name: 'ThemeSelector',
+  props: {
+    hidePallete: Boolean,
+  },
   components: {
     CustomThemeMaker,
     IconPalette,

src/store.js

@@ -31,17 +31,15 @@ const {
   REMOVE_ITEM,
   INSERT_ITEM,
   UPDATE_CUSTOM_CSS,
+  CONF_MENU_INDEX,
 } = Keys;
 
-const editorLog = (logMessage) => {
-  InfoHandler(logMessage, InfoKeys.EDITOR);
-};
-
 const store = new Vuex.Store({
   state: {
     config: {},
     editMode: false, // While true, the user can drag and edit items + sections
     modalOpen: false, // KB shortcut functionality will be disabled when modal is open
+    navigateConfToTab: undefined, // Used to switch active tab in config modal
   },
   getters: {
     config(state) {
@@ -107,7 +105,7 @@ const store = new Vuex.Store({
     },
     [SET_EDIT_MODE](state, editMode) {
       if (editMode !== state.editMode) {
-        editorLog(editMode ? 'Edit session started' : 'Edit session ended');
+        InfoHandler(editMode ? 'Edit session started' : 'Edit session ended', InfoKeys.EDITOR);
         state.editMode = editMode;
       }
     },
@@ -118,7 +116,7 @@ const store = new Vuex.Store({
         section.items.forEach((item, itemIndex) => {
           if (item.id === itemId) {
             newConfig.sections[secIndex].items[itemIndex] = newItem;
-            editorLog('Item updated');
+            InfoHandler('Item updated', InfoKeys.EDITOR);
           }
         });
       });
@@ -128,40 +126,40 @@ const store = new Vuex.Store({
       const newConfig = state.config;
       newConfig.pageInfo = newPageInfo;
       state.config = newConfig;
-      editorLog('Page info updated');
+      InfoHandler('Page info updated', InfoKeys.EDITOR);
     },
     [SET_APP_CONFIG](state, newAppConfig) {
       const newConfig = state.config;
       newConfig.appConfig = newAppConfig;
       state.config = newConfig;
-      editorLog('App config updated');
+      InfoHandler('App config updated', InfoKeys.EDITOR);
     },
     [SET_SECTIONS](state, newSections) {
       const newConfig = state.config;
       newConfig.sections = newSections;
       state.config = newConfig;
-      editorLog('Sections updated');
+      InfoHandler('Sections updated', InfoKeys.EDITOR);
     },
     [UPDATE_SECTION](state, payload) {
       const { sectionIndex, sectionData } = payload;
       const newConfig = { ...state.config };
       newConfig.sections[sectionIndex] = sectionData;
       state.config = newConfig;
-      editorLog('Section updated');
+      InfoHandler('Section updated', InfoKeys.EDITOR);
     },
     [INSERT_SECTION](state, newSection) {
       const newConfig = { ...state.config };
       newSection.items = [];
       newConfig.sections.push(newSection);
       state.config = newConfig;
-      editorLog('New section added');
+      InfoHandler('New section added', InfoKeys.EDITOR);
     },
     [REMOVE_SECTION](state, payload) {
       const { sectionIndex, sectionName } = payload;
       const newConfig = { ...state.config };
       if (newConfig.sections[sectionIndex].name === sectionName) {
         newConfig.sections.splice(sectionIndex, 1);
-        editorLog('Section removed');
+        InfoHandler('Section removed', InfoKeys.EDITOR);
       }
       state.config = newConfig;
     },
@@ -171,7 +169,7 @@ const store = new Vuex.Store({
       config.sections.forEach((section) => {
         if (section.name === targetSection) {
           section.items.push(newItem);
-          editorLog('New item added');
+          InfoHandler('New item added', InfoKeys.EDITOR);
         }
       });
       config.sections = applyItemId(config.sections);
@@ -188,7 +186,7 @@ const store = new Vuex.Store({
           } else {
             section.items.push(newItem);
           }
-          editorLog('Item copied');
+          InfoHandler('Item copied', InfoKeys.EDITOR);
         }
       });
       config.sections = applyItemId(config.sections);
@@ -202,7 +200,7 @@ const store = new Vuex.Store({
           section.items.forEach((item, index) => {
             if (item.id === itemId) {
               section.items.splice(index, 1);
-              editorLog('Item removed');
+              InfoHandler('Item removed', InfoKeys.EDITOR);
             }
           });
         }
@@ -233,6 +231,9 @@ const store = new Vuex.Store({
       state.config.appConfig.customCss = customCss;
       InfoHandler('Custom colors updated', InfoKeys.VISUAL);
     },
+    [CONF_MENU_INDEX](state, index) {
+      state.navigateConfToTab = index;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */

src/styles/color-themes.scss

@@ -988,25 +988,32 @@ html[data-theme="oblivion-scotch"] {
 }
 
 html[data-theme="dashy-docs"] {
+  // Base
   --primary: #f5f6f7;
   --background: #202020;
   --background-darker: #121212;
+  // Items
+  --item-background: var(--background);
+  --item-background-hover: var(--background);
+  --item-text-color: var(--primary);
+  // Sections
   --item-group-background: none;
   --item-group-outer-background: var(--background-darker);
   --item-group-heading-text-color: var(--background);
   --item-group-heading-text-color-hover: var(--background);
-  --item-background: var(--background);
+  // Misc
-  --item-background-hover: var(--background);
-  --item-text-color: var(--primary);
-  --minimal-view-section-heading-color: var(--background);
   --item-group-padding: 0;
   --curve-factor: 3px;
   --curve-factor-navbar: 6px;
   --item-shadow: 4px 4px 6px #00000080, -2px -2px 4px rgb(0 0 0 / 40%);
   --item-group-shadow: 0px 3px 2px #222222, 0px 0px 2px #3e3e3e;
   --font-headings: 'PTMono', 'Courier New', monospace;
+  --minimal-view-section-heading-color: var(--background);
+  // Navbar Links
   --nav-link-background-color-hover: none;
   --nav-link-border-color-hover: none;
+  --nav-link-text-color: var(--background);
+  --nav-link-text-color-hover: var(--background-darker);
 
   footer {
     box-shadow: 0 -3px 4px #010101;
@@ -1095,10 +1102,10 @@ html[data-theme="dashy-docs"] {
       color: var(--background);
       font-weight: bold;
       svg path { fill: var(--background); }
-      &:nth-child(1n) { @include make-colors(#db78fc, #b83ddd); }
+      &:nth-child(4n + 1) { @include make-colors(#db78fc, #b83ddd); }
-      &:nth-child(2n) { @include make-colors(#41ef90, #1e9554); }
+      &:nth-child(4n + 2) { @include make-colors(#41ef90, #1e9554); }
-      &:nth-child(3n) { @include make-colors(#5c85f7, #3d48dd); }
+      &:nth-child(4n + 3) { @include make-colors(#5c85f7, #3d48dd); }
-      &:nth-child(4n) { @include make-colors(#dcff5a, #ceb73f); }
+      &:nth-child(4n + 4) { @include make-colors(#dcff5a, #ceb73f); }
     }
   }
   

src/utils/ErrorHandler.js

@@ -40,7 +40,10 @@ export const WarningInfoHandler = (msg, title, log) => {
 
 /* Titles for info logging */
 export const InfoKeys = {
+  AUTH: 'Authentication',
+  CLOUD_BACKUP: 'Cloud Backup & Restore',
   EDITOR: 'Interactive Editor',
+  RAW_EDITOR: 'Raw Config Editor',
   VISUAL: 'Layout & Styles',
 };
 

src/utils/StoreMutations.js

@@ -20,6 +20,7 @@ const KEY_NAMES = [
   'REMOVE_ITEM',
   'INSERT_ITEM',
   'UPDATE_CUSTOM_CSS',
+  'CONF_MENU_INDEX',
 ];
 
 // Convert array of key names into an object, and export

src/views/Login.vue

@@ -76,7 +76,7 @@ import router from '@/router';
 import Button from '@/components/FormElements/Button';
 import Input from '@/components/FormElements/Input';
 import Defaults, { localStorageKeys } from '@/utils/defaults';
-import { InfoHandler, WarningInfoHandler } from '@/utils/ErrorHandler';
+import { InfoHandler, WarningInfoHandler, InfoKeys } from '@/utils/ErrorHandler';
 import {
   checkCredentials,
   login,
@@ -158,9 +158,9 @@ export default {
       if (response.correct) { // Yay, credentials were correct :)
         login(this.username, this.password, timeout); // Login, to set the cookie
         this.goHome();
-        InfoHandler(`Succesfully signed in as ${this.username}`, 'Authentication');
+        InfoHandler(`Succesfully signed in as ${this.username}`, InfoKeys.AUTH);
       } else {
-        WarningInfoHandler('Unable to Sign In', 'Authentication', this.message);
+        WarningInfoHandler('Unable to Sign In', InfoKeys.AUTH, this.message);
       }
     },
     /* Calls function to double-check guest access enabled, then log in as guest */
@@ -168,11 +168,11 @@ export default {
       const isAllowed = this.isGuestAccessEnabled;
       if (isAllowed) {
         this.$toasted.show('Logged in as Guest, Redirecting...', { className: 'toast-success' });
-        InfoHandler('Logged in as Guest', 'Authentication');
+        InfoHandler('Logged in as Guest', InfoKeys.AUTH);
         this.goHome();
       } else {
         this.$toasted.show('Guest Access Not Allowed', { className: 'toast-error' });
-        WarningInfoHandler('Guest Access Not Allowed', 'Authentication');
+        WarningInfoHandler('Guest Access Not Allowed', InfoKeys.AUTH);
       }
     },
     /* Calls logout, shows status message, and refreshed page */