diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue index 4d5b7f25..d8d8fb2c 100644 --- a/src/components/Configuration/ConfigContainer.vue +++ b/src/components/Configuration/ConfigContainer.vue @@ -23,13 +23,18 @@ + +
{{this.jsonParser(this.config)}}
+
+

Actions

+ Download Config + Copy Config + Reset Config +
+
- -
{{this.jsonParser(this.config)}}
- Download Config -
@@ -72,13 +77,17 @@ export default { methods: { /* Seletcs the edit tab of the tab view */ goToEdit() { - const itemToSelect = this.$refs.tabView.navItems[1]; + const itemToSelect = this.$refs.tabView.navItems[2]; this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true }); }, goToMetaEdit() { const itemToSelect = this.$refs.tabView.navItems[3]; this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true }); }, + copyConfigToClipboard() { + navigator.clipboard.writeText(this.jsonParser(this.config)); + // event.target.textContent = 'Copied to clipboard'; + }, /* Checks that the user is sure, then resets site-wide local storage, and reloads page */ resetLocalSettings() { const msg = 'This will remove all user settings from local storage, ' @@ -139,18 +148,38 @@ a.config-button, button.config-button { div.code-container { background: var(--config-code-background); - a.download-button { + .yaml-action-buttons { position: absolute; - top: 2px; - right: 2px; - padding: 0.25rem 0.5rem; - font-size: 1rem; - color: var(--config-code-color); - border-radius: var(--curve-factor); - cursor: pointer; - &:hover { - color: var(--config-code-background); - background: var(--config-settings-color); + top: 0.5rem; + right: 0.5rem; + display: flex; + flex-direction: column; + border: 1px dashed; + padding: 0.5rem; + border-radius: 4px; + h2 { + margin: 0; + text-align: center; + color: var(--config-code-color); + } + a.yaml-button { + padding: 0.25rem 0.5rem; + font-size: 1rem; + color: var(--config-code-color); + border-radius: var(--curve-factor); + cursor: pointer; + text-decoration: underline; + border: 1px solid var(--config-code-background); + &:hover { + color: var(--config-code-color); + border-color: var(--config-code-color); + text-decoration: none; + } + &:active { + color: var(--config-code-background); + background-color: var(--config-settings-color); + text-decoration: none; + } } } } diff --git a/src/components/Configuration/EditSiteMeta.vue b/src/components/Configuration/EditSiteMeta.vue index 71837c01..6d629439 100644 --- a/src/components/Configuration/EditSiteMeta.vue +++ b/src/components/Configuration/EditSiteMeta.vue @@ -60,7 +60,7 @@ export default { pageInfo.title = this.formElements.title; pageInfo.description = this.formElements.description; pageInfo.footerText = this.formElements.footerText; - pageInfo.navLinks = this.formElements.navLinks; + pageInfo.navLinks = this.formElements.navLinks.filter(link => (link.title !== '')); localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(pageInfo)); this.$toasted.show('Changes saved succesfully'); setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals