Adds menu to Config popup, adds delete and download functionality

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 📜
 

src/assets/interface-icons/config-delete-local.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="trash-alt" class="svg-inline--fa fa-trash-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"></path></svg>

src/assets/interface-icons/config-download-file.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="file-download" class="svg-inline--fa fa-file-download fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M216 236.07c0-6.63-5.37-12-12-12h-24c-6.63 0-12 5.37-12 12v84.01h-48.88c-10.71 0-16.05 12.97-8.45 20.52l72.31 71.77c4.99 4.95 13.04 4.95 18.03 0l72.31-71.77c7.6-7.54 2.26-20.52-8.45-20.52H216v-84.01zM369.83 97.98L285.94 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h287.94c26.5 0 48.07-21.5 48.07-47.99V131.97c0-12.69-5.17-24.99-14.17-33.99zM255.95 51.99l76.09 76.08h-76.09V51.99zM336 464.01H47.99V48.09h159.97v103.98c0 13.3 10.7 23.99 24 23.99H336v287.95z"></path></svg>

src/assets/interface-icons/config-edit-json.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="edit" class="svg-inline--fa fa-edit fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"></path></svg>

src/components/Configuration/ConfigContainer.vue

@@ -1,10 +1,30 @@
 <template>
-  <Tabs>
+  <Tabs :navAuto="true" name="Add Item" ref="tabView">
-    <TabItem name="Config Editor">
+    <TabItem name="Config">
+      <div class="main-options-container">
+        <h2>Configuration Options</h2>
+        <a href="/conf.yml" download class="hyperlink-wrapper">
+          <button class="config-button center">
+          <DownloadIcon class="button-icon"/>
+          Download Config
+          </button>
+        </a>
+        <button class="config-button center" @click="goToEdit()">
+          <EditIcon class="button-icon"/>
+          Edit Sections
+        </button>
+        <button class="config-button center" @click="resetLocalSettings()">
+          <DeleteIcon class="button-icon"/>
+          Reset Local Settings
+        </button>
+      </div>
+    </TabItem>
+    <TabItem name="Edit Sections">
       <JsonEditor :sections="sections" />
     </TabItem>
-    <TabItem name="View/ Save YAML">
+    <TabItem name="View Raw YAML">
-        <pre>{{this.jsonParser(this.sections)}}</pre>
+      <pre>{{this.jsonParser(this.config)}}</pre>
+      <a class="download-button" href="/conf.yml" download>Download Config</a>
     </TabItem>
     <TabItem name="Add Item">
       <AddItem :sections="sections" />
@@ -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 */
+    },
   },
 };
 </script>
@@ -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;
+  }
+}
+
 </style>

src/components/Configuration/JsonEditor.vue

@@ -6,7 +6,9 @@
       height="650px"
     />
     <button class="save-button" @click="save()">Save Changes</button>
-
+    <p class="note">
+      It is recommend to backup your existing confiruration before making any changes.
+    </p>
   </div>
 </template>
 
@@ -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);
+  background: var(--config-settings-color);
-  color: var(--config-settings-color);
+  color: var(--config-settings-background);
-  border: 1px solid var(--config-settings-color);
+  border: 1px solid var(--config-settings-background);
   border-radius: var(--curve-factor);
   cursor: pointer;
   &:hover {
-    background: var(--config-settings-color);
+    background: var(--config-settings-background);
-    color: var(--config-settings-background);
+    color: var(--config-settings-color);
   }
 }
 
 .jsoneditor-menu {
-  background: var(--config-settings-background);
+  background: var(--config-settings-color);
-  color: 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;
+}
 </style>

src/components/Settings/ConfigLauncher.vue

@@ -9,7 +9,7 @@
     <!-- Modal containing all the configuration options -->
     <modal :name="modalName" :resizable="true" width="80%" height="80%"
       @closed="$emit('modalChanged', false)">
-      <ConfigContainer :sections="sections" />
+      <ConfigContainer :sections="sections" :config="combineConfig()" />
     </modal>
   </div>
 </template>
@@ -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);
     },

src/components/Settings/SettingsContainer.vue

@@ -10,7 +10,8 @@
         :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
       <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
       <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
-      <ConfigLauncher :sections="sections" @modalChanged="modalChanged" />
+      <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
+        @modalChanged="modalChanged" />
     </div>
     <KeyboardShortcutInfo />
   </section>
@@ -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; }
     }
   }

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 || [],
+        sections: sections || [],
-        appConfig: conf.appConfig || {},
+        pageInfo: pageInfo || defaultPageInfo,
+        appConfig: appConfig || {},
       },
       meta: {
         title: 'Home Page',

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-color: var(--primary);
-  --config-settings-background: var(--primary);
+  --config-settings-background: var(--background-darker);
 }

src/utils/defaults.js

@@ -46,4 +46,9 @@ module.exports = {
     THEME: 'theme',
     CONF_SECTIONS: 'confSections',
   },
+  topLevelConfKeys: {
+    PAGE_INFO: 'pageInfo',
+    APP_CONFIG: 'appConfig',
+    SECTIONS: 'sections',
+  },
 };

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,