qml/panels/MenuPanel.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 Item {
0012     id: base;
0013
0014     property bool collapsed: true;
0015
0016     property alias newButtonChecked: newButton.checked;
0017     property alias openButtonChecked: openButton.checked;
0018
0019     signal buttonClicked( string button );
0020
0021     height: Constants.GridHeight;
0022
0023     Rectangle {
0024         anchors.bottom: parent.top;
0025         anchors.bottomMargin: -8;
0026         anchors.horizontalCenter: parent.horizontalCenter;
0027
0028         width: Constants.GridWidth * 1.5;
0029         height: Constants.GridHeight / 2 + 8;
0030
0031         color: Settings.theme.color("panels/menu/base");
0032         radius: 8;
0033
0034         Label {
0035             text: "Menu";
0036
0037             anchors.centerIn: parent;
0038             anchors.verticalCenterOffset: -4;
0039
0040             font: Settings.theme.font("panelHandle");
0041             color: Settings.theme.color("panels/menu/text");
0042         }
0043
0044         MouseArea {
0045             anchors.fill: parent;
0046             onClicked: base.collapsed = !base.collapsed;
0047         }
0048
0049         SimpleTouchArea {
0050             anchors.fill: parent;
0051             onTouched: base.collapsed = !base.collapsed;
0052         }
0053     }
0054
0055     Rectangle {
0056         id: background;
0057         color: Settings.theme.color("panels/menu/base");
0058         anchors.fill: parent;
0059
0060         MouseArea {
0061             // This mouse area blocks any mouse click from passing through the panel. We need this to ensure we don't accidentally pass
0062             // any clicks to the collapsing area, or to the canvas, by accident.
0063             anchors.fill: parent;
0064             // This will always work, and never do anything - but we need some kind of processed thing in here to activate the mouse area
0065             onClicked: parent.focus = true;
0066         }
0067         SimpleTouchArea {
0068             // As above, but for touch events
0069             anchors.fill: parent;
0070             onTouched: parent.focus = true;
0071         }
0072
0073         Row {
0074             Button {
0075                 id: newButton;
0076                 image: Settings.theme.icon("filenew")
0077                 highlightColor: Settings.theme.color("panels/menu/buttonHighlight");
0078                 tooltip: "New Image"
0079                 onClicked: base.buttonClicked( "new" );
0080             }
0081             Button {
0082                 id: openButton;
0083                 image: Settings.theme.icon("fileopen")
0084                 highlightColor: Settings.theme.color("panels/menu/buttonHighlight");
0085                 tooltip: "Open Image"
0086                 onClicked: base.buttonClicked( "open" );
0087             }
0088             Button {
0089                 id: saveButton;
0090                 image: Settings.theme.icon("filesave")
0091                 highlightColor: Settings.theme.color("panels/menu/buttonHighlight");
0092                 tooltip: "Save Image"
0093                 onClicked: base.buttonClicked( "save" );
0094             }
0095             Button {
0096                 id: saveAsButton;
0097                 image: Settings.theme.icon("filesaveas")
0098                 highlightColor: Settings.theme.color("panels/menu/buttonHighlight");
0099                 tooltip: "Save Image As..."
0100                 onClicked: base.buttonClicked( "saveAs" );
0101             }
0102         }
0103
0104         Row {
0105             anchors.right: parent.right;
0106
0107             Button {
0108                 id: undoButton;
0109                 image: Settings.theme.icon("undo")
0110                 highlightColor: Settings.theme.color("panels/menu/buttonHighlight");
0111                 enabled: sketchView.canUndo;
0112                 tooltip: "Undo"
0113                 onClicked: base.buttonClicked( "undo" );
0114             }
0115             Button {
0116                 id: redoButton;
0117                 image: Settings.theme.icon("redo")
0118                 highlightColor: Settings.theme.color("panels/menu/buttonHighlight");
0119                 enabled: sketchView.canRedo;
0120                 tooltip: "Redo"
0121                 onClicked: base.buttonClicked( "redo" );
0122             }
0123             Button {
0124                 id: zoomOutButton;
0125                 image: Settings.theme.icon("delete")
0126                 highlightColor: Settings.theme.color("panels/menu/buttonHighlight");
0127                 tooltip: "Zoom Out"
0128                 onClicked: base.buttonClicked( "zoomOut" );
0129             }
0130             Button {
0131                 id: zoomInButton;
0132                 image: Settings.theme.icon("add")
0133                 highlightColor: Settings.theme.color("panels/menu/buttonHighlight");
0134                 tooltip: "Zoom In"
0135                 onClicked: base.buttonClicked( "zoomIn" );
0136             }
0137             Item {
0138                 width: Constants.GridWidth;
0139                 height: Constants.GridHeight;
0140             }
0141             Button {
0142                 id: switchButton;
0143                 width: visible ? Constants.GridWidth : 0;
0144                 visible: (typeof switchToDesktopAction !== "undefined");
0145                 enabled: (typeof switchToDesktopAction === "undefined") ? false : switchToDesktopAction.enabled;
0146                 image: Settings.theme.icon("switch")
0147                 highlightColor: Settings.theme.color("panels/menu/buttonHighlight");
0148                 tooltip: "Switch to Desktop Mode"
0149                 onClicked: {
0150                     base.buttonClicked( "switchToDesktop" );
0151                     base.collapsed = !base.collapsed;
0152                 }
0153             }
0154             Button {
0155                 id: minimizeButton;
0156                 image: Settings.theme.icon("minimize")
0157                 highlightColor: Settings.theme.color("panels/menu/buttonHighlight");
0158                 tooltip: "Minimize"
0159                 onClicked: {
0160                     base.buttonClicked( "minimize" );
0161                     base.collapsed = !base.collapsed;
0162                 }
0163             }
0164             Button {
0165                 id: closeButton;
0166                 image: Settings.theme.icon("close")
0167                 highlightColor: Settings.theme.color("panels/menu/buttonHighlight");
0168                 tooltip: "Close"
0169                 onClicked: base.buttonClicked( "close" );
0170             }
0171             /*Item {
0172                 width: Constants.GridWidth;
0173                 height: Constants.GridHeight;
0174             }
0175             Button {
0176                 id: helpButton;
0177                 width: Constants.GridWidth;
0178                 height: Constants.GridHeight;
0179                 color: "#000000"
0180                 shadow: false
0181                 image: Settings.theme.icon("help")
0182                 highlightColor: Constants.Theme.HighlightColor;
0183                 onClicked: base.buttonClicked( "help" );
0184             }
0185             Button {
0186                 id: settingsButton;
0187                 width: Constants.GridWidth;
0188                 height: Constants.GridHeight;
0189                 color: "#000000"
0190                 shadow: false
0191                 image: Settings.theme.icon("settings")
0192                 highlightColor: Constants.Theme.HighlightColor;
0193                 onClicked: base.buttonClicked( "settings" );
0194             }*/
0195         }
0196     }
0197
0198     states: State {
0199         name: "collapsed";
0200         when: base.collapsed;
0201
0202         PropertyChanges { target: base; height: 0 }
0203     }
0204
0205     transitions: Transition {
0206         NumberAnimation { duration: Constants.AnimationDuration; properties: "height,opacity"; easing.type: Easing.InOutQuad }
0207     }
0208 }