qml/actiondrawer/LandscapeContentContainer.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.kirigami 2.12 as Kirigami
0013
0014 import org.kde.plasma.core as PlasmaCore
0015 import org.kde.plasma.plasma5support 2.0 as P5Support
0016 import org.kde.plasma.components 3.0 as PlasmaComponents
0017 import org.kde.plasma.private.mobileshell as MobileShell
0018
0019 /**
0020  * Root element that contains all of the ActionDrawer's contents, and is anchored to the screen.
0021  */
0022 Item {
0023     id: root
0024
0025     required property var actionDrawer
0026
0027     property alias notificationsWidget: notificationWidget
0028
0029     readonly property real minimizedQuickSettingsOffset: height
0030     readonly property real maximizedQuickSettingsOffset: height
0031     readonly property bool isOnLargeScreen: width > quickSettings.width * 2.5
0032     readonly property real minWidthHeight: Math.min(root.width, root.height)
0033     readonly property real opacityValue: Math.max(0, Math.min(1, actionDrawer.offset / root.minimizedQuickSettingsOffset))
0034
0035     Kirigami.Theme.colorSet: Kirigami.Theme.View
0036     Kirigami.Theme.inherit: false
0037
0038     // fullscreen background
0039     Rectangle {
0040         anchors.fill: parent
0041
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                        notificationWidget.hasNotifications ? 0.95 : 0.9)
0047         Behavior on color { ColorAnimation { duration: Kirigami.Units.longDuration } }
0048         opacity: opacityValue
0049     }
0050
0051     P5Support.DataSource {
0052         id: timeSource
0053         engine: "time"
0054         connectedSources: ["Local"]
0055         interval: 60 * 1000
0056     }
0057
0058     MouseArea {
0059         anchors.fill: parent
0060
0061         // dismiss drawer when background is clicked
0062         onClicked: root.actionDrawer.close();
0063
0064         // left side
0065         ColumnLayout {
0066             id: columnLayout
0067
0068             opacity: opacityValue
0069             spacing: 0
0070
0071             anchors {
0072                 top: mediaWidget.bottom
0073                 topMargin: 0
0074                 bottom: parent.bottom
0075                 bottomMargin: 0
0076                 right: quickSettings.left
0077                 left: parent.left
0078             }
0079             anchors.margins: minWidthHeight * 0.06
0080
0081             MobileShell.NotificationsWidget {
0082                 id: notificationWidget
0083                 historyModel: root.actionDrawer.notificationModel
0084                 historyModelType: root.actionDrawer.notificationModelType
0085                 notificationSettings: root.actionDrawer.notificationSettings
0086                 actionsRequireUnlock: root.actionDrawer.restrictedPermissions
0087                 onUnlockRequested: root.actionDrawer.permissionsRequested()
0088
0089                 Connections {
0090                     target: root.actionDrawer
0091
0092                     function onRunPendingNotificationAction() {
0093                         notificationWidget.runPendingAction();
0094                     }
0095                 }
0096
0097                 onBackgroundClicked: root.actionDrawer.close();
0098
0099                 // don't allow notifications widget to get too wide
0100                 Layout.maximumWidth: Kirigami.Units.gridUnit * 25
0101                 Layout.fillHeight: true
0102                 Layout.fillWidth: true
0103                 Layout.topMargin: minWidthHeight * 0.02
0104             }
0105         }
0106
0107         PlasmaComponents.Label {
0108             id: clock
0109             text: Qt.formatTime(timeSource.data.Local.DateTime, MobileShell.ShellUtil.isSystem24HourFormat ? "h:mm" : "h:mm ap")
0110             verticalAlignment: Qt.AlignVCenter
0111             opacity: columnLayout.opacity
0112
0113             anchors {
0114                 left: parent.left
0115                 top: parent.top
0116                 topMargin: columnLayout.anchors.margins / 2
0117                 leftMargin: columnLayout.anchors.margins
0118             }
0119
0120             font.pixelSize: Math.min(40, minWidthHeight * 0.1)
0121             font.weight: Font.ExtraLight
0122             elide: Text.ElideRight
0123         }
0124
0125         PlasmaComponents.Label {
0126             id: date
0127             text: Qt.formatDate(timeSource.data.Local.DateTime, "ddd MMMM d")
0128             verticalAlignment: Qt.AlignTop
0129             color: Kirigami.Theme.disabledTextColor
0130             opacity: columnLayout.opacity
0131
0132             anchors {
0133                 left: parent.left
0134                 top: clock.bottom
0135                 bottom: isOnLargeScreen ? columnLayout.top : mediaWidget.top
0136                 topMargin: Kirigami.Units.smallSpacing
0137                 leftMargin: columnLayout.anchors.margins
0138             }
0139
0140             font.pixelSize: Math.min(20, minWidthHeight * 0.05)
0141             font.weight: Font.Light
0142         }
0143
0144         MobileShell.MediaControlsWidget {
0145             id: mediaWidget
0146             property real fullHeight: visible ? height + Kirigami.Units.smallSpacing * 6 : 0
0147
0148             y: isOnLargeScreen ? date.y - height + date.implicitHeight : date.y + date.implicitHeight + columnLayout.anchors.margins / 2
0149
0150             opacity: columnLayout.opacity
0151
0152             anchors {
0153                 right: quickSettings.left
0154                 left: isOnLargeScreen ? date.right : parent.left
0155                 leftMargin: columnLayout.anchors.margins
0156                 rightMargin: columnLayout.anchors.margins - quickSettings.leftPadding
0157             }
0158         }
0159
0160         // right sidebar
0161         MobileShell.QuickSettingsPanel {
0162             id: quickSettings
0163             height: quickSettings.contentImplicitHeight + quickSettings.topPadding + quickSettings.bottomPadding
0164             width: intendedWidth
0165
0166             readonly property real intendedWidth: 360
0167
0168             anchors.top: parent.top
0169             anchors.right: parent.right
0170
0171             actionDrawer: root.actionDrawer
0172             fullScreenHeight: root.height
0173
0174             transform: Translate {
0175                 id: translate
0176                 property real offsetRatio: quickSettings.height / root.height
0177                 y: Math.min(root.actionDrawer.offset * offsetRatio - quickSettings.height, 0)
0178             }
0179         }
0180     }
0181 }