From 0b8b1fcf8a0364c3c16b7cb09236ced7a0802c6b Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Tue, 22 Jun 2021 22:30:46 +0100 Subject: [PATCH] :sparkles: Adds an App Info section, to help users raise bug for current version --- .../interface-icons/application-about.svg | 1 + src/components/Configuration/AppInfoModal.vue | 191 ++++++++++++++++++ .../Configuration/ConfigContainer.vue | 19 +- src/components/Settings/AppButtons.vue | 62 ++++++ src/components/Settings/SettingsContainer.vue | 14 +- src/main.js | 5 +- src/styles/color-palette.scss | 2 +- src/styles/color-themes.scss | 11 + src/utils/ConfigValidator.js | 7 + src/utils/defaults.js | 4 + 10 files changed, 305 insertions(+), 11 deletions(-) create mode 100644 src/assets/interface-icons/application-about.svg create mode 100644 src/components/Configuration/AppInfoModal.vue create mode 100644 src/components/Settings/AppButtons.vue diff --git a/src/assets/interface-icons/application-about.svg b/src/assets/interface-icons/application-about.svg new file mode 100644 index 00000000..09728dfa --- /dev/null +++ b/src/assets/interface-icons/application-about.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Configuration/AppInfoModal.vue b/src/components/Configuration/AppInfoModal.vue new file mode 100644 index 00000000..ab136e0b --- /dev/null +++ b/src/components/Configuration/AppInfoModal.vue @@ -0,0 +1,191 @@ + + + + + diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue index c6988483..634e9acf 100644 --- a/src/components/Configuration/ConfigContainer.vue +++ b/src/components/Configuration/ConfigContainer.vue @@ -29,9 +29,14 @@ Reset Local Settings + +

Dashy version {{ appVersion }}

It is recommend to make a backup of your conf.yml file, before making any changes. @@ -79,6 +84,7 @@ import EditIcon from '@/assets/interface-icons/config-edit-json.svg'; import CustomCssIcon from '@/assets/interface-icons/config-custom-css.svg'; import CloudIcon from '@/assets/interface-icons/cloud-backup-restore.svg'; import RebuildIcon from '@/assets/interface-icons/application-rebuild.svg'; +import IconAbout from '@/assets/interface-icons/application-about.svg'; export default { name: 'ConfigContainer', @@ -86,6 +92,7 @@ export default { return { jsonParser: JsonToYaml, backupId: localStorage[localStorageKeys.BACKUP_ID] || '', + appVersion: process.env.VUE_APP_VERSION, }; }, props: { @@ -109,6 +116,7 @@ export default { CloudIcon, CustomCssIcon, RebuildIcon, + IconAbout, }, methods: { /* Seletcs the edit tab of the tab view */ @@ -127,6 +135,9 @@ export default { openRebuildAppModal() { this.$modal.show(modalNames.REBUILD_APP); }, + openAboutModal() { + this.$modal.show(modalNames.ABOUT_APP); + }, openCloudSync() { this.$modal.show(modalNames.CLOUD_BACKUP); }, @@ -210,6 +221,12 @@ a.config-button, button.config-button { } } +p.app-version { + margin: 0.5rem auto; + font-size: 1rem; + color: var(--transparent-white-50); +} + div.code-container { background: var(--config-code-background); #conf-yaml span { @@ -275,7 +292,7 @@ a.hyperlink-wrapper { background: var(--config-settings-background); height: calc(100% - 2rem); h2 { - margin: 1rem auto; + margin: 0 auto 1rem auto; color: var(--config-settings-color); } } diff --git a/src/components/Settings/AppButtons.vue b/src/components/Settings/AppButtons.vue new file mode 100644 index 00000000..8425fefc --- /dev/null +++ b/src/components/Settings/AppButtons.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue index 2067716a..eec5583a 100644 --- a/src/components/Settings/SettingsContainer.vue +++ b/src/components/Settings/SettingsContainer.vue @@ -13,12 +13,7 @@ - +
+ @@ -39,9 +35,10 @@ import ConfigLauncher from '@/components/Settings/ConfigLauncher'; import ThemeSelector from '@/components/Settings/ThemeSelector'; import LayoutSelector from '@/components/Settings/LayoutSelector'; import ItemSizeSelector from '@/components/Settings/ItemSizeSelector'; +import AppButtons from '@/components/Settings/AppButtons'; import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo'; +import AppInfoModal from '@/components/Configuration/AppInfoModal'; import { logout as registerLogout } from '@/utils/Auth'; -import IconLogout from '@/assets/interface-icons/user-logout.svg'; import IconOpen from '@/assets/interface-icons/config-open-settings.svg'; import IconClose from '@/assets/interface-icons/config-close.svg'; @@ -62,8 +59,9 @@ export default { ThemeSelector, LayoutSelector, ItemSizeSelector, + AppButtons, KeyboardShortcutInfo, - IconLogout, + AppInfoModal, IconOpen, IconClose, }, diff --git a/src/main.js b/src/main.js index eea75224..c4e7361c 100644 --- a/src/main.js +++ b/src/main.js @@ -10,7 +10,7 @@ import Toasted from 'vue-toasted'; // Toast component, used to show confirmation import { toastedOptions } from './utils/defaults'; import Dashy from './App.vue'; import router from './router'; -import './registerServiceWorker'; +import registerServiceWorker from './registerServiceWorker'; Vue.use(VTooltip); Vue.use(VModal); @@ -20,6 +20,9 @@ Vue.component('v-select', VSelect); Vue.config.productionTip = false; +// Register Service Worker +registerServiceWorker(); + new Vue({ router, render: (awesome) => awesome(Dashy), diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss index 059ed77d..2acf6a25 100644 --- a/src/styles/color-palette.scss +++ b/src/styles/color-palette.scss @@ -69,7 +69,7 @@ --login-form-background: var(--background); --login-form-background-secondary: var(--background-darker); --about-page-color: var(--white); - --about-page-background: #0b1021; + --about-page-background: var(--background); --about-page-accent: var(--primary); --side-bar-background: var(--background-darker); --side-bar-background-lighter: var(--background); diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index 4a0bc6f3..28346eeb 100644 --- a/src/styles/color-themes.scss +++ b/src/styles/color-themes.scss @@ -87,6 +87,7 @@ html[data-theme='matrix'] { --curve-factor: 0px; --font-body: 'Cutive Mono', monospace; --font-headings: 'VT323', monospace; + --about-page-background: var(--background); .prism-editor-wrapper.my-editor { border: 1px solid var(--primary); } @@ -179,6 +180,9 @@ html[data-theme='material-original'] { --status-check-tooltip-background: #f2f2f2; --status-check-tooltip-color: #01579b; --login-form-background: #fff; + --about-page-accent: #000; + --about-page-color: var(--background-darker); + --about-page-background: var(--background); } html[data-theme='material-dark-original'] { @@ -254,6 +258,7 @@ html[data-theme='colorful'] { html[data-theme='minimal-light'], html[data-theme='minimal-dark'], html[data-theme='vaporware'] { --font-body: 'PTMono-Regular', 'Courier New', monospace; --font-headings: 'PTMono-Regular', 'Courier New', monospace; + label.lbl-toggle h3 { font-size: 1.8rem; } @@ -289,6 +294,8 @@ html[data-theme='material'], html[data-theme='material-dark'] { --font-headings: 'Francois One', serif; --curve-factor: 4px; --curve-factor-navbar: 8px; + --about-page-background: var(--background); + --about-page-color: var(--primary); .collapsable { margin: 0; @@ -541,6 +548,8 @@ html[data-theme='minimal-light'] { --status-check-tooltip-background: #f2f2f2; --status-check-tooltip-color: #000; --login-form-color: #101931; + --about-page-background: var(--background); + --about-page-color: var(--background-darker); section.filter-container { background: #fff; @@ -572,6 +581,8 @@ html[data-theme='minimal-dark'] { --curve-factor-navbar: 8px; --item-group-heading-text-color: #fff; --item-group-heading-text-color-hover: #ffffffbf; + --about-page-background: var(--background); + --about-page-color: var(--primary); label.lbl-toggle h3 { font-size: 1.8rem; diff --git a/src/utils/ConfigValidator.js b/src/utils/ConfigValidator.js index 41fd903b..5f9bfdb6 100644 --- a/src/utils/ConfigValidator.js +++ b/src/utils/ConfigValidator.js @@ -38,13 +38,19 @@ const bigError = () => { return `\n${line}${msg}${line}\n`; }; +const setIsValidVariable = (isValid) => { + process.env.VUE_APP_CONFIG_VALID = isValid; +}; + /* Start the validation */ const validate = (config) => { console.log('\nChecking config file against schema...'); const valid = ajv.validate(schema, config); if (valid) { + setIsValidVariable(true); console.log(successMsg()); } else { + setIsValidVariable(false); console.log(errorMsg(ajv.errors)); } }; @@ -53,6 +59,7 @@ try { const config = yaml.load(fs.readFileSync('./public/conf.yml', 'utf8')); validate(config); } catch (e) { + setIsValidVariable(false); console.log(bigError()); console.log('Please ensure that your config file is present, ' + 'has the correct access rights and is parsable. ' diff --git a/src/utils/defaults.js b/src/utils/defaults.js index e8a105ab..370d8971 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -61,10 +61,14 @@ module.exports = { cookieKeys: { AUTH_TOKEN: 'authenticationToken', }, + sessionStorageKeys: { + SW_STATUS: 'serviceWorkerStatus', + }, modalNames: { CONF_EDITOR: 'CONF_EDITOR', CLOUD_BACKUP: 'CLOUD_BACKUP', REBUILD_APP: 'REBUILD_APP', + ABOUT_APP: 'ABOUT_APP', }, topLevelConfKeys: { PAGE_INFO: 'pageInfo',