Warning, /graphics/krita/libs/libqml/qml/panels/LayersPanel.qml is written in an unsupported language. File is not indexed.
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.components 1.0
0009 import org.krita.sketch 1.0
0010
0011 Panel {
0012 id: base;
0013 name: "Layers";
0014 colorSet: "layers";
0015
0016 actions: [
0017 Button {
0018 id: backFromEditButton;
0019 width: height;
0020 height: Constants.ToolbarButtonSize
0021 image: Settings.theme.icon("back")
0022 onClicked: {
0023 fullViewStack.pop();
0024 backFromEditButton.visible = false;
0025 addButton.visible = true;
0026 removeButton.visible = true;
0027 }
0028 visible: false;
0029 },
0030 Button {
0031 id: addButton;
0032 width: height;
0033 height: Constants.ToolbarButtonSize
0034 image: Settings.theme.icon("add")
0035 onClicked: {
0036 if (base.state === "full") {
0037 addLayerButtons.toggle();
0038 }
0039 else {
0040 layerModel.addLayer(0);
0041 }
0042 }
0043 },
0044 Item {
0045 width: editButton.visible ? 0 : editButton.width;
0046 height: Constants.ToolbarButtonSize;
0047 },
0048 Button {
0049 id: editButton;
0050 width: height;
0051 height: Constants.ToolbarButtonSize
0052 image: Settings.theme.icon("edit")
0053 enabled: layerModel.count > 0;
0054 visible: (base.state === "full" && backFromEditButton.visible === false);
0055 onClicked: {
0056 fullViewStack.push(editLayerPage);
0057 backFromEditButton.visible = true;
0058 addButton.visible = false;
0059 removeButton.visible = false;
0060 }
0061 },
0062 Item {
0063 width: base.width - Constants.DefaultMargin - (Constants.ToolbarButtonSize * 3)
0064 height: Constants.ToolbarButtonSize;
0065 },
0066 Button {
0067 id: removeButton;
0068 width: height;
0069 height: Constants.ToolbarButtonSize
0070 image: Settings.theme.icon("delete")
0071 enabled: layerModel.count > 0;
0072 onClicked: layerModel.deleteCurrentLayer();
0073 }
0074 ]
0075
0076 peekContents: ListView {
0077 anchors.fill: parent;
0078 model: layerModel;
0079 delegate: Item {
0080 width: parent.width - Constants.DefaultMargin;
0081 height: childrenRect.height;
0082 Item {
0083 id: topSpacer;
0084 height: model.childCount == 0 ? 0 : Constants.DefaultMargin;
0085 }
0086 Rectangle {
0087 id: layerBgRect
0088 anchors {
0089 top: topSpacer.bottom;
0090 left: parent.left;
0091 right: parent.right;
0092 leftMargin: 8 * model.depth;
0093 }
0094 height: Constants.DefaultFontSize + 2*Constants.DefaultMargin;
0095 radius: 8
0096 color: model.activeLayer ? Settings.theme.color("panels/layers/layer/active") : Settings.theme.color("panels/layers/layer/inactive");
0097 }
0098 Rectangle {
0099 anchors.fill: layerBgRect
0100 color: "transparent";
0101 Rectangle {
0102 id: layerThumbContainer;
0103 anchors {
0104 verticalCenter: parent.verticalCenter;
0105 left: parent.left;
0106 }
0107 height: Constants.DefaultFontSize + 2*Constants.DefaultMargin;
0108 width: height;
0109 color: "transparent";
0110 Image {
0111 anchors.centerIn: parent;
0112 cache: false;
0113 source: model.icon;
0114 asynchronous: true;
0115 smooth: true;
0116 width: parent.width * 0.8;
0117 height: parent.height * 0.8;
0118 fillMode: Image.PreserveAspectFit;
0119 }
0120 }
0121 Label {
0122 id: layerNameLbl
0123 anchors {
0124 top: parent.top;
0125 left: layerThumbContainer.right;
0126 right: parent.right;
0127 }
0128 text: model.name;
0129 color: Settings.theme.color("panels/layers/layer/text");
0130 elide: Text.ElideRight;
0131 }
0132 MouseArea {
0133 anchors.fill: parent;
0134 onClicked: layerModel.setActive(model.index);
0135 }
0136 }
0137 Rectangle {
0138 id: bottomSpacer;
0139 anchors.top: layerBgRect.bottom;
0140 height: Constants.DefaultMargin;
0141 color: "transparent";
0142 }
0143 }
0144 ScrollDecorator {
0145 flickableItem: parent;
0146 }
0147 }
0148
0149 fullContents: Item {
0150 anchors.fill: parent;
0151
0152 Rectangle {
0153 id: addLayerButtons
0154 function toggle() { addLayerButtons.state = (addLayerButtons.state === "shown") ? "" : "shown"; }
0155 anchors {
0156 top: parent.top;
0157 left: parent.left;
0158 right: parent.right;
0159 }
0160 states: [
0161 State {
0162 name: "shown";
0163 PropertyChanges { target: addLayerButtons; height: Constants.GridHeight; opacity: 1; }
0164 }
0165 ]
0166 Behavior on height { PropertyAnimation { duration: Constants.AnimationDuration; } }
0167 Behavior on opacity { PropertyAnimation { duration: Constants.AnimationDuration; } }
0168 clip: true;
0169 height: 0;
0170 opacity: 0;
0171
0172 color: Settings.theme.color("panels/layers/subheader");
0173
0174 Row {
0175 anchors.centerIn: parent;
0176 height: childrenRect.height;
0177 width: childrenRect.width;
0178 Button {
0179 width: height; height: Constants.ToolbarButtonSize * 0.9
0180 image: Settings.theme.icon("fileclip-black")
0181 visible: KisClipBoard.clip;
0182 onClicked: {
0183 sketchView.selectionManager.paste();
0184 addLayerButtons.state = "";
0185 }
0186 }
0187 Button {
0188 width: height; height: Constants.ToolbarButtonSize * 0.9
0189 image: Settings.theme.icon("layer_paint-black")
0190 onClicked: {
0191 layerModel.addLayer(0);
0192 addLayerButtons.state = "";
0193 }
0194 }
0195 Button {
0196 width: height; height: Constants.ToolbarButtonSize * 0.9
0197 image: Settings.theme.icon("layer_group-black")
0198 onClicked: {
0199 layerModel.addLayer(1);
0200 addLayerButtons.state = "";
0201 }
0202 }
0203 Button {
0204 width: height; height: Constants.ToolbarButtonSize * 0.9
0205 image: Settings.theme.icon("layer_filter-black")
0206 onClicked: {
0207 layerModel.addLayer(2);
0208 addLayerButtons.state = "";
0209 }
0210 }
0211 }
0212 }
0213 PageStack {
0214 id: fullViewStack
0215 anchors {
0216 top: addLayerButtons.bottom;
0217 left: parent.left;
0218 right: parent.right;
0219 bottom: parent.bottom;
0220 }
0221 initialPage: ListView {
0222 anchors.fill: parent;
0223 model: layerModel;
0224 delegate: Item {
0225 id: viewBase;
0226 width: parent.width - Constants.DefaultMargin;
0227 height: childrenRect.height;
0228
0229 Rectangle {
0230 id: topSpacer;
0231 height: model.childCount == 0 ? 0 : Constants.DefaultMargin;
0232 color: "transparent";
0233 }
0234 Rectangle {
0235 id: layerBgRect
0236 anchors {
0237 top: topSpacer.bottom;
0238 left: parent.left;
0239 right: parent.right;
0240 leftMargin: Constants.DefaultMargin * model.depth;
0241 }
0242 height: model.activeLayer ? Constants.GridHeight + layerControls.height : Constants.GridHeight;
0243 Behavior on height { NumberAnimation { duration: 100; } }
0244 radius: 8
0245 color: Settings.theme.color("panels/layers/layer/background");
0246 }
0247 Rectangle {
0248 anchors {
0249 top: layerBgRect.top;
0250 left: layerBgRect.left;
0251 right: layerBgRect.right;
0252 }
0253 height: Constants.GridHeight;
0254 color: model.activeLayer ? Settings.theme.color("panels/layers/layer/active") : Settings.theme.color("panels/layers/layer/inactive");
0255 radius: 8
0256 Rectangle {
0257 id: layerThumbContainer;
0258 anchors {
0259 verticalCenter: parent.verticalCenter;
0260 left: parent.left;
0261 }
0262 height: Constants.GridHeight;
0263 width: height;
0264 color: "transparent";
0265 Image {
0266 anchors.centerIn: parent;
0267 cache: false;
0268 source: model.icon;
0269 smooth: true;
0270 asynchronous: true;
0271 width: parent.width * 0.8;
0272 height: parent.height * 0.8;
0273 fillMode: Image.PreserveAspectFit;
0274 }
0275 }
0276 Label {
0277 id: layerNameLbl
0278 anchors {
0279 top: parent.top;
0280 left: layerThumbContainer.right;
0281 right: parent.right;
0282 }
0283 text: model.name;
0284 color: Settings.theme.color("panels/layers/layer/text");
0285 elide: Text.ElideRight;
0286 }
0287 MouseArea {
0288 anchors.fill: parent;
0289 onClicked: layerModel.setActive(model.index);
0290 }
0291 Row {
0292 id: modeButtons;
0293 anchors {
0294 left: layerThumbContainer.right;
0295 bottom: parent.bottom;
0296 }
0297 height: childrenRect.height;
0298
0299 Button {
0300 width: height;
0301 height: Constants.GridHeight / 2;
0302 checkable: true;
0303 checked: model.visible;
0304 checkedColor: Settings.theme.color("panels/layers/layer/visible");
0305 image: checked ? Settings.theme.icon("visible_on-small") : Settings.theme.icon("visible_off-small");
0306 onCheckedChanged: layerModel.setVisible(model.index, checked);
0307 tooltip: checked ? "Hide Layer" : "Show Layer";
0308 }
0309 Button {
0310 width: height;
0311 height: Constants.GridHeight / 2;
0312 checkable: true;
0313 checked: model.locked;
0314 checkedColor: Settings.theme.color("panels/layers/layer/locked");
0315 image: checked ? Settings.theme.icon("locked_on-small") : Settings.theme.icon("locked_off-small");
0316 onCheckedChanged: layerModel.setLocked(model.index, checked);
0317 tooltip: checked ? "Unlock Layer" : "Lock Layer";
0318 }
0319 }
0320 Label {
0321 id: modeLabel;
0322 anchors {
0323 top: layerNameLbl.bottom;
0324 right: parent.right;
0325 rightMargin: Constants.DefaultMargin;
0326 left: modeButtons.right;
0327 }
0328 text: model.compositeDetails;
0329 font: Settings.theme.font("small");
0330 horizontalAlignment: Text.AlignRight;
0331 }
0332 Label {
0333 anchors {
0334 top: modeLabel.bottom;
0335 right: parent.right;
0336 rightMargin: Constants.DefaultMargin;
0337 left: modeButtons.right;
0338 }
0339 text: model.percentOpacity + "%";
0340 font: Settings.theme.font("small");
0341 horizontalAlignment: Text.AlignRight;
0342 }
0343 }
0344 Row {
0345 id: layerControls;
0346
0347 anchors {
0348 left: layerBgRect.left;
0349 right: layerBgRect.right;
0350 bottom: layerBgRect.bottom;
0351 }
0352
0353 height: childrenRect.height;
0354 opacity: model.activeLayer ? 1.0 : 0.0;
0355 Behavior on opacity { NumberAnimation { duration: 100; } }
0356 spacing: 0;
0357
0358 Button {
0359 id: moveUpButton;
0360 width: parent.width / 6;
0361 height: width;
0362 enabled: model.canMoveUp;
0363 opacity: enabled ? 1.0 : 0.2;
0364 image: Settings.theme.icon("layer_move_up");
0365 onClicked: layerModel.moveUp();
0366 tooltip: "Move Layer Up";
0367 }
0368 Button {
0369 id: moveDownButton;
0370 width: parent.width / 6;
0371 height: width;
0372 enabled: model.canMoveDown;
0373 opacity: enabled ? 1.0 : 0.2;
0374 image: Settings.theme.icon("layer_move_down");
0375 onClicked: layerModel.moveDown();
0376 tooltip: "Move Layer Down";
0377 }
0378 Button {
0379 id: moveLeftButton;
0380 width: parent.width / 6;
0381 height: width;
0382 enabled: model.canMoveLeft;
0383 opacity: enabled ? 1.0 : 0.2;
0384 image: Settings.theme.icon("layer_move_left");
0385 onClicked: layerModel.moveLeft();
0386 tooltip: "Move Layer out of Group";
0387 }
0388 Button {
0389 id: moveRightButton;
0390 width: parent.width / 6;
0391 height: width;
0392 enabled: model.canMoveRight;
0393 opacity: enabled ? 1.0 : 0.2;
0394 image: Settings.theme.icon("layer_move_right");
0395 onClicked: layerModel.moveRight();
0396 tooltip: "Move Layer into Group";
0397 }
0398 Button {
0399 id: duplicateLayerButton;
0400 width: parent.width / 6;
0401 height: width;
0402 image: Settings.theme.icon("layer_duplicate");
0403 onClicked: layerModel.clone();
0404 tooltip: "Duplicate Layer";
0405 }
0406 Button {
0407 id: clearLayerButton;
0408 width: parent.width / 6;
0409 height: width;
0410 image: Settings.theme.icon("layer_clear");
0411 onClicked: layerModel.clear();
0412 tooltip: "Clear Layer";
0413 }
0414 }
0415
0416 Rectangle {
0417 id: bottomSpacer;
0418 anchors.top: layerBgRect.bottom;
0419 height: Constants.DefaultMargin;
0420 color: "transparent";
0421 }
0422 }
0423 ScrollDecorator {
0424 flickableItem: parent;
0425 }
0426 }
0427 }
0428 }
0429
0430 Component { id: editLayerPage; EditLayerPage { layersModel: layerModel; isShown: backFromEditButton.visible } }
0431 }