qml/panels/ColorPanel.qml

0001 /* This file is part of the KDE project
0002  * SPDX-FileCopyrightText: 2012 Arjen Hiemstra <ahiemstra@heimr.nl>
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 import org.krita.sketch.components 1.0
0010
0011 Panel {
0012     id: base;
0013     name: "Color";
0014     colorSet: "color";
0015
0016     actions: [
0017         ColorSwatch {
0018             id: swatch;
0019             height: parent.height;
0020             width: height;
0021             onChooseBGChanged: {
0022                 if (toolManager.currentTool !== null && toolManager.currentTool.toolId() === "KritaSelected/KisToolColorSampler") {
0023                     toolManager.currentTool.toForeground = !swatch.chooseBG;
0024                 }
0025             }
0026         },
0027         Button {
0028             id: colorSampler;
0029             width: height;
0030             height: Constants.ToolbarButtonSize;
0031             image: Settings.theme.icon("colorsampler");
0032             onClicked: toolManager.requestToolChange("KritaSelected/KisToolColorSampler");
0033         },
0034         Item {
0035             width: base.width - Constants.DefaultMargin - (Constants.ToolbarButtonSize * 3);
0036             height: Constants.ToolbarButtonSize;
0037         },
0038         Button {
0039             id: showPeekGrid;
0040             visible: base.state === "peek";
0041             width: height;
0042             height: Constants.ToolbarButtonSize
0043             image: colorSelectorPeek.visible ? Settings.theme.icon("palette") : Settings.theme.icon("color_wheel");
0044             onClicked: colorSelectorPeek.visible = !colorSelectorPeek.visible;
0045         }
0046     ]
0047     Connections {
0048         target: toolManager;
0049         onCurrentToolChanged: {
0050             if (toolManager.currentTool !== null && toolManager.currentTool.toolId() === "KritaSelected/KisToolColorSampler") {
0051                 toolManager.currentTool.toForeground = !swatch.chooseBG;
0052             }
0053         }
0054     }
0055
0056     PaletteColorsModel {
0057         id: paletteColorsModel;
0058         view: sketchView.view;
0059         onColorChanged: {
0060             if (backgroundChanged) {
0061                 swatch.bgColor = newColor;
0062             }
0063             else {
0064                 swatch.fgColor = newColor;
0065             }
0066         }
0067     }
0068     PaletteModel {
0069         id: paletteModel;
0070     }
0071
0072     property bool settingAlpha: false
0073     peekContents: Item {
0074         anchors.fill: parent;
0075         Item {
0076             id: colorSelectorPeek;
0077             anchors {
0078                 fill: parent;
0079                 margins: Constants.DefaultMargin;
0080             }
0081             //height: parent.height;
0082             ColorSelectorItem {
0083                 id: colorSelectorActualPeek;
0084                 anchors.fill: parent;
0085                 view: sketchView.view;
0086                 changeBackground: swatch.chooseBG;
0087                 shown: (base.state === "peek") && colorSelectorPeek.visible
0088                 onColorChanged: {
0089                     if (backgroundChanged) {
0090                         swatch.bgColor = newColor;
0091                     }
0092                     else {
0093                         swatch.fgColor = newColor;
0094                     }
0095                     if(!settingAlpha)
0096                         fullPaletteAlphaSlider.value = newAlpha * 100;
0097                 }
0098             }
0099         }
0100         GridView {
0101             anchors {
0102                 fill: parent
0103                 margins: Constants.DefaultMargin;
0104             }
0105             model: paletteColorsModel;
0106             delegate: delegate;
0107             cellWidth: width / 2;
0108             cellHeight: Constants.GridHeight;
0109             visible: !colorSelectorPeek.visible;
0110             ScrollDecorator {
0111                 flickableItem: parent;
0112             }
0113         }
0114     }
0115
0116     fullContents: Item {
0117         anchors.fill: parent;
0118         Item {
0119             id: colorSelector;
0120             anchors {
0121                 top: parent.top;
0122                 left: parent.left;
0123                 right: parent.right;
0124                 margins: Constants.DefaultMargin;
0125             }
0126             height: parent.width;
0127             ColorSelectorItem {
0128                 id: colorSelectorActual;
0129                 anchors.fill: parent;
0130                 view: sketchView.view;
0131                 changeBackground: swatch.chooseBG;
0132                 shown: (base.state === "full") && colorSelector.visible
0133                 onColorChanged: {
0134                     if (backgroundChanged) {
0135                         swatch.bgColor = newColor;
0136                     }
0137                     else {
0138                         swatch.fgColor = newColor;
0139                     }
0140                     if(!settingAlpha)
0141                         fullPaletteAlphaSlider.value = newAlpha * 100;
0142                 }
0143             }
0144         }
0145         Slider {
0146             id: fullPaletteAlphaSlider;
0147             anchors {
0148                 top: colorSelector.bottom;
0149                 left: parent.left;
0150                 right: parent.right;
0151                 leftMargin: Constants.DefaultMargin;
0152                 rightMargin: Constants.DefaultMargin;
0153             }
0154             value: 100;
0155             onValueChanged: {
0156                 settingAlpha = true;
0157                 colorSelectorActual.setAlpha(value);
0158                 settingAlpha = false;
0159             }
0160         }
0161         ExpandingListView {
0162             id: fullPaletteList
0163             anchors {
0164                 top: fullPaletteAlphaSlider.bottom;
0165                 topMargin: Constants.DefaultMargin;
0166                 left: parent.left;
0167                 right: parent.right;
0168                 leftMargin: Constants.DefaultMargin;
0169                 rightMargin: Constants.DefaultMargin;
0170             }
0171             model: paletteModel
0172             onCurrentIndexChanged: {
0173                 paletteModel.itemActivated(currentIndex);
0174                 paletteColorsModel.colorSet = paletteModel.colorSet;
0175             }
0176         }
0177         GridView {
0178             anchors {
0179                 top: fullPaletteList.bottom;
0180                 topMargin: Constants.DefaultMargin;
0181                 left: parent.left;
0182                 right: parent.right;
0183                 rightMargin: Constants.DefaultMargin;
0184                 bottom: parent.bottom;
0185             }
0186             model: paletteColorsModel;
0187             delegate: delegate;
0188             clip: true;
0189             cellWidth: (width / 2) - 1;
0190             cellHeight: Constants.GridHeight;
0191             ScrollDecorator {
0192                 flickableItem: parent;
0193             }
0194         }
0195     }
0196
0197     Component {
0198         id: delegate;
0199
0200         Item {
0201             width: Constants.GridWidth - Constants.DefaultMargin;
0202             height: Constants.GridHeight;
0203             Image {
0204                 anchors {
0205                     fill: parent;
0206                     margins: Constants.DefaultMargin;
0207                 }
0208                 source: model.image;
0209                 asynchronous: true;
0210                 MouseArea {
0211                     anchors.fill: parent;
0212                     onClicked: {
0213                         //Settings.currentColor = model.color;
0214                         paletteColorsModel.activateColor(index, swatch.chooseBG);
0215                     }
0216                 }
0217             }
0218         }
0219     }
0220 }