From 5353c3ab9076a6a90bcec5744835868d573ef54c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 18 May 2021 15:22:11 +0100
Subject: [PATCH] Adds ability for user to add custom nav bar links plus UI
 improvments

---
 src/App.vue                                   | 10 ++-
 src/assets/interface-icons/add-new.svg        |  1 +
 src/assets/interface-icons/save-config.svg    |  1 +
 .../Configuration/ConfigContainer.vue         | 31 ++++---
 src/components/Configuration/EditSiteMeta.vue | 80 +++++++++++++++++--
 src/components/Configuration/JsonEditor.vue   |  5 ++
 src/components/Settings/ConfigLauncher.vue    | 10 ++-
 src/styles/color-themes.scss                  |  4 +
 8 files changed, 117 insertions(+), 25 deletions(-)
 create mode 100644 src/assets/interface-icons/add-new.svg
 create mode 100644 src/assets/interface-icons/save-config.svg

diff --git a/src/App.vue b/src/App.vue
index c1237151..c5aad223 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="dashy" data-theme="dark">
-    <Header :pageInfo="getPageInfo(pageInfo)" />
+    <Header :pageInfo="pageInfo" />
     <router-view />
     <Footer v-if="showFooter" :text="getFooterText()" />
   </div>
@@ -19,10 +19,13 @@ export default {
     Footer,
   },
   data: () => ({
-    pageInfo: conf.pageInfo || Defaults.pageInfo,
+    // pageInfo: this.getPageInfo(conf.pageInfo),
     appConfig: conf.appConfig || Defaults.appConfig,
     showFooter: Defaults.visibleComponents.footer,
   }),
+  computed: {
+    pageInfo: function pi() { return this.getPageInfo(conf.pageInfo); },
+  },
   methods: {
     /* Returns either page info from the config, or default values */
     getPageInfo(pageInfo) {
@@ -38,7 +41,8 @@ export default {
         return {
           title: localPageInfo.title || pageInfo.title || defaults.title,
           description: localPageInfo.description || pageInfo.description || defaults.description,
-          navLinks: pageInfo.navLinks || defaults.navLinks,
+          navLinks: localPageInfo.navLinks || pageInfo.navLinks || defaults.navLinks,
+          footerText: localPageInfo.footerText || pageInfo.footerText || defaults.footerText,
         };
       }
       return defaults;
diff --git a/src/assets/interface-icons/add-new.svg b/src/assets/interface-icons/add-new.svg
new file mode 100644
index 00000000..b360eecd
--- /dev/null
+++ b/src/assets/interface-icons/add-new.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="plus-circle" class="svg-inline--fa fa-plus-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M384 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm120 16c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-48 0c0-110.5-89.5-200-200-200S56 145.5 56 256s89.5 200 200 200 200-89.5 200-200z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/interface-icons/save-config.svg b/src/assets/interface-icons/save-config.svg
new file mode 100644
index 00000000..5b61bcf0
--- /dev/null
+++ b/src/assets/interface-icons/save-config.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="save" class="svg-inline--fa fa-save fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM272 80v80H144V80h128zm122 352H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h42v104c0 13.255 10.745 24 24 24h176c13.255 0 24-10.745 24-24V83.882l78.243 78.243a6 6 0 0 1 1.757 4.243V426a6 6 0 0 1-6 6zM224 232c-48.523 0-88 39.477-88 88s39.477 88 88 88 88-39.477 88-88-39.477-88-88-88zm0 128c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40z"></path></svg>
\ No newline at end of file
diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index 6e9c7751..4d5b7f25 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -26,7 +26,7 @@
     <TabItem name="Edit Sections">
       <JsonEditor :sections="sections" />
     </TabItem>
-    <TabItem name="View Raw YAML">
+    <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>
@@ -102,7 +102,7 @@ export default {
 
 pre {
   color: var(--config-code-color);
-  background: var(--config-code-background);
+  padding: 0.5rem 1rem;
 }
 
 a.config-button, button.config-button {
@@ -137,22 +137,27 @@ a.config-button, button.config-button {
   }
 }
 
-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);
+div.code-container {
+  background: var(--config-code-background);
+  a.download-button {
+    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);
+    }
   }
 }
 
 .tab-item {
   overflow-y: auto;
+  background: var(--config-settings-background);
 }
 
 a.hyperlink-wrapper {
diff --git a/src/components/Configuration/EditSiteMeta.vue b/src/components/Configuration/EditSiteMeta.vue
index 9e460126..71837c01 100644
--- a/src/components/Configuration/EditSiteMeta.vue
+++ b/src/components/Configuration/EditSiteMeta.vue
@@ -15,29 +15,59 @@
         <input v-model="formElements.footerText" />
       </div>
     </div>
-    <button class="save-button" @click="save()">Save Changes</button>
+    <div class="form">
+      <h2>Nav Bar Links</h2>
+      <div class="add-nav-bar-link" v-for="(link, index) in formElements.navLinks" :key="index">
+        <div class="row">
+          <span>Link Text</span>
+          <input v-model="link.title" />
+        </div>
+        <div class="row">
+          <span>Link URL</span>
+          <input v-model="link.path" />
+        </div>
+      </div>
+      <button class="add-new-link" @click="addNavLinkRow()" >
+        <AddNewIcon />
+        Add New Link
+      </button>
+    </div>
+    <button class="save-button" @click="save()">
+      <SaveConfigIcon />
+      Save Changes
+    </button>
   </div>
 </template>
 
 <script>
 
 import { localStorageKeys } from '@/utils/defaults';
+import AddNewIcon from '@/assets/interface-icons/add-new.svg';
+import SaveConfigIcon from '@/assets/interface-icons/save-config.svg';
 
 export default {
   name: 'EditSiteMeta',
   props: {
     config: Object,
   },
+  components: {
+    AddNewIcon,
+    SaveConfigIcon,
+  },
   methods: {
     save() {
       const pageInfo = { ...this.config.pageInfo };
       pageInfo.title = this.formElements.title;
       pageInfo.description = this.formElements.description;
       pageInfo.footerText = this.formElements.footerText;
+      pageInfo.navLinks = this.formElements.navLinks;
       localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(pageInfo));
-      this.$toasted.show('Changes seved succesfully');
+      this.$toasted.show('Changes saved succesfully');
       setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals
     },
+    addNavLinkRow() {
+      this.formElements.navLinks.push({ title: '', path: '' });
+    },
   },
   data() {
     return {
@@ -45,6 +75,7 @@ export default {
         title: this.config.pageInfo.title,
         description: this.config.pageInfo.description,
         footerText: this.config.pageInfo.footerText,
+        navLinks: this.config.pageInfo.navLinks,
       },
     };
   },
@@ -55,7 +86,7 @@ export default {
 .site-meta-container {
   display: flex;
   flex-direction: column;
-  padding-top: 1rem;
+  padding: 1rem 0;
   background: var(--background-darker);
   height: calc(100% - 1rem);
   h2 {
@@ -67,6 +98,15 @@ export default {
 div.form {
   display: flex;
   flex-direction: column;
+  width: fit-content;
+  margin: 0 auto 1rem auto;
+  padding-bottom: 1rem;
+  &:not(:last-child) {
+    border-bottom: 1px dashed var(--config-settings-color);
+  }
+  div.add-nav-bar-link {
+    margin: 0 auto;
+  }
   div.row {
     margin: 0.25rem auto;
     display: flex;
@@ -86,16 +126,26 @@ div.form {
       min-width: 8rem;
       font-size: 1.2rem;
       &:focus {
-        box-shadow: 1px 1px 6px #00ccb4;
+        box-shadow: 1px 1px 6px var(--config-settings-color);
         outline: none;
       }
     }
   }
 }
 
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.5rem auto;
+  svg {
+    width: 1.2rem;
+    margin: 0 0.2rem;
+  }
+}
+
 button.save-button {
   padding:  0.5rem 1rem;
-  margin: 0.5rem auto;
   font-size: 1.2rem;
   width: 24rem;
   background: var(--config-settings-background);
@@ -108,4 +158,24 @@ button.save-button {
     color: var(--config-settings-background);
   }
 }
+
+button.add-new-link {
+  background: none;
+  text-decoration: underline;
+  font-size: 1rem;
+  padding: 0.25rem 0.5rem;
+  color: var(--config-settings-color);
+  cursor: pointer;
+  border-radius: 3px;
+  border: 1px solid transparent;
+  &:hover {
+    border-color: var(--config-settings-color);
+    text-decoration: none;
+  }
+  &:active {
+    background: var(--config-settings-color);
+    color: var(--config-settings-background);
+    border-color: var(--config-settings-color);
+  }
+}
 </style>
diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
index 62fdab75..e07c02df 100644
--- a/src/components/Configuration/JsonEditor.vue
+++ b/src/components/Configuration/JsonEditor.vue
@@ -66,6 +66,7 @@ button.save-button {
   &:hover {
     background: var(--config-settings-background);
     color: var(--config-settings-color);
+    border-color: var(--config-settings-color);
   }
 }
 
@@ -82,4 +83,8 @@ button.save-button {
 .jsoneditor-poweredBy {
   display: none;
 }
+.jsoneditor-tree, pre.jsoneditor-preview {
+  background: #fff;
+  text-align: left;
+}
 </style>
diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index 79937738..f438d2e1 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -18,7 +18,7 @@
 
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
 import ConfigContainer from '@/components/Configuration/ConfigContainer';
-import { topLevelConfKeys } from '@/utils/defaults';
+import { topLevelConfKeys, localStorageKeys } from '@/utils/defaults';
 
 export default {
   name: 'ConfigLauncher',
@@ -46,11 +46,10 @@ export default {
       conf[topLevelConfKeys.APP_CONFIG] = this.appConfig;
       conf[topLevelConfKeys.PAGE_INFO] = this.pageInfo;
       conf[topLevelConfKeys.SECTIONS] = this.sections;
+      conf[topLevelConfKeys.APP_CONFIG].theme = localStorage[localStorageKeys.THEME]
+        || conf[topLevelConfKeys.APP_CONFIG].theme;
       return conf;
     },
-    updateConfig() {
-      // this.$emit('iconSizeUpdated', iconSize);
-    },
     tooltip(content) {
       return { content, trigger: 'hover focus', delay: 250 };
     },
@@ -88,4 +87,7 @@ export default {
   .vm--modal {
     box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary);
   }
+  .vm--overlay {
+    background: #00000080;
+  }
 </style>
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 8b345838..447e587f 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -50,6 +50,8 @@ html[data-theme='raspberry-jam'] {
   --item-background: #1c2636;
   --item-group-background: #0b1021;
   --nav-link-background-color: #0b1021;
+  --config-code-background: #0b1021;
+  --config-code-color: #eb2d6c;
 }
 
 html[data-theme='tiger'] {
@@ -91,6 +93,7 @@ html[data-theme='high-contrast-light'] {
   --primary: #000;
   --outline-color: #000;
   --curve-factor: 0px;
+  --config-code-color: #000;
 }
 
 html[data-theme='high-contrast-dark'] {
@@ -147,6 +150,7 @@ html[data-theme='material'] {
   --settings-container-shadow: 0 1px 3px #0000005e, 0 1px 2px #00000085;
   --welcome-popup-background: #01579b;
   --welcome-popup-text-color: #ffffff;
+  --config-code-color: #000;
 }
 
 html[data-theme='material-dark'] {