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 d8a9eeef01..df52103ac2 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 fc58135cc7..f7b516ab1b 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 @@
-
-

-
+

+ + {{ error != null ? 'Error' : 'Output' }} + + -

-

-
-
+ + +
+
+            
+ +
+
+            
@@ -398,7 +405,10 @@ export default { }, onResponse(response) { - this.response = '
' + 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 c7b87bc383..b82082ec28 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 da12ee719f..a49e74d737 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;