Adds menu to Config popup, adds delete and download functionality

src/components/Configuration/ConfigContainer.vue

@@ -1,13 +1,33 @@
 <template>
-  <Tabs>
-    <TabItem name="Config Editor">
-         <JsonEditor :sections="sections" />
+  <Tabs :navAuto="true" name="Add Item" ref="tabView">
+    <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="View/ Save YAML">
-        <pre>{{this.jsonParser(this.sections)}}</pre>
+    <TabItem name="Edit Sections">
+      <JsonEditor :sections="sections" />
+    </TabItem>
+    <TabItem name="View Raw YAML">
+      <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" />
+      <AddItem :sections="sections" />
     </TabItem>
   </Tabs>
 </template>
@@ -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);
-  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;
+}
 </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; }
     }
   }