Skip to content

Commit 87c2d2a

Browse files
TaiSakumaTaiSakuma
authored
Merge pull request #63 from simonsobs/dev
Replace menus with bottom sheets for mobile in some components
2 parents 062524e + ac40a15 commit 87c2d2a

File tree

8 files changed

+173
-130
lines changed

8 files changed

+173
-130
lines changed

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
>
99
interrupt
1010
</VBtn>
11-
<VMenu offset-y>
11+
<Component :is="menuComponent" v-bind="menuAttributes">
1212
<template #activator="{ props }">
1313
<VBtn variant="text" v-bind="props" icon="mdi-dots-horizontal" density="compact">
1414
</VBtn>
@@ -27,10 +27,12 @@
2727
Kill
2828
</VListItem>
2929
</VList>
30-
</VMenu>
30+
</Component>
3131
</template>
3232

3333
<script setup lang="ts">
34+
import { computed } from "vue";
35+
import { useDisplay } from "vuetify";
3436
import {
3537
useCtrlInterruptMutation,
3638
useCtrlTerminateMutation,
@@ -40,4 +42,11 @@ import {
4042
const { executeMutation: executeInterrupt } = useCtrlInterruptMutation();
4143
const { executeMutation: executeTerminate } = useCtrlTerminateMutation();
4244
const { executeMutation: executeKill } = useCtrlKillMutation();
45+
46+
const { mobile } = useDisplay();
47+
48+
const menuComponent = computed(() => (mobile.value ? "VBottomSheet" : "VMenu"));
49+
const menuAttributes = computed(() =>
50+
mobile.value ? {} : { location: "top", offset: 8 }
51+
);
4352
</script>

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
>
1717
save
1818
</VBtn>
19-
<VMenu location="top">
19+
<Component :is="menuComponent" v-bind="menuAttributes">
2020
<template #activator="{ props }">
2121
<VBtn v-bind="props" icon="mdi-dots-horizontal"> </VBtn>
2222
</template>
@@ -34,11 +34,13 @@
3434
Load Example Script
3535
</VListItem>
3636
</VList>
37-
</VMenu>
37+
</Component>
3838
</VCardActions>
3939
</template>
4040

4141
<script setup lang="ts">
42+
import { computed } from "vue";
43+
import { useDisplay } from "vuetify";
4244
import { useDevTool } from "@/utils/dev/enabled";
4345
interface Props {
4446
editing: boolean;
@@ -55,4 +57,9 @@ type Emits = {
5557
5658
defineProps<Props>();
5759
const emit = defineEmits<Emits>();
60+
61+
const { mobile } = useDisplay();
62+
63+
const menuComponent = computed(() => (mobile.value ? "VBottomSheet" : "VMenu"));
64+
const menuAttributes = computed(() => (mobile.value ? {} : { location: "top" }));
5865
</script>

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

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
11
<template>
2-
<VMenu>
2+
<Component :is="menuComponent">
33
<template #activator="{ props }">
44
<VBtn v-bind="props"> Auto Mode: Off </VBtn>
55
</template>
6-
<DialogOff></DialogOff>
7-
</VMenu>
6+
<div>
7+
<Dialog class="dialog"></Dialog>
8+
</div>
9+
</Component>
810
</template>
911

1012
<script setup lang="ts">
11-
import DialogOff from "./Dialog.vue";
13+
import { computed } from "vue";
14+
import { useDisplay } from "vuetify";
15+
import Dialog from "./Dialog.vue";
16+
const { mobile } = useDisplay();
17+
const menuComponent = computed(() => (mobile.value ? "VBottomSheet" : "VMenu"));
1218
</script>
19+
20+
<style scoped>
21+
.v-bottom-sheet .dialog {
22+
border-radius: 0 !important;
23+
padding: 4px 4px 24px 4px;
24+
}
25+
26+
.v-menu .dialog {
27+
width: 290px;
28+
padding: 4px;
29+
}
30+
</style>

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

Lines changed: 29 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,33 @@
11
<template>
2-
<div>
3-
<VCard>
4-
<VCardText>
5-
<div class="mb-1">
6-
<p class="font-weight-medium">
7-
The auto mode is currently <span class="font-italic"> off </span>.
8-
</p>
9-
<p class="mt-3">
10-
If on, it automatically loads and runs the next script after each run
11-
successfully ends.
12-
</p>
13-
<p class="mt-3">
14-
The auto mode can load scripts from either the
15-
<span class="font-italic"> scheduler </span> or the
16-
<span class="font-italic"> queue </span>.
17-
</p>
18-
<p class="mt-3">Turn on auto mode?</p>
19-
</div>
20-
</VCardText>
21-
<VCardActions>
22-
<VSpacer></VSpacer>
23-
<VBtn variant="outlined" @click="turnOnFromScheduler">
24-
turn on from scheduler
25-
</VBtn>
26-
</VCardActions>
27-
<VCardActions>
28-
<VSpacer></VSpacer>
29-
<VBtn variant="outlined" @click="turnOnFromQueue"> turn on from queue </VBtn>
30-
</VCardActions>
31-
</VCard>
32-
</div>
2+
<VCard>
3+
<VCardText>
4+
<div class="mb-1">
5+
<p class="font-weight-medium">
6+
The auto mode is currently <span class="font-italic"> off </span>.
7+
</p>
8+
<p class="mt-3">
9+
If on, it automatically loads and runs the next script after each run
10+
successfully ends.
11+
</p>
12+
<p class="mt-3">
13+
The auto mode can load scripts from either the
14+
<span class="font-italic"> scheduler </span> or the
15+
<span class="font-italic"> queue </span>.
16+
</p>
17+
<p class="mt-3">Turn on auto mode?</p>
18+
</div>
19+
</VCardText>
20+
<VCardActions>
21+
<VBtn variant="outlined" @click="turnOnFromScheduler" class="flex-grow-1">
22+
turn on from scheduler
23+
</VBtn>
24+
</VCardActions>
25+
<VCardActions>
26+
<VBtn variant="outlined" @click="turnOnFromQueue" class="flex-grow-1">
27+
turn on from queue
28+
</VBtn>
29+
</VCardActions>
30+
</VCard>
3331
</template>
3432

3533
<script setup lang="ts">
@@ -45,10 +43,3 @@ async function turnOnFromQueue() {
4543
await changeMode({ mode: "queue" });
4644
}
4745
</script>
48-
49-
<style scoped>
50-
:deep(.v-card) {
51-
width: 290px;
52-
padding: 4px;
53-
}
54-
</style>

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

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
11
<template>
2-
<VMenu>
2+
<Component :is="menuComponent">
33
<template #activator="{ props }">
44
<VBtn v-bind="props" variant="tonal" color="tertiary"> Auto Mode: Queue </VBtn>
55
</template>
6-
<DialogOn></DialogOn>
7-
</VMenu>
6+
<div>
7+
<Dialog class="dialog"></Dialog>
8+
</div>
9+
</Component>
810
</template>
911

1012
<script setup lang="ts">
11-
import DialogOn from "./Dialog.vue";
13+
import { computed } from "vue";
14+
import { useDisplay } from "vuetify";
15+
import Dialog from "./Dialog.vue";
16+
const { mobile } = useDisplay();
17+
const menuComponent = computed(() => (mobile.value ? "VBottomSheet" : "VMenu"));
1218
</script>
19+
20+
<style scoped>
21+
.v-bottom-sheet .dialog {
22+
border-radius: 0 !important;
23+
padding: 4px 4px 24px 4px;
24+
}
25+
26+
.v-menu .dialog {
27+
width: 290px;
28+
padding: 4px;
29+
}
30+
</style>

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

Lines changed: 29 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,33 @@
11
<template>
2-
<div>
3-
<VCard>
4-
<VCardText>
5-
<div class="mb-1">
6-
<p class="font-weight-medium">
7-
The auto mode currently is <span class="font-italic"> on </span> and loads
8-
scripts from the <span class="font-italic"> queue </span>.
9-
</p>
10-
<p class="mt-3">
11-
The auto mode automatically loads and runs the next script after each run
12-
successfully ends.
13-
</p>
14-
<p class="mt-3">
15-
The auto mode can load scripts from either the
16-
<span class="font-italic"> scheduler </span> or the
17-
<span class="font-italic"> queue </span>.
18-
</p>
19-
</div>
20-
</VCardText>
21-
<VCardActions>
22-
<VSpacer></VSpacer>
23-
<VBtn variant="outlined" @click="switchToLoadFromScheduler">
24-
switch to load from scheduler
25-
</VBtn>
26-
</VCardActions>
27-
<VCardActions>
28-
<VSpacer></VSpacer>
29-
<VBtn variant="outlined" @click="turnOff"> turn off auto mode </VBtn>
30-
</VCardActions>
31-
</VCard>
32-
</div>
2+
<VCard>
3+
<VCardText>
4+
<div class="mb-1">
5+
<p class="font-weight-medium">
6+
The auto mode currently is <span class="font-italic"> on </span> and loads
7+
scripts from the <span class="font-italic"> queue </span>.
8+
</p>
9+
<p class="mt-3">
10+
The auto mode automatically loads and runs the next script after each run
11+
successfully ends.
12+
</p>
13+
<p class="mt-3">
14+
The auto mode can load scripts from either the
15+
<span class="font-italic"> scheduler </span> or the
16+
<span class="font-italic"> queue </span>.
17+
</p>
18+
</div>
19+
</VCardText>
20+
<VCardActions>
21+
<VBtn variant="outlined" @click="switchToLoadFromScheduler" class="flex-grow-1">
22+
switch to load from scheduler
23+
</VBtn>
24+
</VCardActions>
25+
<VCardActions>
26+
<VBtn variant="outlined" @click="turnOff" class="flex-grow-1">
27+
turn off auto mode
28+
</VBtn>
29+
</VCardActions>
30+
</VCard>
3331
</template>
3432

3533
<script setup lang="ts">
@@ -44,10 +42,3 @@ async function turnOff() {
4442
await changeMode({ mode: "off" });
4543
}
4644
</script>
47-
48-
<style scoped>
49-
:deep(.v-card) {
50-
width: 290px;
51-
padding: 4px;
52-
}
53-
</style>

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

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,32 @@
11
<template>
2-
<VMenu>
2+
<Component :is="menuComponent">
33
<template #activator="{ props }">
44
<VBtn v-bind="props" variant="tonal" color="tertiary">
55
Auto Mode: Scheduler
66
</VBtn>
77
</template>
8-
<DialogOn></DialogOn>
9-
</VMenu>
8+
<div>
9+
<Dialog class="dialog"></Dialog>
10+
</div>
11+
</Component>
1012
</template>
1113

1214
<script setup lang="ts">
13-
import DialogOn from "./Dialog.vue";
15+
import { computed } from "vue";
16+
import { useDisplay } from "vuetify";
17+
import Dialog from "./Dialog.vue";
18+
const { mobile } = useDisplay();
19+
const menuComponent = computed(() => (mobile.value ? "VBottomSheet" : "VMenu"));
1420
</script>
21+
22+
<style scoped>
23+
.v-bottom-sheet .dialog {
24+
border-radius: 0 !important;
25+
padding: 4px 4px 24px 4px;
26+
}
27+
28+
.v-menu .dialog {
29+
width: 290px;
30+
padding: 4px;
31+
}
32+
</style>

0 commit comments

Comments
 (0)