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>