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

[REFACTOR] Minor Code Updates
Lissy93 · Nov 7, 2021 · 2543a89 · 2543a89
2 parents fe894ca + f9f147a
commit 2543a89
Show file tree

Hide file tree

Showing 15 changed files with 201 additions and 93 deletions.
diff --git a/docs/showcase.md b/docs/showcase.md
@@ -23,13 +23,11 @@
 
 ---
 
-### HomeLAb 3.0
-
-> By [@skoogee](https://github.com/skoogee) (http://zhrn.cc)
+### EVO Dashboard
 
-> 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.
+> By [@EVOTk](https://github.com/EVOTk)
 
-[![screenshot-12-skoogee-homelab-3](https://i.ibb.co/Sv7cxcg/12-skoogee-homelab-3.png)](https://ibb.co/album/ynSwzm)
+![screenshot-evo-dashboard](https://raw.githubusercontent.com/Lissy93/dashy/master/docs/showcase/12-evo-dashboard.png)
 
 ---
 
@@ -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://github.com/raw/Lissy93/dashy/master/docs/showcase/12-evo-dashboard.png)
-
----
-
 ## Submitting your Dashboard
 
 #### How to Submit

diff --git a/src/assets/locales/en.json b/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",

diff --git a/src/components/Configuration/AppInfoModal.vue b/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 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 licenses for third-party modules, please see <a href="https://github.com/Lissy93/dashy/blob/master/.github/LEGAL.md">Legal</a>.<br>
+      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;
-    margin: 0.5rem 0 0.2rem 0;
+    font-size: 1.2rem;
+    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>
diff --git a/src/components/Configuration/CloudBackupRestore.vue b/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 */

diff --git a/src/components/Configuration/ConfigContainer.vue b/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>

diff --git a/src/components/Configuration/CustomCss.vue b/src/components/Configuration/CustomCss.vue
@@ -1,33 +1,40 @@
 <template>
   <div class="css-editor-outer">
     <!-- Add raw custom CSS -->
-    <div class="css-wrapper">
-      <h2 class="css-input-title">Custom CSS</h2>
+    <div class="style-section css-wrapper">
+      <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">
         <b>{{ $t('config.css-note-label') }}:</b>
         {{ $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{
-  background: var(--config-settings-color);
-  color: var(--config-settings-background);
-  border: 1px solid var(--config-settings-background);
+button.save-button {
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+  border: 1px solid var(--config-settings-color);
   &:hover:not(:disabled) {
-    background: var(--config-settings-background);
-    color: var(--config-settings-color);
-    border-color: var(--config-settings-color);
+    background: var(--config-settings-color);
+    color: var(--config-settings-background);
   }
 }
 
@@ -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>
diff --git a/src/components/Configuration/JsonEditor.vue b/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  */