contents/ui/ToolBoxContent.qml

0001 /*
0002     SPDX-FileCopyrightText: 2012, 2015 Sebastian Kügler <sebas@kde.org>
0003     SPDX-FileCopyrightText: 2015 Kai Uwe Broulik <kde@privat.broulik.de>
0004
0005     SPDX-License-Identifier: GPL-2.0-or-later
0006 */
0007
0008 import QtQuick 2.4
0009 import QtQuick.Layouts 1.4
0010 import QtQuick.Window 2.15
0011 import org.kde.ksvg 1.0 as KSvg
0012 import org.kde.plasma.components 3.0 as PlasmaComponents3
0013 import org.kde.plasma.plasmoid 2.0
0014 import org.kde.kirigami 2.20 as Kirigami
0015
0016 import org.kde.kcmutils as KCM
0017
0018 Item {
0019     id: toolBoxContent
0020
0021     property alias enterAnimation: enterAnimation
0022     property alias exitAnimation: exitAnimation
0023
0024     visible: false
0025     opacity: 0
0026     transform: Translate {
0027         id: translator
0028     }
0029     transformOrigin: Item.Center
0030
0031     Behavior on rotation {
0032         NumberAnimation {
0033             duration: Kirigami.Units.shortDuration;
0034             easing.type: Easing.InOutExpo;
0035         }
0036         enabled: visible
0037     }
0038     Behavior on x {
0039         NumberAnimation {
0040             duration: Kirigami.Units.shortDuration;
0041             easing.type: Easing.InOutExpo;
0042         }
0043         enabled: visible
0044
0045     }
0046     Behavior on y {
0047         NumberAnimation {
0048             duration: Kirigami.Units.shortDuration;
0049             easing.type: Easing.InOutExpo;
0050         }
0051         enabled: visible
0052     }
0053
0054     width: buttonRow.width
0055     height: buttonRow.height + (touchMode ? backgroundFrame.margins.top + backgroundFrame.margins.bottom : 0)
0056
0057     state: "topcenter"
0058
0059     property QtObject container: main
0060     property int pressedX
0061     property int pressedY
0062     property int snapStartX
0063     property bool snapX: false;
0064     property bool dragging: false
0065     readonly property bool touchMode: Kirigami.Settings.hasTransientTouchInput || Kirigami.Settings.tabletMode
0066
0067     onXChanged: stateTimer.restart()
0068     onYChanged: stateTimer.restart()
0069
0070     Timer {
0071         id: stateTimer
0072         interval: 0
0073         onTriggered: updateState()
0074     }
0075     function updateState() {
0076         var container = main;
0077         //print("    w: " + container.width +"x"+container.height+" : "+x+"/"+y+" tbw: " + toolBoxContent.width);
0078
0079         var x = toolBoxContent.x - main.x;
0080         var y = toolBoxContent.y - main.y;
0081
0082         var cornerSnap = iconWidth
0083
0084         //top
0085         if (y + height / 2 < container.height / 2) {
0086             if (Math.abs(container.width/2 - (x + width/2)) < Kirigami.Units.gridUnit) {
0087                 toolBoxContent.state = "topcenter";
0088             } else {
0089                 toolBoxContent.state = "top";
0090             }
0091         //bottom
0092         } else {
0093             if (Math.abs(container.width/2 - (x + height/2)) < Kirigami.Units.gridUnit) {
0094                 toolBoxContent.state = "bottomcenter";
0095             } else {
0096                 toolBoxContent.state = "bottom";
0097             }
0098         }
0099
0100         if (!mouseArea.pressed) {
0101             main.placeToolBox(toolBoxContent.state);
0102         }
0103
0104         stateTimer.running = false;
0105     }
0106
0107     function destroyToolBox() {
0108         main.toolBoxContent = null;
0109         toolBoxContent.destroy();
0110     }
0111
0112     SequentialAnimation {
0113         id: enterAnimation
0114
0115         PropertyAction {
0116             target: toolBoxContent
0117             property: "visible"
0118             value: true
0119         }
0120         ParallelAnimation {
0121             NumberAnimation {
0122                 target: toolBoxContent
0123                 property: "opacity"
0124                 duration: Kirigami.Units.longDuration
0125                 easing.type: Easing.OutCubic
0126                 to: 1
0127             }
0128             NumberAnimation {
0129                 target: translator
0130                 property: "y"
0131                 duration: Kirigami.Units.longDuration
0132                 easing.type: Easing.OutCubic
0133                 from: state == "top" || state == "topcenter" ? -height
0134                     : state == "bottom" || state == "bottomcenter" ? height
0135                     : 0
0136                 to: 0
0137             }
0138         }
0139     }
0140
0141     SequentialAnimation {
0142         id: exitAnimation
0143
0144         ParallelAnimation {
0145             NumberAnimation {
0146                 target: toolBoxContent
0147                 property: "opacity"
0148                 duration: Kirigami.Units.longDuration
0149                 easing.type: Easing.InCubic
0150                 to: 0
0151             }
0152             NumberAnimation {
0153                 target: translator
0154                 property: "y"
0155                 duration: Kirigami.Units.longDuration
0156                 easing.type: Easing.InCubic
0157                 to: state == "top" || state == "topcenter" ? -toolBoxContent.height
0158                     : state == "bottom" || state == "bottomcenter" ? toolBoxContent.height
0159                     : 0
0160             }
0161         }
0162         ScriptAction {
0163             script: toolBoxContent.destroyToolBox()
0164         }
0165     }
0166
0167     MouseArea {
0168         id: mouseArea
0169         anchors {
0170             fill: parent
0171             leftMargin: -backgroundFrame.margins.left
0172             topMargin: touchMode ? 0 : -backgroundFrame.margins.top
0173             rightMargin: -backgroundFrame.margins.right
0174             bottomMargin: touchMode ? 0 : -backgroundFrame.margins.bottom
0175         }
0176         drag {
0177             filterChildren: true
0178             target: main.Plasmoid.immutable ? undefined : toolBoxContent
0179             minimumX: 0
0180             maximumX: container.width - toolBoxContent.width
0181             minimumY: 0
0182             maximumY: container.height
0183         }
0184
0185         hoverEnabled: true
0186
0187         onPressed: {
0188             pressedX = toolBoxContent.x
0189             pressedY = toolBoxContent.y
0190         }
0191         onPositionChanged: mouse => {
0192             if (pressed && (Math.abs(toolBoxContent.x - pressedX) > iconSize ||
0193                 Math.abs(toolBoxContent.y - pressedY) > iconSize)) {
0194                 dragging = true;
0195             }
0196
0197             // Center snapping X
0198             if (snapX && Math.abs(snapStartX - mouse.x) > Kirigami.Units.gridUnit) {
0199                 toolBoxContent.anchors.horizontalCenter = undefined;
0200                 snapX = false;
0201             } else if (!snapX && Math.abs(main.width/2 - (toolBoxContent.x + toolBoxContent.width/2)) < Kirigami.Units.gridUnit) {
0202                 toolBoxContent.anchors.horizontalCenter = main.horizontalCenter;
0203                 snapStartX = mouse.x;
0204                 snapX = true;
0205             }
0206         }
0207
0208         onReleased: mouse => {
0209             toolBoxContent.anchors.horizontalCenter = undefined;
0210             toolBoxContent.anchors.verticalCenter = undefined;
0211             snapX = false;
0212             main.Plasmoid.configuration.ToolBoxButtonState = toolBoxContent.state;
0213             main.Plasmoid.configuration.ToolBoxButtonX = toolBoxContent.x;
0214             main.Plasmoid.configuration.ToolBoxButtonY = toolBoxContent.y;
0215             //print("Saved coordinates for ToolBox in config: " + toolBoxContent.x + ", " +toolBoxContent.x);
0216             if (dragging) {
0217                 main.placeToolBox();
0218             }
0219             dragging = false;
0220             stateTimer.stop();
0221             updateState();
0222         }
0223         onCanceled: dragging = false;
0224
0225         KSvg.FrameSvgItem {
0226             id: backgroundFrame
0227             anchors.fill: parent
0228             imagePath: "widgets/background"
0229             width: Math.round(buttonLayout.width + margins.horizontal)
0230             height: Math.round(buttonLayout.height + margins.vertical)
0231         }
0232
0233         Row {
0234             id: buttonRow
0235             anchors.centerIn: parent
0236             spacing: buttonLayout.columnSpacing
0237
0238             Grid {
0239                 id: buttonLayout
0240                 rowSpacing: Kirigami.Units.smallSpacing
0241                 columnSpacing: rowSpacing
0242
0243                 // Show buttons in two lines if screen space is limited
0244                 readonly property real buttonWidth: addWidgetButton.implicitWidth
0245                     + addPanelButton.implicitWidth
0246                     + configureButton.implicitWidth
0247                     + themeButton.implicitWidth
0248                     + displaySettingsButton.implicitWidth
0249                     + manageContainmentsButton.implicitWidth
0250                     + (touchMode ? menuButton.implicitWidth : 0)
0251                     + closeButton.implicitWidth
0252                 rows: Math.ceil(buttonWidth / (Screen.width * 0.8))
0253
0254                 PlasmaComponents3.ToolButton {
0255                     id: addWidgetButton
0256                     property QtObject qAction: Plasmoid.internalAction("add widgets")
0257                     text: qAction.text
0258                     icon.name: "list-add"
0259                     onClicked: qAction.trigger()
0260                 }
0261
0262                 PlasmaComponents3.ToolButton {
0263                     id: addPanelButton
0264                     height: addWidgetButton.height
0265                     property QtObject qAction: Plasmoid.corona.action("add panel")
0266                     text: qAction.text
0267                     icon.name: "list-add"
0268                     Accessible.role: Accessible.ButtonMenu
0269                     onClicked: Plasmoid.corona.showAddPanelContextMenu(mapToGlobal(0, height))
0270                 }
0271
0272                 PlasmaComponents3.ToolButton {
0273                     id: configureButton
0274                     property QtObject qAction: Plasmoid.internalAction("configure")
0275                     text: qAction.text
0276                     icon.name: "preferences-desktop-wallpaper"
0277                     onClicked: qAction.trigger()
0278                 }
0279
0280                 PlasmaComponents3.ToolButton {
0281                     id: themeButton
0282                     text: i18nd("plasma_toolbox_org.kde.desktoptoolbox", "Choose Global Theme…")
0283                     icon.name: "preferences-desktop-theme-global"
0284                     onClicked: KCM.KCMLauncher.openSystemSettings("kcm_lookandfeel")
0285                 }
0286
0287                 PlasmaComponents3.ToolButton {
0288                     id: displaySettingsButton
0289                     text: i18nd("plasma_toolbox_org.kde.desktoptoolbox", "Configure Display Settings…")
0290                     icon.name: "preferences-desktop-display"
0291                     onClicked: KCM.KCMLauncher.openSystemSettings("kcm_kscreen")
0292                 }
0293
0294                 PlasmaComponents3.ToolButton {
0295                     id: manageContainmentsButton
0296                     property QtObject qAction: Plasmoid.corona.action("manage-containments")
0297                     text: qAction.text
0298                     visible: qAction.visible
0299                     icon.name: "preferences-system-windows-effect-fadedesktop"
0300                     onClicked: qAction.trigger()
0301                 }
0302
0303                 PlasmaComponents3.ToolButton {
0304                     id: menuButton
0305
0306                     height: addWidgetButton.height
0307                     visible: touchMode
0308
0309                     icon.name: "overflow-menu"
0310                     text: i18ndc("plasma_toolbox_org.kde.desktoptoolbox", "@action:button", "More")
0311
0312                     onClicked: {
0313                         container.parent.openContextMenu(mapToGlobal(0, height));
0314                     }
0315                 }
0316             }
0317
0318             PlasmaComponents3.ToolButton {
0319                 id: closeButton
0320                 anchors.verticalCenter: buttonLayout.verticalCenter
0321                 height: addWidgetButton.height
0322                 display: PlasmaComponents3.AbstractButton.IconOnly
0323                 icon.name: "window-close"
0324                 text: i18nd("plasma_toolbox_org.kde.desktoptoolbox", "Exit Edit Mode")
0325                 onClicked: Plasmoid.containment.corona.editMode = false
0326                 PlasmaComponents3.ToolTip {
0327                     text: closeButton.text
0328                 }
0329             }
0330         }
0331     }
0332 }