Replaced radio buttons on the Execute panel with buttons.

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

@@ -3,16 +3,18 @@
     <Loading v-if="loading" />
     <div class="section command-container">
       <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"
-                 :checked="structuredInput" @change="onInputTypeChange(true)">
-          <label for="action-structured-input">Structured request</label>
-          <input type="radio" id="action-raw-input"
-                 :checked="!structuredInput" @change="onInputTypeChange(false)">
-          <label for="action-raw-input">Raw request</label>
-        </div>
 
+      <Tabs>
+        <Tab :selected="structuredInput" icon-class="fas fa-list" @input="onInputTypeChange(true)">
+          Structured
+        </Tab>
+
+        <Tab :selected="!structuredInput" icon-class="fas fa-code" @input="onInputTypeChange(false)">
+          Raw
+        </Tab>
+      </Tabs>
+
+      <form class="action-form" ref="actionForm" autocomplete="off" @submit.prevent="executeAction">
         <div class="request structured-request" :class="structuredInput ? '' : 'hidden'">
           <div class="request-header">
             <div class="autocomplete">
@@ -32,7 +34,8 @@
 
           <div class="doc-container" v-if="selectedDoc">
             <div class="title">
-              <a :href="currentActionDocURL">Action documentation</a>
+              <i class="fas fa-book" /> &nbsp;
+              <a :href="this.action?.doc_url">Action documentation</a>
             </div>
 
             <div class="doc html">
@@ -41,8 +44,14 @@
             </div>
           </div>
 
-          <div class="options" v-if="action.name in actions && (Object.keys(action.args).length ||
-              action.supportsExtraArgs)">
+          <div class="options-container"
+              v-if="action.name in actions && (Object.keys(action.args).length || action.supportsExtraArgs)">
+            <div class="header title row">
+              <i class="fas fa-code" /> &nbsp;
+              Arguments
+            </div>
+
+            <div class="options">
               <div class="params" ref="params"
                    v-if="Object.keys(action.args).length || action.supportsExtraArgs">
                 <div class="param" :key="name" v-for="name in Object.keys(action.args)">
@@ -102,6 +111,7 @@
                 </div>
               </div>
             </div>
+          </div>
 
           <div class="output-container">
             <div class="header" v-if="error != null || response != null">
@@ -143,7 +153,7 @@
       </form>
     </div>
 
-    <div class="section procedures-container">
+    <div class="section procedures-container" v-if="Object.keys(procedures).length">
       <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)">
@@ -176,12 +186,14 @@
 
 <script>
 import autocomplete from "@/components/elements/Autocomplete"
+import Tabs from "@/components/elements/Tabs";
+import Tab from "@/components/elements/Tab";
 import Utils from "@/Utils"
 import Loading from "@/components/Loading";
 
 export default {
   name: "Execute",
-  components: {Loading},
+  components: {Loading, Tabs, Tab},
   mixins: [Utils],
 
   data() {
@@ -219,19 +231,7 @@ export default {
 
   computed: {
     currentActionDocURL() {
-      if (!this.action?.name?.length)
-        return undefined
-
-      const plugin = this.action.name.split('.').slice(0, -1).join('.')
-      const actionName = this.action.name.split('.').slice(-1)
-      const actionClass = this.action.name
-        .split('.')
-        .slice(0, -1)
-        .map((token) => token.slice(0, 1).toUpperCase() + token.slice(1))
-        .join('') + 'Plugin'
-
-      return 'https://docs.platypush.tech/platypush/plugins/' +
-        `${plugin}.html#platypush.plugins.${plugin}.${actionClass}.${actionName}`
+      return this.action?.doc_url
     },
   },
 
@@ -505,10 +505,11 @@ $params-tablet-width: 20em;
 $request-headers-btn-width: 7.5em;
 
 @mixin header {
-  background: $default-bg-5;
   display: flex;
+  background: $header-bg-2;
   align-items: center;
   padding: 0.5em;
+  margin-bottom: 0.1em;
   border: $title-border;
   border-radius: 1em;
   box-shadow: $title-shadow;
@@ -582,16 +583,6 @@ $request-headers-btn-width: 7.5em;
     }
   }
 
-  .request-type-container {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-
-    label {
-      margin: 0 1em 0 .5em;
-    }
-  }
-
   .request {
     display: flex;
     flex-direction: column;
@@ -608,9 +599,7 @@ $request-headers-btn-width: 7.5em;
 
     .options {
       display: flex;
-      margin-top: .5em;
       margin-bottom: 1.5em;
-      padding-top: .5em;
 
       @include until($tablet) {
         flex-direction: column;
@@ -753,7 +742,10 @@ $request-headers-btn-width: 7.5em;
       }
     }
 
-    .output-container, .doc-container, .attr-doc-container {
+    .output-container,
+    .doc-container,
+    .attr-doc-container,
+    .options-container {
       max-height: 50vh;
       display: flex;
       flex-direction: column;
@@ -808,6 +800,11 @@ $request-headers-btn-width: 7.5em;
       }
     }
 
+    .options-container {
+      margin-top: .5em;
+      padding-top: .5em;
+    }
+
     textarea {
       width: 100%;
       height: 10em;