allow closing widgets

ArduPilot · Apr 7, 2024 · 07e7374 · 07e7374
1 parent 3cd4ea4
commit 07e7374
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 5 deletions.
diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -10,11 +10,11 @@
             </div>
         </template>
         <TxInputs fixed-aspect-ratio v-if="state.mapAvailable && state.showMap && state.showRadio"></TxInputs>
-        <ParamViewer v-if="state.showParams"></ParamViewer>
-        <MessageViewer v-if="state.showMessages"></MessageViewer>
-        <DeviceIDViewer v-if="state.showDeviceIDs"></DeviceIDViewer>
-        <AttitudeViewer v-if="state.showAttitude"></AttitudeViewer>
-        <MagFitTool v-if="state.showMagfit"></MagFitTool>
+        <ParamViewer    @close="state.showParams = false" v-if="state.showParams"></ParamViewer>
+        <MessageViewer  @close="state.showMessages = false" v-if="state.showMessages"></MessageViewer>
+        <DeviceIDViewer @close="state.showDeviceIDs = false" v-if="state.showDeviceIDs"></DeviceIDViewer>
+        <AttitudeViewer @close="state.showAttitude = false" v-if="state.showAttitude"></AttitudeViewer>
+        <MagFitTool     @close="state.showMagfit = false" v-if="state.showMagfit"></MagFitTool>
         <div class="container-fluid" style="height: 100%; overflow: hidden;">
 
             <sidebar/>

diff --git a/src/components/widgets/AttitudeWidget.vue b/src/components/widgets/AttitudeWidget.vue
@@ -9,6 +9,7 @@
     }"
   >
     <div id="paneContent">
+      <span style="float: right; margin: 3px; cursor: pointer;" @click="close()"> X </span>
       <Attitude :roll="roll" :pitch="pitch" />
     </div>
   </div>

diff --git a/src/components/widgets/DeviceIDViewer.vue b/src/components/widgets/DeviceIDViewer.vue
@@ -2,6 +2,7 @@
     <div :id="getDivName()"
          v-bind:style='{width:  width + "px", height: height + "px", top: top + "px", left: left + "px" }'>
         <div id='paneContent'>
+            <span style="float: right; margin: 3px; cursor: pointer;" @click="close()"> X </span>
             <ul>
                 <li v-bind:key="device.param" v-for="device in this.devices">
                     {{device.param}}:

diff --git a/src/components/widgets/MagFitTool.vue b/src/components/widgets/MagFitTool.vue
@@ -2,6 +2,7 @@
     <div :id="getDivName()"
          v-bind:style='{width:  width + "px", height: height + "px", top: top + "px", left: left + "px" }'>
         <div id='paneContent'>
+            <span style="float: right; margin: 3px; cursor: pointer;" @click="close()"> X </span>
             <h5>Mag Fit Tool</h5>
             <div class="section">
               <h6>Location</h6>

diff --git a/src/components/widgets/MessageViewer.vue b/src/components/widgets/MessageViewer.vue
@@ -2,6 +2,7 @@
     <div :id="getDivName()"
          v-bind:style="{width:  width + 'px', height: height + 'px', top: top + 'px', left: left + 'px' }">
         <div id="paneContent">
+          <span style="float: right; margin: 3px; cursor: pointer;" @click="close()"> X </span>
             <ul>
                 <li v-bind:key="msg[0]+msg[1]" v-for="msg in filteredData">
                     [{{timeFormatter(msg[0])}}]: {{ msg[2] }}

diff --git a/src/components/widgets/ParamViewer.vue b/src/components/widgets/ParamViewer.vue
@@ -2,6 +2,7 @@
     <div :id="getDivName()"
          v-bind:style="{width:  width + 'px', height: height + 'px', top: top + 'px', left: left + 'px' }">
         <div id="paneContent">
+            <span style="float: right; margin: 3px; cursor: pointer;" @click="close()"> X </span>
             <input id="filterbox" placeholder="Filter" v-model="filter">
             <button @click="saveParametersToFile">save</button>
             <b-form-checkbox

diff --git a/src/components/widgets/baseWidget.js b/src/components/widgets/baseWidget.js
@@ -19,6 +19,9 @@ export const baseWidget = {
         }
     },
     methods: {
+        close () {
+            this.$emit('close')
+        },
         getDivName () {
             return 'pane' + this.name
         }