Many improvements for the `execute` panel.

platypush/backend/http/webapp/src/components/panels/Execute/Index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="row plugin execute-container">
     <Loading v-if="loading" />
-    <div class="command-container">
+    <div class="section command-container">
-      <div class="title">Execute Action</div>
+      <div class="section-title">Execute Action</div>
       <form class="action-form" ref="actionForm" autocomplete="off" @submit.prevent="executeAction">
         <div class="request-type-container">
           <input type="radio" id="action-structured-input"
@@ -14,17 +14,21 @@
         </div>
 
         <div class="request structured-request" :class="structuredInput ? '' : 'hidden'">
-          <div class="autocomplete">
+          <div class="request-header">
-            <label>
+            <div class="autocomplete">
-              <input ref="actionName" type="text" class="action-name"
+              <label>
-                     placeholder="Action Name" :disabled="running" v-model="action.name"
+                <input ref="actionName" type="text" class="action-name"
-                     @change="actionChanged=true" @blur="updateAction">
+                       placeholder="Action Name" :disabled="running" v-model="action.name"
-            </label>
+                       @change="actionChanged=true" @blur="updateAction">
+              </label>
+            </div>
+            <div class="buttons">
+              <button type="submit" class="run-btn btn-primary"
+                :disabled="running || !action?.name?.length" title="Run">
+                <i class="fas fa-play" />
+              </button>
+            </div>
           </div>
-          <button type="submit" class="run-btn btn-primary"
-            :disabled="running || !action?.name?.length" title="Run">
-            <i class="fas fa-play" />
-          </button>
 
           <div class="doc-container" v-if="selectedDoc">
             <div class="title">
@@ -100,7 +104,14 @@
           </div>
 
           <div class="output-container">
-            <div class="title" v-text="error != null ? 'Error' : 'Output'" v-if="error != null || response != null" />
+            <div class="header" v-if="error != null || response != null">
+              <div class="title" v-text="error != null ? 'Error' : 'Output'" />
+              <div class="buttons">
+                <button type="button" title="Copy to clipboard" @click="copyToClipboard">
+                  <i class="fas fa-clipboard" />
+                </button>
+              </div>
+            </div>
             <div class="response" v-html="response" v-if="response != null" />
             <div class="error" v-html="error" v-else-if="error != null" />
           </div>
@@ -117,7 +128,14 @@
           </div>
 
           <div class="output-container" v-if="response != null || error != null">
-            <div class="title" v-text="error != null ? 'Error' : 'Output'" />
+            <div class="header" v-if="error != null || response != null">
+              <div class="title" v-text="error != null ? 'Error' : 'Output'" />
+              <div class="buttons">
+                <button type="button" title="Copy to clipboard" @click="copyToClipboard">
+                  <i class="fas fa-clipboard" />
+                </button>
+              </div>
+            </div>
             <div class="error" v-html="error" v-if="error != null" />
             <div class="response" v-html="response" v-else-if="response != null" />
           </div>
@@ -125,8 +143,8 @@
       </form>
     </div>
 
-    <div class="procedures-container">
+    <div class="section procedures-container">
-      <div class="title">Execute Procedure</div>
+      <div class="section-title">Execute Procedure</div>
       <div class="procedure" :class="selectedProcedure.name === name ? 'selected' : ''"
            v-for="name in Object.keys(procedures).sort()" :key="name" @click="updateProcedure(name, $event)">
         <form ref="procedureForm" autocomplete="off" @submit.prevent="executeProcedure">
@@ -323,8 +341,6 @@ export default {
     },
 
     resetAttrDoc() {
-      this.response = undefined
-      this.error = undefined
       this.selectedAttr = undefined
       this.selectedAttrDoc = undefined
     },
@@ -356,6 +372,14 @@ export default {
       this.running = false
     },
 
+    async copyToClipboard() {
+      const output = (
+        this.error != null ? this.error : this.response
+      ).replace(/^\s*<pre>/g, '').replace(/<\/pre>\s*/g, '')
+
+      await navigator.clipboard.writeText(output)
+    },
+
     executeAction() {
       if (!this.action.name && !this.rawRequest || this.running)
         return
@@ -451,6 +475,19 @@ export default {
 
 $params-desktop-width: 30em;
 $params-tablet-width: 20em;
+$request-headers-btn-width: 7.5em;
+
+@mixin header {
+  background: $default-bg-5;
+  display: flex;
+  align-items: center;
+  padding: 0.5em;
+  border: $title-border;
+  border-radius: 1em;
+  box-shadow: $title-shadow;
+  font-weight: normal;
+  font-size: 1em;
+}
 
 .execute-container {
   width: 100%;
@@ -459,6 +496,22 @@ $params-tablet-width: 20em;
   font-weight: 400;
   border-bottom: $default-border-2;
   border-radius: 0 0 1em 1em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .section {
+    width: 100%;
+    max-width: 1000px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: $section-shadow;
+
+    @include from($desktop) {
+      margin: 1em;
+      border-radius: 1em 1em 0 0;
+    }
+  }
 
   form {
     padding: 0;
@@ -472,13 +525,34 @@ $params-tablet-width: 20em;
     padding: 1em .5em;
   }
 
-  .title {
+  .request-header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    .autocomplete {
+      width: calc(100% - $request-headers-btn-width);
+      flex-grow: 1;
+    }
+
+    .buttons {
+      width: $request-headers-btn-width;
+      display: inline-flex;
+      justify-content: flex-end;
+      margin-right: 0.5em;
+    }
+  }
+
+  .section-title {
     background: $header-bg;
-    padding: .5em;
+    padding: .75em .5em;
-    border: $title-border;
     box-shadow: $title-shadow;
     font-size: 1.1em;
     margin-bottom: 0 !important;
+
+    @include from($desktop) {
+      border-radius: 0.5em 0.5em 0 0;
+    }
   }
 
   .request-type-container {
@@ -492,26 +566,19 @@ $params-tablet-width: 20em;
   }
 
   .request {
+    display: flex;
+    flex-direction: column;
     margin: 0 .5em;
 
     form {
       margin-bottom: 0 !important;
     }
 
-    .autocomplete {
-      width: 80%;
-      max-width: 60em;
-    }
-
     .action-name {
       box-shadow: $action-name-shadow;
       width: 100%;
     }
 
-    [type=submit] {
-      margin-left: 2em;
-    }
-
     .options {
       display: flex;
       margin-top: .5em;
@@ -604,6 +671,22 @@ $params-tablet-width: 20em;
       margin-top: .5em;
     }
 
+    .doc-container,
+    .attr-doc-container {
+      .title {
+        @include header;
+      }
+    }
+
+    .attr-doc-container {
+      .title {
+        .attr-name {
+          font-weight: bold;
+          margin-left: 0.25em;
+        }
+      }
+    }
+
     .output-container {
       flex-grow: 1;
     }
@@ -648,12 +731,22 @@ $params-tablet-width: 20em;
       display: flex;
       flex-direction: column;
 
-      .title {
+      .header {
-        font-weight: normal;
+        @include header;
-        font-size: 1em;
+
-        padding: .5em;
+        .title {
-        background: $section-title-bg;
+          flex-grow: 1;
-        border-radius: .5em;
+        }
+
+        button {
+          background: none;
+          border: none;
+          box-shadow: none;
+
+          &:hover {
+            color: $default-hover-fg;
+          }
+        }
 
         .attr-name {
           display: inline-block;
@@ -666,23 +759,25 @@ $params-tablet-width: 20em;
       .doc {
         height: 100%;
         padding: .5em .5em 0 .5em;
-        border-radius: 0 0 1em 1em;
+        border-radius: 1em;
         overflow: auto;
+        margin-top: 0.1em;
       }
 
       .response {
         background: $response-bg;
-        border: $response-border;
+        box-shadow: $response-shadow;
       }
 
       .error {
         background: $error-bg;
-        border: $error-border;
+        padding: 1em;
+        box-shadow: $error-shadow;
       }
 
       .doc {
         background: $doc-bg;
-        border: $doc-border;
+        box-shadow: $doc-shadow;
       }
     }
 
@@ -791,9 +886,6 @@ $params-tablet-width: 20em;
         box-shadow: none;
       }
     }
-
-    &:not(disabled) {
-    }
   }
 }
 </style>

platypush/backend/http/webapp/src/components/panels/Execute/vars.scss

@@ -1,13 +1,14 @@
+$section-shadow: 0 3px 3px 0 rgba(187,187,187,0.75), 0 3px 3px 0 rgba(187,187,187,0.75);
 $title-bg: #eee;
 $title-border: 1px solid #ddd;
 $title-shadow: 0 3px 3px 0 rgba(187,187,187,0.75);
 $action-name-shadow: 1px 1px 1px 1px #ddd;
 $extra-params-btn-bg: #eee;
-$response-bg: #edfff2;
+$response-bg: linear-gradient(#dbffe5, #d5ecdc);
-$response-border: 1px dashed #98ff98;
+$error-bg: linear-gradient(#ffd9d9, #e6cbcb);
-$error-bg: #ffbcbc;
+$error-shadow: 0 1px 3px 1px #d7c0c0, inset 0 1px 1px 0 #d7c9c9;
-$error-border: 1px dashed #ff5353;
+$doc-bg: linear-gradient(#effbe3, #e0ecdb);
-$doc-bg: $background-color;
+$doc-shadow: 0 1px 3px 1px #d7d3c0, inset 0 1px 1px 0 #d7d3c9;
-$doc-border: 1px dashed $border-color-2;
+$response-shadow: $doc-shadow;
 $procedure-submit-btn-bg: #ebffeb;
 $section-title-bg: rgba(0, 0, 0, .04);