Started shifting extension forms into new nav layout

src/components/controlComponents/panePlugins.vue

@@ -1,17 +0,0 @@
-<template>
-  <div id="panePlugins">
-    <h3>Plugins</h3>
-    <div class="uk-placeholder uk-text-center">
-      Plugin support coming soon...
-    </div>
-  </div>
-</template>
-
-<script>
-// Export main app
-export default {
-  name: "PanePlugins"
-};
-</script>
-
-<style lang="less"></style>

src/components/panelLeft.vue

@@ -122,7 +122,7 @@
           :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
           class="uk-flex uk-flex-column"
         >
-          <JsonForm
+          <extensionContent
             :name="form.name"
             :route="form.route"
             :is-task="form.isTask"
@@ -145,16 +145,13 @@ import axios from "axios";
 import tabIcon from "./genericComponents/tabIcon";
 import tabContent from "./genericComponents/tabContent";
 
-// Import control components
-import paneNavigate from "./controlComponents/paneNavigate";
-import paneCapture from "./controlComponents/paneCapture";
-
 // Import new content components
 import connectContent from "./tabContentComponents/connectContent.vue";
 import navigateContent from "./tabContentComponents/navigateContent.vue";
 import captureContent from "./tabContentComponents/captureContent.vue";
 import settingsContent from "./tabContentComponents/settingsContent.vue";
 import galleryContent from "./tabContentComponents/galleryContent.vue";
+import extensionContent from "./tabContentComponents/extensionContent.vue";
 
 // Import plugin components
 import JsonForm from "./pluginComponents/JsonForm";
@@ -166,14 +163,13 @@ export default {
   components: {
     tabIcon,
     tabContent,
-    paneNavigate,
-    paneCapture,
     JsonForm,
     connectContent,
     navigateContent,
     captureContent,
     settingsContent,
-    galleryContent
+    galleryContent,
+    extensionContent
   },
 
   data: function() {

src/components/pluginComponents/JsonForm.vue

@@ -203,6 +203,7 @@ export default {
 
     updateForm() {
       // Trigger a plugin form update
+      console.log("Emitting reloadForms");
       this.$emit("reloadForms");
     },
 

src/components/tabContentComponents/extensionContent.vue

@@ -0,0 +1,52 @@
+<template>
+  <!-- Grid managing tab content -->
+  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="control-component">
+      <JsonForm v-bind="$props" v-on="$listeners" />
+    </div>
+    <div class="view-component uk-width-expand"></div>
+  </div>
+</template>
+
+<script>
+import JsonForm from "../pluginComponents/JsonForm";
+
+export default {
+  name: "ExtensionContent",
+
+  components: {
+    JsonForm
+  },
+
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: "Plugin"
+    },
+    schema: {
+      type: Array,
+      required: true
+    },
+    route: {
+      type: String,
+      required: true
+    },
+    isTask: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    submitLabel: {
+      type: String,
+      required: false,
+      default: "Submit"
+    },
+    emitOnResponse: {
+      type: String,
+      required: false,
+      default: null
+    }
+  }
+};
+</script>

src/components/viewComponents/settingsDisplay.vue

@@ -6,13 +6,17 @@
         <appSettings />
         <streamSettings />
       </div>
-      <div v-if="$store.getters.ready">
+      <div>
-        <h3>Camera settings</h3>
+        <div v-if="$store.getters.ready">
-        <cameraSettings />
+          <h3>Camera settings</h3>
+          <cameraSettings />
+        </div>
       </div>
-      <div v-if="$store.getters.ready">
+      <div>
-        <h3>Microscope settings</h3>
+        <div v-if="$store.getters.ready">
-        <microscopeSettings />
+          <h3>Microscope settings</h3>
+          <microscopeSettings />
+        </div>
       </div>
     </div>
   </div>