Skip to content

Add the option to have the type list on the bottom of the screen #1577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mattdawkins wants to merge 30 commits into
base: main
Choose a base branch
from
Open

Add the option to have the type list on the bottom of the screen #1577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
e616dd9
Add multi-cam top buttons option
mattdawkins Jan 8, 2026
9fe7bad
Option to switch between no, side, and bottom track lists
mattdawkins Jan 8, 2026
a628409
Disable element in bottom view
mattdawkins Jan 8, 2026
6fffdb8
Change bottom view element ordering
mattdawkins Jan 8, 2026
698bc40
Add option to switch between track details and type filters on bottom…
mattdawkins Jan 8, 2026
58288f3
Appearance adjustments
mattdawkins Jan 8, 2026
10febe8
Add border
mattdawkins Jan 8, 2026
0a4e768
Implement notes baseline
mattdawkins Jan 8, 2026
b77b910
Fix display issue if panel is enabled on switch
mattdawkins Jan 8, 2026
6e77289
Set ordering based on contents
mattdawkins Jan 8, 2026
efe6c9e
Sort based on notes and keys
mattdawkins Jan 8, 2026
d2f3e11
Fix issue with setting scores on list
mattdawkins Jan 8, 2026
9307afe
Adjust text size for consistency
mattdawkins Jan 8, 2026
d9df212
Fix spacing issue
mattdawkins Jan 8, 2026
f730865
Make start and end points in list clickable
mattdawkins Jan 8, 2026
bd9a4c2
Adjust clickable notes area
mattdawkins Jan 8, 2026
7934d55
Make start and end frame labels clickable in scrubber
mattdawkins Jan 24, 2026
6c3e643
Fix notes appearing on wrong tracks due to virtual scroll recycling
mattdawkins Jan 24, 2026
49b5198
Add settings button to compact track list header with even spacing
mattdawkins Jan 24, 2026
72aacda
Add notes parsing support to Python viame serializer
mattdawkins Jan 24, 2026
de98e8e
Enable right expandable panel in bottom layout mode
mattdawkins Jan 24, 2026
4ed5334
Fix tooltip z-index for Advanced Tools button
mattdawkins Jan 24, 2026
3a76c55
Add column visibility configuration for bottom view track list
mattdawkins Jan 24, 2026
2ab47f0
Move column settings button to left of annotation config button
mattdawkins Jan 24, 2026
799281f
Fix attribute panels functionality in bottom view mode
mattdawkins Jan 24, 2026
d981cf5
Add sorting by attributes and timestamps in track list
mattdawkins Jan 24, 2026
83ef8f6
Improve track list column interactions
mattdawkins Jan 25, 2026
97af826
Add type and confidence to column visibility settings
mattdawkins Jan 25, 2026
e1af66b
Fix annotations not displaying after switching view modes
mattdawkins Jan 29, 2026
4887da2
Center sort, settings, and delete buttons in FilterList header
mattdawkins Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
238 changes: 131 additions & 107 deletions client/dive-common/components/ControlsContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@ export default defineComponent({
type: Boolean as PropType<boolean>,
required: true,
},
bottomLayout: {
type: Boolean,
default: false,
},
},
setup(_, { emit }) {
const handler = useHandler();
Expand Down Expand Up @@ -150,12 +154,15 @@ export default defineComponent({
<template>
<v-col
dense
style="position:absolute; bottom: 0px; padding: 0px; margin:0px;"
:style="bottomLayout
? 'position: relative; padding: 0px; margin: 0px; width: 100%;'
: 'position: absolute; bottom: 0px; padding: 0px; margin: 0px;'"
>
<Controls :is-default-image="isDefaultImage" :dataset-type="datasetType">
<Controls :is-default-image="isDefaultImage" :dataset-type="datasetType" :bottom-layout="bottomLayout">
<template slot="timelineControls">
<div style="min-width: 270px">
<div :style="{ 'min-width': bottomLayout ? 'auto' : '270px', 'white-space': 'nowrap' }">
<v-tooltip
v-if="!bottomLayout"
open-delay="200"
bottom
>
Expand Down Expand Up @@ -304,114 +311,118 @@ export default defineComponent({
</div>
</template>
<template #middle>
<file-name-time-display
v-if="datasetType === 'image-sequence' || datasetType === 'large-image'"
class="text-middle px-3"
display-type="filename"
/>
<span v-else-if="datasetType === 'video'">
<span class="mr-2">
<v-menu
:close-on-content-click="false"
top
offset-y
nudge-left="3"
open-on-hover
close-delay="500"
open-delay="250"
>
<template #activator="{ on }">
<v-icon
@click="(!volume && setVolume(1)) || (volume && setVolume(0))"
v-on="on"
> {{ volume === 0 ? 'mdi-volume-off' : 'mdi-volume-medium' }}
</v-icon>
</template>
<v-card style="overflow:hidden; width:60px;">
<v-slider
:value="volume"
min="0"
max="1.0"
step="0.05"
vertical
@change="setVolume"
/>
<v-row dense align="center">
<b class="ma-auto">{{ volume * 100 }}%</b>
</v-row>

</v-card>
</v-menu>
</span>
<span class="mr-2">
<v-menu
:close-on-content-click="false"
top
offset-y
nudge-left="3"
open-on-hover
close-delay="500"
open-delay="250"
rounded="lg"
>
<template #activator="{ on }">
<v-badge
:value="speed != 1.0"
color="#0277bd88"
:content="`${speed}X`"
offset-y="5px"
overlap
>
<div :class="{ 'middle-content-bottom': bottomLayout }">
<file-name-time-display
v-if="datasetType === 'image-sequence' || datasetType === 'large-image'"
class="text-middle px-3"
display-type="filename"
/>
<span v-else-if="datasetType === 'video'">
<span class="mr-2">
<v-menu
:close-on-content-click="false"
top
offset-y
nudge-left="3"
open-on-hover
close-delay="500"
open-delay="250"
>
<template #activator="{ on }">
<v-icon
@click="(!volume && setVolume(1)) || (volume && setVolume(0))"
v-on="on"
@click="setSpeed(1)"
> mdi-speedometer
>
{{ volume === 0 ? 'mdi-volume-off' : 'mdi-volume-medium' }}
</v-icon>
</v-badge>
</template>
<v-card style="overflow:hidden; width:60px;">
<v-slider
:value="ticks.indexOf(speed)"
min="0"
:max="ticks.length - 1"
step="1"
ticks="always"
:tick-size="4"
style="font-size:0.75em;"
vertical
hide-details
@input="setSpeed(ticks[$event])"
/>
<v-row dense align="center">
<b class="ma-auto">{{ speed }}x</b>
</v-row>
</v-card>
</v-menu>
</span>
<file-name-time-display
class="text-middle pl-2"
display-type="time"
/>
</span>
<v-tooltip
open-delay="200"
bottom
>
<template #activator="{ on }">
<v-icon
small
class="mx-2"
v-on="on"
>
mdi-information
</v-icon>
</template>
<span>
annotation framerate may be downsampled.
<br>
frame numbers start at zero.
</template>
<v-card style="overflow:hidden; width:60px;">
<v-slider
:value="volume"
min="0"
max="1.0"
step="0.05"
vertical
@change="setVolume"
/>
<v-row dense align="center">
<b class="ma-auto">{{ volume * 100 }}%</b>
</v-row>
</v-card>
</v-menu>
</span>
<span class="mr-2">
<v-menu
:close-on-content-click="false"
top
offset-y
nudge-left="3"
open-on-hover
close-delay="500"
open-delay="250"
rounded="lg"
>
<template #activator="{ on }">
<v-badge
:value="speed != 1.0"
color="#0277bd88"
:content="`${speed}X`"
offset-y="5px"
overlap
>
<v-icon
v-on="on"
@click="setSpeed(1)"
>
mdi-speedometer
</v-icon>
</v-badge>
</template>
<v-card style="overflow:hidden; width:60px;">
<v-slider
:value="ticks.indexOf(speed)"
min="0"
:max="ticks.length - 1"
step="1"
ticks="always"
:tick-size="4"
style="font-size:0.75em;"
vertical
hide-details
@input="setSpeed(ticks[$event])"
/>
<v-row dense align="center">
<b class="ma-auto">{{ speed }}x</b>
</v-row>
</v-card>
</v-menu>
</span>
<file-name-time-display
class="text-middle pl-2"
display-type="time"
/>
</span>
</v-tooltip>
<v-tooltip
v-if="!bottomLayout"
open-delay="200"
bottom
>
<template #activator="{ on }">
<v-icon
small
class="mx-2"
v-on="on"
>
mdi-information
</v-icon>
</template>
<span>
annotation framerate may be downsampled.
<br>
frame numbers start at zero.
</span>
</v-tooltip>
</div>
</template>
</Controls>
<Timeline
Expand Down Expand Up @@ -490,4 +501,17 @@ export default defineComponent({
.timeline-button {
border: thin solid transparent;
}
.middle-content-bottom {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
min-width: 0;
}
.middle-content-bottom .text-middle {
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
min-width: 0;
}
</style>
3 changes: 2 additions & 1 deletion client/dive-common/components/EditorMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,8 +319,9 @@ export default defineComponent({
</v-btn>
</template>
<slot name="delete-controls" />
<slot name="multicam-controls-left" />
<v-spacer />
<slot name="multicam-controls" />
<slot name="multicam-controls-right" />
<v-spacer />
<annotation-visibility-menu
:visible-modes="visibleModes"
Expand Down
Loading
Loading