Scroll hidden chips into view on select
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 39s

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
2024-05-13 21:36:49 -07:00
parent 7c4860fbb4
commit 545b42c99a

View File

@@ -29,6 +29,7 @@
<div class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;"> <div class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
<f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })" <f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
:class="(result.resultIndex == selectedChip) ? 'selected-chip' : ''" :class="(result.resultIndex == selectedChip) ? 'selected-chip' : ''"
:id="(result.resultIndex == selectedChip) ? 'selected_chip' : ''"
:text="result.label" :text="result.label"
media=" " media=" "
:tooltip="result.confidence.toFixed(1)" :tooltip="result.confidence.toFixed(1)"
@@ -371,6 +372,10 @@
imageCtx.strokeRect(boxLeft, boxTop, boxWidth, boxHeight) imageCtx.strokeRect(boxLeft, boxTop, boxWidth, boxHeight)
this.selectedChip = iChip this.selectedChip = iChip
this.resultData.detections[iChip].beenViewed = true this.resultData.detections[iChip].beenViewed = true
this.$nextTick( () => {
document.getElementById('selected_chip').scrollIntoView({behavior: 'smooth', block: 'nearest'})
})
}, },
deleteChip ( iChip ) { deleteChip ( iChip ) {
f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => { f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => {