primitive color picker, asset form

qml/Components/AssetLine.qml

@@ -31,6 +31,7 @@ Item {
 
             Icon {
                 anchors.fill: parent
+                anchors.margins: 2
                 iconName: line.icon
                 color: pickColor(line.color)
             }

qml/Components/CMakeLists.txt

@@ -13,6 +13,7 @@ qt_add_qml_module(magpieComponents
         AssetLine.qml
         IconPicker.qml
         Icon.qml
+        ColorPicker.qml
 )
 
 target_link_libraries(magpie PRIVATE magpieComponents)

qml/Components/ColorPicker.qml

@@ -0,0 +1,102 @@
+//  SPDX-FileCopyrightText: 2023 Yury Gubich <blue@macaw.me>
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick
+import QtQuick.Controls
+
+ComboBox {
+    property color color: "green"
+
+    id: box
+    model: [
+        "darkgreen", "green",
+        "limegreen", "lawngreen",
+        "darkturquoise", "lightseagreen",
+        "cyan", "deepskyblue",
+        "dodgerblue", "royalblue",
+        "navy","midnightblue",
+        "indigo", "purple",
+        "darkviolet", "darkorchid",
+        "magenta", "violet",
+        "crimson", "red",
+        "firebrick", "darkred",
+        "orangered", "orange",
+        "goldenrod", "gold",
+        "yellow", "lightyellow",
+        "ivory", "white",
+        "lightgrey", "grey",
+        "slategrey", "darkgrey",
+        "dimgrey", "black"
+    ]
+    contentItem: Rectangle {
+        color: box.color
+    }
+
+    onActivated: index => box.color = model[index]
+    Component.onCompleted: {
+        popup.background.color = box.background.color
+        popup.background.border.color = box.background.border.color
+        popup.background.border.width = box.background.border.width
+    }
+
+    popup: Popup {
+        id: popup
+
+        y: box.height + 1
+        width: box.width
+        implicitHeight: contentItem.implicitHeight + padding * 2
+        padding: 1
+
+        contentItem: GridView {
+            id: view
+            property int cellSize: (popup.width) / 8
+
+            cellWidth: cellSize - 0.5;
+            cellHeight: cellSize;
+
+            clip: true
+            implicitHeight: contentHeight
+            model: box.popup.visible ? box.model : null
+            currentIndex: box.highlightedIndex
+
+            delegate: MenuItem {
+                required property color modelData
+                required property int index
+
+                width: view.cellSize
+                height: view.cellSize
+                padding: 2
+
+                highlighted: view.currentIndex === index
+                contentItem: Rectangle {
+                    color: modelData
+                    radius: box.background.radius
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        box.currentIndex = index;
+                        box.activated(index)
+                        popup.close();
+                    }
+                }
+
+                HoverHandler {
+                    id: hover
+                    cursorShape: Qt.PointingHandCursor
+                    onHoveredChanged: {
+                        if (hovered)
+                            view.currentIndex = index;
+                    }
+                }
+            }
+
+            ScrollIndicator.vertical: ScrollIndicator {}
+        }
+
+        background: Rectangle {
+            radius: box.background.radius
+        }
+    }
+}

qml/Components/IconPicker.qml

@@ -20,10 +20,12 @@ ComboBox {
         }
     }
     contentItem: View {
-        icon: currentText
+        icon: box.icon
         padding: 5
     }
 
+    onActivated: index => box.icon = model[index]
+
     component View: Row {
         required property string icon