qmlcontrols/kquickcontrols/ColorButton.qml

0001 /*
0002     SPDX-FileCopyrightText: 2015 David Edmundson <davidedmundson@kde.org>
0003
0004     SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
0005 */
0006
0007 import QtQuick 2.2
0008 import QtQuick.Controls 1.2 as QtControls
0009 import QtQuick.Dialogs 1.0 as QtDialogs
0010
0011 /**
0012  * @short A pushbutton to display or allow user selection of a color.
0013  *
0014  * This widget can be used to display or allow user selection of a color.
0015  *
0016  * Example usage:
0017  * @code
0018  * import org.kde.kquickcontrols 2.0
0019  *
0020  * ColorButton {
0021  *   [...]
0022  *   onColorChanged: console.log(color)
0023  * }
0024  * @endcode
0025  *
0026  * @inherits QtQuick.Controls.Button
0027  */
0028 QtControls.Button {
0029     id: colorPicker
0030
0031     /**
0032      * The user selected color
0033      */
0034     property alias color: colorDialog.color
0035
0036     /**
0037      * Title to show in the dialog
0038      */
0039     property alias dialogTitle: colorDialog.title
0040
0041     /**
0042      * The color which the user has currently selected whilst the dialog is open
0043      * For the color that is set when the dialog is accepted, use the color property.
0044      */
0045     property alias currentColor: colorDialog.currentColor
0046
0047     /**
0048      * Allow the user to configure an alpha value
0049      */
0050     property alias showAlphaChannel: colorDialog.showAlphaChannel
0051
0052     /**
0053      * This signal is emitted when the color dialog has been accepted
0054      *
0055      * @since 5.61
0056      */
0057     signal accepted(color color)
0058
0059     readonly property real _buttonMarigns: 4 // same as QStyles. Remove if we can get this provided by the QQC theme
0060
0061     implicitWidth: 40 + _buttonMarigns*2 //to perfectly clone kcolorbutton from kwidgetaddons
0062
0063     Accessible.name: i18nc("@info:whatsthis for a button", "Color button")
0064     Accessible.description: enabled ?
0065         i18nc("@info:whatsthis for a button of current color code %1", "Current color is %1. This button will open a color chooser dialog.", color)
0066       : i18nc("@info:whatsthis for a button of current color code %1", "Current color is %1.", color)
0067
0068     //create a checkerboard background for alpha to be adjusted
0069     Canvas {
0070         anchors.fill: colorBlock
0071         visible: colorDialog.color.a < 1
0072
0073         onPaint: {
0074             const ctx = getContext('2d');
0075
0076             ctx.fillStyle = "white";
0077             ctx.fillRect(0,0, ctx.width, ctx.height)
0078
0079             ctx.fillStyle = "black";
0080             //in blocks of 16x16 draw two black squares of 8x8 in top left and bottom right
0081             for (let j=0;j<width;j+=16) {
0082                 for (let i=0;i<height;i+=16) {
0083                     //top left, bottom right
0084                     ctx.fillRect(j,i,8,8);
0085                     ctx.fillRect(j+8,i+8,8,8);
0086                 }
0087             }
0088         }
0089
0090     }
0091
0092     Rectangle {
0093         id: colorBlock
0094
0095         anchors.centerIn: parent
0096         height: parent.height - _buttonMarigns*2
0097         width: parent.width - _buttonMarigns*2
0098
0099
0100         color: enabled ? colorDialog.color : disabledPalette.button
0101
0102         SystemPalette {
0103             id: disabledPalette
0104             colorGroup: SystemPalette.Disabled
0105         }
0106     }
0107
0108     QtDialogs.ColorDialog {
0109         id: colorDialog
0110         onAccepted: colorPicker.accepted(color)
0111     }
0112
0113     onClicked: {
0114         colorDialog.open()
0115     }
0116 }