mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-23 01:21:40 +00:00
032deba775
The current method for checking light vs. dark mode is to compare the name of the theme against a hardcoded string. This PR uses a dark mode boolean. This change is for verbosity and so that we're not reliant on theme name. Additionally, we change some references to colors to the global theme, instead of indexing the list of themes.
86 lines
2.5 KiB
Vue
86 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { useTheme } from "vuetify";
|
|
import pvInput from "./pv-input.vue";
|
|
|
|
const theme = useTheme();
|
|
|
|
const value = defineModel<boolean | undefined>({ required: true });
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
expectedConfirmationText?: string;
|
|
onBackup?: () => void;
|
|
onConfirm: () => void;
|
|
title: string;
|
|
description?: string;
|
|
deleteText?: string;
|
|
width?: number;
|
|
}>(),
|
|
{
|
|
width: 700
|
|
}
|
|
);
|
|
|
|
const confirmationText = ref("");
|
|
</script>
|
|
|
|
<template>
|
|
<v-dialog v-model="value" :width="props.width" dark>
|
|
<v-card color="surface" flat>
|
|
<v-card-title style="display: flex; justify-content: center">
|
|
{{ title }}
|
|
</v-card-title>
|
|
<v-card-text class="pt-0 pb-10px">
|
|
<span> {{ description }} </span>
|
|
</v-card-text>
|
|
<v-card-text v-if="expectedConfirmationText" class="pt-0 pb-0">
|
|
<pv-input
|
|
v-model="confirmationText"
|
|
:label="'Type "' + expectedConfirmationText + '":'"
|
|
:label-cols="6"
|
|
:input-cols="6"
|
|
/>
|
|
</v-card-text>
|
|
<v-card-text class="pt-10px">
|
|
<v-row class="align-center text-white">
|
|
<v-col v-if="onBackup" cols="6">
|
|
<v-btn
|
|
color="buttonActive"
|
|
style="float: right"
|
|
width="100%"
|
|
:variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
|
|
@click="onBackup"
|
|
>
|
|
<v-icon start class="open-icon" size="large"> mdi-export </v-icon>
|
|
<span class="open-label">Backup Data</span>
|
|
</v-btn>
|
|
</v-col>
|
|
<v-col v-if="description" :cols="onBackup ? '6' : '12'">
|
|
<v-btn
|
|
color="error"
|
|
width="100%"
|
|
:disabled="
|
|
expectedConfirmationText
|
|
? confirmationText.toLowerCase() !== expectedConfirmationText.toLowerCase()
|
|
: false
|
|
"
|
|
:variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
|
|
@click="
|
|
onConfirm();
|
|
confirmationText = '';
|
|
value = false;
|
|
"
|
|
>
|
|
<v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
|
|
<span class="open-label">
|
|
{{ deleteText ?? title }}
|
|
</span>
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|