ui/delegate/WidgetDelegateConfig.qml

0001 // SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
0002 // SPDX-License-Identifier: LGPL-2.0-or-later
0003
0004 import QtQuick
0005 import QtQuick.Layouts
0006 import QtQuick.Controls as QQC2
0007 import Qt5Compat.GraphicalEffects
0008
0009 import org.kde.kirigami as Kirigami
0010 import org.kde.plasma.core as PlasmaCore
0011 import org.kde.ksvg 1.0 as KSvg
0012
0013 import org.kde.plasma.components 3.0 as PC3
0014 import org.kde.private.mobile.homescreen.folio 1.0 as Folio
0015
0016 import '../private'
0017
0018 Item {
0019     id: root
0020
0021     property var homeScreen
0022
0023     property int pageNum
0024     property int row
0025     property int column
0026
0027     property real widgetWidth
0028     property real widgetHeight
0029     property real widgetX
0030     property real widgetY
0031
0032     property real topWidgetBackgroundPadding
0033     property real bottomWidgetBackgroundPadding
0034     property real leftWidgetBackgroundPadding
0035     property real rightWidgetBackgroundPadding
0036
0037     property Folio.FolioPageDelegate pageDelegate
0038     property Folio.FolioWidget widget
0039     property var pageModel
0040
0041     signal removeRequested()
0042     signal closed()
0043
0044     function startOpen() {
0045         configOverlay.open();
0046     }
0047
0048     function fullyOpen() {
0049         configPopup.open();
0050         configOverlay.close();
0051     }
0052
0053     // HACK: this shows the config when we are in the "press to hold" state, prior to mouse release
0054     // we can't just open the popup, because the potential drag-and-drop swipe would get lost
0055     MouseArea {
0056         id: configOverlay
0057         parent: root.homeScreen
0058         anchors.fill: parent
0059
0060         width: configPopup.width
0061         height: configPopup.height
0062
0063         opacity: 0
0064         visible: opacity > 0
0065
0066         // in case this gets stuck open over the homescreen, just close on tap
0067         onClicked: close()
0068
0069         NumberAnimation on opacity { id: configOverlayOpacityAnim; duration: 200 }
0070
0071         function open() {
0072             configOverlayOpacityAnim.to = 1;
0073             configOverlayOpacityAnim.restart();
0074         }
0075
0076         function animClose() {
0077             if (opacity !== 0) {
0078                 configOverlayOpacityAnim.to = 0;
0079                 configOverlayOpacityAnim.restart();
0080             }
0081         }
0082
0083         function close() {
0084             opacity = 0;
0085         }
0086
0087         Connections {
0088             target: Folio.HomeScreenState
0089
0090             // if we are starting drag-and-drop, close the menu immediately
0091             function onSwipeStateChanged() {
0092                 if (Folio.HomeScreenState.swipeState === Folio.HomeScreenState.DraggingDelegate) {
0093                     configOverlay.animClose();
0094                     root.closed();
0095                 }
0096             }
0097         }
0098
0099         // the config overlay
0100         FastBlur {
0101             anchors.fill: parent
0102             source: configPopup.contentItem
0103             radius: 0
0104         }
0105     }
0106
0107     // this is the actual interactive popup for widget settings, only
0108     // opened when the user releases their press (and doesn't drag)
0109     QQC2.Popup {
0110         id: configPopup
0111         width: root.homeScreen.width
0112         height: root.homeScreen.height
0113         parent: root.homeScreen
0114
0115         onClosed: {
0116             configOverlay.close(); // ensure overlay is closed
0117             root.closed();
0118         }
0119
0120         topPadding: 0
0121         bottomPadding: 0
0122         leftPadding: 0
0123         rightPadding: 0
0124
0125         closePolicy: QQC2.Popup.CloseOnEscape | QQC2.Popup.CloseOnPressOutsideParent
0126
0127         readonly property real barWidth: Kirigami.Units.gridUnit * 3.5
0128         readonly property real barSpacing: Kirigami.Units.largeSpacing
0129         readonly property real minimumBarLength: Kirigami.Units.gridUnit * 8
0130
0131         background: Item {}
0132         QQC2.Overlay.modal: Item {}
0133
0134         exit: Transition {
0135             NumberAnimation { property: "opacity"; duration: 200; from: 1.0; to: 0.0 }
0136         }
0137
0138         Connections {
0139             target: Folio.HomeScreenState
0140
0141             // don't show config overlay if we have navigated to another page
0142             function onCurrentPageChanged() {
0143                 if (configPopup.visible) {
0144                     configPopup.close();
0145                 }
0146             }
0147         }
0148
0149         contentItem: MouseArea {
0150             id: configItem
0151
0152             onClicked: configPopup.close()
0153
0154             WidgetResizeHandleFrame {
0155                 id: resizeFrame
0156                 anchors.fill: parent
0157
0158                 widgetWidth: root.widgetWidth
0159                 widgetHeight: root.widgetHeight
0160                 widgetX: root.widgetX + root.leftWidgetBackgroundPadding
0161                 widgetY: root.widgetY + root.topWidgetBackgroundPadding
0162
0163                 widgetTopMargin: root.topWidgetBackgroundPadding
0164                 widgetBottomMargin: root.bottomWidgetBackgroundPadding
0165                 widgetLeftMargin: root.leftWidgetBackgroundPadding
0166                 widgetRightMargin: root.rightWidgetBackgroundPadding
0167
0168                 widgetRow: root.row
0169                 widgetColumn: root.column
0170                 widgetGridWidth: root.widget.gridWidth
0171                 widgetGridHeight: root.widget.gridHeight
0172
0173                 onWidgetChangeAfterDrag: (widgetRow, widgetColumn, widgetGridWidth, widgetGridHeight) => {
0174                     if (resizeFrame.lockDrag !== null) triggerWidgetChanges(widgetRow, widgetColumn, widgetGridWidth, widgetGridHeight);
0175                 }
0176
0177                 function triggerWidgetChanges(widgetRow, widgetColumn, widgetGridWidth, widgetGridHeight) {
0178                     root.pageModel.moveAndResizeWidgetDelegate(
0179                         root.pageDelegate,
0180                         widgetRow,
0181                         widgetColumn,
0182                         widgetGridWidth,
0183                         widgetGridHeight
0184                     );
0185                 }
0186             }
0187
0188             PC3.Button {
0189                 id: button
0190                 icon.name: 'settings-configure'
0191                 text: i18n('Options')
0192                 display: (resizeFrame.handleContainer.width > Kirigami.Units.gridUnit * 7) ? PC3.Button.TextBesideIcon : PC3.Button.IconOnly
0193
0194                 readonly property var handleContainer: resizeFrame.handleContainer
0195                 x: Math.round(handleContainer.x + (handleContainer.width / 2) - (width / 2))
0196                 y: Math.round(handleContainer.y + (handleContainer.height / 2) - (height / 2))
0197
0198                 onClicked: contextMenuDialog.open()
0199             }
0200
0201             Kirigami.Dialog {
0202                 id: contextMenuDialog
0203                 preferredWidth: Kirigami.Units.gridUnit * 20
0204                 padding: 0
0205                 title: i18n('Widget Options')
0206
0207                 // close parent dialog too
0208                 onClosed: configPopup.close()
0209
0210                 ColumnLayout {
0211                     id: column
0212                     spacing: 0
0213
0214                     Repeater {
0215                         model: root.widget.applet ? [...root.widget.applet.contextualActions, configureAppletAction, removeDelegateAction] : [removeDelegateAction]
0216
0217                         delegate: QQC2.ItemDelegate {
0218                             Layout.fillWidth: true
0219                             Layout.preferredHeight: Kirigami.Units.gridUnit * 2
0220
0221                             action: modelData
0222                             text: modelData.text
0223                             icon.name: modelData.icon.name
0224
0225                             icon.width: Kirigami.Units.gridUnit
0226                             icon.height: Kirigami.Units.gridUnit
0227
0228                             leftPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
0229                             rightPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
0230
0231                             onClicked: contextMenuDialog.close()
0232                         }
0233                     }
0234                 }
0235             }
0236         }
0237     }
0238
0239     Kirigami.Action {
0240         id: removeDelegateAction
0241         icon.name: 'edit-delete-remove'
0242         text: i18n('Remove widget')
0243         onTriggered: root.removeRequested()
0244     }
0245
0246     Kirigami.Action {
0247         id: configureAppletAction
0248         icon.name: 'settings-configure'
0249         text: i18n('Configure widget')
0250         onTriggered: root.widget.applet.internalAction('configure').trigger();
0251     }
0252 }