magpie/qml/Components/ColorPicker.qml

//  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: {
        if (box.background.color)
            popup.background.color = box.background.color;

        if (!box.background.border)
            return;

        if (box.background.border.color)
            popup.background.border.color = box.background.border.color;

        if (box.background.border.width)
            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 {
                    anchors.fill: parent
                    color: modelData
                    radius: box.background.radius || 0
                }

                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 || 0
        }
    }
}