Doesnt add nav items if text field is empty

This commit is contained in:
Alicia Sykes 2021-05-18 16:20:35 +01:00
parent aca9cbca11
commit 34e0467889
2 changed files with 46 additions and 17 deletions

View File

@ -23,13 +23,18 @@
</button> </button>
</div> </div>
</TabItem> </TabItem>
<TabItem name="Backup Config" class="code-container">
<pre id="conf-yaml">{{this.jsonParser(this.config)}}</pre>
<div class="yaml-action-buttons">
<h2>Actions</h2>
<a class="yaml-button download" href="/conf.yml" download>Download Config</a>
<a class="yaml-button copy" @click="copyConfigToClipboard()">Copy Config</a>
<a class="yaml-button reset" @click="resetLocalSettings()">Reset Config</a>
</div>
</TabItem>
<TabItem name="Edit Sections"> <TabItem name="Edit Sections">
<JsonEditor :sections="sections" /> <JsonEditor :sections="sections" />
</TabItem> </TabItem>
<TabItem name="View Raw YAML" class="code-container">
<pre>{{this.jsonParser(this.config)}}</pre>
<a class="download-button" href="/conf.yml" download>Download Config</a>
</TabItem>
<TabItem name="Edit Site Meta"> <TabItem name="Edit Site Meta">
<EditSiteMeta :config="config" /> <EditSiteMeta :config="config" />
</TabItem> </TabItem>
@ -72,13 +77,17 @@ export default {
methods: { methods: {
/* Seletcs the edit tab of the tab view */ /* Seletcs the edit tab of the tab view */
goToEdit() { goToEdit() {
const itemToSelect = this.$refs.tabView.navItems[1]; const itemToSelect = this.$refs.tabView.navItems[2];
this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true }); this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true });
}, },
goToMetaEdit() { goToMetaEdit() {
const itemToSelect = this.$refs.tabView.navItems[3]; const itemToSelect = this.$refs.tabView.navItems[3];
this.$refs.tabView.activeTabItem({ tabItem: itemToSelect, byUser: true }); 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 */ /* Checks that the user is sure, then resets site-wide local storage, and reloads page */
resetLocalSettings() { resetLocalSettings() {
const msg = 'This will remove all user settings from local storage, ' const msg = 'This will remove all user settings from local storage, '
@ -139,18 +148,38 @@ a.config-button, button.config-button {
div.code-container { div.code-container {
background: var(--config-code-background); background: var(--config-code-background);
a.download-button { .yaml-action-buttons {
position: absolute; position: absolute;
top: 2px; top: 0.5rem;
right: 2px; right: 0.5rem;
padding: 0.25rem 0.5rem; display: flex;
font-size: 1rem; flex-direction: column;
color: var(--config-code-color); border: 1px dashed;
border-radius: var(--curve-factor); padding: 0.5rem;
cursor: pointer; border-radius: 4px;
&:hover { h2 {
color: var(--config-code-background); margin: 0;
background: var(--config-settings-color); 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;
}
} }
} }
} }

View File

@ -60,7 +60,7 @@ export default {
pageInfo.title = this.formElements.title; pageInfo.title = this.formElements.title;
pageInfo.description = this.formElements.description; pageInfo.description = this.formElements.description;
pageInfo.footerText = this.formElements.footerText; 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)); localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(pageInfo));
this.$toasted.show('Changes saved succesfully'); this.$toasted.show('Changes saved succesfully');
setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals