qml/panels/PanelBar.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.draganddrop 1.0 as DnD
0009 import org.krita.sketch 1.0
0010
0011 Item {
0012     id: base;
0013
0014     property real panelHeight;
0015
0016     function collapse() {
0017         if (d.peeking) {
0018             d.peeking.state = "collapsed";
0019             d.peeking.z = 0;
0020             d.peeking = null;
0021         }
0022     }
0023
0024     PresetsPanel {
0025         id: presetsPanel;
0026         objectName: "presets";
0027         width: (parent === leftArea || parent === rightArea) ? parent.width : Constants.GridWidth * 2;
0028         height: base.panelHeight;
0029         page: base.parent;
0030         onPeek: beginPeek( presetsPanel );
0031         onCollapsed: endPeek( presetsPanel );
0032         onFull: endPeek( presetsPanel );
0033         onDragStarted: beginDrag( presetsPanel );
0034         onDrop: endDrag( presetsPanel, action );
0035     }
0036     LayersPanel {
0037         id: layersPanel;
0038         objectName: "layers";
0039         width: (parent === leftArea || parent === rightArea) ? parent.width : Constants.GridWidth * 2;
0040         height: base.panelHeight;
0041         page: base.parent;
0042         onPeek: beginPeek( layersPanel );
0043         onCollapsed: endPeek( layersPanel );
0044         onFull: endPeek( layersPanel );
0045         onDragStarted: beginDrag( layersPanel );
0046         onDrop: endDrag( layersPanel, action );
0047     }
0048     FilterPanel {
0049         id: filterPanel;
0050         objectName: "filter";
0051         width: (parent === leftArea || parent === rightArea) ? parent.width : Constants.GridWidth * 2;
0052         height: base.panelHeight;
0053         page: base.parent;
0054         onPeek: beginPeek( filterPanel );
0055         onCollapsed: endPeek( filterPanel );
0056         onFull: endPeek( filterPanel );
0057         onDragStarted: beginDrag( filterPanel );
0058         onDrop: endDrag( filterPanel, action );
0059     }
0060     SelectPanel {
0061         id: selectPanel;
0062         objectName: "select";
0063         width: (parent === leftArea || parent === rightArea) ? parent.width : Constants.GridWidth * 2;
0064         height: base.panelHeight;
0065         page: base.parent;
0066         onPeek: beginPeek( selectPanel );
0067         onCollapsed: endPeek( selectPanel );
0068         onFull: endPeek( selectPanel );
0069         onDragStarted: beginDrag( selectPanel );
0070         onDrop: endDrag( selectPanel, action );
0071     }
0072     ToolPanel {
0073         id: toolPanel;
0074         objectName: "tool";
0075         width: (parent === leftArea || parent === rightArea) ? parent.width : Constants.GridWidth * 2;
0076         height: base.panelHeight;
0077         page: base.parent;
0078         onPeek: beginPeek( toolPanel );
0079         onCollapsed: endPeek( toolPanel );
0080         onFull: endPeek( toolPanel );
0081         onDragStarted: beginDrag( toolPanel );
0082         onDrop: endDrag( toolPanel, action );
0083     }
0084     ColorPanel {
0085         id: colorPanel;
0086         objectName: "color";
0087         width: (parent === leftArea || parent === rightArea) ? parent.width : Constants.GridWidth * 2;
0088         height: base.panelHeight;
0089         page: base.parent;
0090         onPeek: beginPeek( colorPanel );
0091         onCollapsed: endPeek( colorPanel );
0092         onFull: endPeek( colorPanel );
0093         onDragStarted: beginDrag( colorPanel );
0094         onDrop: endDrag( colorPanel, action );
0095     }
0096
0097     Component.onCompleted: {
0098         panelConfiguration.restore();
0099     }
0100
0101     PanelDropArea {
0102         id: leftArea;
0103
0104         objectName: "leftFull";
0105
0106         anchors.top: parent.top;
0107 //         anchors.bottom: parent.bottom;
0108         anchors.left: parent.left;
0109         height: base.panelHeight;
0110
0111         onHeightChanged: if (children.length > 0) children[0].height = height;
0112         width: Constants.GridWidth * 2;
0113         state: "full";
0114     }
0115
0116     PanelDropArea {
0117         id: rightArea;
0118
0119         objectName: "rightFull";
0120
0121         anchors.top: parent.top;
0122 //         anchors.bottom: parent.bottom;
0123         anchors.right: parent.right;
0124         height: base.panelHeight;
0125
0126         onHeightChanged: if (children.length > 0) children[0].height = height;
0127         width: Constants.GridWidth * 2;
0128         state: "full";
0129     }
0130
0131 //     Row {
0132 //         id: panelTopRow;
0133 //         spacing: Constants.IsLandscape ? -Constants.GridWidth * 2 : 0;
0134
0135         PanelDropArea {
0136             id: centerTopArea1;
0137             objectName: "centerTop1"
0138
0139             x: Constants.GridWidth * 2 + 4;
0140             width: Constants.GridWidth;
0141             height: Constants.GridHeight / 2;
0142         }
0143         Rectangle {
0144             opacity: dropOverlay.opacity; Behavior on opacity { NumberAnimation { } }
0145             x: centerTopArea1.x; y: centerTopArea1.y
0146             width: Constants.GridWidth; height: Constants.GridHeight / 2;
0147             color: Settings.theme.color("panels/dropArea/fill");
0148             border.color: Settings.theme.color("panels/dropArea/border"); border.width: 2;
0149         }
0150
0151         PanelDropArea {
0152             id: centerTopArea2;
0153             objectName: "centerTop2"
0154
0155             anchors.left: centerTopArea1.right;
0156             y: Constants.IsLandscape ? Constants.GridHeight / 2 : 0;
0157             anchors.leftMargin: Constants.IsLandscape ? -Constants.GridWidth / 2 : 0;
0158             width: Constants.GridWidth;
0159             height: Constants.GridHeight / 2;
0160         }
0161         Rectangle {
0162             opacity: dropOverlay.opacity; Behavior on opacity { NumberAnimation { } }
0163             x: centerTopArea2.x; y: centerTopArea2.y
0164             width: Constants.GridWidth; height: Constants.GridHeight / 2;
0165             color: Settings.theme.color("panels/dropArea/fill");
0166             border.color: Settings.theme.color("panels/dropArea/border"); border.width: 2;
0167         }
0168
0169         PanelDropArea {
0170             id: centerTopArea3;
0171             objectName: "centerTop3"
0172
0173             anchors.left: centerTopArea2.right;
0174             anchors.leftMargin: Constants.IsLandscape ? -Constants.GridWidth / 2 : 0;
0175             width: Constants.GridWidth;
0176             height: Constants.GridHeight / 2;
0177         }
0178         Rectangle {
0179             opacity: dropOverlay.opacity; Behavior on opacity { NumberAnimation { } }
0180             x: centerTopArea3.x; y: centerTopArea3.y
0181             width: Constants.GridWidth; height: Constants.GridHeight / 2;
0182             color: Settings.theme.color("panels/dropArea/fill");
0183             border.color: Settings.theme.color("panels/dropArea/border"); border.width: 2;
0184         }
0185
0186         PanelDropArea {
0187             id: centerTopArea4;
0188             objectName: "centerTop4"
0189
0190             anchors.left: centerTopArea3.right;
0191             y: Constants.IsLandscape ? Constants.GridHeight / 2 : 0;
0192             anchors.leftMargin: Constants.IsLandscape ? -Constants.GridWidth / 2 : 0;
0193             width: Constants.GridWidth;
0194             height: Constants.GridHeight / 2;
0195         }
0196         Rectangle {
0197             opacity: dropOverlay.opacity; Behavior on opacity { NumberAnimation { } }
0198             x: centerTopArea4.x; y: centerTopArea4.y
0199             width: Constants.GridWidth; height: Constants.GridHeight / 2;
0200             color: Settings.theme.color("panels/dropArea/fill");
0201             border.color: Settings.theme.color("panels/dropArea/border"); border.width: 2;
0202         }
0203
0204         PanelDropArea {
0205             id: centerTopArea5;
0206             objectName: "centerTop5"
0207
0208             anchors.left: centerTopArea4.right;
0209             anchors.leftMargin: Constants.IsLandscape ? -Constants.GridWidth / 2 : 0;
0210             width: Constants.GridWidth;
0211             height: Constants.GridHeight / 2;
0212         }
0213         Rectangle {
0214             opacity: dropOverlay.opacity; Behavior on opacity { NumberAnimation { } }
0215             x: centerTopArea5.x; y: centerTopArea5.y
0216             width: Constants.GridWidth; height: Constants.GridHeight / 2;
0217             color: Settings.theme.color("panels/dropArea/fill");
0218             border.color: Settings.theme.color("panels/dropArea/border"); border.width: 2;
0219         }
0220
0221         PanelDropArea {
0222             id: centerTopArea6;
0223             objectName: "centerTop6"
0224
0225             anchors.left: centerTopArea5.right;
0226             y: Constants.IsLandscape ? Constants.GridHeight / 2 : 0;
0227             anchors.leftMargin: Constants.IsLandscape ? -Constants.GridWidth / 2 : 0;
0228             width: Constants.GridWidth;
0229             height: Constants.GridHeight / 2;
0230         }
0231         Rectangle {
0232             opacity: dropOverlay.opacity; Behavior on opacity { NumberAnimation { } }
0233             x: centerTopArea6.x; y: centerTopArea6.y
0234             width: Constants.GridWidth; height: Constants.GridHeight / 2;
0235             color: Settings.theme.color("panels/dropArea/fill");
0236             border.color: Settings.theme.color("panels/dropArea/border"); border.width: 2;
0237         }
0238
0239         PanelDropArea {
0240             id: centerTopArea7;
0241             objectName: "centerTop7"
0242
0243             anchors.left: centerTopArea6.right;
0244             anchors.leftMargin: Constants.IsLandscape ? -Constants.GridWidth / 2: 0;
0245             width: Constants.GridWidth;
0246             height: Constants.GridHeight / 2;
0247         }
0248         Rectangle {
0249             opacity: dropOverlay.opacity; Behavior on opacity { NumberAnimation { } }
0250             x: centerTopArea7.x; y: centerTopArea7.y
0251             width: Constants.GridWidth; height: Constants.GridHeight / 2;
0252             color: Settings.theme.color("panels/dropArea/fill");
0253             border.color: Settings.theme.color("panels/dropArea/border"); border.width: 2;
0254         }
0255
0256         PanelDropArea {
0257             id: centerTopArea8;
0258             objectName: "centerTop8"
0259
0260             anchors.left: centerTopArea7.right;
0261             y: Constants.IsLandscape ? Constants.GridHeight / 2 : 0;
0262             anchors.leftMargin: Constants.IsLandscape ? -Constants.GridWidth / 2 : 0;
0263             width: Constants.GridWidth;
0264             height: Constants.GridHeight / 2;
0265         }
0266         Rectangle {
0267             opacity: dropOverlay.opacity; Behavior on opacity { NumberAnimation { } }
0268             x: centerTopArea8.x; y: centerTopArea8.y
0269             width: Constants.GridWidth; height: Constants.GridHeight / 2;
0270             color: Settings.theme.color("panels/dropArea/fill");
0271             border.color: Settings.theme.color("panels/dropArea/border"); border.width: 2;
0272         }
0273     //}
0274
0275     Item {
0276         id: dropOverlay;
0277         anchors.fill: parent;
0278
0279         opacity: 0;
0280         Behavior on opacity { NumberAnimation { } }
0281
0282         Rectangle {
0283             id: leftOverlay;
0284             x: leftArea.x;
0285             width: leftArea.width;
0286             height: leftArea.height
0287
0288             color: Settings.theme.color("panels/dropArea/fill");
0289
0290             border.color: Settings.theme.color("panels/dropArea/border");
0291             border.width: 2;
0292         }
0293
0294 //         Row {
0295 //             x: panelTopRow.x;
0296 //             y: panelTopRow.y;
0297 //             width: panelTopRow.width;
0298 //             Repeater {
0299 //                 model: 8;
0300 //
0301 //                 delegate:
0302 //             }
0303 //         }
0304
0305         Rectangle {
0306             id: rightOverlay;
0307             x: rightArea.x
0308             y: rightArea.y
0309             width: rightArea.width;
0310             height: rightArea.height;
0311
0312             color: Settings.theme.color("panels/dropArea/fill");
0313
0314             border.color: Settings.theme.color("panels/dropArea/border");
0315             border.width: 2;
0316         }
0317     }
0318
0319     QtObject {
0320         id: d;
0321
0322         property variant panels: [ presetsPanel, layersPanel, filterPanel, selectPanel, toolPanel, colorPanel ];
0323         property variant panelAreas: [
0324             centerTopArea1,
0325             centerTopArea2,
0326             centerTopArea3,
0327             centerTopArea4,
0328             centerTopArea5,
0329             centerTopArea6,
0330             centerTopArea7,
0331             centerTopArea8,
0332             leftArea,
0333             rightArea ];
0334         property Item peeking: null;
0335         property Item dragParent: null;
0336     }
0337
0338     PanelConfiguration {
0339         id: panelConfiguration;
0340
0341         panels: d.panels;
0342         panelAreas: d.panelAreas;
0343     }
0344
0345     function beginPeek( item ) {
0346         for( var i in d.panels ) {
0347             var obj = d.panels[i];
0348             if ( obj.state == "peek" && obj.objectName != item.objectName ) {
0349                 obj.state = "collapsed";
0350             }
0351         }
0352
0353         d.peeking = item;
0354         item.parent.z = 11;
0355     }
0356
0357     function endPeek( item ) {
0358         if (d.peeking == item)
0359         {
0360             d.peeking = null;
0361         }
0362         item.parent.z = 0;
0363     }
0364
0365     function beginDrag( item ) {
0366         dropOverlay.opacity = 1;
0367         item.parent.z = 0;
0368         d.dragParent = item.parent;
0369         item.parent = null;
0370         item.opacity = 0;
0371     }
0372
0373     function endDrag( item, action ) {
0374         dropOverlay.opacity = 0;
0375         item.opacity = 1;
0376         if (action == Qt.IgnoreAction) {
0377             item.parent = d.dragParent;
0378         }
0379     }
0380
0381     states: [
0382         State {
0383             name: "portrait";
0384             when: base.panelHeight > base.width;
0385             PropertyChanges { target: centerTopArea1; x: Constants.GridWidth * 4 + 4; }
0386             PropertyChanges { target: leftArea; width: Constants.GridWidth * 4; }
0387             PropertyChanges { target: rightArea; width: Constants.GridWidth * 4; }
0388             PropertyChanges { target: leftArea; height: base.panelHeight / 2; }
0389             AnchorChanges { target: rightArea; anchors.right: undefined; anchors.left: parent.left; anchors.top: leftArea.bottom; }
0390             PropertyChanges { target: rightArea; height: base.panelHeight / 2; }
0391         }
0392     ]
0393 }