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

[REFACTOR] Minor Code Updates
This commit is contained in:
Alicia Sykes 2021-11-07 23:20:02 +00:00 committed by GitHub
commit 2543a8993e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 203 additions and 95 deletions

View File

@ -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 ### Ground Control
> By [@dtctek](https://github.com/dtctek) > 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 ## Submitting your Dashboard
#### How to Submit #### How to Submit

View File

@ -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", "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-btn": "Export Config",
"export-config-tooltip": "View and export new config, either to a file, or to clipboard", "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-btn": "Cancel Edit",
"cancel-changes-tooltip": "Reset current modifications, and exit Edit Mode. This will not affect your saved config", "cancel-changes-tooltip": "Reset current modifications, and exit Edit Mode. This will not affect your saved config",
"edit-mode-name": "Edit Mode", "edit-mode-name": "Edit Mode",

View File

@ -10,20 +10,18 @@
<!-- Help Links --> <!-- Help Links -->
<h3>Help & Support</h3> <h3>Help & Support</h3>
For getting support with running or configuring Dashy, see the <a href="https://github.com/Lissy93/dashy/discussions">Discussions</a> 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> <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. 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> <h3>More Info</h3>
Source: <a href="https://github.com/lissy93/dashy">github.com/lissy93/dashy</a><br> 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> Documentation: <a href="https://dashy.to/docs">dashy.to/docs</a>
<!-- License --> <!-- License -->
<h3>License</h3> <h3>License</h3>
Licensed under MIT X11. Copyright <a href="https://aliciasykes.com">Alicia Sykes</a> © 2021.<br> 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 --> <!-- App Version -->
<h3>Version</h3> <h3>Version</h3>
<AppVersion class="app-version" /> <AppVersion class="app-version" />
@ -80,8 +78,8 @@ div.about-modal {
} }
} }
h3 { 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); color: var(--about-page-accent);
} }
a { a {
@ -108,3 +106,14 @@ div.about-modal {
} }
</style> </style>
<style lang="scss">
div.about-modal {
.app-version {
text-align: left;
display: flex;
align-items: self-end;
p { margin: 0; }
}
}
</style>

View File

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

View File

@ -14,6 +14,10 @@
<EditIcon class="button-icon"/> <EditIcon class="button-icon"/>
{{ $t('config.edit-config-button') }} {{ $t('config.edit-config-button') }}
</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)"> <button class="config-button center" @click="() => navigateToTab(3)">
<CustomCssIcon class="button-icon"/> <CustomCssIcon class="button-icon"/>
{{ $t('config.edit-css-button') }} {{ $t('config.edit-css-button') }}
@ -22,10 +26,6 @@
<CloudIcon class="button-icon"/> <CloudIcon class="button-icon"/>
{{backupId ? $t('config.edit-cloud-sync-button') : $t('config.cloud-sync-button') }} {{backupId ? $t('config.edit-cloud-sync-button') : $t('config.cloud-sync-button') }}
</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()"> <button class="config-button center" @click="openRebuildAppModal()">
<RebuildIcon class="button-icon"/> <RebuildIcon class="button-icon"/>
{{ $t('config.rebuild-app-button') }} {{ $t('config.rebuild-app-button') }}
@ -153,6 +153,16 @@ export default {
const lang = getUsersLanguage(); const lang = getUsersLanguage();
return lang ? `${lang.flag} ${lang.name}` : ''; 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> </script>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -988,25 +988,32 @@ html[data-theme="oblivion-scotch"] {
} }
html[data-theme="dashy-docs"] { html[data-theme="dashy-docs"] {
// Base
--primary: #f5f6f7; --primary: #f5f6f7;
--background: #202020; --background: #202020;
--background-darker: #121212; --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-background: none;
--item-group-outer-background: var(--background-darker); --item-group-outer-background: var(--background-darker);
--item-group-heading-text-color: var(--background); --item-group-heading-text-color: var(--background);
--item-group-heading-text-color-hover: 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; --item-group-padding: 0;
--curve-factor: 3px; --curve-factor: 3px;
--curve-factor-navbar: 6px; --curve-factor-navbar: 6px;
--item-shadow: 4px 4px 6px #00000080, -2px -2px 4px rgb(0 0 0 / 40%); --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; --item-group-shadow: 0px 3px 2px #222222, 0px 0px 2px #3e3e3e;
--font-headings: 'PTMono', 'Courier New', monospace; --font-headings: 'PTMono', 'Courier New', monospace;
--minimal-view-section-heading-color: var(--background);
// Navbar Links
--nav-link-background-color-hover: none; --nav-link-background-color-hover: none;
--nav-link-border-color-hover: none; --nav-link-border-color-hover: none;
--nav-link-text-color: var(--background);
--nav-link-text-color-hover: var(--background-darker);
footer { footer {
box-shadow: 0 -3px 4px #010101; box-shadow: 0 -3px 4px #010101;
@ -1095,10 +1102,10 @@ html[data-theme="dashy-docs"] {
color: var(--background); color: var(--background);
font-weight: bold; font-weight: bold;
svg path { fill: var(--background); } 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); }
} }
} }

View File

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

View File

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

View File

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