battery: bring back the battery icon for those who prefer it

Assets/Translations/en.json

@@ -48,6 +48,12 @@
       "device-default": "Default (Display Device)",
       "device-description": "Select which battery device to display.",
       "device-label": "Battery device",
+      "display-mode-description": "Choose how the battery is displayed in the bar.",
+      "display-mode-graphic": "Graphical battery",
+      "display-mode-icon-always": "Icon - Always show %",
+      "display-mode-icon-hover": "Icon - Show on hover",
+      "display-mode-icon-only": "Icon only",
+      "display-mode-label": "Display mode",
       "hide-if-idle-description": "Hide the widget when the battery is not charging or discharging.",
       "hide-if-idle-label": "Hide when idle",
       "hide-if-not-detected-description": "Hide the widget when no battery is detected on the system.",

Modules/Bar/Widgets/Battery.qml

@@ -38,6 +38,9 @@ Item {
   readonly property bool isBarVertical: barPosition === "left" || barPosition === "right"
   readonly property real capsuleHeight: Style.getCapsuleHeightForScreen(screenName)
 
+  readonly property string displayMode: widgetSettings.displayMode !== undefined ? widgetSettings.displayMode : widgetMetadata.displayMode
+  readonly property bool useGraphicMode: displayMode === "graphic"
+
   readonly property bool hideIfNotDetected: widgetSettings.hideIfNotDetected !== undefined ? widgetSettings.hideIfNotDetected : widgetMetadata.hideIfNotDetected
   readonly property bool hideIfIdle: widgetSettings.hideIfIdle !== undefined ? widgetSettings.hideIfIdle : widgetMetadata.hideIfIdle
 
@@ -107,8 +110,8 @@ Item {
   visible: shouldShow
   opacity: shouldShow ? 1.0 : 0.0
 
-  implicitWidth: capsule.width
-  implicitHeight: capsule.height
+  implicitWidth: useGraphicMode ? capsule.width : pill.width
+  implicitHeight: useGraphicMode ? capsule.height : pill.height
 
   NPopupContextMenu {
     id: contextMenu
@@ -131,14 +134,17 @@ Item {
                  }
   }
 
-  // Capsule background
+  // ==================== GRAPHIC MODE ====================
+
+  // Capsule background (graphic mode only)
   Rectangle {
     id: capsule
+    visible: root.useGraphicMode
     anchors.centerIn: nBattery
     width: root.isBarVertical ? root.capsuleHeight : nBattery.width + Style.marginS * 2
     height: root.isBarVertical ? nBattery.height + Style.marginS * 2 : root.capsuleHeight
     radius: Math.min(Style.radiusL, width / 2)
-    color: mouseArea.containsMouse ? Color.mHover : Style.capsuleColor
+    color: graphicMouseArea.containsMouse ? Color.mHover : Style.capsuleColor
     border.color: Style.capsuleBorderColor
     border.width: Style.capsuleBorderWidth
 
@@ -153,6 +159,7 @@ Item {
 
   NBattery {
     id: nBattery
+    visible: root.useGraphicMode
     anchors.centerIn: parent
     baseSize: Style.barFontSize
     showPercentageText: true
@@ -162,12 +169,13 @@ Item {
     charging: root.isCharging
     pluggedIn: root.isPluggedIn
     low: root.isLowBattery || root.isCriticalBattery
-    baseColor: mouseArea.containsMouse ? Color.mOnHover : Color.mOnSurface
-    textColor: mouseArea.containsMouse ? Color.mHover : Color.mSurface
+    baseColor: graphicMouseArea.containsMouse ? Color.mOnHover : Color.mOnSurface
+    textColor: graphicMouseArea.containsMouse ? Color.mHover : Color.mSurface
   }
 
   MouseArea {
-    id: mouseArea
+    id: graphicMouseArea
+    visible: root.useGraphicMode
     anchors.fill: parent
     hoverEnabled: true
     acceptedButtons: Qt.LeftButton | Qt.RightButton
@@ -183,15 +191,42 @@ Item {
                  if (mouse.button === Qt.RightButton) {
                    PanelService.showContextMenu(contextMenu, nBattery, screen);
                  } else {
-                   var panel = PanelService.getPanel("batteryPanel", screen);
-                   if (panel) {
-                     panel.panelID = {
-                       showPowerProfiles: widgetSettings.showPowerProfiles !== undefined ? widgetSettings.showPowerProfiles : widgetMetadata.showPowerProfiles,
-                       showNoctaliaPerformance: widgetSettings.showNoctaliaPerformance !== undefined ? widgetSettings.showNoctaliaPerformance : widgetMetadata.showNoctaliaPerformance
-                     };
-                     panel.toggle(this);
-                   }
+                   openBatteryPanel();
                  }
                }
   }
+
+  // ==================== ICON MODE ====================
+
+  BarPill {
+    id: pill
+    visible: !root.useGraphicMode
+    screen: root.screen
+    oppositeDirection: BarService.getPillDirection(root)
+    icon: BatteryService.getIcon(root.percent, root.isCharging, root.isPluggedIn, root.isReady)
+    text: root.isReady ? root.percent : "-"
+    suffix: "%"
+    autoHide: false
+    forceOpen: root.isReady && root.displayMode === "icon-always"
+    forceClose: root.displayMode === "icon-only" || !root.isReady
+    customBackgroundColor: root.isCharging ? Color.mPrimary : ((root.isLowBattery || root.isCriticalBattery) ? Color.mError : "transparent")
+    customTextIconColor: root.isCharging ? Color.mOnPrimary : ((root.isLowBattery || root.isCriticalBattery) ? Color.mOnError : "transparent")
+    tooltipText: root.tooltipText
+
+    onClicked: openBatteryPanel()
+    onRightClicked: PanelService.showContextMenu(contextMenu, pill, screen)
+  }
+
+  // ==================== SHARED ====================
+
+  function openBatteryPanel() {
+    var panel = PanelService.getPanel("batteryPanel", screen);
+    if (panel) {
+      panel.panelID = {
+        showPowerProfiles: widgetSettings.showPowerProfiles !== undefined ? widgetSettings.showPowerProfiles : widgetMetadata.showPowerProfiles,
+        showNoctaliaPerformance: widgetSettings.showNoctaliaPerformance !== undefined ? widgetSettings.showNoctaliaPerformance : widgetMetadata.showNoctaliaPerformance
+      };
+      panel.toggle(root);
+    }
+  }
 }

Modules/Panels/Settings/Bar/WidgetSettings/BatterySettings.qml

@@ -16,6 +16,7 @@ ColumnLayout {
   signal settingsChanged(var settings)
 
   // Local state
+  property string valueDisplayMode: widgetData.displayMode !== undefined ? widgetData.displayMode : widgetMetadata.displayMode
   property string valueDeviceNativePath: widgetData.deviceNativePath !== undefined ? widgetData.deviceNativePath : "__default__"
   property bool valueShowPowerProfiles: widgetData.showPowerProfiles !== undefined ? widgetData.showPowerProfiles : widgetMetadata.showPowerProfiles
   property bool valueShowNoctaliaPerformance: widgetData.showNoctaliaPerformance !== undefined ? widgetData.showNoctaliaPerformance : widgetMetadata.showNoctaliaPerformance
@@ -27,6 +28,7 @@ ColumnLayout {
     if (widgetData && widgetData.id) {
       settings.id = widgetData.id;
     }
+    settings.displayMode = valueDisplayMode;
     settings.showPowerProfiles = valueShowPowerProfiles;
     settings.showNoctaliaPerformance = valueShowNoctaliaPerformance;
     settings.hideIfNotDetected = valueHideIfNotDetected;
@@ -49,6 +51,36 @@ ColumnLayout {
                 }
   }
 
+  NComboBox {
+    Layout.fillWidth: true
+    label: I18n.tr("bar.battery.display-mode-label")
+    description: I18n.tr("bar.battery.display-mode-description")
+    minimumWidth: 200
+    model: [
+      {
+        "key": "graphic",
+        "name": I18n.tr("bar.battery.display-mode-graphic")
+      },
+      {
+        "key": "icon-hover",
+        "name": I18n.tr("bar.battery.display-mode-icon-hover")
+      },
+      {
+        "key": "icon-always",
+        "name": I18n.tr("bar.battery.display-mode-icon-always")
+      },
+      {
+        "key": "icon-only",
+        "name": I18n.tr("bar.battery.display-mode-icon-only")
+      }
+    ]
+    currentKey: root.valueDisplayMode
+    onSelected: key => {
+                  root.valueDisplayMode = key;
+                  settingsChanged(saveSettings());
+                }
+  }
+
   NToggle {
     label: I18n.tr("bar.battery.show-power-profile-label")
     description: I18n.tr("bar.battery.show-power-profile-description")

Services/UI/BarWidgetRegistry.qml

@@ -84,6 +84,7 @@ Singleton {
                                     "hideWhenIdle": false
                                   },
                                   "Battery": {
+                                    "displayMode": "graphic",
                                     "deviceNativePath": "__default__",
                                     "showPowerProfiles": false,
                                     "showNoctaliaPerformance": false,