Icon selector for device types

CMakeLists.txt

@@ -30,6 +30,7 @@ qt_add_qml_module(applightcontrol
         main.qml
         HomePage.qml
         SettingsPage.qml
+        IconChooserDelegateLayout.qml
         LightControlWindow.qml
         LightSliderPane.qml
         EditableListView.qml

DeviceTypesSettingsPage.qml

@@ -2,10 +2,17 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Controls.Material
 import QtQuick.Layouts
+import Qt.labs.folderlistmodel 2.4
 
 import com.büro 1.0
 
 ColumnLayout {
+    FolderListModel {
+        id: iconsModel
+        folder: "qrc:/lightcontrol/icons/"
+        showDirs: false
+    }
+
     Label {
         text: qsTr("Device Types Settings")
     }
@@ -81,22 +88,27 @@ ColumnLayout {
                 Label { text: qsTr("Icon:") }
                 ComboBox {
                     Layout.fillWidth: true
+                    Layout.preferredHeight: 64
                     id: iconCombobox
-                    //textRole: "imageSource"
-                    //valueRole: "imageSource"
-                    //currentIndex: iconCombobox.indexOfValue(listView.currentData.deviceTypeId)
-                    //onActivated: if (listView.currentData) listView.currentData.deviceTypeId = currentValue; else console.warn('discarded');
-                    delegate: Image {
-                                height: 64
-                                fillMode: Image.PreserveAspectFit
-                                source: imageSource
-                            }
-                    model: ListModel {
-                                id: cbItems
-                                ListElement { imageSource: "qrc:/lightcontrol/icons/movinghead.png"  }
-                                ListElement { imageSource: "qrc:/lightcontrol/icons/nebelmaschine.png"  }
-                                ListElement { imageSource: "qrc:/lightcontrol/icons/rgbstrahler.png"  }
-                            }
+                    textRole: "fileName"
+                    valueRole: "fileUrl"
+                    delegate: ItemDelegate {
+                        height: 64
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        contentItem: IconChooserDelegateLayout {
+                            anchors.top: parent.top
+                            anchors.bottom: parent.bottom
+                            text: fileName
+                            iconSource: fileUrl
+                        }
+                    }
+                    contentItem: IconChooserDelegateLayout {
+                        text: iconCombobox.currentText
+                        iconSource: iconCombobox.currentValue
+                    }
+
+                    model: iconsModel
                 }
                 Label { text: qsTr("Registers:") }
                 RegistersSettingsItem {

IconChooserDelegateLayout.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Layouts
+
+RowLayout {
+    property string text
+    property string iconSource
+
+    id: layout
+
+    Image {
+        Layout.topMargin: 15
+        Layout.bottomMargin: 15
+        Layout.fillHeight: true
+        source: layout.iconSource
+        fillMode: Image.PreserveAspectFit
+    }
+    Label {
+        text: layout.text
+    }
+    Item {
+        Layout.fillWidth: true
+    }
+}

devicetypesmodel.cpp

@@ -4,7 +4,10 @@
 #include <QCoreApplication>
 #include <QQmlEngine>
 
-constexpr auto IdRole = Qt::UserRole;
+enum {
+    IdRole = Qt::UserRole,
+    IconRole
+};
 
 void DeviceTypesModel::setController(DmxController *controller)
 {