KDeclarative

ColorButton.qml
1/*
2 SPDX-FileCopyrightText: 2015 David Edmundson <davidedmundson@kde.org>
3
4 SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
5*/
6
7import QtQuick
8import QtQuick.Controls as QQC2
9import QtQuick.Dialogs as QtDialogs
10
11/**
12 * @short A pushbutton to display or allow user selection of a color.
13 *
14 * This widget can be used to display or allow user selection of a color.
15 *
16 * Example usage:
17 * @code
18 * import org.kde.kquickcontrols
19 *
20 * ColorButton {
21 * onColorChanged: console.log(color)
22 * }
23 * @endcode
24 *
25 * @inherits QtQuick.Controls.Button
26 */
27QQC2.Button {
28 id: root
29
30 /**
31 * The user selected color
32 */
33 property alias color: colorDialog.selectedColor
34
35 /**
36 * Title to show in the dialog
37 */
38 property alias dialogTitle: colorDialog.title
39
40 /**
41 * Allow the user to configure an alpha value
42 */
43 property bool showAlphaChannel: true
44
45 /**
46 * This signal is emitted when the color dialog has been accepted
47 *
48 * @since 5.61
49 */
50 signal accepted(color color)
51
52 readonly property real _buttonMarigns: 4 // same as QStyles. Remove if we can get this provided by the QQC theme
53
54 implicitWidth: 40 + _buttonMarigns * 2 // to perfectly clone kcolorbutton from kwidgetaddons
55
56 Accessible.name: i18nc("@info:whatsthis for a button", "Color button")
57 Accessible.description: enabled
58 ? i18nc("@info:whatsthis for a button of current color code %1", "Current color is %1. This button will open a color chooser dialog.", color)
59 : i18nc("@info:whatsthis for a button of current color code %1", "Current color is %1.", color)
60
61 // create a checkerboard background for alpha to be adjusted
62 Canvas {
63 anchors.fill: colorBlock
64 visible: colorDialog.selectedColor.a < 1
65
66 onPaint: {
67 const ctx = getContext('2d');
68
69 ctx.fillStyle = "white";
70 ctx.fillRect(0,0, ctx.width, ctx.height);
71
72 ctx.fillStyle = "black";
73 // in blocks of 16x16 draw two black squares of 8x8 in top left and bottom right
74 for (let j = 0; j < width; j += 16) {
75 for (let i = 0; i < height; i += 16) {
76 // top left, bottom right
77 ctx.fillRect(j, i, 8, 8);
78 ctx.fillRect(j + 8, i + 8, 8, 8);
79 }
80 }
81 }
82 }
83
84 Rectangle {
85 id: colorBlock
86
87 anchors.centerIn: parent
88 height: parent.height - _buttonMarigns * 2
89 width: parent.width - _buttonMarigns * 2
90
91 color: enabled ? colorDialog.selectedColor : disabledPalette.button
92
93 SystemPalette {
94 id: disabledPalette
95 colorGroup: SystemPalette.Disabled
96 }
97 }
98
99 QtDialogs.ColorDialog {
100 id: colorDialog
101 onAccepted: root.accepted(color)
102 parentWindow: root.Window.window
103 options: root.showAlphaChannel ? QtDialogs.ColorDialog.ShowAlphaChannel : undefined
104 }
105
106 onClicked: {
107 colorDialog.open();
108 }
109}
QString i18nc(const char *context, const char *text, const TYPE &arg...)
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Jul 19 2024 11:51:26 by doxygen 1.11.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.