diff --git a/README.md b/README.md index 42fbf55c..6d8856e3 100644 --- a/README.md +++ b/README.md @@ -170,6 +170,7 @@ It makes use of the following components, kudos to their respective authors - [`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 ### License 📜 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/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue index fae477ea..d7587082 100644 --- a/src/components/Configuration/ConfigContainer.vue +++ b/src/components/Configuration/ConfigContainer.vue @@ -1,13 +1,33 @@ @@ -17,6 +37,9 @@ import JsonToYaml from '@/utils/JsonToYaml'; import AddItem from '@/components/Configuration/AddItem'; 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'; +import EditIcon from '@/assets/interface-icons/config-edit-json.svg'; export default { name: 'ConfigContainer', @@ -27,10 +50,28 @@ export default { }, props: { sections: Array, + config: Object, }, components: { AddItem, JsonEditor, + DownloadIcon, + DeleteIcon, + EditIcon, + }, + methods: { + goToEdit() { + const itemToSelect = this.$refs.tabView.navItems[1]; + this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true }); + }, + resetLocalSettings() { + /* eslint-disable no-alert, no-restricted-globals */ + const isTheUserSure = confirm('Are you sure?'); + if (isTheUserSure) { + localStorage.clear(); + } + /* eslint-enable no-alert, no-restricted-globals */ + }, }, }; @@ -42,7 +83,69 @@ pre { background: var(--config-code-background); } +a.config-button, button.config-button { + display: flex; + align-items: center; + padding: 0.5rem 1rem; + margin: 0.25rem auto; + font-size: 1.2rem; + background: var(--config-settings-background); + color: var(--config-settings-color); + border: 1px solid var(--config-settings-color); + border-radius: var(--curve-factor); + text-decoration: none; + cursor: pointer; + margin: 0.5rem auto; + width: 18rem; + svg.button-icon { + path { + fill: var(--config-settings-color); + } + width: 1rem; + height: 1rem; + padding: 0.2rem; + } + &:hover { + background: var(--config-settings-color); + color: var(--config-settings-background); + svg path { + fill: var(--config-settings-background); + } + } +} + +a.download-button { + position: absolute; + top: 2px; + right: 2px; + padding: 0.25rem 0.5rem; + font-size: 1rem; + color: var(--config-settings-background); + border-radius: var(--curve-factor); + cursor: pointer; + &:hover { + background: var(--config-settings-color); + } +} + .tab-item { overflow-y: auto; } + +a.hyperlink-wrapper { + margin: 0 auto; + text-decoration: none; +} + +.main-options-container { + display: flex; + flex-direction: column; + padding-top: 2rem; + background: var(--background-darker); + height: calc(100% - 2rem); + h2 { + margin: 1rem auto; + } +} + diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue index ba2c85ab..7b180c1d 100644 --- a/src/components/Configuration/JsonEditor.vue +++ b/src/components/Configuration/JsonEditor.vue @@ -6,7 +6,9 @@ height="650px" /> - +

+ It is recommend to backup your existing confiruration before making any changes. +

@@ -46,32 +48,37 @@ export default { .json-editor-outer { text-align: center; } - +p.note { + font-size: 0.8rem; + color: var(--medium-grey); + margin: 0.2rem; +} button.save-button { padding: 0.5rem 1rem; margin: 0.25rem auto; font-size: 1.2rem; - background: var(--config-settings-background); - color: var(--config-settings-color); - border: 1px solid var(--config-settings-color); + background: var(--config-settings-color); + color: var(--config-settings-background); + border: 1px solid var(--config-settings-background); border-radius: var(--curve-factor); cursor: pointer; &:hover { - background: var(--config-settings-color); - color: var(--config-settings-background); + background: var(--config-settings-background); + color: var(--config-settings-color); } } .jsoneditor-menu { - background: var(--config-settings-background); - color: var(--config-settings-color); + background: var(--config-settings-color); + color: var(--config-settings-background); } - .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); } - +.jsoneditor-poweredBy { + display: none; +} diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue index a0362f65..7b98b855 100644 --- a/src/components/Settings/ConfigLauncher.vue +++ b/src/components/Settings/ConfigLauncher.vue @@ -9,7 +9,7 @@ - + @@ -18,6 +18,7 @@ import IconSpanner from '@/assets/interface-icons/config-editor.svg'; import ConfigContainer from '@/components/Configuration/ConfigContainer'; +import { topLevelConfKeys } from '@/utils/defaults'; export default { name: 'ConfigLauncher', @@ -32,12 +33,21 @@ export default { }, props: { sections: Array, + pageInfo: Object, + appConfig: Object, }, methods: { showEditor: function show() { this.$modal.show(this.modalName); this.$emit('modalChanged', true); }, + combineConfig() { + const conf = {}; + conf[topLevelConfKeys.APP_CONFIG] = this.appConfig; + conf[topLevelConfKeys.PAGE_INFO] = this.pageInfo; + conf[topLevelConfKeys.SECTIONS] = this.sections; + return conf; + }, updateConfig() { // this.$emit('iconSizeUpdated', iconSize); }, diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue index c7f56461..d0df71bb 100644 --- a/src/components/Settings/SettingsContainer.vue +++ b/src/components/Settings/SettingsContainer.vue @@ -10,7 +10,8 @@ :confTheme="getInitialTheme()" :userThemes="getUserThemes()" /> - + @@ -32,6 +33,7 @@ export default { iconSize: String, availableThemes: Object, appConfig: Object, + pageInfo: Object, sections: Array, modalOpen: Boolean, }, @@ -101,6 +103,7 @@ export default { div { margin-left: 0.5rem; opacity: var(--dimming-factor); + opacity: 1; &:hover { opacity: 1; } } } diff --git a/src/router.js b/src/router.js index b79b539e..71589d54 100644 --- a/src/router.js +++ b/src/router.js @@ -2,9 +2,12 @@ import Vue from 'vue'; import Router from 'vue-router'; import Home from './views/Home.vue'; import conf from '../public/conf.yml'; // Main site configuration +import { pageInfo as defaultPageInfo } from './utils/defaults'; Vue.use(Router); +const { sections, pageInfo, appConfig } = conf; + const router = new Router({ routes: [ { @@ -12,8 +15,9 @@ const router = new Router({ name: 'home', component: Home, props: { - sections: conf.sections || [], - appConfig: conf.appConfig || {}, + sections: sections || [], + pageInfo: pageInfo || defaultPageInfo, + appConfig: appConfig || {}, }, meta: { title: 'Home Page', diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss index 8d122999..eac8399d 100644 --- a/src/styles/color-palette.scss +++ b/src/styles/color-palette.scss @@ -55,6 +55,6 @@ --welcome-popup-text-color: var(--primary); --config-code-background: #fff; --config-code-color: var(--background); - --config-settings-color: var(--background); - --config-settings-background: var(--primary); + --config-settings-color: var(--primary); + --config-settings-background: var(--background-darker); } diff --git a/src/utils/defaults.js b/src/utils/defaults.js index bb4cbc85..270de614 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -46,4 +46,9 @@ module.exports = { THEME: 'theme', CONF_SECTIONS: 'confSections', }, + topLevelConfKeys: { + PAGE_INFO: 'pageInfo', + APP_CONFIG: 'appConfig', + SECTIONS: 'sections', + }, }; diff --git a/src/views/Home.vue b/src/views/Home.vue index f425233d..63e6e696 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -9,8 +9,9 @@ :displayLayout="layout" :iconSize="itemSizeBound" :availableThemes="getExternalCSSLinks()" - :appConfig="appConfig" :sections="getSections(sections)" + :appConfig="appConfig" + :pageInfo="pageInfo" :modalOpen="modalOpen" class="filter-container" /> @@ -47,6 +48,7 @@ export default { props: { sections: Array, // Main site content appConfig: Object, // Main site configuation (optional) + pageInfo: Object, // Page metadata (optional) }, components: { SettingsContainer,