From c991a46298c0e1d3d2ca67e9d23e415b08e8bf09 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 7 Nov 2021 22:55:06 +0000 Subject: [PATCH] :recycle: Refactor key names to use contstants --- .../Configuration/CloudBackupRestore.vue | 6 ++--- .../InteractiveEditor/ExportConfigMenu.vue | 6 ++--- src/styles/color-themes.scss | 23 ++++++++++++------- src/utils/ErrorHandler.js | 2 ++ src/views/Login.vue | 10 ++++---- 5 files changed, 28 insertions(+), 19 deletions(-) diff --git a/src/components/Configuration/CloudBackupRestore.vue b/src/components/Configuration/CloudBackupRestore.vue index 7430229d..b2bd5db0 100644 --- 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/InteractiveEditor/ExportConfigMenu.vue b/src/components/InteractiveEditor/ExportConfigMenu.vue index 9737ed91..1032e8bb 100644 --- a/src/components/InteractiveEditor/ExportConfigMenu.vue +++ b/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); diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index 2f800cfc..c6220cf1 100644 --- a/src/styles/color-themes.scss +++ b/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); - --item-background-hover: var(--background); - --item-text-color: var(--primary); - --minimal-view-section-heading-color: var(--background); + // Misc --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(2n) { @include make-colors(#41ef90, #1e9554); } - &:nth-child(3n) { @include make-colors(#5c85f7, #3d48dd); } - &:nth-child(4n) { @include make-colors(#dcff5a, #ceb73f); } + &:nth-child(4n + 1) { @include make-colors(#db78fc, #b83ddd); } + &:nth-child(4n + 2) { @include make-colors(#41ef90, #1e9554); } + &:nth-child(4n + 3) { @include make-colors(#5c85f7, #3d48dd); } + &:nth-child(4n + 4) { @include make-colors(#dcff5a, #ceb73f); } } } diff --git a/src/utils/ErrorHandler.js b/src/utils/ErrorHandler.js index e690e79a..280c4a0a 100644 --- a/src/utils/ErrorHandler.js +++ b/src/utils/ErrorHandler.js @@ -40,6 +40,8 @@ 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', diff --git a/src/views/Login.vue b/src/views/Login.vue index cea52489..cfd4ec74 100644 --- a/src/views/Login.vue +++ b/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 */