Merge pull request #63 from simonsobs/dev

Replace menus with bottom sheets for mobile in some components

src/components/main/run-frame/top-bar/ActionRunning.vue

@@ -8,7 +8,7 @@
   >
     interrupt
   </VBtn>
-  <VMenu offset-y>
+  <Component :is="menuComponent" v-bind="menuAttributes">
     <template #activator="{ props }">
       <VBtn variant="text" v-bind="props" icon="mdi-dots-horizontal" density="compact">
       </VBtn>
@@ -27,10 +27,12 @@
         Kill
       </VListItem>
     </VList>
-  </VMenu>
+  </Component>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
+import { useDisplay } from "vuetify";
 import {
   useCtrlInterruptMutation,
   useCtrlTerminateMutation,
@@ -40,4 +42,11 @@ import {
 const { executeMutation: executeInterrupt } = useCtrlInterruptMutation();
 const { executeMutation: executeTerminate } = useCtrlTerminateMutation();
 const { executeMutation: executeKill } = useCtrlKillMutation();
+
+const { mobile } = useDisplay();
+
+const menuComponent = computed(() => (mobile.value ? "VBottomSheet" : "VMenu"));
+const menuAttributes = computed(() =>
+  mobile.value ? {} : { location: "top", offset: 8 }
+);
 </script>

src/components/main/trace-frame/script-editor/Actions.vue

@@ -16,7 +16,7 @@
     >
       save
     </VBtn>
-    <VMenu location="top">
+    <Component :is="menuComponent" v-bind="menuAttributes">
       <template #activator="{ props }">
         <VBtn v-bind="props" icon="mdi-dots-horizontal"> </VBtn>
       </template>
@@ -34,11 +34,13 @@
           Load Example Script
         </VListItem>
       </VList>
-    </VMenu>
+    </Component>
   </VCardActions>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
+import { useDisplay } from "vuetify";
 import { useDevTool } from "@/utils/dev/enabled";
 interface Props {
   editing: boolean;
@@ -55,4 +57,9 @@ type Emits = {
 
 defineProps<Props>();
 const emit = defineEmits<Emits>();
+
+const { mobile } = useDisplay();
+
+const menuComponent = computed(() => (mobile.value ? "VBottomSheet" : "VMenu"));
+const menuAttributes = computed(() => (mobile.value ? {} : { location: "top" }));
 </script>

src/components/schedule/auto-mode/auto-mode-button/modes/off/Button.vue

@@ -1,12 +1,30 @@
 <template>
-  <VMenu>
+  <Component :is="menuComponent">
     <template #activator="{ props }">
       <VBtn v-bind="props"> Auto Mode: Off </VBtn>
     </template>
-    <DialogOff></DialogOff>
-  </VMenu>
+    <div>
+      <Dialog class="dialog"></Dialog>
+    </div>
+  </Component>
 </template>
 
 <script setup lang="ts">
-import DialogOff from "./Dialog.vue";
+import { computed } from "vue";
+import { useDisplay } from "vuetify";
+import Dialog from "./Dialog.vue";
+const { mobile } = useDisplay();
+const menuComponent = computed(() => (mobile.value ? "VBottomSheet" : "VMenu"));
 </script>
+
+<style scoped>
+.v-bottom-sheet .dialog {
+  border-radius: 0 !important;
+  padding: 4px 4px 24px 4px;
+}
+
+.v-menu .dialog {
+  width: 290px;
+  padding: 4px;
+}
+</style>

src/components/schedule/auto-mode/auto-mode-button/modes/off/Dialog.vue

@@ -1,35 +1,33 @@
 <template>
-  <div>
-    <VCard>
-      <VCardText>
-        <div class="mb-1">
-          <p class="font-weight-medium">
-            The auto mode is currently <span class="font-italic"> off </span>.
-          </p>
-          <p class="mt-3">
-            If on, it automatically loads and runs the next script after each run
-            successfully ends.
-          </p>
-          <p class="mt-3">
-            The auto mode can load scripts from either the
-            <span class="font-italic"> scheduler </span> or the
-            <span class="font-italic"> queue </span>.
-          </p>
-          <p class="mt-3">Turn on auto mode?</p>
-        </div>
-      </VCardText>
-      <VCardActions>
-        <VSpacer></VSpacer>
-        <VBtn variant="outlined" @click="turnOnFromScheduler">
-          turn on from scheduler
-        </VBtn>
-      </VCardActions>
-      <VCardActions>
-        <VSpacer></VSpacer>
-        <VBtn variant="outlined" @click="turnOnFromQueue"> turn on from queue </VBtn>
-      </VCardActions>
-    </VCard>
-  </div>
+  <VCard>
+    <VCardText>
+      <div class="mb-1">
+        <p class="font-weight-medium">
+          The auto mode is currently <span class="font-italic"> off </span>.
+        </p>
+        <p class="mt-3">
+          If on, it automatically loads and runs the next script after each run
+          successfully ends.
+        </p>
+        <p class="mt-3">
+          The auto mode can load scripts from either the
+          <span class="font-italic"> scheduler </span> or the
+          <span class="font-italic"> queue </span>.
+        </p>
+        <p class="mt-3">Turn on auto mode?</p>
+      </div>
+    </VCardText>
+    <VCardActions>
+      <VBtn variant="outlined" @click="turnOnFromScheduler" class="flex-grow-1">
+        turn on from scheduler
+      </VBtn>
+    </VCardActions>
+    <VCardActions>
+      <VBtn variant="outlined" @click="turnOnFromQueue" class="flex-grow-1">
+        turn on from queue
+      </VBtn>
+    </VCardActions>
+  </VCard>
 </template>
 
 <script setup lang="ts">
@@ -45,10 +43,3 @@ async function turnOnFromQueue() {
   await changeMode({ mode: "queue" });
 }
 </script>
-
-<style scoped>
-:deep(.v-card) {
-  width: 290px;
-  padding: 4px;
-}
-</style>

src/components/schedule/auto-mode/auto-mode-button/modes/queue/Button.vue

@@ -1,12 +1,30 @@
 <template>
-  <VMenu>
+  <Component :is="menuComponent">
     <template #activator="{ props }">
       <VBtn v-bind="props" variant="tonal" color="tertiary"> Auto Mode: Queue </VBtn>
     </template>
-    <DialogOn></DialogOn>
-  </VMenu>
+    <div>
+      <Dialog class="dialog"></Dialog>
+    </div>
+  </Component>
 </template>
 
 <script setup lang="ts">
-import DialogOn from "./Dialog.vue";
+import { computed } from "vue";
+import { useDisplay } from "vuetify";
+import Dialog from "./Dialog.vue";
+const { mobile } = useDisplay();
+const menuComponent = computed(() => (mobile.value ? "VBottomSheet" : "VMenu"));
 </script>
+
+<style scoped>
+.v-bottom-sheet .dialog {
+  border-radius: 0 !important;
+  padding: 4px 4px 24px 4px;
+}
+
+.v-menu .dialog {
+  width: 290px;
+  padding: 4px;
+}
+</style>

src/components/schedule/auto-mode/auto-mode-button/modes/queue/Dialog.vue

@@ -1,35 +1,33 @@
 <template>
-  <div>
-    <VCard>
-      <VCardText>
-        <div class="mb-1">
-          <p class="font-weight-medium">
-            The auto mode currently is <span class="font-italic"> on </span> and loads
-            scripts from the <span class="font-italic"> queue </span>.
-          </p>
-          <p class="mt-3">
-            The auto mode automatically loads and runs the next script after each run
-            successfully ends.
-          </p>
-          <p class="mt-3">
-            The auto mode can load scripts from either the
-            <span class="font-italic"> scheduler </span> or the
-            <span class="font-italic"> queue </span>.
-          </p>
-        </div>
-      </VCardText>
-      <VCardActions>
-        <VSpacer></VSpacer>
-        <VBtn variant="outlined" @click="switchToLoadFromScheduler">
-          switch to load from scheduler
-        </VBtn>
-      </VCardActions>
-      <VCardActions>
-        <VSpacer></VSpacer>
-        <VBtn variant="outlined" @click="turnOff"> turn off auto mode </VBtn>
-      </VCardActions>
-    </VCard>
-  </div>
+  <VCard>
+    <VCardText>
+      <div class="mb-1">
+        <p class="font-weight-medium">
+          The auto mode currently is <span class="font-italic"> on </span> and loads
+          scripts from the <span class="font-italic"> queue </span>.
+        </p>
+        <p class="mt-3">
+          The auto mode automatically loads and runs the next script after each run
+          successfully ends.
+        </p>
+        <p class="mt-3">
+          The auto mode can load scripts from either the
+          <span class="font-italic"> scheduler </span> or the
+          <span class="font-italic"> queue </span>.
+        </p>
+      </div>
+    </VCardText>
+    <VCardActions>
+      <VBtn variant="outlined" @click="switchToLoadFromScheduler" class="flex-grow-1">
+        switch to load from scheduler
+      </VBtn>
+    </VCardActions>
+    <VCardActions>
+      <VBtn variant="outlined" @click="turnOff" class="flex-grow-1">
+        turn off auto mode
+      </VBtn>
+    </VCardActions>
+  </VCard>
 </template>
 
 <script setup lang="ts">
@@ -44,10 +42,3 @@ async function turnOff() {
   await changeMode({ mode: "off" });
 }
 </script>
-
-<style scoped>
-:deep(.v-card) {
-  width: 290px;
-  padding: 4px;
-}
-</style>

src/components/schedule/auto-mode/auto-mode-button/modes/scheduler/Button.vue

@@ -1,14 +1,32 @@
 <template>
-  <VMenu>
+  <Component :is="menuComponent">
     <template #activator="{ props }">
       <VBtn v-bind="props" variant="tonal" color="tertiary">
         Auto Mode: Scheduler
       </VBtn>
     </template>
-    <DialogOn></DialogOn>
-  </VMenu>
+    <div>
+      <Dialog class="dialog"></Dialog>
+    </div>
+  </Component>
 </template>
 
 <script setup lang="ts">
-import DialogOn from "./Dialog.vue";
+import { computed } from "vue";
+import { useDisplay } from "vuetify";
+import Dialog from "./Dialog.vue";
+const { mobile } = useDisplay();
+const menuComponent = computed(() => (mobile.value ? "VBottomSheet" : "VMenu"));
 </script>
+
+<style scoped>
+.v-bottom-sheet .dialog {
+  border-radius: 0 !important;
+  padding: 4px 4px 24px 4px;
+}
+
+.v-menu .dialog {
+  width: 290px;
+  padding: 4px;
+}
+</style>