From c3a11f1f3c7cfce7bac4b6b9201c26f5862b499d Mon Sep 17 00:00:00 2001
From: Timo Hocker <timo@scode.ovh>
Date: Wed, 2 Sep 2020 14:34:20 +0200
Subject: [PATCH] separate settings

---
 src/Style.vue              |  4 +++
 src/components/AppView.vue | 54 ++++++++++++++++++++++++++++----------
 2 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/Style.vue b/src/Style.vue
index 4c1fc3d..86c1915 100644
--- a/src/Style.vue
+++ b/src/Style.vue
@@ -86,4 +86,8 @@ select > option {
   color: var(--color-foreground);
   font-weight: bold;
 }
+
+.large_button {
+  padding: 10px;
+}
 </style>
diff --git a/src/components/AppView.vue b/src/components/AppView.vue
index 5d1331a..32e8cb9 100644
--- a/src/components/AppView.vue
+++ b/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>