Dark mode and minor interface tweaks (#2016)

Co-authored-by: Sam Freund <samf.236@proton.me>
This commit is contained in:
Devon Doyle
2025-08-04 01:15:33 -04:00
committed by GitHub
parent 3e19cd45cc
commit fce54d12c1
36 changed files with 956 additions and 765 deletions

View File

@@ -2,6 +2,9 @@
import { ref } from "vue";
import axios from "axios";
import { useStateStore } from "@/stores/StateStore";
import { useTheme } from "vuetify";
const theme = useTheme();
interface SnapshotMetadata {
snapshotName: string;
@@ -91,22 +94,39 @@ const expanded = ref([]);
</script>
<template>
<v-card style="background-color: #006492">
<v-card color="surface" class="rounded-12">
<v-card-title>Camera Control</v-card-title>
<v-card-text class="pt-0">
<v-btn color="secondary" @click="fetchSnapshots">
<v-icon start class="open-icon"> mdi-folder </v-icon>
<v-btn
color="buttonPassive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
@click="fetchSnapshots"
>
<v-icon start class="open-icon" size="large"> mdi-folder </v-icon>
<span class="open-label">Show Saved Snapshots</span>
</v-btn>
</v-card-text>
<v-dialog v-model="showSnapshotViewerDialog">
<v-card color="primary" flat>
<v-card-title> View Saved Frame Snapshots </v-card-title>
<v-divider />
<v-card-text v-if="imgData.length === 0" style="font-size: 18px; font-weight: 600" class="pt-4">
There are no snapshots saved
<v-card color="surface" flat>
<v-card-title> Saved Frame Snapshots </v-card-title>
<v-card-text v-if="imgData.length === 0" class="pt-0">
<v-alert
color="buttonPassive"
density="compact"
text="There are currently no saved snapshots."
icon="mdi-information-outline"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
/>
</v-card-text>
<v-card-text v-else>
<v-card-text v-else class="pt-0">
<v-alert
closable
color="buttonPassive"
density="compact"
text="Snapshot timestamps depend on when the coprocessor was last connected to the internet."
icon="mdi-information-outline"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
/>
<v-data-table
v-model:expanded="expanded"
:headers="[
@@ -151,10 +171,6 @@ const expanded = ref([]);
</div>
</template>
</v-data-table>
<span
>Snapshot Timestamps may be incorrect as they depend on when the coprocessor was last connected to the
internet</span
>
</v-card-text>
</v-card>
</v-dialog>
@@ -170,18 +186,12 @@ const expanded = ref([]);
}
.v-table {
text-align: center;
background-color: #006492 !important;
th,
td {
background-color: #005281 !important;
font-size: 1rem !important;
}
tbody :hover tr {
background-color: #005281 !important;
}
::-webkit-scrollbar {
width: 0;
height: 0.55em;
@@ -194,7 +204,7 @@ const expanded = ref([]);
}
::-webkit-scrollbar-thumb {
background-color: #ffd843;
background-color: rgb(var(--v-theme-accent));
border-radius: 10px;
}
}