mirror of
https://github.com/PhotonVision/photonvision
synced 2026-07-06 03:31:41 +00:00
Dark mode and minor interface tweaks (#2016)
Co-authored-by: Sam Freund <samf.236@proton.me>
This commit is contained in:
@@ -7,6 +7,9 @@ import PipelineConfigCard from "@/components/dashboard/ConfigOptions.vue";
|
||||
import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
|
||||
import { useStateStore } from "@/stores/StateStore";
|
||||
import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
|
||||
import { useTheme } from "vuetify";
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const cameraViewType = computed<number[]>({
|
||||
get: (): number[] => {
|
||||
@@ -64,46 +67,43 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
|
||||
|
||||
<template>
|
||||
<v-container class="pa-3" fluid>
|
||||
<v-banner
|
||||
<v-alert
|
||||
v-if="arducamWarningShown"
|
||||
rounded
|
||||
bg-color="error"
|
||||
color="error"
|
||||
dark
|
||||
class="mb-3"
|
||||
color="error"
|
||||
density="compact"
|
||||
icon="mdi-alert-circle-outline"
|
||||
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
|
||||
>
|
||||
<span
|
||||
>Arducam Camera Detected! Please configure the camera model in the <a href="#/cameras">Cameras tab</a>!
|
||||
<span>
|
||||
Arducam camera detected! Please configure the camera model in the <a href="#/cameras">Camera tab</a>!
|
||||
</span>
|
||||
</v-banner>
|
||||
<v-banner
|
||||
</v-alert>
|
||||
<v-alert
|
||||
v-if="conflictingHostnameShown"
|
||||
rounded
|
||||
bg-color="error"
|
||||
color="error"
|
||||
dark
|
||||
class="mb-3"
|
||||
color="error"
|
||||
density="compact"
|
||||
icon="mdi-alert-circle-outline"
|
||||
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
|
||||
>
|
||||
<span
|
||||
>Conflicting Hostname Detected! Please change the hostname in the <a href="#/settings">Settings tab</a>!
|
||||
<span>
|
||||
Conflicting hostname detected! Please change the hostname in the <a href="#/settings">Settings tab</a>!
|
||||
</span>
|
||||
</v-banner>
|
||||
<v-banner
|
||||
</v-alert>
|
||||
<v-alert
|
||||
v-if="conflictingCameraShown"
|
||||
rounded
|
||||
bg-color="error"
|
||||
color="error"
|
||||
dark
|
||||
class="mb-3"
|
||||
color="error"
|
||||
density="compact"
|
||||
icon="mdi-alert-circle-outline"
|
||||
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
|
||||
>
|
||||
<span
|
||||
>Conflicting Camera Name(s) Detected! Please change the name(s) of
|
||||
>Conflicting camera name(s) detected! Please change the name(s) of
|
||||
{{ useSettingsStore().general.conflictingCameras }}!
|
||||
</span>
|
||||
</v-banner>
|
||||
</v-alert>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="12" class="pb-3 pr-lg-3" lg="8" align-self="stretch">
|
||||
<CamerasCard v-model="cameraViewType" />
|
||||
@@ -122,11 +122,11 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
|
||||
max-width="800"
|
||||
dark
|
||||
>
|
||||
<v-card flat color="primary">
|
||||
<v-card-title>Setup some cameras to get started!</v-card-title>
|
||||
<v-card flat color="surface">
|
||||
<v-card-title>Set up some cameras to get started!</v-card-title>
|
||||
<v-card-text class="pt-0">
|
||||
No cameras activated - head to the <router-link to="/cameraConfigs">Camera matching tab</router-link> to set
|
||||
some up!
|
||||
No cameras activated - head to the
|
||||
<router-link to="/cameraConfigs" color="buttonActive">camera matching tab</router-link> to set some up!
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@@ -135,23 +135,19 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
|
||||
|
||||
<style scoped>
|
||||
a:link {
|
||||
color: #ffd843;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: #ffd843;
|
||||
color: rgb(var(--v-theme-buttonActive));
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: pink;
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: yellow;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user