diff --git a/platypush/backend/http/webapp/src/components/panels/Execute/Argdoc.vue b/platypush/backend/http/webapp/src/components/panels/Execute/Argdoc.vue
index d8a9eeef0..df52103ac 100644
--- a/platypush/backend/http/webapp/src/components/panels/Execute/Argdoc.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Execute/Argdoc.vue
@@ -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;
diff --git a/platypush/backend/http/webapp/src/components/panels/Execute/Index.vue b/platypush/backend/http/webapp/src/components/panels/Execute/Index.vue
index fc58135cc..f7b516ab1 100644
--- a/platypush/backend/http/webapp/src/components/panels/Execute/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Execute/Index.vue
@@ -124,16 +124,23 @@
' + JSON.stringify(response, null, 2) + '' + 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*
/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; diff --git a/platypush/backend/http/webapp/src/components/panels/Execute/common.scss b/platypush/backend/http/webapp/src/components/panels/Execute/common.scss index c7b87bc38..b82082ec2 100644 --- a/platypush/backend/http/webapp/src/components/panels/Execute/common.scss +++ b/platypush/backend/http/webapp/src/components/panels/Execute/common.scss @@ -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; + } + } +} + diff --git a/platypush/backend/http/webapp/src/components/panels/Execute/vars.scss b/platypush/backend/http/webapp/src/components/panels/Execute/vars.scss index da12ee719..a49e74d73 100644 --- a/platypush/backend/http/webapp/src/components/panels/Execute/vars.scss +++ b/platypush/backend/http/webapp/src/components/panels/Execute/vars.scss @@ -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;