feat(battery): support adaptive layout for battery panel

Modules/Bar/Battery/BatteryPanel.qml

@@ -10,22 +10,21 @@ import qs.Widgets
 NPanel {
   id: root
 
-  preferredWidth: 350 * Style.uiScaleRatio
-  preferredHeight: 210 * Style.uiScaleRatio
+  panelKeyboardFocus: true
 
   property var optionsModel: []
 
   function updateOptionsModel() {
     let newOptions = [{
-                        "id": BatteryService.ChargingMode.Full,
-                        "label": "battery.panel.full"
-                      }, {
-                        "id": BatteryService.ChargingMode.Balanced,
-                        "label": "battery.panel.balanced"
-                      }, {
-                        "id": BatteryService.ChargingMode.Lifespan,
-                        "label": "battery.panel.lifespan"
-                      }]
+      "id": BatteryService.ChargingMode.Full,
+      "label": "battery.panel.full"
+    }, {
+      "id": BatteryService.ChargingMode.Balanced,
+      "label": "battery.panel.balanced"
+    }, {
+      "id": BatteryService.ChargingMode.Lifespan,
+      "label": "battery.panel.lifespan"
+    }]
     root.optionsModel = newOptions
   }
 
@@ -33,11 +32,52 @@ NPanel {
     updateOptionsModel()
   }
 
+  ButtonGroup {
+    id: batteryGroup
+  }
+
+  Component {
+    id: optionsComponent
+    ColumnLayout {
+      spacing: Style.marginM
+      Repeater {
+        model: root.optionsModel
+        delegate: NRadioButton {
+          ButtonGroup.group: batteryGroup
+          required property var modelData
+          text: I18n.tr(modelData.label, {
+            "percent": BatteryService.getThresholdValue(modelData.id)
+          })
+          checked: BatteryService.chargingMode === modelData.id
+          onClicked: {
+            BatteryService.setChargingMode(modelData.id)
+          }
+          Layout.fillWidth: true
+        }
+      }
+    }
+  }
+
+  Component {
+    id: disabledComponent
+    NText {
+      text: I18n.tr("battery.panel.disabled")
+      pointSize: Style.fontSizeL
+      color: Color.mOnSurfaceVariant
+      wrapMode: Text.WordWrap
+      horizontalAlignment: Text.AlignHCenter
+    }
+  }
+
   panelContent: Item {
     anchors.fill: parent
+    property real contentPreferredHeight: mainLayout.implicitHeight + Style.marginM * 2
+    property real contentPreferredWidth: 350 * Style.uiScaleRatio
 
     ColumnLayout {
-      anchors.fill: parent
+      id: mainLayout
+      anchors.centerIn: parent
+      width: parent.contentPreferredWidth - Style.marginM * 2
       anchors.margins: Style.marginM
       spacing: Style.marginM
 
@@ -78,57 +118,15 @@ NPanel {
         }
       }
 
-      ButtonGroup {
-        id: batteryGroup
-      }
-
       NBox {
         Layout.fillWidth: true
-        Layout.fillHeight: true
+        Layout.preferredHeight: loader.implicitHeight + Style.marginM * 2
 
-        ColumnLayout {
-          anchors.fill: parent
-          anchors.margins: Style.marginM
-          spacing: Style.marginM
-
-          Repeater {
-            model: optionsModel
-
-            NRadioButton {
-              visible: BatteryService.chargingMode !== BatteryService.ChargingMode.Disabled
-              ButtonGroup.group: batteryGroup
-              required property var modelData
-              text: I18n.tr(modelData.label, {
-                              "percent": BatteryService.getThresholdValue(modelData.id)
-                            })
-              checked: BatteryService.chargingMode === modelData.id
-              onClicked: {
-                BatteryService.setChargingMode(modelData.id)
-              }
-              Layout.fillWidth: true
-            }
-          }
-        }
-
-        ColumnLayout {
-          visible: BatteryService.chargingMode === BatteryService.ChargingMode.Disabled
-          anchors.fill: parent
-          spacing: Style.marginM
-
-          Item {
-            Layout.fillHeight: true
-          }
-
-          NText {
-            text: I18n.tr("battery.panel.disabled")
-            pointSize: Style.fontSizeL
-            color: Color.mOnSurfaceVariant
-            Layout.alignment: Qt.AlignHCenter
-          }
-
-          Item {
-            Layout.fillHeight: true
-          }
+        Loader {
+          id: loader
+          anchors.centerIn: parent
+          width: parent.width - Style.marginM * 2
+          sourceComponent: BatteryService.chargingMode === BatteryService.ChargingMode.Disabled ? disabledComponent : optionsComponent
         }
       }
     }