magpie/qml/Components/ColorPicker.qml

112 lines
3.0 KiB
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
}
}
}