Logger cosmetics

src/csui/LoggerUi.vue

@@ -31,33 +31,48 @@
       <div class="settings-panel flex flex-noshrink flex-column">
         <div class="panel-top flex-nogrow">
           <h2>Logger configuration</h2>
-          <p>Paste logger configuration in this box</p>
         </div>
-
+        <div class="flex flex-row flex-end w100">
-        <div class="panel-middle scrollable flex-grow p-t-025em">
+          <div v-if="!showTextMode" class="button" @click="showTextMode = true">
-          <div ref="settingsEditArea"
+            Paste config ...
-            style="white-space: pre-wrap; border: 1px solid orange; padding: 10px;"
+          </div>
-            class="monospace h100"
+          <div v-else class="button" @click="showTextMode = false">
-            :class="{'jsonbg': !confHasError, 'jsonbg-error': confHasError}"
+            Back
-            contenteditable="true"
-            @input="updateSettings"
-          >
-            {{parsedSettings}}
           </div>
         </div>
-        <div class="flex-noshrink flex flex-row flex-cross-center p-t-025em">
+
-          <div class="button button-bar"
+        <div class="panel-middle scrollable flex-grow log-config-margin">
-               @click="restoreLoggerSettings()"
+          <template v-if="showTextMode">
-          >
+            <div ref="settingsEditArea"
-            Revert logger config
+              style="white-space: pre-wrap; border: 1px solid orange; padding: 10px;"
+              class="monospace h100"
+              :class="{'jsonbg': !confHasError, 'jsonbg-error': confHasError}"
+              contenteditable="true"
+              @input="updateSettings"
+            >
+              {{parsedSettings}}
+            </div>
+          </template>
+          <template v-else>
+            <JsonObject label="logger-settings" 
+                        :value="currentSettings" 
+                        :ignoreKeys="{'allowLogging': true}"
+                        @change="updateSettingsUi"
+            ></JsonObject>
+          </template>
+        </div>
+
+
+        <div class="flex flex-row flex-end">
+          <div class="button" @click="restoreLoggerSettings()">
+            Revert
+          </div>
+          <div class="button button-primary" @click="saveLoggerSettings()">
+            Save
           </div>
         </div>
       </div>
 
-      <div class="settings-panel flex flex-noshrink flex-column">
-        <JsonObject :value="currentSettings" label="logger-settings" @change="updateSettingsUi"></JsonObject>
-      </div>
-
       <!-- LOGGER OUTPUT/START LOGGING -->
       <div class="results-panel flex flex-shrink flex-column overflow-hidden">
         <div class="panel-top flex-nogrow">
@@ -110,11 +125,21 @@
               >
                 Stop logging
               </div>
-              <p v-if="lastSettings && lastSettings.timeout"
+              <template v-if="lastSettings && lastSettings.timeout"
-                 class="m-025em"
+                        class="m-025em"
               >
-                ... or wait until logging ends.
+                <p>
-              </p>
+                  ... or wait until logging ends.
+                </p>
+                <p>
+                  You can <a @click="hidePopup()">hide popup</a> — it will automatically re-appear when logging finishes.
+                </p>
+              </template>
+              <template v-else-if="lastSettings">
+                <p>
+                  You can <a @click="hidePopup()">hide popup</a> — the logging will continue until you re-open the popup and stop it.
+                </p>
+              </template>
             </div>
             <div v-else class="flex flex-column flex-center flex-cross-center w100 h100">
               <div class="button button-big button-primary"
@@ -156,6 +181,7 @@ export default {
       currentSettings: {},
       confHasError: false,
       logStringified: '',
+      showTextMode: false,
     }
   },
   async created() {
@@ -221,6 +247,9 @@ export default {
         
       }
     },
+    saveLoggerSettings() {
+      Logger.saveConfig({...this.lastSettings});
+    },
     restoreLoggerSettings() {
       this.getLoggerSettings();
       this.confHasError = false;
@@ -392,11 +421,9 @@ pre {
   background-color: #884420;
 }
 
-.json-level-indent {
+.log-config-margin {
-  padding-left: 2em !important;
+  margin-top: 3em;
-}
+  margin-bottom: 3em;
-.item-key {
-  color: #fa6;
 }
 
 </style>