make background image selectable in grid view

Author: saeugetier

qml/SnapshotSettings.qml

@@ -10,6 +10,7 @@ SnapshotSettingsForm {
     property alias backgroundFilterEnabled: settings.backgroundFilterEnabled
     property alias chromaKeyEnabled: settings.chromaKeyEnabled
     property alias chromaKeyColor: settings.chromaKeyColor
+    property alias backgroundImage: settings.backgroundImage
 
     Settings
     {
@@ -116,6 +117,20 @@ SnapshotSettingsForm {
         settings.chromaKeyColor = sliderChromaKeyFilterColor.value
     }
 
+    backgroundImageSelector.currentIndex: backgroundImageSelectorModel.indexOf(settings.backgroundImage)
+    backgroundImageSelector.onCurrentIndexChanged:
+    {
+        if(backgroundImageSelectorModel.count > 0)
+        {
+            console.log("selected index " + backgroundImageSelector.currentIndex)
+            if (backgroundImageSelector.currentIndex >= 0)
+            {
+                settings.backgroundImage = backgroundImageSelectorModel.get(backgroundImageSelector.currentIndex, "fileUrl")
+                console.log("selected background " + settings.backgroundImage)
+            }
+        }
+    }
+
     Behavior on width
     {
         PropertyAnimation

qml/SnapshotSettingsForm.ui.qml

@@ -356,35 +356,45 @@ Pane {
                 {
                     visible: switchBackgroundFilterEnable.checked
 
-
                     GridView
                     {
                         id: backgroundSelector
-
+                        cellWidth: 100
+                        cellHeight: 120
                         Layout.fillWidth: true
 
-                        delegate: Item {
-                            width: 250
-                            height: 80
+                        focus: true
+
+                        delegate: Column {
+                            spacing: 5
 
                             Rectangle {
-                                anchors.fill: parent
-                                border.color: "gray"
-                                color: "gray"
+                                width: backgroundSelector.cellWidth - 10
+                                height: backgroundSelector.cellHeight - 30
+                                border.color: GridView.isCurrentItem ? "blue" : "gray"
+                                border.width: 5
+                                radius: 8
 
                                 Image {
-                                    width: 80
-                                    height: 80
-
+                                    anchors.fill: parent
                                     source: model.fileUrl
-                                    fillMode: Image.PreserveAspectFit
+                                    fillMode: Image.PreserveAspectCrop
                                 }
 
-                                Text {
-                                    id: name
-                                    text: model.fileBaseName
+                                MouseArea {
+                                    anchors.fill: parent
+                                    cursorShape: Qt.PointingHandCursor
+                                    onClicked: backgroundSelector.currentIndex = index
                                 }
                             }
+
+                            Label {
+                                width: backgroundSelector.cellWidth - 10
+                                text: model.fileBaseName
+                                font.pixelSize: 12
+                                horizontalAlignment: Text.AlignHCenter
+                                elide: Text.ElideRight
+                            }
                         }
                     }
                 }