qml/actiondrawer/PortraitContentContainer.qml

0001 /*
0002  *   SPDX-FileCopyrightText: 2021 Devin Lin <devin@kde.org>
0003  *
0004  *   SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick 2.15
0008 import QtQuick.Controls 2.15
0009 import QtQuick.Layouts 1.1
0010 import QtQuick.Window 2.2
0011
0012 import org.kde.plasma.private.mobileshell as MobileShell
0013 import org.kde.plasma.components 3.0 as PlasmaComponents
0014 import org.kde.kirigami 2.20 as Kirigami
0015
0016 /**
0017  * Root element that contains all of the ActionDrawer's contents, and is anchored to the screen.
0018  */
0019 Item {
0020     id: root
0021
0022     required property var actionDrawer
0023
0024     property alias notificationsWidget: notificationWidget
0025
0026     // pinned position (disabled when openToPinnedMode is false)
0027     readonly property real minimizedQuickSettingsOffset: quickSettings.minimizedHeight
0028
0029     // fully open position
0030     readonly property real maximizedQuickSettingsOffset: minimizedQuickSettingsOffset + quickSettings.maxAddedHeight
0031
0032     Kirigami.Theme.colorSet: Kirigami.Theme.View
0033     Kirigami.Theme.inherit: false
0034
0035     function applyMinMax(val) {
0036         return Math.max(0, Math.min(1, val));
0037     }
0038
0039     // fullscreen background
0040     Rectangle {
0041         anchors.fill: parent
0042         // darken if there are notifications
0043         color: Qt.rgba(Kirigami.Theme.backgroundColor.r,
0044                        Kirigami.Theme.backgroundColor.g,
0045                        Kirigami.Theme.backgroundColor.b,
0046                        0.95)
0047         Behavior on color { ColorAnimation { duration: Kirigami.Units.longDuration } }
0048         opacity: Math.max(0, Math.min(1, actionDrawer.offset / root.minimizedQuickSettingsOffset))
0049     }
0050
0051     MobileShell.QuickSettingsDrawer {
0052         id: quickSettings
0053         z: 1 // ensure it's above notifications
0054         anchors.top: parent.top
0055         anchors.left: parent.left
0056         anchors.right: parent.right
0057
0058         actionDrawer: root.actionDrawer
0059
0060         // opacity and move animation (disabled when openToPinnedMode is false)
0061         property real offsetDist: actionDrawer.offset - minimizedQuickSettingsOffset
0062         property real totalOffsetDist: maximizedQuickSettingsOffset - minimizedQuickSettingsOffset
0063         minimizedToFullProgress: actionDrawer.openToPinnedMode ? (actionDrawer.opened ? applyMinMax(offsetDist / totalOffsetDist) : 0) : 1
0064
0065         // this drawer opens in two stages when pinned mode is enabled:
0066         // ---
0067         // stage 1: the transform effect is used, the drawer physically moves down to the pinned mode
0068         // stage 2: the rectangle increases height to reveal content, but the content stays still
0069         // when pinned mode is disabled, only stage 1 happens
0070
0071         // increase height of drawer when between pinned mode <-> maximized mode
0072         addedHeight: {
0073             if (!actionDrawer.openToPinnedMode) {
0074                 // if pinned mode disabled, just go to full height
0075                 return quickSettings.maxAddedHeight;
0076             } else if (!actionDrawer.opened) {
0077                 // over-scroll effect for initial opening
0078                 let progress = (root.actionDrawer.offset - minimizedQuickSettingsOffset) / quickSettings.maxAddedHeight;
0079                 let effectProgress = Math.atan(Math.max(0, progress));
0080                 return quickSettings.maxAddedHeight * 0.25 * effectProgress;
0081             } else {
0082                 // as the drawer opens, add height to the rectangle, revealing content
0083                 return Math.max(0, Math.min(quickSettings.maxAddedHeight, root.actionDrawer.offset - minimizedQuickSettingsOffset));
0084             }
0085         }
0086
0087         // physically move the drawer when between closed <-> pinned mode
0088         transform: Translate {
0089             id: translate
0090             readonly property real offsetHeight: actionDrawer.openToPinnedMode ? minimizedQuickSettingsOffset : maximizedQuickSettingsOffset
0091             y: Math.min(root.actionDrawer.offset - offsetHeight, 0)
0092         }
0093     }
0094
0095     MobileShell.NotificationsWidget {
0096         id: notificationWidget
0097         historyModel: root.actionDrawer.notificationModel
0098         historyModelType: root.actionDrawer.notificationModelType
0099         notificationSettings: root.actionDrawer.notificationSettings
0100         actionsRequireUnlock: root.actionDrawer.restrictedPermissions
0101         onUnlockRequested: root.actionDrawer.permissionsRequested()
0102
0103         Connections {
0104             target: root.actionDrawer
0105
0106             function onRunPendingNotificationAction() {
0107                 notificationWidget.runPendingAction();
0108             }
0109         }
0110
0111         onBackgroundClicked: root.actionDrawer.close();
0112
0113         anchors {
0114             top: quickSettings.top
0115             topMargin: quickSettings.height + translate.y
0116             bottom: parent.bottom
0117             left: parent.left
0118             right: parent.right
0119         }
0120         opacity: applyMinMax(root.actionDrawer.offset / root.minimizedQuickSettingsOffset)
0121
0122         // HACK: there are weird issues with text rendering black regardless of opacity, just set the text to be invisible once it's out
0123         visible: opacity > 0.05
0124     }
0125 }