ColorButton.qml

/*
    SPDX-FileCopyrightText: 2015 David Edmundson <[email protected]>

    SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
*/

import QtQuick 2.2
import QtQuick.Controls 1.2 as QtControls
import QtQuick.Dialogs 1.0 as QtDialogs

QtControls.Button {
    id: colorPicker

    property alias color: colorDialog.color

    property alias dialogTitle: colorDialog.title

    property alias currentColor: colorDialog.currentColor

    property alias showAlphaChannel: colorDialog.showAlphaChannel

    signal accepted(color color)

    readonly property real _buttonMarigns: 4 // same as QStyles. Remove if we can get this provided by the QQC theme

    implicitWidth: 40 + _buttonMarigns*2 //to perfectly clone kcolorbutton from kwidgetaddons


    //create a checkerboard background for alpha to be adjusted
    Canvas {
        anchors.fill: colorBlock
        visible: colorDialog.color.a < 1

        onPaint: {
            var ctx = getContext('2d');

            ctx.fillStyle = "white";
            ctx.fillRect(0,0, ctx.width, ctx.height)

            ctx.fillStyle = "black";
            //in blocks of 16x16 draw two black squares of 8x8 in top left and bottom right
            for (var j=0;j<width;j+=16) {
                for (var i=0;i<height;i+=16) {
                    //top left, bottom right
                    ctx.fillRect(j,i,8,8);
                    ctx.fillRect(j+8,i+8,8,8);
                }
            }
        }

    }

    Rectangle {
        id: colorBlock

        anchors.centerIn: parent
        height: parent.height - _buttonMarigns*2
        width: parent.width - _buttonMarigns*2


        color: enabled ? colorDialog.color : disabledPalette.button

        SystemPalette {
            id: disabledPalette
            colorGroup: SystemPalette.Disabled
        }
    }

    QtDialogs.ColorDialog {
        id: colorDialog
        onAccepted: colorPicker.accepted(color)
    }

    onClicked: {
        colorDialog.open()
    }
}