actiondrawer: hide action drawer while adjusting screen brightness

This change hides the action drawer while adjusting the screen brightness so that one can see the content behind it.

components/mobileshell/qml/actiondrawer/ContentContainer.qml

@@ -30,6 +30,8 @@ Item {
     Kirigami.Theme.colorSet: Kirigami.Theme.View
     Kirigami.Theme.inherit: false
 
+    readonly property alias brightnessPressedValue: quickSettings.brightnessPressedValue
+
     // Background color
     Rectangle {
         anchors.fill: parent
@@ -37,8 +39,8 @@ Item {
                         Kirigami.Theme.backgroundColor.g,
                         Kirigami.Theme.backgroundColor.b,
                         (root.actionDrawer.mode == ActionDrawer.Portrait || notificationWidget.hasNotifications) ? 0.95 : 0.9)
-        Behavior on color { ColorAnimation { duration: Kirigami.Units.longDuration } }
-        opacity: Math.max(0, Math.min(1, actionDrawer.offset / root.minimizedQuickSettingsOffset))
+        Behavior on color { ColorAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.OutQuad } }
+        opacity: Math.max(0, Math.min(brightnessPressedValue, actionDrawer.offset / root.minimizedQuickSettingsOffset))
     }
 
     // Layout that switches between landscape and portrait mode
@@ -108,11 +110,15 @@ Item {
 
         // security reasons, system tray also doesn't work on lockscreen
         disableSystemTray: root.actionDrawer.restrictedPermissions
+
+        opacity: brightnessPressedValue
     }
 
     property MobileShell.MediaControlsWidget mediaControlsWidget: MobileShell.MediaControlsWidget {
         id: mediaWidget
         inActionDrawer: true
+
+        opacity: brightnessPressedValue
     }
 
     property MobileShell.NotificationsWidget notificationsWidget: MobileShell.NotificationsWidget {
@@ -123,6 +129,8 @@ Item {
         actionsRequireUnlock: root.actionDrawer.restrictedPermissions
         onUnlockRequested: root.actionDrawer.permissionsRequested()
 
+        opacity: brightnessPressedValue
+
         Connections {
             target: root.actionDrawer
 

components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml

@@ -32,6 +32,7 @@ Item {
     readonly property bool isOnLargeScreen: width > quickSettingsPanel.width * 2.5
     readonly property real minWidthHeight: Math.min(root.width, root.height)
     readonly property real opacityValue: Math.max(0, Math.min(1, actionDrawer.offset / root.minimizedQuickSettingsOffset))
+    readonly property double brightnessPressedValue: quickSettings.brightnessPressedValue
 
     Kirigami.Theme.colorSet: Kirigami.Theme.View
     Kirigami.Theme.inherit: false
@@ -81,7 +82,7 @@ Item {
             id: clock
             text: Qt.formatTime(timeSource.data.Local.DateTime, MobileShell.ShellUtil.isSystem24HourFormat ? "h:mm" : "h:mm ap")
             verticalAlignment: Qt.AlignVCenter
-            opacity: columnLayout.opacity
+            opacity: Math.min(brightnessPressedValue, columnLayout.opacity)
 
             anchors {
                 left: parent.left
@@ -100,7 +101,7 @@ Item {
             text: Qt.formatDate(timeSource.data.Local.DateTime, "ddd MMMM d")
             verticalAlignment: Qt.AlignTop
             color: Kirigami.Theme.disabledTextColor
-            opacity: columnLayout.opacity
+            opacity: Math.min(brightnessPressedValue, columnLayout.opacity)
 
             anchors {
                 left: parent.left

components/mobileshell/qml/actiondrawer/quicksettings/BrightnessItem.qml

@@ -19,10 +19,29 @@ Item {
     implicitHeight: brightnessRow.implicitHeight
     visible: screenBrightness.brightnessAvailable
 
+    property double brightnessPressedValue: 1
+    Behavior on brightnessPressedValue {
+        NumberAnimation {
+            duration: Kirigami.Units.longDuration
+            easing.type: Easing.OutQuad
+        }
+    }
+
     ScreenBrightness.ScreenBrightnessUtil {
         id: screenBrightness
     }
 
+    Rectangle {
+        anchors.fill: parent
+        anchors.leftMargin: -Kirigami.Units.smallSpacing
+        anchors.rightMargin: -Kirigami.Units.smallSpacing
+        anchors.topMargin: -Kirigami.Units.smallSpacing * 2
+        anchors.bottomMargin: -Kirigami.Units.smallSpacing * 2
+
+        color: Kirigami.Theme.backgroundColor
+        radius: Kirigami.Units.cornerRadius
+    }
+
     RowLayout {
         id: brightnessRow
         spacing: Kirigami.Units.smallSpacing * 2
@@ -47,6 +66,26 @@ Item {
             value: screenBrightness.brightness
             onMoved: screenBrightness.brightness = value;
 
+            onPressedChanged: {
+                if (pressed) {
+                    brightnessPressedTimer.restart();
+                } else{
+                    brightnessPressedTimer.stop();
+                    brightnessPressedValue = 1;
+                }
+            }
+
+            Timer {
+                id: brightnessPressedTimer
+                interval: 200
+                repeat: false
+                onTriggered: {
+                    if (brightnessSlider.pressed) {
+                        brightnessPressedValue = 0;
+                    }
+                }
+            }
+
             // HACK: for some reason, the slider initial value doesn't set without being done after the component completes loading
             Timer {
                 interval: 0

components/mobileshell/qml/actiondrawer/quicksettings/Handle.qml

@@ -16,8 +16,7 @@ Rectangle {
     implicitWidth: Kirigami.Units.gridUnit * 3
     implicitHeight: 3
     radius: height
-    color: Kirigami.Theme.textColor
-    opacity: 0.5
+    color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.5)
 
     TapHandler {
         cursorShape: pressed ? Qt.ClosedHandCursor : Qt.PointingHandCursor

components/mobileshell/qml/actiondrawer/quicksettings/QuickSettings.qml

@@ -60,6 +60,8 @@ Item {
     readonly property int pageSize: rowCount * columnCount
     readonly property int quickSettingsCount: quickSettingsModel.count
 
+    readonly property alias brightnessPressedValue: brightnessItem.brightnessPressedValue
+
     function resetSwipeView() {
         if (root.mode === QuickSettings.Pages) {
             swipeView.currentIndex = 0;
@@ -134,6 +136,8 @@ Item {
             Layout.fillWidth: true
             Layout.minimumHeight: rowCount * rowHeight
 
+            opacity: brightnessPressedValue
+
             SwipeView {
                 id: swipeView
 
@@ -199,6 +203,7 @@ Item {
 
         // Brightness slider
         BrightnessItem {
+            id: brightnessItem
             Layout.bottomMargin: Kirigami.Units.smallSpacing * 2
             Layout.leftMargin: Kirigami.Units.smallSpacing
             Layout.rightMargin: Kirigami.Units.smallSpacing

components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsDrawer.qml

@@ -49,6 +49,7 @@ MobileShell.BaseItem {
     property alias quickSettings: quickSettingsProxy.contentItem
     property alias statusBar: statusBarProxy.contentItem
     property alias mediaControlsWidget: mediaControlsWidgetProxy.contentItem
+    readonly property double brightnessPressedValue: quickSettings.brightnessPressedValue
 
     // we need extra padding if the background side border is enabled
     topPadding: Kirigami.Units.smallSpacing
@@ -59,6 +60,7 @@ MobileShell.BaseItem {
     background: KSvg.FrameSvgItem {
         enabledBorders: KSvg.FrameSvgItem.BottomBorder
         imagePath: "widgets/background"
+        opacity: brightnessPressedValue
     }
 
     contentItem: Item {
@@ -103,6 +105,7 @@ MobileShell.BaseItem {
                 property real fullHeight: height + Layout.topMargin
                 Layout.alignment: Qt.AlignHCenter
                 Layout.topMargin: Kirigami.Units.smallSpacing * 2
+                opacity: brightnessPressedValue
 
                 onTapped: {
                     if (root.minimizedToFullProgress < 0.5) {

components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsPanel.qml

@@ -35,6 +35,7 @@ MobileShell.BaseItem {
 
     property alias quickSettings: quickSettingsProxy.contentItem
     property alias statusBar: statusBarProxy.contentItem
+    readonly property double brightnessPressedValue: quickSettings.brightnessPressedValue
 
     // we need extra padding since the background side border is enabled
     topPadding: Kirigami.Units.smallSpacing * 4
@@ -45,6 +46,7 @@ MobileShell.BaseItem {
     background: KSvg.FrameSvgItem {
         enabledBorders: KSvg.FrameSvgItem.AllBorders
         imagePath: "widgets/background"
+        opacity: brightnessPressedValue
     }
 
     contentItem: Item {
@@ -89,6 +91,7 @@ MobileShell.BaseItem {
             id: handle
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.bottom: parent.bottom
+            opacity: brightnessPressedValue
         }
     }
 }