diff --git a/README.md b/README.md index ab1228ce..5b2ed3c9 100644 --- a/README.md +++ b/README.md @@ -162,12 +162,16 @@ There are a few self-hosted web apps, that serve a similar purpose to Dashy. Inc ### Credits 🏆 -The app makes use of the following components, kudos to their respective authors +And the app itself is built with [Vue.js](https://github.com/vuejs/vue) ![vue-logo](https://i.ibb.co/xqKW6h5/vue-logo.png) + +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 - -And the app itself is built with [Vue.js](https://github.com/vuejs/vue) ![vue-logo](https://i.ibb.co/xqKW6h5/vue-logo.png) +- [`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 📜 diff --git a/package.json b/package.json index 414174c6..316dfcee 100644 --- a/package.json +++ b/package.json @@ -10,13 +10,17 @@ "dependencies": { "connect": "^3.7.0", "register-service-worker": "^1.6.2", + "remedial": "^1.0.8", "serve-static": "^1.14.1", + "v-jsoneditor": "^1.4.2", "v-tooltip": "^2.1.3", "vue": "^2.6.10", "vue-cli-plugin-yaml": "^1.0.2", "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", @@ -61,4 +65,4 @@ "> 1%", "last 2 versions" ] -} \ No newline at end of file +} diff --git a/src/App.vue b/src/App.vue index 9cea6201..c1237151 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,7 +9,7 @@ import Header from '@/components/PageStrcture/Header.vue'; import Footer from '@/components/PageStrcture/Footer.vue'; -import Defaults from '@/utils/defaults'; +import Defaults, { localStorageKeys } from '@/utils/defaults'; import conf from '../public/conf.yml'; export default { @@ -27,10 +27,17 @@ export default { /* Returns either page info from the config, or default values */ getPageInfo(pageInfo) { const defaults = Defaults.pageInfo; + + let localPageInfo; + try { + localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]); + } catch (e) { + localPageInfo = {}; + } if (pageInfo) { return { - title: pageInfo.title || defaults.title, - description: pageInfo.description || defaults.description, + title: localPageInfo.title || pageInfo.title || defaults.title, + description: localPageInfo.description || pageInfo.description || defaults.description, navLinks: pageInfo.navLinks || defaults.navLinks, }; } diff --git a/src/assets/interface-icons/config-delete-local.svg b/src/assets/interface-icons/config-delete-local.svg new file mode 100644 index 00000000..500af9cb --- /dev/null +++ b/src/assets/interface-icons/config-delete-local.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/interface-icons/config-download-file.svg b/src/assets/interface-icons/config-download-file.svg new file mode 100644 index 00000000..d1f7f041 --- /dev/null +++ b/src/assets/interface-icons/config-download-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/interface-icons/config-edit-json.svg b/src/assets/interface-icons/config-edit-json.svg new file mode 100644 index 00000000..6f92bb5d --- /dev/null +++ b/src/assets/interface-icons/config-edit-json.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/interface-icons/config-editor.svg b/src/assets/interface-icons/config-editor.svg new file mode 100644 index 00000000..3cb87c22 --- /dev/null +++ b/src/assets/interface-icons/config-editor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/interface-icons/config-meta-data.svg b/src/assets/interface-icons/config-meta-data.svg new file mode 100644 index 00000000..9ada3711 --- /dev/null +++ b/src/assets/interface-icons/config-meta-data.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue new file mode 100644 index 00000000..6e9c7751 --- /dev/null +++ b/src/components/Configuration/ConfigContainer.vue @@ -0,0 +1,204 @@ + + + + + + + diff --git a/src/components/Configuration/EditSiteMeta.vue b/src/components/Configuration/EditSiteMeta.vue new file mode 100644 index 00000000..9e460126 --- /dev/null +++ b/src/components/Configuration/EditSiteMeta.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue new file mode 100644 index 00000000..62fdab75 --- /dev/null +++ b/src/components/Configuration/JsonEditor.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue index b0b8ff34..54a968a3 100644 --- a/src/components/LinkItems/Item.vue +++ b/src/components/LinkItems/Item.vue @@ -100,7 +100,6 @@ export default { .item { flex-grow: 1; - position: relative; color: var(--item-text-color); vertical-align: middle; margin: 0.5rem; @@ -116,6 +115,7 @@ export default { &:hover { box-shadow: var(--item-hover-shadow); background: var(--item-background-hover); + position: relative; } &:focus { outline: 2px solid var(--primary); diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue index ada43964..265e61a7 100644 --- a/src/components/LinkItems/ItemIcon.vue +++ b/src/components/LinkItems/ItemIcon.vue @@ -99,7 +99,7 @@ export default { + + diff --git a/src/components/Settings/KeyboardShortcutInfo.vue b/src/components/Settings/KeyboardShortcutInfo.vue index 87338106..cda24ea5 100644 --- a/src/components/Settings/KeyboardShortcutInfo.vue +++ b/src/components/Settings/KeyboardShortcutInfo.vue @@ -21,13 +21,13 @@ export default { data() { return { shouldHide: true, // False = show/ true = hide. Intuitive, eh? + timeDelay: 3000, // Short delay in ms before popup appears }; }, methods: { /** - * If the session storage item exists, true will be returned - * Otherwise, if not then false is returned. - * Note the !! just converts 'false' to false, as strings resolve to true + * Returns true if the key exists in session storage, otherwise false + * And the !! just converts 'false' to false, as strings resolve to true */ shouldHideWelcomeMessage() { return !!localStorage[localStorageKeys.HIDE_WELCOME_BANNER]; @@ -39,7 +39,11 @@ export default { hideWelcomeHelper() { this.shouldHide = true; localStorage.setItem(localStorageKeys.HIDE_WELCOME_BANNER, true); - window.removeEventListener('keyup'); + window.removeEventListener('keyup', this.keyPressEvent); + }, + /* Passed to window function, to add/ remove event listener */ + keyPressEvent(event) { + if (event.keyCode === 27) this.hideWelcomeHelper(); }, }, /** @@ -50,11 +54,8 @@ export default { mounted() { const shouldHide = this.shouldHideWelcomeMessage(); if (!shouldHide) { - window.setTimeout(() => { this.shouldHide = shouldHide; }, 3000); - window.addEventListener('keyup', (ev) => { - // User pressed the escape key. Trigger permanent dismissal of dialog - if (ev.keyCode === 27) this.hideWelcomeHelper(); - }); + window.setTimeout(() => { this.shouldHide = shouldHide; }, this.timeDelay); + window.addEventListener('keyup', this.keyPressEvent); } else { // Meh, component not needed. // No point wasting valuable bytes of your 32GB Ram, lets kill it this.$destroy(); diff --git a/src/components/Settings/SearchBar.vue b/src/components/Settings/SearchBar.vue index 0ec1beca..6c4714c7 100644 --- a/src/components/Settings/SearchBar.vue +++ b/src/components/Settings/SearchBar.vue @@ -21,6 +21,9 @@ import ArrowKeyNavigation from '@/utils/ArrowKeyNavigation'; export default { name: 'FilterTile', + props: { + active: Boolean, + }, data() { return { input: '', // Users current search term @@ -31,6 +34,8 @@ export default { window.addEventListener('keydown', (event) => { const currentElem = document.activeElement.id; const { key, keyCode } = event; + /* If a modal is open, then do nothing */ + if (!this.active) return; if (/^[a-zA-Z]$/.test(key) && currentElem !== 'filter-tiles') { /* Letter key pressed - start searching */ this.$refs.filter.focus(); diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue index 32e1b6cc..d0df71bb 100644 --- a/src/components/Settings/SettingsContainer.vue +++ b/src/components/Settings/SettingsContainer.vue @@ -1,11 +1,17 @@