Skip to content

Fix bottom-sidebar timeline controls layout #1731

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

Merged
BryonLewis merged 3 commits into from
Jun 30, 2026
+178 −166
Merged

Fix bottom-sidebar timeline controls layout #1731

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bbafd20
Fix bottom-sidebar timeline controls layout
mattdawkins Jun 30, 2026
444a475
expand frame/name title to prevent from cutting off
BryonLewis Jun 30, 2026
14d2144
truncate filename and add tooltip
BryonLewis Jun 30, 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
32 changes: 11 additions & 21 deletions client/dive-common/components/ControlsContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ export default defineComponent({
<v-col
dense
:style="bottomLayout
? 'position: relative; padding: 0px; margin: 0px; width: 100%;'
? 'position: relative; padding: 0px; margin: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 0;'
: 'position: absolute; bottom: 0px; padding: 0px; margin: 0px;'"
>
<Controls
Expand All @@ -169,7 +169,7 @@ export default defineComponent({
:wrap-bottom-controls="wrapBottomControls"
>
<template slot="timelineControls">
<div :style="{ 'min-width': bottomLayout && wrapBottomControls ? 'auto' : '270px', 'white-space': 'nowrap', width: '100%' }">
<div :style="{ 'min-width': bottomLayout && wrapBottomControls ? 'auto' : '270px', 'white-space': 'nowrap', width: bottomLayout && wrapBottomControls ? 'auto' : '100%' }">
<v-tooltip
v-if="!bottomLayout || !wrapBottomControls"
open-delay="200"
Expand Down Expand Up @@ -319,24 +319,13 @@ export default defineComponent({
</v-btn>
</div>
</template>
<template #bottomControlsActivator="{ activatorId }">
<v-btn
v-if="bottomLayout && wrapBottomControls"
:id="activatorId"
icon
small
class="ml-1"
title="Timeline controls"
>
<v-icon>mdi-tune-variant</v-icon>
</v-btn>
</template>
<template #middle>
<div :class="{ 'middle-content-bottom': bottomLayout }">
<file-name-time-display
v-if="datasetType === 'image-sequence' || datasetType === 'large-image'"
class="text-middle px-3"
:class="bottomLayout ? 'filename-toolbar' : 'text-middle px-3'"
display-type="filename"
:truncate-filename="bottomLayout"
/>
<span v-else-if="datasetType === 'video'">
<span class="mr-2">
Expand Down Expand Up @@ -452,6 +441,7 @@ export default defineComponent({
:frame="frame"
:display="!collapsed"
:dataset-type="datasetType"
:bottom-layout="bottomLayout"
@seek="seek"
>
<template
Expand Down Expand Up @@ -524,15 +514,15 @@ export default defineComponent({
}
.middle-content-bottom {
display: flex;
align-items: center;
align-items: baseline;
white-space: nowrap;
overflow: hidden;
overflow-x: hidden;
overflow-y: visible;
min-width: 0;
}
.middle-content-bottom .text-middle {
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
.middle-content-bottom .filename-toolbar {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}
</style>
218 changes: 77 additions & 141 deletions client/src/components/controls/Controls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,6 @@ export default defineComponent({
const datasetId = useDatasetId();
const activeLockedCamera = ref(false);
const activeTimeFilter = ref(false);
const activeBottomControlsMenu = ref(false);
const bottomControlsActivatorId = 'bottom-controls-menu-activator';
watch(mediaController.frame, (frame) => {
if (!data.dragging) {
data.frame = frame;
Expand Down Expand Up @@ -213,8 +211,6 @@ export default defineComponent({
return {
activeLockedCamera,
activeTimeFilter,
activeBottomControlsMenu,
bottomControlsActivatorId,
data,
mediaController,
dragHandler,
Expand Down Expand Up @@ -264,6 +260,7 @@ export default defineComponent({
disabled: visible(),
},
]"
:class="{ 'controls-bottom-layout': bottomLayout }"
style="position: relative;"
>
<v-card
Expand Down Expand Up @@ -295,17 +292,48 @@ export default defineComponent({
justify="start"
name="timelineControls"
/>
<slot
name="bottomControlsActivator"
:activator-id="bottomControlsActivatorId"
/>
</div>
</v-col>
<v-col
v-if="bottomLayout"
class="py-1 shrink d-flex align-center bottom-controls-actions"
class="py-1 d-flex align-center bottom-controls-actions"
style="min-width: auto;"
>
<v-btn
icon
small
title="(d, left-arrow) previous frame"
@click="mediaController.prevFrame"
>
<v-icon>mdi-skip-previous</v-icon>
</v-btn>
<v-btn
v-if="!mediaController.playing.value"
icon
small
title="(space) Play"
@click="mediaController.play"
>
<v-icon>mdi-play</v-icon>
</v-btn>
<v-btn
v-else
icon
small
title="(space) Pause"
@click="mediaController.pause"
>
<v-icon>mdi-pause</v-icon>
</v-btn>
<v-btn
icon
small
title="(f, right-arrow) next frame"
@click="mediaController.nextFrame"
>
<v-icon>mdi-skip-next</v-icon>
</v-btn>
<v-divider vertical class="mx-1" />
<v-menu
v-model="activeTimeFilter"
bottom
Expand Down Expand Up @@ -562,121 +590,29 @@ export default defineComponent({
color="warning"
dot
overlap
/>
<v-menu
v-model="activeBottomControlsMenu"
:activator="`#${bottomControlsActivatorId}`"
:nudge-left="8"
left
bottom
:close-on-content-click="false"
>
<v-card
outlined
class="pa-2"
color="blue-grey darken-3"
min-width="360"
<v-btn
icon
small
:title="!isDefaultImage ? 'Image Enhancements (Modified)' : 'Image Enhancements'"
@click="toggleEnhancements"
>
<div class="d-flex align-center mb-2">
<slot name="middle" />
</div>
<div class="d-flex align-center">
<v-btn
icon
small
title="(d, left-arrow) previous frame"
@click="mediaController.prevFrame"
>
<v-icon>mdi-skip-previous</v-icon>
</v-btn>
<v-btn
v-if="!mediaController.playing.value"
icon
small
title="(space) Play"
@click="mediaController.play"
>
<v-icon>mdi-play</v-icon>
</v-btn>
<v-btn
v-else
icon
small
title="(space) Pause"
@click="mediaController.pause"
>
<v-icon>mdi-pause</v-icon>
</v-btn>
<v-btn
icon
small
title="(f, right-arrow) next frame"
@click="mediaController.nextFrame"
>
<v-icon>mdi-skip-next</v-icon>
</v-btn>
<v-divider vertical class="mx-1" />
<v-btn
icon
small
:color="timeFilterActive ? 'primary' : 'default'"
title="Filter tracks by time range"
@click="handleTimeFilterClick"
>
<v-icon>
{{ timeFilterActive ? 'mdi-filter' : 'mdi-filter-outline' }}
</v-icon>
</v-btn>
<v-btn
icon
small
:color="clientSettings.annotatorPreferences.lockedCamera.enabled ? 'primary' : 'default'"
title="center camera on selected track"
@click="clientSettings.annotatorPreferences.lockedCamera.enabled = !clientSettings.annotatorPreferences.lockedCamera.enabled"
>
<v-icon>
{{ clientSettings.annotatorPreferences.lockedCamera.enabled ? 'mdi-lock-check' : 'mdi-lock-open' }}
</v-icon>
</v-btn>
<v-btn
icon
small
title="(r)eset pan and zoom"
@click="mediaController.resetZoom"
>
<v-icon>mdi-image-filter-center-focus</v-icon>
</v-btn>
<v-badge
:value="!isDefaultImage"
color="warning"
dot
overlap
bottom
>
<v-btn
icon
small
:title="!isDefaultImage ? 'Image Enhancements (Modified)' : 'Image Enhancements'"
@click="toggleEnhancements"
>
<v-icon>mdi-contrast-box</v-icon>
</v-btn>
</v-badge>
<v-btn
v-if="mediaController.cameras.value.length > 1"
icon
small
:color="mediaController.cameraSync.value ? 'primary' : 'default'"
title="Synchronize camera controls"
@click="mediaController.toggleSynchronizeCameras(!mediaController.cameraSync.value)"
>
<v-icon>
{{ mediaController.cameraSync.value ? 'mdi-link' : 'mdi-link-off' }}
</v-icon>
</v-btn>
</div>
</v-card>
</v-menu>
<v-icon>mdi-contrast-box</v-icon>
</v-btn>
</v-badge>
<v-btn
v-if="mediaController.cameras.value.length > 1"
icon
small
:color="mediaController.cameraSync.value ? 'primary' : 'default'"
title="Synchronize camera controls"
@click="mediaController.toggleSynchronizeCameras(!mediaController.cameraSync.value)"
>
<v-icon>
{{ mediaController.cameraSync.value ? 'mdi-link' : 'mdi-link-off' }}
</v-icon>
</v-btn>
</v-col>
<template v-else>
<v-col
Expand Down Expand Up @@ -1291,45 +1227,45 @@ export default defineComponent({
</v-col>
</template>
</v-row>
<div
v-if="bottomLayout"
class="bottom-controls-filename px-1 py-1"
>
<slot name="middle" />
</div>
</v-card>
</div>
</template>

<style scoped>
.bottom-controls-row {
flex-wrap: wrap;
flex-wrap: nowrap;
}

.bottom-controls-row-nowrap {
flex-wrap: nowrap;
}

.bottom-controls-left {
order: 1;
}

.bottom-controls-middle {
order: 2;
.bottom-controls-row .bottom-controls-left {
flex: 0 0 auto;
}

.bottom-controls-actions {
order: 3;
.bottom-controls-row .bottom-controls-actions {
flex: 0 0 auto;
flex-wrap: nowrap;
}

.bottom-controls-row .bottom-controls-left {
flex: 1 1 auto;
.controls-bottom-layout {
flex-shrink: 0;
}

.bottom-controls-row .bottom-controls-middle {
flex: 1 1 260px;
.bottom-controls-filename {
display: flex;
align-items: baseline;
overflow-x: hidden;
overflow-y: visible;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}

.bottom-controls-row .bottom-controls-actions {
flex: 0 0 auto;
margin-left: auto;
justify-content: flex-end;
}

.bottom-controls-row-nowrap .bottom-controls-left {
Expand Down
Loading
Loading