mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-26 01:51:40 +00:00
Clean up spacing and other things in various parts of the UI (#1972)
## Description After the Vue 3 upgrade, the spacing for various UI elements was left inconsistent in many places. Dialogs were hit especially hard and had some very inconsistent spacing. Additionally, the 24 pixels of padding around all cards was noted as a waste of space and unnecessary, so it has been shrunk down to 20 pixels to make the UI a tiny bit more compact and to make it visually closer to some parts of the UI that have 16 pixels of padding (the camera views are the most notable example). Padding between input elements has also been reduced to 20 pixels (this required some hackery to get consistent sizes on input elements, since switches and sliders have different heights.) Some other minor UI tweaks were made, such as removing the divider between dialog contents and dialog buttons because it visually looks better, shrinking the banner padding so it doesn't displace as much content, making the banner background one uniform color instead of a highlight around the icon, fixing the targets tab so that the columns stop shifting around when the values change, preserving newlines in the log view, cleaning up the object detection UI, and making the import dialogs have consistently inset input elements. Old dashboard:  New dashboard:  Old Camera tab:  New Camera tab:  Old Calibration Info:  New Calibration Info:  Old Log Viewer:  New Log Viewer:  Old Pipeline Creation Dialog:  New Pipeline Creation Dialog:  Old Factory Reset:  New Factory Reset:  Old Pipeline Change:  New Pipeline Change:  Old Import Dialog:  New Import Dialog:  ## Meta Merge checklist: - [x] Pull Request title is [short, imperative summary](https://cbea.ms/git-commit/) of proposed changes - [x] The description documents the _what_ and _why_ - [ ] If this PR changes behavior or adds a feature, user documentation is updated - [ ] If this PR touches photon-serde, all messages have been regenerated and hashes have not changed unexpectedly - [ ] If this PR touches configuration, this is backwards compatible with settings back to v2024.3.1 - [ ] If this PR touches pipeline settings or anything related to data exchange, the frontend typing is updated - [ ] If this PR addresses a bug, a regression test for it is added
This commit is contained in:
Gold856
@@ -242,7 +242,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
|
||||
<template>
|
||||
<v-card color="primary">
|
||||
<v-row style="padding: 20px 12px 0 30px">
|
||||
<v-row no-gutters class="pl-4 pt-2 pb-0">
|
||||
<v-col cols="10" class="pa-0">
|
||||
<pv-select
|
||||
v-if="!isCameraNameEdit"
|
||||
@@ -281,7 +281,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="padding: 0 12px 0 30px">
|
||||
<v-row no-gutters class="pl-4 pb-0 pt-0">
|
||||
<v-col cols="10" class="pa-0">
|
||||
<pv-select
|
||||
v-if="!isPipelineNameEdit"
|
||||
@@ -353,7 +353,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="padding: 0 12px 24px 30px">
|
||||
<v-row no-gutters class="pl-4 pt-0 pb-4">
|
||||
<v-col cols="10" class="pa-0">
|
||||
<pv-select
|
||||
v-model="currentPipelineType"
|
||||
@@ -371,27 +371,25 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
</v-row>
|
||||
<v-dialog v-model="showPipelineCreationDialog" persistent width="500">
|
||||
<v-card color="primary">
|
||||
<v-card-title> Create New Pipeline </v-card-title>
|
||||
<v-card-text>
|
||||
<v-card-title class="pb-0"> Create New Pipeline </v-card-title>
|
||||
<v-card-text class="pt-0 pb-0">
|
||||
<pv-input
|
||||
v-model="newPipelineName"
|
||||
placeholder="Pipeline Name"
|
||||
:label-cols="3"
|
||||
:input-cols="12 - 3"
|
||||
:label-cols="4"
|
||||
:input-cols="12 - 4"
|
||||
label="Pipeline Name"
|
||||
:rules="[(v) => checkPipelineName(v)]"
|
||||
/>
|
||||
<pv-select
|
||||
v-model="newPipelineType"
|
||||
:select-cols="12 - 3"
|
||||
:select-cols="12 - 4"
|
||||
label="Tracking Type"
|
||||
tooltip="Pipeline type, which changes the type of processing that will happen on input frames"
|
||||
:items="validNewPipelineTypes"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-divider />
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-card-actions class="pr-5 pt-10px pb-5">
|
||||
<v-btn
|
||||
color="#ffd843"
|
||||
:disabled="checkPipelineName(newPipelineName) !== true"
|
||||
@@ -406,7 +404,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
</v-dialog>
|
||||
<v-dialog v-model="showPipelineDeletionConfirmationDialog" width="500">
|
||||
<v-card color="primary">
|
||||
<v-card-title> Pipeline Deletion Confirmation </v-card-title>
|
||||
<v-card-title class="pb-0">Pipeline Deletion Confirmation</v-card-title>
|
||||
<v-card-text>
|
||||
Are you sure you want to delete the pipeline
|
||||
<b style="color: white; font-weight: bold">{{
|
||||
@@ -414,9 +412,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
}}</b
|
||||
>? This cannot be undone.
|
||||
</v-card-text>
|
||||
<v-divider />
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-card-actions class="pa-5 pt-0">
|
||||
<v-btn variant="flat" color="error" @click="confirmDeleteCurrentPipeline"> Yes, I'm sure </v-btn>
|
||||
<v-btn
|
||||
variant="flat"
|
||||
@@ -431,15 +427,13 @@ const wrappedCameras = computed<SelectItem[]>(() =>
|
||||
</v-dialog>
|
||||
<v-dialog v-model="showPipelineTypeChangeDialog" persistent width="600">
|
||||
<v-card color="primary" dark>
|
||||
<v-card-title>Change Pipeline Type</v-card-title>
|
||||
<v-card-title class="pb-0">Change Pipeline Type</v-card-title>
|
||||
<v-card-text>
|
||||
Are you sure you want to change the current pipeline type? This will cause all the pipeline settings to be
|
||||
overwritten and they will be lost. If this isn't what you want, duplicate this pipeline first or export
|
||||
settings.
|
||||
</v-card-text>
|
||||
<v-divider />
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-card-actions class="pa-5 pt-0">
|
||||
<v-btn color="error" variant="elevated" @click="confirmChangePipelineType"> Yes, I'm sure </v-btn>
|
||||
<v-btn color="#ffd843" variant="elevated" class="text-black" @click="cancelChangePipelineType">
|
||||
No, take me back
|
||||
|
||||
Reference in New Issue
Block a user