[applets/batterymonitor] Put the toolbar in the header area

Summary:
This patch implements part of the mockup at T10470 by putting the power management
checkbox and settings button in a heading area visually connected to the titlebar.

In the process, I fixed a problem with the power management checkbox to make the layout's
spacing work: the checkbox now has text of its own, instead of living in a mouse area
with a separate label.

Test Plan:
{F8254807}
{F8254808}

Reviewers: #vdg, #plasma, broulik, niccolove, manueljlin

Reviewed By: #vdg, manueljlin

Subscribers: plasma-devel

Tags: #plasma

Maniphest Tasks: T10470

Differential Revision: https://phabricator.kde.org/D29116

applets/batterymonitor/package/contents/ui/PopupDialog.qml

@@ -21,12 +21,12 @@
 import QtQuick 2.0
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as Components
+import org.kde.plasma.components 3.0 as PlasmaComponents3
 import org.kde.plasma.extras 2.0 as PlasmaExtras
 import org.kde.kquickcontrolsaddons 2.0
 
-FocusScope {
+PlasmaComponents3.Page {
     id: dialog
-    focus: true
 
     property alias model: batteryList.model
     property bool pluggedIn
@@ -38,19 +38,7 @@ FocusScope {
 
     signal powermanagementChanged(bool checked)
 
-    Column {
-        id: settingsColumn
-        anchors.horizontalCenter: parent.horizontalCenter
-        width: parent.width - units.smallSpacing * 2
-        spacing: Math.round(units.gridUnit / 2)
-
-        Components.Label {
-            // this is just for metrics, TODO use TextMetrics in 5.4 instead
-            id: percentageMeasurementLabel
-            text: i18nc("Used for measurement", "100%")
-            visible: false
-        }
-
+    header: PlasmaExtras.PlasmoidHeading {
         PowerManagementItem {
             id: pmSwitch
             width: parent.width
@@ -58,75 +46,88 @@ FocusScope {
             KeyNavigation.tab: batteryList
             KeyNavigation.backtab: keyboardBrightnessSlider
         }
+    }
 
-        BrightnessItem {
-            id: brightnessSlider
-            width: parent.width
+    FocusScope {
+        anchors.fill: parent
+        anchors.topMargin: units.smallSpacing * 2
 
-            icon: "video-display-brightness"
-            label: i18n("Display Brightness")
-            visible: isBrightnessAvailable
-            value: batterymonitor.screenBrightness
-            maximumValue: batterymonitor.maximumScreenBrightness
-            KeyNavigation.tab: keyboardBrightnessSlider
-            KeyNavigation.backtab: batteryList
-            stepSize: batterymonitor.maximumScreenBrightness/100
-
-            onMoved: batterymonitor.screenBrightness = value
-
-            // Manually dragging the slider around breaks the binding
-            Connections {
-                target: batterymonitor
-                onScreenBrightnessChanged: brightnessSlider.value = batterymonitor.screenBrightness
-            }
-        }
+        focus: true
 
-        BrightnessItem {
-            id: keyboardBrightnessSlider
-            width: parent.width
+        Column {
+            id: settingsColumn
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: parent.width - units.smallSpacing * 2
+            spacing: Math.round(units.gridUnit / 2)
+
+            BrightnessItem {
+                id: brightnessSlider
+                width: parent.width
 
-            icon: "input-keyboard-brightness"
-            label: i18n("Keyboard Brightness")
-            value: batterymonitor.keyboardBrightness
-            maximumValue: batterymonitor.maximumKeyboardBrightness
-            visible: isKeyboardBrightnessAvailable
-            KeyNavigation.tab: pmSwitch
-            KeyNavigation.backtab: brightnessSlider
+                icon: "video-display-brightness"
+                label: i18n("Display Brightness")
+                visible: isBrightnessAvailable
+                value: batterymonitor.screenBrightness
+                maximumValue: batterymonitor.maximumScreenBrightness
+                KeyNavigation.tab: keyboardBrightnessSlider
+                KeyNavigation.backtab: batteryList
+                stepSize: batterymonitor.maximumScreenBrightness/100
+
+                onMoved: batterymonitor.screenBrightness = value
+
+                // Manually dragging the slider around breaks the binding
+                Connections {
+                    target: batterymonitor
+                    onScreenBrightnessChanged: brightnessSlider.value = batterymonitor.screenBrightness
+                }
+            }
 
-            onMoved: batterymonitor.keyboardBrightness = value
+            BrightnessItem {
+                id: keyboardBrightnessSlider
+                width: parent.width
 
-            // Manually dragging the slider around breaks the binding
-            Connections {
-                target: batterymonitor
-                onKeyboardBrightnessChanged: keyboardBrightnessSlider.value = batterymonitor.keyboardBrightness
+                icon: "input-keyboard-brightness"
+                label: i18n("Keyboard Brightness")
+                value: batterymonitor.keyboardBrightness
+                maximumValue: batterymonitor.maximumKeyboardBrightness
+                visible: isKeyboardBrightnessAvailable
+                KeyNavigation.tab: pmSwitch
+                KeyNavigation.backtab: brightnessSlider
+
+                onMoved: batterymonitor.keyboardBrightness = value
+
+                // Manually dragging the slider around breaks the binding
+                Connections {
+                    target: batterymonitor
+                    onKeyboardBrightnessChanged: keyboardBrightnessSlider.value = batterymonitor.keyboardBrightness
+                }
             }
         }
-    }
 
-    PlasmaExtras.ScrollArea {
-        anchors {
-            horizontalCenter: parent.horizontalCenter
-            top: settingsColumn.bottom
-            topMargin: units.gridUnit
-            leftMargin: units.smallSpacing
-            bottom: dialog.bottom
-        }
-        width: parent.width - units.smallSpacing * 2
+        PlasmaExtras.ScrollArea {
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+                top: settingsColumn.bottom
+                topMargin: units.gridUnit
+                leftMargin: units.smallSpacing
+                bottom: dialog.bottom
+            }
+            width: parent.width - units.smallSpacing * 2
 
-        ListView {
-            id: batteryList
+            ListView {
+                id: batteryList
 
-            boundsBehavior: Flickable.StopAtBounds
-            spacing: Math.round(units.gridUnit / 2)
+                boundsBehavior: Flickable.StopAtBounds
+                spacing: Math.round(units.gridUnit / 2)
 
-            KeyNavigation.tab: brightnessSlider
-            KeyNavigation.backtab: pmSwitch
+                KeyNavigation.tab: brightnessSlider
+                KeyNavigation.backtab: pmSwitch
 
-            delegate: BatteryItem {
-                width: parent.width
-                battery: model
+                delegate: BatteryItem {
+                    width: parent.width
+                    battery: model
+                }
             }
         }
     }
-
 }

applets/batterymonitor/package/contents/ui/PowerManagementItem.qml

@@ -31,46 +31,22 @@ Column {
 
     RowLayout {
         width: parent.width
-        spacing: units.gridUnit
 
-        MouseArea {
+        Components.CheckBox {
+            id: pmCheckBox
             Layout.fillWidth: true
-            height: childrenRect.height
-            onClicked: {
-                pmCheckBox.forceActiveFocus()
-                pmCheckBox.checked = !pmCheckBox.checked
+            text: i18n("Enable Power Management")
+            checked: true
+            // we don't want to mess with the checked state but still reflect that changing it might not yield the desired result
+            opacity: inhibitions.length > 0 ? 0.5 : 1
+            Behavior on opacity {
+                NumberAnimation { duration: units.longDuration }
             }
 
             PlasmaCore.ToolTipArea {
                 anchors.fill: parent
                 subText: i18n("Disabling power management will prevent your screen and computer from turning off automatically.\n\nMost applications will automatically suppress power management when they don't want to have you interrupted.")
             }
-
-            RowLayout {
-                width: parent.width
-                spacing: units.gridUnit
-
-                Item {
-                    width: units.iconSizes.medium
-                    height: width
-
-                    Components.CheckBox {
-                        id: pmCheckBox
-                        anchors.centerIn: parent
-                        checked: true
-                        // we don't want to mess with the checked state but still reflect that changing it might not yield the desired result
-                        opacity: inhibitions.length > 0 ? 0.5 : 1
-                        Behavior on opacity {
-                            NumberAnimation { duration: units.longDuration }
-                        }
-                    }
-                }
-
-                Components.Label {
-                    Layout.fillWidth: true
-                    text: i18n("Enable Power Management")
-                }
-            }
         }
 
         Components.ToolButton {