separate settings

src/Style.vue

@@ -86,4 +86,8 @@ select > option {
   color: var(--color-foreground);
   font-weight: bold;
 }
+
+.large_button {
+  padding: 10px;
+}
 </style>

src/components/AppView.vue

@@ -1,17 +1,31 @@
 <template>
-  <div
-    class="grid"
-  >
-    <ViewComponent
-      v-for="(item,key) of saved_config.displays"
-      :key="key"
-      :config="item"
-      :data="log(item.source)"
-    />
-    <ConfigEditor
-      v-model="config"
-      :template="template"
+  <div>
+    <button
+      type="button"
+      class="large_button"
+      @click="settings_btn_action"
+      v-text="editing?'Close':'Settings'"
     />
+    <div
+      v-if="editing"
+      class="spacer"
+    >
+      <ConfigEditor
+        v-model="config"
+        :template="template"
+      />
+    </div>
+    <div
+      v-else
+      class="grid"
+    >
+      <ViewComponent
+        v-for="(item,key) of saved_config.displays"
+        :key="key"
+        :config="item"
+        :data="log(item.source)"
+      />
+    </div>
   </div>
 </template>
 
@@ -35,14 +49,15 @@ export default {
     return {
       config:       copy_object (default_config),
       saved_config: copy_object (default_config),
-      template:     default_template
+      template:     default_template,
+      editing:      false
     };
   },
   computed: { ...Vuex.mapGetters ({ log: 'log' }) },
   mounted () {
     this.fetch_log ();
     document.body.addEventListener ('keydown', (ev) => {
-      if (ev.key === 's' && ev.ctrlKey) {
+      if (ev.key === 's' && ev.ctrlKey && this.editing) {
         this.save_config ();
         ev.preventDefault ();
         return false;
@@ -58,6 +73,7 @@ export default {
       });
       this.saved_config = copy_object (this.config);
       this.fetch_log ();
+      this.editing = false;
     },
     fetch_log () {
       this.get_log ({
@@ -65,6 +81,12 @@ export default {
         sources: this.saved_config.sources
       });
     },
+    settings_btn_action () {
+      if (this.editing)
+        this.save_config ();
+      else
+        this.editing = true;
+    },
     ...Vuex.mapActions ({ get_log: 'get_log' })
   }
 };
@@ -78,4 +100,8 @@ export default {
   width: 100%;
   height: 100%;
 }
+
+.spacer {
+  margin: 10px;
+}
 </style>