Indicator: overlay percentage

data/Indicator.css

@@ -0,0 +1,20 @@
+.battery-indicator label {
+    margin-left: -4px;
+    margin-right: 3px;
+    text-shadow: none;
+}
+
+panel.color-dark .battery-indicator label,
+panel.maximized .battery-indicator label {
+    color: #333;
+}
+
+panel.color-light .battery-indicator label {
+    color: white;
+}
+
+/*Workaround shadow clip, replace with overflow in GTK4*/
+.battery-indicator image {
+    margin-right: 1px;
+    margin-left: 1px;
+}

data/icons.gresource.xml

@@ -1,10 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/io/elementary/desktop/wingpanel/power">
+    <file compressed="true">Indicator.css</file>
+
     <file alias="scalable/categories/power-mode-balanced-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/balanced.svg</file>
     <file alias="scalable/categories/power-mode-performance-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/performance.svg</file>
     <file alias="scalable/categories/power-mode-powersaver-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/powersaver.svg</file>
 
+    <file alias="24x24/status/battery-labeled-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/battery-labeled.svg</file>
+    <file alias="24x24/status/battery-labeled-charging-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/battery-labeled-charging.svg</file>
+    <file alias="24x24/status/battery-labeled-critical-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/battery-labeled-critical.svg</file>
+    <file alias="24x24/status/battery-labeled-full-charging-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/battery-labeled-full-charging.svg</file>
+
     <file alias="24x24/status/battery-100-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/battery-100.svg</file>
     <file alias="24x24/status/battery-95-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/battery-95.svg</file>
     <file alias="24x24/status/battery-90-symbolic.svg" compressed="true" preprocess="xml-stripblanks">icons/battery-90.svg</file>

src/Indicator.vala

@@ -57,6 +57,15 @@ public class Power.Indicator : Wingpanel.Indicator {
 
     public override Gtk.Widget get_display_widget () {
         if (display_widget == null) {
+            var provider = new Gtk.CssProvider ();
+            provider.load_from_resource ("io/elementary/desktop/wingpanel/power/Indicator.css");
+
+            Gtk.StyleContext.add_provider_for_screen (
+                Gdk.Screen.get_default (),
+                provider,
+                Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
+            );
+
             display_widget = new Widgets.DisplayWidget ();
 
             /* No need to display the indicator when the device is completely in AC mode */

src/Services/Device.vala

@@ -237,6 +237,11 @@ public class Power.Services.Device : Object {
             return "preferences-system-power-symbolic";
         }
 
+        var settings = new GLib.Settings ("io.elementary.desktop.wingpanel.power");
+        if (settings.get_boolean ("show-percentage")) {
+            return get_icon_name_labeled ();
+        }
+
         var icon_name = "battery";
 
         if (percentage > 10) {
@@ -263,6 +268,22 @@ public class Power.Services.Device : Object {
         return icon_name += "-symbolic";
     }
 
+    private string get_icon_name_labeled () {
+        var icon_name = "battery-labeled";
+
+        if (is_charging) {
+            if (percentage == 100) {
+                icon_name += "-full";
+            }
+
+            icon_name += "-charging";
+        } else if (time_to_empty >= 0 && time_to_empty < 15 * 60 && percentage > 0) {
+            icon_name += "-critical";
+        }
+
+        return icon_name += "-symbolic";
+    }
+
     public string get_icon_name_for_battery () {
         if (!is_a_battery) {
             return "preferences-system-power-symbolic";

src/Widgets/DisplayWidget.vala

@@ -17,7 +17,7 @@
  * Boston, MA 02110-1301, USA.
  */
 
-public class Power.Widgets.DisplayWidget : Gtk.Box {
+public class Power.Widgets.DisplayWidget : Gtk.Bin {
     private Gtk.Revealer percent_revealer;
     public string icon_name {
         set {
@@ -28,8 +28,7 @@ public class Power.Widgets.DisplayWidget : Gtk.Box {
     public bool allow_percent { get; set; default = false; }
     public int percentage {
         set {
-            ///Translators: This represents battery charge precentage with `%i` representing the number and `%%` representing the percent symbol
-            percent_label.label = _("%i%%").printf (value);
+            percent_label.label = "%i".printf (value);
         }
     }
 
@@ -47,12 +46,18 @@ public class Power.Widgets.DisplayWidget : Gtk.Box {
         percent_label = new Gtk.Label (null);
 
         percent_revealer = new Gtk.Revealer () {
-            transition_type = Gtk.RevealerTransitionType.SLIDE_RIGHT
+            child = percent_label,
+            hexpand = true,
+            transition_type = CROSSFADE
         };
-        percent_revealer.add (percent_label);
 
-        add (image);
-        add (percent_revealer);
+        var percent_overlay = new Gtk.Overlay () {
+            child = image
+        };
+        percent_overlay.add_overlay (percent_revealer);
+
+        get_style_context ().add_class ("battery-indicator");
+        child = percent_overlay;
 
         var settings = new GLib.Settings ("io.elementary.desktop.wingpanel.power");
         settings.bind ("show-percentage", percent_revealer, "reveal-child", GLib.SettingsBindFlags.GET);