forked from platypush/platypush
[Execute panel] Better rendering of responses and errors.
This commit is contained in:
parent
21820bb185
commit
fc21e9740b
GPG key ID:
D90FBA7F76362774
4 changed files with 72 additions and 53 deletions
|
|
@ -82,7 +82,7 @@ export default {
|
|||
.flag {
|
||||
font-size: 0.9em;
|
||||
margin-left: 0.5em;
|
||||
margin-bottom: 0.1em;
|
||||
margin-bottom: 0.2em;
|
||||
|
||||
&.required {
|
||||
color: $error-fg;
|
||||
|
|
|
|||
|
|
@ -124,16 +124,23 @@
|
|||
</section>
|
||||
|
||||
<section class="response">
|
||||
<hgroup v-if="error != null || response != null">
|
||||
<h2 v-text="error != null ? 'Error' : 'Output'" />
|
||||
<div class="buttons">
|
||||
<h2 v-if="error != null || response != null">
|
||||
<span class="title">
|
||||
{{ error != null ? 'Error' : 'Output' }}
|
||||
</span>
|
||||
<span class="buttons">
|
||||
<button type="button" title="Copy to clipboard" @click="copyToClipboard">
|
||||
<i class="fas fa-clipboard" />
|
||||
</button>
|
||||
</div>
|
||||
</hgroup>
|
||||
<div class="response" v-html="response" v-if="response != null" />
|
||||
<div class="error" v-html="error" v-else-if="error != null" />
|
||||
</span>
|
||||
</h2>
|
||||
<div class="output response" v-if="response != null">
|
||||
<pre v-text="response" />
|
||||
</div>
|
||||
|
||||
<div class="output error" v-else-if="error != null">
|
||||
<pre v-text="error" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
|
@ -398,7 +405,10 @@ export default {
|
|||
},
|
||||
|
||||
onResponse(response) {
|
||||
this.response = '<pre>' + JSON.stringify(response, null, 2) + '</pre>'
|
||||
this.response = (
|
||||
typeof response === 'string' ? response : JSON.stringify(response, null, 2)
|
||||
).trim()
|
||||
|
||||
this.error = undefined
|
||||
},
|
||||
|
||||
|
|
@ -414,7 +424,7 @@ export default {
|
|||
async copyToClipboard() {
|
||||
const output = (
|
||||
this.error != null ? this.error : this.response
|
||||
).replace(/^\s*<pre>/g, '').replace(/<\/pre>\s*/g, '')
|
||||
)
|
||||
|
||||
await navigator.clipboard.writeText(output)
|
||||
},
|
||||
|
|
@ -528,7 +538,6 @@ export default {
|
|||
height: 100%;
|
||||
color: $default-fg-2;
|
||||
font-weight: 400;
|
||||
border-bottom: $default-border-2;
|
||||
border-radius: 0 0 1em 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
@import "vars.scss";
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
color: $default-hover-fg;
|
||||
}
|
||||
}
|
||||
|
||||
hgroup {
|
||||
flex-grow: 1;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
color: $default-hover-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -36,25 +36,10 @@ section {
|
|||
flex-direction: column;
|
||||
margin-top: .5em;
|
||||
|
||||
&.response {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&.args {
|
||||
margin-top: .5em;
|
||||
padding-top: .5em;
|
||||
}
|
||||
|
||||
.response {
|
||||
background: $response-bg;
|
||||
box-shadow: $response-shadow;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: $error-bg;
|
||||
padding: 1em;
|
||||
box-shadow: $error-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
|
|
@ -63,14 +48,6 @@ section {
|
|||
justify-content: center;
|
||||
margin-bottom: 0.25em;
|
||||
flex-grow: 1;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
|
||||
&:hover {
|
||||
color: $default-hover-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
@ -107,10 +84,6 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
background: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 10em;
|
||||
|
|
@ -234,3 +207,40 @@ form {
|
|||
}
|
||||
}
|
||||
|
||||
.response {
|
||||
flex-grow: 1;
|
||||
|
||||
h2 {
|
||||
display: inline-flex;
|
||||
|
||||
.title {
|
||||
width: calc(100% - 2em);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
width: 2em;
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.output {
|
||||
background: $output-bg;
|
||||
padding: 0 0.75em;
|
||||
overflow: auto;
|
||||
margin-top: 0.1em;
|
||||
border-radius: 1em;
|
||||
box-shadow: $output-shadow;
|
||||
|
||||
&.response {
|
||||
color: $response-fg;
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: $error-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ $title-bg: #eee;
|
|||
$title-border: 1px solid #ddd;
|
||||
$title-shadow: 0 3px 3px 0 rgba(187,187,187,0.75);
|
||||
$extra-params-btn-bg: #eee;
|
||||
$response-bg: linear-gradient(#dbffe5, #d5ecdc);
|
||||
$error-bg: linear-gradient(#ffd9d9, #e6cbcb);
|
||||
$error-shadow: 0 1px 3px 1px #d7c0c0, inset 0 1px 1px 0 #d7c9c9;
|
||||
$doc-bg: linear-gradient(#effbe3, #e0ecdb);
|
||||
$doc-shadow: 0 1px 3px 1px #d7d3c0, inset 0 1px 1px 0 #d7d3c9;
|
||||
$response-shadow: $doc-shadow;
|
||||
$output-bg: #151515;
|
||||
$output-shadow: $doc-shadow;
|
||||
$response-fg: white;
|
||||
$error-fg: red;
|
||||
$doc-bg: linear-gradient(#effbe3, #e0ecdb);
|
||||
$procedure-submit-btn-bg: #ebffeb;
|
||||
$section-title-bg: rgba(0, 0, 0, .04);
|
||||
$params-desktop-width: 30em;
|
||||
|
|
|
|||
Loading…
Reference in a new issue