Skip to content

[ui] Add list view in gallery #2975

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
cbentejac merged 5 commits into from
Jan 28, 2026
Merged

[ui] Add list view in gallery #2975

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cb0e6fa
[ui] Add list view in gallery
Alxiice Jan 27, 2026
29dd407
[ui] Improve image gallery (fix issues raised by copilot)
Alxiice Jan 27, 2026
26ff85d
[ImageGallery] Replace remaining `_reconstruction` with `_currentScene`
cbentejac Jan 27, 2026
90300e0
[ui] Fix width for gallery list view
Alxiice Jan 27, 2026
6a3fc60
[ui] image gallery : remove useless properties
Alxiice Jan 27, 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
6 changes: 5 additions & 1 deletion meshroom/ui/qml/Controls/SearchBar.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ FocusScope {
Keys.forwardTo: [field]

function forceActiveFocus() {
root.isVisible = true
field.forceActiveFocus()
}

Expand All @@ -46,7 +47,7 @@ FocusScope {
text: MaterialIcons.search

onClicked: {
isVisible = !root.isVisible
root.isVisible = !root.isVisible
// Set Focus on the Text Field
field.focus = field.visible
}
Expand All @@ -73,6 +74,9 @@ FocusScope {
if ((event.key == Qt.Key_Return || event.key == Qt.Key_Enter)) {
event.accepted = true
root.accepted()
} else if (event.key == Qt.Key_Escape) {
root.isVisible = false
field.focus = false
}
}

Expand Down
14 changes: 7 additions & 7 deletions meshroom/ui/qml/Homepage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ Page {
}

GridView {
id: gridView
id: homepageGridView
visible: tabPanel.currentTab === 1
anchors.fill: parent
anchors.topMargin: cellHeight * 0.1
Expand Down Expand Up @@ -309,21 +309,21 @@ Page {
delegate: Column {
id: projectContent

width: gridView.cellWidth
height: gridView.cellHeight
width: homepageGridView.cellWidth
height: homepageGridView.cellHeight

property var source: modelData["thumbnail"] ? Filepath.stringToUrl(modelData["thumbnail"]) : ""

function updateThumbnail() {
thumbnail.source = ThumbnailCache.thumbnail(source, gridView.currentIndex)
thumbnail.source = ThumbnailCache.thumbnail(source, homepageGridView.currentIndex)
}

onSourceChanged: updateThumbnail()

Button {
id: projectDelegate
height: gridView.cellHeight * 0.95 - project.height
width: gridView.cellWidth * 0.9
height: homepageGridView.cellHeight * 0.95 - project.height
width: homepageGridView.cellWidth * 0.9

// Handle case where the file is missing
property bool fileExists: modelData["status"] != 0
Expand Down Expand Up @@ -408,7 +408,7 @@ Page {

BusyIndicator {
anchors.centerIn: parent
running: gridView.visible && modelData["thumbnail"] && thumbnail.status != Image.Ready
running: homepageGridView.visible && modelData["thumbnail"] && thumbnail.status != Image.Ready
visible: running
}

Expand Down
199 changes: 147 additions & 52 deletions meshroom/ui/qml/ImageGallery/ImageDelegate.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,26 @@ Item {

property variant viewpoint
property int cellID: -1
property bool isCurrentItem: false
property alias source: _viewpoint.source
property alias metadata: _viewpoint.metadata
property bool readOnly: false
property bool displayViewId: false
property int layoutMode: 0 // 0: grid, 1: list

property variant parentModel
property int selectedIndex: parentModel ? parentModel.selectedIndex : -1
property bool isCurrentItem: cellID >= 0 && cellID === selectedIndex

signal pressed(var mouse)
signal removeRequest()
signal removeAllImagesRequest()

default property alias children: imageMA.children

// Internal properties to hold thumbnail source & loading status
property url thumbnailSource: ""
property int thumbnailStatus: Image.Null

// Retrieve viewpoints inner data
QtObject {
id: _viewpoint
Expand All @@ -37,7 +45,7 @@ Item {
// Update thumbnail location
// Can be called from the GridView when a new thumbnail has been written on disk
function updateThumbnail() {
thumbnail.source = ThumbnailCache.thumbnail(root.source, root.cellID)
root.thumbnailSource = ThumbnailCache.thumbnail(root.source, root.cellID)
}
onSourceChanged: {
updateThumbnail()
Expand All @@ -49,7 +57,7 @@ Item {
interval: 5000
running: true
onTriggered: {
if (thumbnail.status == Image.Null) {
if (root.thumbnailStatus == Image.Null) {
updateThumbnail()
}
}
Expand Down Expand Up @@ -109,64 +117,151 @@ Item {
}
}

ColumnLayout {
// Switch from the grid component (column layout) to the list component (row layout)
Loader {
id: itemDelegate
anchors.fill: parent
spacing: 0

// Image thumbnail and background
Rectangle {
id: imageBackground
color: Qt.darker(imageLabel.palette.base, 1.15)
Layout.fillHeight: true
Layout.fillWidth: true
border.color: isCurrentItem ? imageLabel.palette.highlight : Qt.darker(imageLabel.palette.highlight)
border.width: imageMA.containsMouse || root.isCurrentItem ? 2 : 0
Image {
id: thumbnail
anchors.fill: parent
anchors.margins: 4
asynchronous: true
autoTransform: true
fillMode: Image.PreserveAspectFit
smooth: false
cache: false
sourceComponent: root.layoutMode === 0 ? gridDelegate : listDelegate
}

Component {
id: gridDelegate
ColumnLayout {
anchors.fill: parent
spacing: 0

// Image thumbnail and background
Rectangle {
color: Qt.darker(grid_imageLabel.palette.base, 1.15)
Layout.fillHeight: true
Layout.fillWidth: true
border.color: isCurrentItem ? grid_imageLabel.palette.highlight : Qt.darker(grid_imageLabel.palette.highlight)
border.width: imageMA.containsMouse || root.isCurrentItem ? 2 : 0
Image {
id: grid_thumbnail
anchors.fill: parent
anchors.margins: 4
source: root.thumbnailSource
asynchronous: true
autoTransform: true
fillMode: Image.PreserveAspectFit
smooth: false
cache: false
onStatusChanged: root.thumbnailStatus = status
}
BusyIndicator {
anchors.centerIn: parent
running: grid_thumbnail.status != Image.Ready
}
}
BusyIndicator {
anchors.centerIn: parent
running: thumbnail.status != Image.Ready

// Image basename
Label {
id: grid_imageLabel
Layout.fillWidth: true
padding: 2
font.pointSize: 8
elide: Text.ElideMiddle
horizontalAlignment: Text.AlignHCenter
text: Filepath.basename(root.source)
background: Rectangle {
color: root.isCurrentItem ? parent.palette.highlight : "transparent"
}
}
}

// Image basename
Label {
id: imageLabel
Layout.fillWidth: true
padding: 2
font.pointSize: 8
elide: Text.ElideMiddle
horizontalAlignment: Text.AlignHCenter
text: Filepath.basename(root.source)
background: Rectangle {
color: root.isCurrentItem ? parent.palette.highlight : "transparent"
// Image viewId
Loader {
active: displayViewId
Layout.fillWidth: true
visible: active
sourceComponent: Label {
padding: grid_imageLabel.padding
font.pointSize: grid_imageLabel.font.pointSize
elide: grid_imageLabel.elide
horizontalAlignment: grid_imageLabel.horizontalAlignment
text: _viewpoint.viewId
background: Rectangle {
color: grid_imageLabel.background.color
}
}
}
}
}

// Image viewId
Loader {
active: displayViewId
Layout.fillWidth: true
visible: active
sourceComponent: Label {
padding: imageLabel.padding
font.pointSize: imageLabel.font.pointSize
elide: imageLabel.elide
horizontalAlignment: imageLabel.horizontalAlignment
text: _viewpoint.viewId
background: Rectangle {
color: imageLabel.background.color
Component {
id: listDelegate
RowLayout {
anchors.fill: parent
spacing: 4

// Image thumbnail and background
Rectangle {
color: Qt.darker(list_imageLabel.palette.base, 1.15)
Layout.fillHeight: true
Layout.preferredWidth: 100

border.color: isCurrentItem ? list_imageLabel.palette.highlight : Qt.darker(list_imageLabel.palette.highlight)
border.width: imageMA.containsMouse || root.isCurrentItem ? 2 : 0

Image {
id: list_thumbnail
anchors.fill: parent
anchors.margins: 4
source: root.thumbnailSource
asynchronous: true
autoTransform: true
fillMode: Image.PreserveAspectFit
smooth: false
cache: false
onStatusChanged: root.thumbnailStatus = status
}
BusyIndicator {
anchors.centerIn: parent
running: list_thumbnail.status != Image.Ready
}
}

ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: 0

// Image basename
Label {
id: list_imageLabel
Layout.fillWidth: true
Layout.fillHeight: true
padding: 4
font.pointSize: 8
elide: Text.ElideMiddle
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
text: Filepath.basename(root.source)
background: Rectangle {
color: root.isCurrentItem ? parent.palette.highlight : "transparent"
}
}

// Image viewId
Loader {
active: root.displayViewId
Layout.fillWidth: true
Layout.fillHeight: active
visible: active
sourceComponent: Label {
padding: list_imageLabel.padding
font.pointSize: list_imageLabel.font.pointSize
elide: list_imageLabel.elide
horizontalAlignment: list_imageLabel.horizontalAlignment
verticalAlignment: list_imageLabel.verticalAlignment
text: _viewpoint.viewId
background: Rectangle {
color: list_imageLabel.background.color
}
}
}
}
}
}
}
}
}
Loading
Loading