Merge pull request #1755 from OpenC3/popups

Popups and horizontal scroll

openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/src/BigWidget.vue

@@ -22,7 +22,7 @@
 
 <template>
   <div class="value-widget-container">
-    <v-tooltip location="bottom">
+    <v-tooltip location="top">
       <template v-slot:activator="{ props }">
         <v-text-field
           variant="solo"

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandSender.vue

@@ -74,8 +74,8 @@
       <div class="pa-3">Status: {{ status }}</div>
     </v-card>
     <div style="height: 15px" />
-    <v-row>
-      <v-col>
+    <v-row no-gutters>
+      <v-col class="pr-4">
         <v-card class="pb-2">
           <v-card-subtitle>
             <v-row>
@@ -100,8 +100,10 @@
               </v-col>
             </v-row>
           </v-card-subtitle>
-          <v-row class="mt-2 mb-2">
-            <pre ref="editor" class="editor" data-test="sender-history"></pre>
+          <v-row no-gutters class="mt-2 mb-2">
+            <v-col>
+              <pre ref="editor" class="editor" data-test="sender-history"></pre>
+            </v-col>
           </v-row>
         </v-card>
       </v-col>

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/tools/CmdTlmServer/TargetsTab.vue

@@ -25,7 +25,7 @@
     <v-card-title class="d-flex align-center justify-content-space-between">
       {{ data.length }} Targets
       <v-spacer />
-      <v-tooltip location="bottom" :disabled="enterprise && commandAuthority">
+      <v-tooltip location="top" :disabled="enterprise && commandAuthority">
         <template v-slot:activator="{ props }">
           <!-- This is a little weird because it captures all the clicks -->
           <!-- including the clicks on the button so the tooltipHandler -->
@@ -51,7 +51,7 @@
           learn more.
         </span>
       </v-tooltip>
-      <v-tooltip location="bottom" :disabled="enterprise && commandAuthority">
+      <v-tooltip location="top" :disabled="enterprise && commandAuthority">
         <template v-slot:activator="{ props }">
           <div v-bind="props" @click="tooltipHandler('releaseAll')">
             <v-btn

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/src/tools/DataExtractor/DataExtractor.vue

@@ -103,7 +103,7 @@
           {{ processButtonText }}
         </v-btn>
         <v-spacer />
-        <v-tooltip location="bottom">
+        <v-tooltip location="top">
           <template v-slot:activator="{ props }">
             <v-btn
               icon="mdi-pencil"
@@ -116,7 +116,7 @@
           </template>
           <span> Edit All Items </span>
         </v-tooltip>
-        <v-tooltip location="bottom">
+        <v-tooltip location="top">
           <template v-slot:activator="{ props }">
             <v-btn
               icon="mdi-delete"
@@ -157,7 +157,7 @@
           density="compact"
         >
           <template v-slot:item.edit="{ item }">
-            <v-tooltip location="bottom">
+            <v-tooltip location="top">
               <template v-slot:activator="{ props }">
                 <v-icon
                   @click.stop="item.edit = true"
@@ -230,7 +230,7 @@
             </v-dialog>
           </template>
           <template v-slot:item.delete="{ item }">
-            <v-tooltip location="bottom">
+            <v-tooltip location="top">
               <template v-slot:activator="{ props }">
                 <v-icon
                   @click="deleteItem(item)"

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataviewer/src/tools/DataViewer/AddComponentDialog.vue

@@ -122,7 +122,7 @@
                   density="compact"
                 >
                   <template v-slot:item.delete="{ item }">
-                    <v-tooltip location="bottom">
+                    <v-tooltip location="top">
                       <template v-slot:activator="{ props }">
                         <v-icon @click="deleteItem(item)" v-bind="props">
                           mdi-delete

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataviewer/src/tools/DataViewer/DataViewer.vue

@@ -115,7 +115,7 @@
         >
           {{ tab.tabName }}
         </v-tab>
-        <v-tooltip location="bottom">
+        <v-tooltip location="top">
           <template v-slot:activator="{ props }">
             <v-btn
               icon="mdi-tab-plus"
@@ -145,7 +145,7 @@
               <v-card-title class="pa-3 d-flex align-center">
                 <span v-text="tab.name" />
                 <v-spacer />
-                <v-tooltip location="bottom">
+                <v-tooltip location="top">
                   <template v-slot:activator="{ props }">
                     <v-btn
                       variant="text"

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsControl.vue

@@ -81,7 +81,7 @@
             v-on:add-item="addItem"
             v-on:delete-item="deleteItem"
           />
-          <v-tooltip location="bottom">
+          <v-tooltip location="top">
             <template v-slot:activator="{ props }">
               <v-btn
                 icon="mdi-close-circle-multiple"
@@ -94,7 +94,7 @@
             </template>
             <span>Ignore Entire Packet</span>
           </v-tooltip>
-          <v-tooltip location="bottom">
+          <v-tooltip location="top">
             <template v-slot:activator="{ props }">
               <v-btn
                 icon="mdi-close-circle"
@@ -107,7 +107,7 @@
             </template>
             <span>Ignore Item</span>
           </v-tooltip>
-          <v-tooltip location="bottom">
+          <v-tooltip location="top">
             <template v-slot:activator="{ props }">
               <v-btn
                 icon="mdi-eye-off"

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/Dialogs/OverridesDialog.vue

@@ -59,7 +59,7 @@
             density="compact"
           >
             <template v-slot:item.delete="{ item }">
-              <v-tooltip location="bottom">
+              <v-tooltip location="top">
                 <template v-slot:activator="{ props }">
                   <v-icon @click="deleteOverride(item)" v-bind="props">
                     mdi-delete

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue

@@ -109,7 +109,7 @@
         <v-icon v-if="showDisconnect" class="mt-2" color="red">
           mdi-connection
         </v-icon>
-        <v-tooltip location="bottom">
+        <v-tooltip location="top">
           <template v-slot:activator="{ props }">
             <v-btn
               v-bind="props"
@@ -178,7 +178,7 @@
           >
             <span> Start </span>
           </v-btn>
-          <v-tooltip location="bottom">
+          <v-tooltip location="top">
             <template v-slot:activator="{ props }">
               <v-btn
                 v-bind="props"

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/SuiteRunner.vue

@@ -27,7 +27,7 @@
         <v-col cols="4">
           <v-row no-gutters>
             <v-col cols="6">
-              <v-tooltip location="bottom">
+              <v-tooltip location="top">
                 <template v-slot:activator="{ props }">
                   <div v-bind="props">
                     <v-checkbox
@@ -46,7 +46,7 @@
               </v-tooltip>
             </v-col>
             <v-col cols="6">
-              <v-tooltip location="bottom">
+              <v-tooltip location="top">
                 <template v-slot:activator="{ props }">
                   <div v-bind="props">
                     <v-checkbox
@@ -121,7 +121,7 @@
         <v-col cols="4">
           <v-row no-gutters>
             <v-col cols="6">
-              <v-tooltip location="bottom">
+              <v-tooltip location="top">
                 <template v-slot:activator="{ props }">
                   <div v-bind="props">
                     <v-checkbox
@@ -141,7 +141,7 @@
               </v-tooltip>
             </v-col>
             <v-col cols="6">
-              <v-tooltip location="bottom">
+              <v-tooltip location="top">
                 <template v-slot:activator="{ props }">
                   <div v-bind="props">
                     <v-checkbox
@@ -221,7 +221,7 @@
         <v-col cols="4">
           <v-row no-gutters>
             <v-col cols="6">
-              <v-tooltip location="bottom">
+              <v-tooltip location="top">
                 <template v-slot:activator="{ props }">
                   <div v-bind="props">
                     <v-checkbox
@@ -241,7 +241,7 @@
               </v-tooltip>
             </v-col>
             <v-col cols="6">
-              <v-tooltip location="bottom">
+              <v-tooltip location="top">
                 <template v-slot:activator="{ props }">
                   <div v-bind="props">
                     <v-checkbox

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tablemanager/src/tools/TableManager/TableManager.vue

@@ -122,7 +122,7 @@
             </v-btn>
           </v-col>
           <v-col cols="auto">
-            <v-tooltip location="bottom">
+            <v-tooltip location="top">
               <template v-slot:activator="{ props }">
                 <span v-bind="props">
                   <v-checkbox

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/TlmViewer.vue

@@ -137,7 +137,6 @@ import {
   Openc3Screen,
   OpenConfigDialog,
   SaveConfigDialog,
-  TargetPacketItemChooser,
   TopBar,
 } from '@openc3/vue-common/components'
 import NewScreenDialog from './NewScreenDialog'

openc3-cosmos-init/plugins/packages/openc3-tool-base/src/App.vue

@@ -28,7 +28,7 @@
     <v-main :style="mainStyle" min-height="100vh">
       <v-container fluid height="100%">
         <div><router-view /></div>
-        <div id="openc3-tool"></div>
+        <div id="openc3-tool" style="overflow: auto"></div>
       </v-container>
     </v-main>
     <app-footer app class="d-print-none" />

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/Graph.vue

@@ -30,7 +30,7 @@
         v-show="!hideToolbarData"
       >
         <div v-show="errors.length !== 0" class="mx-2">
-          <v-tooltip text="Errors" location="bottom">
+          <v-tooltip text="Errors" location="top">
             <template v-slot:activator="{ props }">
               <v-icon v-bind="props" @click="errorDialog = true"
                 >mdi-alert</v-icon
@@ -39,7 +39,7 @@
           </v-tooltip>
         </div>
 
-        <v-tooltip text="Edit" location="bottom">
+        <v-tooltip text="Edit" location="top">
           <template v-slot:activator="{ props }">
             <v-icon
               v-bind="props"
@@ -55,7 +55,7 @@
         <v-spacer />
 
         <div v-show="expand">
-          <v-tooltip v-if="calcFullSize" text="Collapse" location="bottom">
+          <v-tooltip v-if="calcFullSize" text="Collapse" location="top">
             <template v-slot:activator="{ props }">
               <v-icon
                 v-bind="props"
@@ -65,7 +65,7 @@
               >
             </template>
           </v-tooltip>
-          <v-tooltip v-else text="Expand" location="bottom">
+          <v-tooltip v-else text="Expand" location="top">
             <template v-slot:activator="{ props }">
               <v-icon v-bind="props" @click="expandAll" data-test="expand-all"
                 >mdi-arrow-expand</v-icon
@@ -75,7 +75,7 @@
         </div>
 
         <div v-show="expand">
-          <v-tooltip v-if="fullWidth" text="Collapse Width" location="bottom">
+          <v-tooltip v-if="fullWidth" text="Collapse Width" location="top">
             <template v-slot:activator="{ props }">
               <v-icon
                 v-bind="props"
@@ -85,7 +85,7 @@
               >
             </template>
           </v-tooltip>
-          <v-tooltip v-else text="Expand Width" location="bottom">
+          <v-tooltip v-else text="Expand Width" location="top">
             <template v-slot:activator="{ props }">
               <v-icon
                 v-bind="props"
@@ -98,7 +98,7 @@
         </div>
 
         <div v-show="expand">
-          <v-tooltip v-if="fullHeight" text="Collapse Height" location="bottom">
+          <v-tooltip v-if="fullHeight" text="Collapse Height" location="top">
             <template v-slot:activator="{ props }">
               <v-icon
                 v-bind="props"
@@ -108,7 +108,7 @@
               >
             </template>
           </v-tooltip>
-          <v-tooltip v-else text="Expand Height" location="bottom">
+          <v-tooltip v-else text="Expand Height" location="top">
             <template v-slot:activator="{ props }">
               <v-icon
                 v-bind="props"
@@ -120,7 +120,7 @@
           </v-tooltip>
         </div>
 
-        <v-tooltip v-if="expand" text="Minimize" location="bottom">
+        <v-tooltip v-if="expand" text="Minimize" location="top">
           <template v-slot:activator="{ props }">
             <v-icon
               v-bind="props"
@@ -130,7 +130,7 @@
             >
           </template>
         </v-tooltip>
-        <v-tooltip v-else text="Maximize" location="bottom">
+        <v-tooltip v-else text="Maximize" location="top">
           <template v-slot:activator="{ props }">
             <v-icon
               v-bind="props"
@@ -141,7 +141,7 @@
           </template>
         </v-tooltip>
 
-        <v-tooltip text="Close" location="bottom">
+        <v-tooltip text="Close" location="top">
           <template v-slot:activator="{ props }">
             <v-icon
               v-bind="props"
@@ -305,7 +305,7 @@
     <div v-if="!sparkline" class="u-series" ref="info">
       <v-tooltip
         text="Click item to toggle, Right click to edit"
-        location="bottom"
+        location="top"
       >
         <template v-slot:activator="{ props }">
           <v-icon v-bind="props">mdi-information-variant-circle</v-icon>

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/GraphEditDialog.vue

@@ -134,7 +134,7 @@
             </v-row>
           </div>
           <div class="edit-box">
-            <v-list density="compact">
+            <v-list density="compact" class="horizontal-lines">
               <v-list-item>
                 <span style="padding-top: 5px">
                   Add horizontal lines to the graph
@@ -161,7 +161,7 @@
                     />
                   </v-col>
                   <v-col>
-                    <v-tooltip text="Remove" location="bottom">
+                    <v-tooltip text="Remove" location="top">
                       <template v-slot:activator="{ props }">
                         <v-icon
                           v-bind="props"
@@ -190,7 +190,7 @@
             }"
           >
             <template v-slot:item.actions="{ item }">
-              <v-tooltip text="Remove" location="bottom">
+              <v-tooltip text="Remove" location="top">
                 <template v-slot:activator="{ props }">
                   <v-icon v-bind="props" @click="$emit('remove', item)">
                     mdi-delete
@@ -387,4 +387,7 @@ export default {
   background-color: var(--color-background-surface-selected);
   padding: 5px 5px;
 }
+.horizontal-lines {
+  background-color: var(--color-background-surface-default);
+}
 </style>