Shows toast on success, and other UX improvments

README.md

@@ -164,13 +164,14 @@ There are a few self-hosted web apps, that serve a similar purpose to Dashy. Inc
 
 And the app itself is built with [Vue.js](https://github.com/vuejs/vue) ![vue-logo](https://i.ibb.co/xqKW6h5/vue-logo.png)
 
-It makes use of the following components, kudos to their respective authors
+And wouldn't have been quite possible, without the following components, kudos to their respective authors
 - [`vue-select`](https://github.com/sagalbot/vue-select) - Dropdown component by @sagalbot
 - [`vue-js-modal`](https://github.com/euvl/vue-js-modal) - Modal component by @euvl
 - [`v-tooltip`](https://github.com/Akryum/v-tooltip) - Tooltip component by @Akryum
 - [`vue-material-tabs`](https://github.com/jairoblatt/vue-material-tabs) - Tab view component by @jairoblatt
 - [`VJsoneditor`](https://github.com/yansenlei/VJsoneditor) - Interactive JSON editor component by @yansenlei
   - Forked from [JsonEditor](https://github.com/josdejong/jsoneditor) by @josdejong
+- [`vue-toasted`](https://github.com/shakee93/vue-toasted) - Toast notification component by @shakee93
 
 ### License 📜
 

package.json

@@ -19,7 +19,8 @@
     "vue-js-modal": "^2.0.0-rc.6",
     "vue-material-tabs": "^0.0.7",
     "vue-router": "^3.0.3",
-    "vue-select": "^3.11.2"
+    "vue-select": "^3.11.2",
+    "vue-toasted": "^1.1.28"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.12",

src/components/Configuration/ConfigContainer.vue

@@ -27,7 +27,7 @@
       <a class="download-button" href="/conf.yml" download>Download Config</a>
     </TabItem>
     <TabItem name="Add Item">
-      <AddItem :sections="sections" />
+      <EditSiteMeta :sections="sections" />
     </TabItem>
   </Tabs>
 </template>
@@ -35,7 +35,7 @@
 <script>
 
 import JsonToYaml from '@/utils/JsonToYaml';
-import AddItem from '@/components/Configuration/AddItem';
+import EditSiteMeta from '@/components/Configuration/EditSiteMeta';
 import JsonEditor from '@/components/Configuration/JsonEditor';
 import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
 import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
@@ -53,24 +53,32 @@ export default {
     config: Object,
   },
   components: {
-    AddItem,
+    EditSiteMeta,
     JsonEditor,
     DownloadIcon,
     DeleteIcon,
     EditIcon,
   },
   methods: {
+    /* Seletcs the edit tab of the tab view */
     goToEdit() {
       const itemToSelect = this.$refs.tabView.navItems[1];
       this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
     },
+    /* Checks that the user is sure, then resets site-wide local storage, and reloads page */
     resetLocalSettings() {
-      /* eslint-disable no-alert, no-restricted-globals */
-      const isTheUserSure = confirm('Are you sure?');
+      const msg = 'This will remove all user settings from local storage, '
+          + 'but won\'t effect your \'conf.yml\' file. '
+          + 'It is recommend to make a backup of your modified YAML settings first.\n\n'
+          + 'Are you sure you want to proceed?';
+      const isTheUserSure = confirm(msg); // eslint-disable-line no-alert, no-restricted-globals
       if (isTheUserSure) {
         localStorage.clear();
+        this.$toasted.show('Data cleared succesfully');
+        setTimeout(() => {
+          location.reload(); // eslint-disable-line no-restricted-globals
+        }, 1900);
       }
-      /* eslint-enable no-alert, no-restricted-globals */
     },
   },
 };
@@ -145,6 +153,7 @@ a.hyperlink-wrapper {
   height: calc(100% - 2rem);
   h2 {
     margin: 1rem auto;
+    color: var(--config-settings-color);
   }
 }
 

src/components/Configuration/EditSiteMeta.vue

@@ -7,7 +7,7 @@
 <script>
 
 export default {
-  name: 'AddItem',
+  name: 'EditSiteMeta',
   props: {
     sections: Array,
   },

src/components/Configuration/JsonEditor.vue

@@ -38,6 +38,7 @@ export default {
   methods: {
     save() {
       localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(this.jsonData));
+      this.$toasted.show('Changes seved succesfully');
     },
   },
 };
@@ -69,14 +70,14 @@ button.save-button {
 }
 
 .jsoneditor-menu {
-  background: var(--config-settings-color);
-  color: var(--config-settings-background);
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
 }
 .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
 .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
 .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
-  background: var(--config-settings-background);
-  color: var(--config-settings-color);
+  background: var(--config-settings-color);
+  color: var(--config-settings-background);
 }
 .jsoneditor-poweredBy {
   display: none;

src/main.js

@@ -4,7 +4,9 @@ import VTooltip from 'v-tooltip'; // A Vue directive for Popper.js, tooltip comp
 import VModal from 'vue-js-modal'; // Modal component
 import VSelect from 'vue-select'; // Select dropdown component
 import VTabs from 'vue-material-tabs'; // Tab view component, used on the config page
+import Toasted from 'vue-toasted'; // Toast component, used to show confirmation notifications
 
+import { toastedOptions } from './utils/defaults';
 import App from './App.vue';
 import router from './router';
 import './registerServiceWorker';
@@ -12,6 +14,7 @@ import './registerServiceWorker';
 Vue.use(VTooltip);
 Vue.use(VModal);
 Vue.use(VTabs);
+Vue.use(Toasted, toastedOptions);
 Vue.component('v-select', VSelect);
 
 Vue.config.productionTip = false;

src/styles/color-palette.scss

@@ -57,4 +57,6 @@
   --config-code-color: var(--background);
   --config-settings-color: var(--primary);
   --config-settings-background: var(--background-darker);
+  --toast-background: var(--primary);
+  --toast-color: var(--background);
 }

src/styles/color-themes.scss

@@ -176,6 +176,8 @@ html[data-theme='material-dark'] {
   --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
   --welcome-popup-background: #131a1f;
   --welcome-popup-text-color: var(--primary);
+  --config-settings-background: #131a1f;
+  --config-settings-color: #41e2ed;
 }
 
 html[data-theme='colorful'] {

src/styles/global-styles.scss

@@ -20,4 +20,13 @@ h1, h2, h3, h4, h5 {
     font-family: 'Inconsolata', sans-serif;
 }
 
+/* Overiding styles for the global toast component */
+.toast-message {
+    background: var(--toast-background) !important;
+    color: var(--toast-color) !important;
+    border: 1px solid var(--toast-color) !important;
+    border-radius: var(--curve-factor) !important;
+    font-size: 1.25rem !important;
+}
+
 

src/utils/defaults.js

@@ -51,4 +51,11 @@ module.exports = {
     APP_CONFIG: 'appConfig',
     SECTIONS: 'sections',
   },
+  toastedOptions: {
+    position: 'bottom-center',
+    duration: 2000,
+    keepOnHover: true,
+    className: 'toast-message',
+    iconPack: 'fontawesome',
+  },
 };

yarn.lock

@@ -8881,6 +8881,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-toasted@^1.1.28:
+  version "1.1.28"
+  resolved "https://registry.yarnpkg.com/vue-toasted/-/vue-toasted-1.1.28.tgz#dbabb83acc89f7a9e8765815e491d79f0dc65c26"
+  integrity sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw==
+
 vue@^2.6.10:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"