qml/panels/Panel.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.draganddrop 1.0 as DnD
0010 import org.krita.sketch.components 1.0
0011
0012 Item {
0013     id: base;
0014
0015     property bool roundTop: false;
0016
0017     property string colorSet: "base";
0018     property string name;
0019
0020     property alias actions: actionsLayout.children;
0021     property alias peekContents: peek.children;
0022     property alias fullContents: full.children;
0023
0024     property real editWidth: Constants.GridWidth * 4;
0025
0026     property Item page;
0027     property Item lastArea;
0028
0029     signal collapsed();
0030     signal peek();
0031     signal full();
0032     signal dragStarted();
0033     signal drop(int action);
0034
0035     state: "collapsed";
0036
0037     Item {
0038         id: fill;
0039
0040         width: parent.width;
0041         height: parent.height;
0042         z: 2;
0043
0044         Rectangle {
0045             id: rectangle3
0046             anchors.fill: parent;
0047             color: "transparent";// base.panelColor;
0048             clip: true;
0049
0050             MouseArea {
0051                 // This mouse area blocks any mouse click from passing through the panel. We need this to ensure we don't accidentally pass
0052                 // any clicks to the collapsing area, or to the canvas, by accident.
0053                 anchors.fill: parent;
0054                 // This will always work, and never do anything - but we need some kind of processed thing in here to activate the mouse area
0055                 onClicked: parent.focus = true;
0056             }
0057             SimpleTouchArea {
0058                 // As above, but for touch events
0059                 anchors.fill: parent;
0060                 onTouched: parent.focus = true;
0061             }
0062
0063             Rectangle {
0064                 id: background;
0065                 anchors {
0066                     top: parent.top;
0067                     bottom: parent.bottom;
0068                     left: parent.left;
0069                     right: parent.right;
0070                     topMargin: Constants.DefaultMargin;
0071                     bottomMargin: Constants.DefaultMargin;
0072                 }
0073                 color: Settings.theme.color("panels/" + base.colorSet + "/base");
0074 //                 Rectangle {
0075 //                     id: rectangle4
0076 //                     anchors.fill: parent;
0077 //                     color: "#ffffff"
0078 //                     opacity: 0.630
0079 //                     color: Settings.theme.color(base.colorSet + "/subheader")
0080 //                 }
0081             }
0082
0083             Item {
0084                 id: peek;
0085                 clip: true;
0086                 anchors.top: parent.top;
0087                 anchors.bottom: header.top;
0088                 anchors.left: parent.left;
0089                 anchors.right: parent.right;
0090             }
0091
0092             Item {
0093                 id: full;
0094                 clip: true;
0095                 anchors.top: header.bottom;
0096                 anchors.bottom: footer.top;
0097                 anchors.left: parent.left;
0098                 anchors.right: parent.right;
0099             }
0100
0101             Item {
0102                 id: header;
0103
0104                 anchors.left: parent.left
0105                 anchors.right: parent.right;
0106                 height: Constants.GridHeight;
0107
0108                 Rectangle {
0109                     id: rectangle1
0110                     anchors.fill: parent;
0111                     color: Settings.theme.color("panels/" + base.colorSet + "/header");
0112                     radius: Constants.DefaultMargin;
0113                 }
0114
0115                 Rectangle {
0116                     id: headerCornerFill;
0117                     anchors.bottom: parent.bottom;
0118                     anchors.left: parent.left;
0119                     anchors.right: parent.right;
0120                     height: Constants.DefaultMargin;
0121                     color: Settings.theme.color("panels/" + base.colorSet + "/header");
0122                 }
0123
0124                 DnD.DragArea {
0125                     anchors.fill: parent;
0126                     delegate: base.dragDelegate;
0127                     source: base;
0128                     enabled: base.state === "full";
0129
0130                     onDragStarted: {
0131                         handle.opacity = 1;
0132                         handle.dragStarted();
0133                     }
0134                     onDrop: {
0135                         if (action == Qt.IgnoreAction) {
0136                             handle.opacity = 0;
0137                         }
0138                         handle.drop(action);
0139                     }
0140
0141                     MouseArea {
0142
0143                     }
0144                 }
0145
0146                 Flow {
0147                     id: actionsLayout;
0148                     anchors {
0149                         verticalCenter: parent.verticalCenter;
0150                         left: parent.left;
0151                         right: parent.right;
0152                     }
0153                     height: Constants.ToolbarButtonSize;
0154                 }
0155             }
0156
0157             Shadow { anchors { top: header.bottom; left: header.left; right: header.right; } }
0158
0159             Item {
0160                 id: footer;
0161
0162                 anchors.bottom: parent.bottom;
0163                 width: parent.width;
0164                 height: Constants.GridHeight;
0165                 clip: true;
0166
0167                 Rectangle {
0168                     id: rectanglefoot
0169                     color: Settings.theme.color("panels/" + base.colorSet + "/header");
0170                     width: parent.width;
0171                     height: parent.height + Constants.DefaultMargin;
0172                     y: -Constants.DefaultMargin;
0173                     radius: Constants.DefaultMargin;
0174                 }
0175
0176                 Rectangle {
0177                     anchors.fill: parent;
0178                     color: "transparent";//base.panelColor;
0179
0180                     Label {
0181                         anchors.left: parent.left;
0182                         anchors.leftMargin: 16;
0183                         anchors.baseline: parent.bottom;
0184                         anchors.baselineOffset: -16;
0185
0186                         text: base.name;
0187                         color: Settings.theme.color("panels/" + base.colorSet + "/headerText");
0188                         font: Settings.theme.font("panelHeader");
0189                     }
0190                 }
0191
0192                 DnD.DragArea {
0193                     anchors.fill: parent;
0194                     delegate: base.dragDelegate;
0195                     source: base;
0196
0197                     onDragStarted: {
0198                         handle.opacity = 1;
0199                         handle.dragStarted();
0200                     }
0201                     onDrop: {
0202                         if (action == Qt.IgnoreAction) {
0203                             handle.opacity = 0;
0204                         }
0205                         handle.drop(action);
0206                     }
0207
0208                     MouseArea {
0209
0210                     }
0211                 }
0212             }
0213
0214             Shadow { anchors { bottom: footer.top; left: footer.left; right: footer.right; } rotation: 180; }
0215         }
0216     }
0217
0218     Item {
0219         id: handle;
0220
0221         Behavior on y { id: yHandleAnim; enabled: false; NumberAnimation { onRunningChanged: handle.fixParent(); } }
0222         Behavior on x { id: xHandleAnim; enabled: false; NumberAnimation { onRunningChanged: handle.fixParent(); } }
0223
0224         width: Constants.GridWidth;
0225         height: Constants.GridHeight / 2;
0226         opacity: 0;
0227
0228         property bool dragging: false;
0229
0230         function fixParent() {
0231             if (!handleDragArea.dragging && !xHandleAnim.animation.running && !yHandleAnim.animation.running) {
0232                 xHandleAnim.enabled = false;
0233                 yHandleAnim.enabled = false;
0234                 handle.parent = base;
0235                 handle.x = 0;
0236                 handle.y = 0;
0237             }
0238         }
0239
0240         function dragStarted() {
0241             base.dragStarted();
0242             handle.parent = base.page;
0243             Krita.MouseTracker.addItem(handle, Qt.point(-handle.width / 2, -handle.height / 2));
0244             handle.dragging = true;
0245         }
0246
0247         function drop(action) {
0248             base.drop(action);
0249
0250             Krita.MouseTracker.removeItem(handle);
0251
0252             xHandleAnim.enabled = true;
0253             yHandleAnim.enabled = true;
0254             dragging = false;
0255
0256             var handlePos = base.mapToItem(base.page, 0, 0);
0257             handle.x = handlePos.x;
0258             handle.y = handlePos.y;
0259         }
0260
0261         Rectangle {
0262             visible: (base.state === "collapsed") ? !base.roundTop : true;
0263             anchors {
0264                 top: parent.top;
0265                 left: handleBackground.left;
0266                 right: handleBackground.right;
0267             }
0268             color: Settings.theme.color("panels/" + base.colorSet + "/header");
0269             radius: 0
0270
0271             height: (base.state === "peek") ? Constants.GridHeight / 2 : Constants.GridHeight / 4 + 1
0272         }
0273
0274         Rectangle {
0275             id: handleBackground
0276
0277             width: Constants.GridWidth;
0278             height: Constants.GridHeight / 2;
0279
0280             color: Settings.theme.color("panels/" + base.colorSet + "/header");
0281             radius: 8
0282
0283             Label {
0284                 id: handleLabel;
0285
0286                 anchors.centerIn: parent;
0287
0288                 text: base.name;
0289                 color: Settings.theme.color("panels/" + base.colorSet + "/headerText");
0290                 font: Settings.theme.font("panelHandle");
0291             }
0292         }
0293
0294         DnD.DragArea {
0295             id: handleDragArea;
0296
0297             anchors.fill: parent;
0298
0299             source: base;
0300
0301             onDragStarted: {
0302                 base.lastArea = base.parent;
0303                 handle.dragStarted();
0304             }
0305             onDrop: {
0306                 handle.drop(action);
0307             }
0308
0309             MouseArea {
0310                 anchors.fill: parent;
0311                 onClicked: base.state = base.state == "peek" ? "collapsed" : "peek";
0312             }
0313             SimpleTouchArea {
0314                 anchors.fill: parent;
0315                 onTouched: base.state = base.state == "peek" ? "collapsed" : "peek";
0316             }
0317         }
0318     }
0319
0320     states: [
0321         State {
0322             name: "collapsed";
0323
0324             PropertyChanges { target: base; width: Constants.GridWidth; }
0325             PropertyChanges { target: fill; opacity: 0; height: 0; }
0326             PropertyChanges { target: handle; opacity: 1; }
0327             PropertyChanges { target: background; anchors.topMargin: 0; }
0328         },
0329         State {
0330             name: "peek";
0331
0332             PropertyChanges { target: base; width: Constants.IsLandscape ? Constants.GridWidth * 4 : Constants.GridWidth * 2; }
0333             PropertyChanges { target: fill; height: Constants.GridHeight * 3.75; y: handle.height; }
0334             PropertyChanges { target: handle; opacity: 1; }
0335             PropertyChanges { target: peek; opacity: 1; }
0336             PropertyChanges { target: full; opacity: 0; }
0337             AnchorChanges { target: header; anchors.bottom: rectangle3.bottom }
0338             PropertyChanges { target: footer; opacity: 0; }
0339             PropertyChanges { target: background; anchors.topMargin: 0; }
0340             PropertyChanges { target: headerCornerFill; height: Constants.DefaultMargin; }
0341             AnchorChanges { target: headerCornerFill; anchors.bottom: undefined; anchors.top: header.top; }
0342         },
0343         State {
0344             name: "full";
0345             PropertyChanges { target: peek; opacity: 0; }
0346             PropertyChanges { target: full; opacity: 1; }
0347             PropertyChanges { target: handle; height: 0; }
0348         },
0349         State {
0350             name: "edit";
0351             PropertyChanges { target: peek; opacity: 0; }
0352             PropertyChanges { target: full; opacity: 1; }
0353             PropertyChanges { target: base; width: base.editWidth; }
0354         }
0355     ]
0356
0357     transitions: [
0358         Transition {
0359             from: "collapsed";
0360             to: "peek";
0361
0362             SequentialAnimation {
0363                 ScriptAction { script: base.peek(); }
0364                 AnchorAnimation { targets: [ header ] ; duration: 0; }
0365                 PropertyAction { targets: [ header, footer ]; properties: "height,width,opacity" }
0366                 PropertyAction { targets: [ base ]; properties: "width"; }
0367                 PropertyAction { targets: [ fill ]; properties: "y"; }
0368                 NumberAnimation { targets: [ base, fill, handle, peek, full ]; properties: "height,opacity"; duration: Constants.AnimationDuration; }
0369             }
0370         },
0371         Transition {
0372             from: "peek";
0373             to: "collapsed";
0374
0375             SequentialAnimation {
0376                 NumberAnimation { targets: [ base, fill, handle, peek, full ]; properties: "height,opacity"; duration: Constants.AnimationDuration; }
0377                 AnchorAnimation { targets: [ header ] ; duration: 0; }
0378                 PropertyAction { targets: [ fill ]; properties: "y"; }
0379                 PropertyAction { targets: [ base ]; properties: "width"; }
0380                 PropertyAction { targets: [ header, footer ]; properties: "height,width,opacity" }
0381                 ScriptAction { script: base.collapsed(); }
0382             }
0383         },
0384         Transition {
0385             from: "peek";
0386             to: "full";
0387             reversible: true;
0388
0389             NumberAnimation { properties: "height,width,opacity"; duration: 0; }
0390             ScriptAction { script: base.full(); }
0391         },
0392         Transition {
0393             from: "collapsed";
0394             to: "full";
0395
0396             NumberAnimation { properties: "opacity"; duration: 100; }
0397             ScriptAction { script: base.full(); }
0398         },
0399         Transition {
0400             from: "full";
0401             to: "collapsed";
0402
0403             NumberAnimation { properties: "opacity"; duration: 100; }
0404             ScriptAction { script: base.collapsed(); }
0405         },
0406         Transition {
0407             from: "full"
0408             to: "edit"
0409             reversible: true;
0410
0411             NumberAnimation { properties: "width"; duration: Constants.AnimationDuration; }
0412         }
0413     ]
0414 }