mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-21 01:01:41 +00:00
General UI Refinements (#1678)
Does the following: - Adjusts the shade of red buttons and banners to increase readability and reduce eye strain   - Cleans up factory reset and camera deletion modals   - Removes matchCamerasOnlyByPath as it is no longer used and throws errors in the console  - Limits the criteria to flag a camera mismatch in Camera Matching to only what is necessary based on camera type and highlights differences in table properties (testing on this is appreciated)  - Only displays both saved vs. current info in camera matching if there is a difference between the two  - Some general code cleanup (reduced unnecessary padding/margin/row-col statements, style="display:flex;" -> class="d-flex", etc. - Moves Compact Mode button to the bottom away from all the menu items (cleaner imo, open to thoughts) - Establishes a general spacing format for cards and pages and applies this to existing cards and pages to create a consistent look and feel to the UI (e.g. keeping things in line and less erratic spacing/placement of UI elements)     - Delete protection for camera matching modules - Anti-backend-spam for activate/deactivate/delete modules to hopefully prevent any odd behavior from button spamming - Enforces a common camera stream size on camera matching view (NEEDS MORE TESTING)  https://private-user-images.githubusercontent.com/29715865/400783758-dc99c151-b8a7-4367-a173-74c2fc5b2666.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzYyNTc3NzEsIm5iZiI6MTczNjI1NzQ3MSwicGF0aCI6Ii8yOTcxNTg2NS80MDA3ODM3NTgtZGM5OWMxNTEtYjhhNy00MzY3LWExNzMtNzRjMmZjNWIyNjY2Lm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAxMDclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMTA3VDEzNDQzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWMwOWM1MDc2ZTVlOWZhM2MxYjAwZjAyZTc2MTYyZTk1ZTVmOGFhZmVkMzlmODRlZTk1ODVlOTk2ZGQzZmM0Y2EmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ovtRnObwbkEfljr9d5fqaory0nH91LWJSSkmrUUe_4Y
This commit is contained in:
Devon Doyle
@@ -237,18 +237,18 @@ const nukePhotonConfigDirectory = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card dark class="mb-3 pr-6 pb-3" style="background-color: #006492">
|
||||
<v-card-title>Device Control</v-card-title>
|
||||
<div class="ml-5">
|
||||
<v-card dark class="mb-3" style="background-color: #006492">
|
||||
<v-card-title class="pa-6">Device Control</v-card-title>
|
||||
<div class="pa-6 pt-0">
|
||||
<v-row>
|
||||
<v-col cols="12" lg="4" md="6">
|
||||
<v-btn color="red" @click="restartProgram">
|
||||
<v-btn color="error" @click="restartProgram">
|
||||
<v-icon left class="open-icon"> mdi-restart </v-icon>
|
||||
<span class="open-label">Restart PhotonVision</span>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="12" lg="4" md="6">
|
||||
<v-btn color="red" @click="restartDevice">
|
||||
<v-btn color="error" @click="restartDevice">
|
||||
<v-icon left class="open-icon"> mdi-restart-alert </v-icon>
|
||||
<span class="open-label">Restart Device</span>
|
||||
</v-btn>
|
||||
@@ -261,7 +261,7 @@ const nukePhotonConfigDirectory = () => {
|
||||
<input ref="offlineUpdate" type="file" accept=".jar" style="display: none" @change="handleOfflineUpdate" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider style="margin: 12px 0" />
|
||||
<v-divider class="mt-3 pb-3" />
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-btn color="secondary" @click="() => (showImportDialog = true)">
|
||||
@@ -355,15 +355,15 @@ const nukePhotonConfigDirectory = () => {
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider style="margin: 12px 0" />
|
||||
<v-divider class="mt-3 pb-3" />
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-btn color="red" @click="() => (showFactoryReset = true)">
|
||||
<v-btn color="error" @click="() => (showFactoryReset = true)">
|
||||
<v-icon left class="open-icon"> mdi-skull-crossbones </v-icon>
|
||||
<span class="open-icon">
|
||||
{{
|
||||
$vuetify.breakpoint.mdAndUp
|
||||
? "Factory Reset PhotonVision and delete EVERYTHING (big scary button)"
|
||||
? "Factory Reset PhotonVision and delete EVERYTHING"
|
||||
: "Factory Reset PhotonVision"
|
||||
}}
|
||||
</span>
|
||||
@@ -372,71 +372,63 @@ const nukePhotonConfigDirectory = () => {
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<v-dialog v-model="showFactoryReset" width="1500" dark>
|
||||
<v-card dark class="dialog-container pa-6" color="primary" flat>
|
||||
<v-card-title>
|
||||
<v-dialog v-model="showFactoryReset" width="800" dark>
|
||||
<v-card dark color="primary" class="pa-3" flat>
|
||||
<v-card-title style="justify-content: center" class="pb-6">
|
||||
<span class="open-label">
|
||||
<v-icon right color="red" class="open-icon">mdi-nuke</v-icon>
|
||||
<v-icon right color="error" class="open-icon ma-1">mdi-nuke</v-icon>
|
||||
Factory Reset PhotonVision
|
||||
<v-icon right color="red" class="open-icon">mdi-nuke</v-icon>
|
||||
<v-icon right color="error" class="open-icon ma-1">mdi-nuke</v-icon>
|
||||
</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-row class="pl-3 align-center pa-6">
|
||||
<v-col cols="12" md="6">
|
||||
<span class="mt-3"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-btn color="secondary" style="float: right" @click="openExportSettingsPrompt">
|
||||
<v-icon left class="open-icon"> mdi-export </v-icon>
|
||||
<span class="open-label">Backup Settings</span>
|
||||
<a
|
||||
ref="exportSettings"
|
||||
style="color: black; text-decoration: none; display: none"
|
||||
:href="`http://${address}/api/settings/photonvision_config.zip`"
|
||||
download="photonvision-settings.zip"
|
||||
target="_blank"
|
||||
/>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider class="mt-4 mb-4" />
|
||||
|
||||
<v-row class="pl-3 align-center pa-6">
|
||||
<v-col>
|
||||
<pv-input
|
||||
v-model="yesDeleteMySettingsText"
|
||||
:label="'Type "' + expected + '":'"
|
||||
:label-cols="2"
|
||||
:input-cols="10"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-btn
|
||||
color="red"
|
||||
:disabled="yesDeleteMySettingsText.toLowerCase() !== expected.toLowerCase()"
|
||||
@click="nukePhotonConfigDirectory"
|
||||
>
|
||||
<v-icon left class="open-icon"> mdi-skull-crossbones </v-icon>
|
||||
<span class="open-label">
|
||||
{{ $vuetify.breakpoint.mdAndUp ? "Delete everything, I have backed up what I need" : "Delete Everything" }}
|
||||
</span>
|
||||
</v-btn>
|
||||
<v-card-text class="pt-3">
|
||||
<v-row class="align-center white--text">
|
||||
<v-col cols="12" md="6">
|
||||
<span class="mt-3"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-btn color="secondary" style="float: right" @click="openExportSettingsPrompt">
|
||||
<v-icon left class="open-icon"> mdi-export </v-icon>
|
||||
<span class="open-label">Backup Settings</span>
|
||||
<a
|
||||
ref="exportSettings"
|
||||
style="color: black; text-decoration: none; display: none"
|
||||
:href="`http://${address}/api/settings/photonvision_config.zip`"
|
||||
download="photonvision-settings.zip"
|
||||
target="_blank"
|
||||
/>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<pv-input
|
||||
v-model="yesDeleteMySettingsText"
|
||||
:label="'Type "' + expected + '":'"
|
||||
:label-cols="6"
|
||||
:input-cols="6"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<v-btn
|
||||
color="error"
|
||||
:disabled="yesDeleteMySettingsText.toLowerCase() !== expected.toLowerCase()"
|
||||
@click="nukePhotonConfigDirectory"
|
||||
>
|
||||
<v-icon left class="open-icon"> mdi-trash-can-outline </v-icon>
|
||||
<span class="open-label">
|
||||
{{
|
||||
$vuetify.breakpoint.mdAndUp ? "Delete everything, I have backed up what I need" : "Delete Everything"
|
||||
}}
|
||||
</span>
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dialog-container {
|
||||
min-height: 300px !important;
|
||||
}
|
||||
|
||||
.v-divider {
|
||||
border-color: white !important;
|
||||
}
|
||||
.v-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user