Adds a button to open modal

src/assets/interface-icons/config-editor.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="wrench" class="svg-inline--fa fa-wrench fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M507.73 109.1c-2.24-9.03-13.54-12.09-20.12-5.51l-74.36 74.36-67.88-11.31-11.31-67.88 74.36-74.36c6.62-6.62 3.43-17.9-5.66-20.16-47.38-11.74-99.55.91-136.58 37.93-39.64 39.64-50.55 97.1-34.05 147.2L18.74 402.76c-24.99 24.99-24.99 65.51 0 90.5 24.99 24.99 65.51 24.99 90.5 0l213.21-213.21c50.12 16.71 107.47 5.68 147.37-34.22 37.07-37.07 49.7-89.32 37.91-136.73zM64 472c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z"></path></svg>

src/components/Settings/ConfigEditor.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="config-options">
+    <span>Config</span>
+    <div class="config-buttons">
+      <IconSpanner v-tooltip="tooltip('Update configuration locally')" @click="showEditor()" />
+    </div>
+    <modal :name="modalName" :resizable="true" width="80%" height="80%">
+      <p>Hello</p>
+    </modal>
+  </div>
+</template>
+
+<script>
+
+import IconSpanner from '@/assets/interface-icons/config-editor.svg';
+
+export default {
+  name: 'ConfigEditor',
+  data() {
+    return {
+      modalName: 'CONF-EDITOR',
+      input: '',
+    };
+  },
+  components: {
+    IconSpanner,
+  },
+  props: {
+    initialConfig: Object,
+  },
+  methods: {
+    showEditor: function show() {
+      this.$modal.show(this.modalName);
+    },
+    updateConfig() {
+      // this.$emit('iconSizeUpdated', iconSize);
+    },
+    tooltip(content) {
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+.config-options {
+  display: flex;
+  flex-direction: column;
+  color: var(--settings-text-color);
+  svg {
+    path {
+      fill: var(--settings-text-color);
+    }
+    width: 1rem;
+    height: 1rem;
+    margin: 0.2rem;
+    padding: 0.2rem;
+    text-align: center;
+    background: var(--background);
+    border: 1px solid currentColor;
+    border-radius: var(--curve-factor);
+    cursor: pointer;
+    &:hover, &.selected {
+      background: var(--settings-text-color);
+      path { fill: var(--background); }
+    }
+  }
+}
+
+</style>

src/components/Settings/SettingsContainer.vue

@@ -6,6 +6,7 @@
         :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
       <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
       <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
+      <ConfigEditor />
     </div>
     <KeyboardShortcutInfo />
   </section>
@@ -14,6 +15,7 @@
 <script>
 import Defaults from '@/utils/defaults';
 import SearchBar from '@/components/Settings/SearchBar';
+import ConfigEditor from '@/components/Settings/ConfigEditor';
 import ThemeSelector from '@/components/Settings/ThemeSelector';
 import LayoutSelector from '@/components/Settings/LayoutSelector';
 import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
@@ -29,6 +31,7 @@ export default {
   },
   components: {
     SearchBar,
+    ConfigEditor,
     ThemeSelector,
     LayoutSelector,
     ItemSizeSelector,