Logger cosmetics

This commit is contained in:
Tamius Han 2020-03-12 23:36:06 +01:00
parent 7e74aa2c3b
commit a629bbeab7

View File

@ -31,10 +31,18 @@
<div class="settings-panel flex flex-noshrink flex-column"> <div class="settings-panel flex flex-noshrink flex-column">
<div class="panel-top flex-nogrow"> <div class="panel-top flex-nogrow">
<h2>Logger configuration</h2> <h2>Logger configuration</h2>
<p>Paste logger configuration in this box</p> </div>
<div class="flex flex-row flex-end w100">
<div v-if="!showTextMode" class="button" @click="showTextMode = true">
Paste config ...
</div>
<div v-else class="button" @click="showTextMode = false">
Back
</div>
</div> </div>
<div class="panel-middle scrollable flex-grow p-t-025em"> <div class="panel-middle scrollable flex-grow log-config-margin">
<template v-if="showTextMode">
<div ref="settingsEditArea" <div ref="settingsEditArea"
style="white-space: pre-wrap; border: 1px solid orange; padding: 10px;" style="white-space: pre-wrap; border: 1px solid orange; padding: 10px;"
class="monospace h100" class="monospace h100"
@ -44,18 +52,25 @@
> >
{{parsedSettings}} {{parsedSettings}}
</div> </div>
</div> </template>
<div class="flex-noshrink flex flex-row flex-cross-center p-t-025em"> <template v-else>
<div class="button button-bar" <JsonObject label="logger-settings"
@click="restoreLoggerSettings()" :value="currentSettings"
> :ignoreKeys="{'allowLogging': true}"
Revert logger config @change="updateSettingsUi"
</div> ></JsonObject>
</div> </template>
</div> </div>
<div class="settings-panel flex flex-noshrink flex-column">
<JsonObject :value="currentSettings" label="logger-settings" @change="updateSettingsUi"></JsonObject> <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>
<!-- LOGGER OUTPUT/START LOGGING --> <!-- LOGGER OUTPUT/START LOGGING -->
@ -110,11 +125,21 @@
> >
Stop logging Stop logging
</div> </div>
<p v-if="lastSettings && lastSettings.timeout" <template v-if="lastSettings && lastSettings.timeout"
class="m-025em" class="m-025em"
> >
<p>
... or wait until logging ends. ... or wait until logging ends.
</p> </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>
<div v-else class="flex flex-column flex-center flex-cross-center w100 h100"> <div v-else class="flex flex-column flex-center flex-cross-center w100 h100">
<div class="button button-big button-primary" <div class="button button-big button-primary"
@ -156,6 +181,7 @@ export default {
currentSettings: {}, currentSettings: {},
confHasError: false, confHasError: false,
logStringified: '', logStringified: '',
showTextMode: false,
} }
}, },
async created() { async created() {
@ -221,6 +247,9 @@ export default {
} }
}, },
saveLoggerSettings() {
Logger.saveConfig({...this.lastSettings});
},
restoreLoggerSettings() { restoreLoggerSettings() {
this.getLoggerSettings(); this.getLoggerSettings();
this.confHasError = false; this.confHasError = false;
@ -392,11 +421,9 @@ pre {
background-color: #884420; background-color: #884420;
} }
.json-level-indent { .log-config-margin {
padding-left: 2em !important; margin-top: 3em;
} margin-bottom: 3em;
.item-key {
color: #fa6;
} }
</style> </style>