plugins/components/ColorSwatch.qml

0001 /* This file is part of the KDE project
0002  * SPDX-FileCopyrightText: 2012 Dan Leinir Turthra Jensen <admin@leinir.dk>
0003  *
0004  * SPDX-License-Identifier: GPL-2.0-or-later
0005  */
0006
0007 import QtQuick 2.3
0008 import org.krita.sketch 1.0
0009
0010 Item {
0011     id: base;
0012     property bool chooseBG: false;
0013     property alias fgColor: fgColor.color;
0014     property alias bgColor: bgColor.color;
0015     Image {
0016         anchors.fill: bgColor;
0017         source: Settings.theme.icon("checker-small");
0018     }
0019     Image {
0020         anchors.fill: fgColor;
0021         source: Settings.theme.icon("checker-small");
0022     }
0023     Rectangle {
0024         id: bgColor;
0025         anchors {
0026             right: base.right;
0027             bottom: base.bottom;
0028             bottomMargin: Constants.DefaultMargin;
0029             topMargin: Constants.DefaultMargin;
0030         }
0031         height: (base.height - Constants.DefaultMargin * 2) / 3 * 2;
0032         width: (base.width - Constants.DefaultMargin * 2) / 3 * 2;
0033         color: "white";
0034         MouseArea {
0035             anchors.fill: parent;
0036             onClicked: base.state = "bgChoice";
0037         }
0038     }
0039     Rectangle {
0040         id: fgColor;
0041         anchors {
0042             top: base.top;
0043             left: base.left;
0044             topMargin: Constants.DefaultMargin;
0045             leftMargin: Constants.DefaultMargin;
0046         }
0047         height: bgColor.height;
0048         width: bgColor.width;
0049         color: "black";
0050         MouseArea {
0051             anchors.fill: parent;
0052             onClicked: base.state = "";
0053         }
0054     }
0055     Rectangle {
0056         id: chosingBG;
0057         anchors {
0058             top: bgColor.top;
0059             left: bgColor.left;
0060             right: bgColor.right;
0061             bottom: bgColor.bottom;
0062             topMargin: -3;
0063             leftMargin: -3;
0064             bottomMargin: -2;
0065             rightMargin: -2;
0066         }
0067         border {
0068             width: 3;
0069             color: Settings.theme.color("components/colorSwatch/border");
0070         }
0071         color: "transparent";
0072         opacity: 0;
0073         radius: 3;
0074     }
0075     Rectangle {
0076         id: chosingFG;
0077         anchors {
0078             top: fgColor.top;
0079             left: fgColor.left;
0080             right: fgColor.right;
0081             bottom: fgColor.bottom;
0082             topMargin: -3;
0083             leftMargin: -3;
0084             bottomMargin: -2;
0085             rightMargin: -2;
0086         }
0087         border {
0088             width: 3;
0089             color: Settings.theme.color("components/colorSwatch/border");
0090         }
0091         color: "transparent";
0092         opacity: 0.5;
0093         radius: 3;
0094     }
0095
0096     Image {
0097         id: swapColors;
0098         anchors {
0099             left: base.left;
0100             bottom: base.bottom;
0101         }
0102         height: (base.height - Constants.DefaultMargin * 2) / 3;
0103         width: (base.width - Constants.DefaultMargin * 2) / 3;
0104     }
0105
0106     states: [
0107         State {
0108             name: "bgChoice";
0109             PropertyChanges { target: chosingFG; opacity: 0; }
0110             PropertyChanges { target: chosingBG; opacity: 0.5; }
0111             PropertyChanges { target: base; chooseBG: true; }
0112         }
0113     ]
0114
0115     transitions: [
0116         Transition {
0117             from: "";
0118             to: "bgChoice";
0119             reversible: true;
0120             PropertyAnimation { properties: "opacity"; duration: Constants.AnimationDuration; easing.type: Easing.InOutQuad; }
0121         }
0122     ]
0123 }