battery done looks good to me

Bar/Battery.qml

@@ -17,9 +17,7 @@ Container {
   property double radius: 9
 
   boxColor: Colors.green
-  boxHeight: 25
   boxRadius: radius
-  boxWidth: 55
   defaultItem: icon
   exclusiveMonitor: root.monitor
 
@@ -30,8 +28,8 @@ Container {
 
 	  PropertyChanges {
 		root.boxHeight: 25
-		root.boxRadius: 9
-		root.boxWidth: 55
+		root.boxRadius: root.radius
+		root.boxWidth: 60
 	  }
 	},
 	State {
@@ -40,7 +38,7 @@ Container {
 
 	  PropertyChanges {
 		root.boxHeight: 28
-		root.boxWidth: 60
+		root.boxWidth: 64
 	  }
 	},
 	State {
@@ -50,7 +48,7 @@ Container {
 	  PropertyChanges {
 		root.boxHeight: root.batteryDisplayHeight
 		root.boxRadius: 12
-		root.boxWidth: 350
+		root.boxWidth: 450
 	  }
 
 	  StateChangeScript {
@@ -77,14 +75,7 @@ Container {
 	id: icon
 
 	Item {
-	  MidpointGradient {
-		anchors.fill: parent
-		angle: -45
-		blur: 0.6
-		color: BatteryManager.getBatteryColor()
-		midpoint: 0.55
-		radius: radius
-	  }
+	  BatteryGradient {}
 
 	  CenteredText {
 		property string component: "icon"
@@ -104,6 +95,8 @@ Container {
 	  property double innerMargin: 5
 	  property double outerMargin: 6
 
+	  BatteryGradient {}
+
 	  Rectangle {
 		id: batteryBackground
 
@@ -156,18 +149,38 @@ Container {
 
 			StyledText {
 			  color: Colors.text
-			  fontSize: 13
+			  fontSize: 14
 			  text: "Battery - " + batColumn.batInfo["name"]
 			}
 
 			StyledText {
-			  color: Colors.text
-			  fontSize: 13
-			  text: batColumn.batInfo["energy"] + " / " + batColumn.batInfo["capacity"] + "Wh"
+			  color: Colors.subtext1
+			  fontSize: 12
+			  fontWeight: 5
+			  text: batColumn.batInfo["energy"] + "/" + batColumn.batInfo["capacity"] + "Wh - "
+			  + BatteryManager.getChargingRateFormat()
+			}
+
+			StyledText {
+			  property var timeInfo: batColumn.batInfo["time"]
+
+			  color: Colors.subtext1
+			  fontSize: 12
+			  fontWeight: 5
+			  text: BatteryManager.getTimeFormat()
 			}
 		  }
 		}
 	  }
 	}
   }
+
+  component BatteryGradient: MidpointGradient {
+	anchors.fill: parent
+	angle: -45
+	blur: 0.6
+	color: BatteryManager.getBatteryColor()
+	midpoint: 0.55
+	radius: radius
+  }
 }

Services/BatteryManager.qml

@@ -18,7 +18,9 @@ Singleton {
 	let criticalLevel = 20;
 	let batteryPercentage = getBatteryPercentage(mainBattery);
 
-	if (mainBattery.state == UPowerDeviceState.Charging) {
+	if (mainBattery.state == UPowerDeviceState.FullyCharged) {
+	  return Colors.sky;
+	} else if (mainBattery.state == UPowerDeviceState.Charging) {
 	  return Colors.mauve;
 	} else if (mainBattery.state == UPowerDeviceState.PendingCharge | mainBattery.state
 			   == UPowerDeviceState.PendingDischarge) {
@@ -61,28 +63,99 @@ Singleton {
 	return icon + " " + percentage + "%";
   }
 
+  function getChargingRateFormat() {
+	let rate = mainBattery.changeRate.toFixed(1);
+
+	let finalString = "harging at " + rate + "W";
+	if (rate == 0) {
+	  finalString = "Battery Idle";
+	} else if (rate < 0) {
+	  finalString = "C" + finalString;
+	} else {
+	  finalString = "Disc" + finalString;
+	}
+	return finalString;
+  }
+
   function getMainBatteryInfo() {
 	let battery = UPower.devices.values[0];
 	let batteryState = battery.state;
 	let batteryName = getBatteryName(battery);
-	let time = 0;
-	let timeString = "";
-	let timeToEmpty = battery.timeToEmpty;
-	if (timeToEmpty == 0) {
-	  timeString = "full";
-	  time = battery.timeToFull;
-	} else {
-	  timeString = "empty";
-	  time = timeToEmpty;
-	}
+	let time = getTimeFormat();
 	return {
 	  "name": batteryName,
 	  "charge": battery.percentage,
-	  "energy": battery.energy,
-	  "capacity": battery.energyCapacity,
-	  "time": time,
-	  "timeString": timeString,
+	  "energy": battery.energy.toFixed(1),
+	  "capacity": battery.energyCapacity.toFixed(1),
 	  "health": battery.healthPercentage
 	};
   }
+
+  function getTimeFormat() {
+	let state = mainBattery.state;
+	let finalString = "";
+	if (state == UPowerDeviceState.FullyCharged) {
+	  finalString += "Battery Full";
+	} else if (state == UPowerDeviceState.Charging) {
+	  let time = mainBattery.timeToFull;
+	  if (time == 0) {
+		return "Getting Time...";
+	  } else {
+		let timeArr = secondsToTime(time);
+		// If more than 1 hour
+		if (timeArr.hours >= 1 || timeArr.hourNeedsIncrement == 1) {
+		  finalString += timeArr.Hours + " Hours ";
+		  // If minutes not 0
+		  if (timeArr.minutesRounded > 1) {
+			finalString += timeArr.minutesRounded + " Minutes";
+		  }
+		} else {
+		  finalString += timeArr.minutes + " Minutes ";
+		  finalString += timeArr.seconds + " Seconds";
+		}
+	  }
+	  finalString += " Until Full";
+	} else if (state == UPowerDeviceState.Discharging) {
+	  let time = mainBattery.timeToEmpty;
+	  if (time == 0) {
+		return "Getting Time...";
+	  } else {
+		let timeArr = secondsToTime(time);
+		// If more than 1 hour
+		if (timeArr.hours >= 1 || timeArr.hourNeedsIncrement == 1) {
+		  finalString += timeArr.hours + " Hours ";
+		  // If minutes not 0
+		  if (timeArr.minutesRounded > 1) {
+			finalString += timeArr.minutesRounded + " Minutes";
+		  }
+		} else {
+		  finalString += timeArr.minutes + " Minutes ";
+		  finalString += timeArr.seconds + " Seconds";
+		}
+	  }
+	  finalString += " Remaining";
+	} else {
+	  finalString += "Getting Time...";
+	}
+	return finalString;
+  }
+
+  function secondsToTime(totalSeconds) {
+	totalSeconds = Math.max(0, Number(totalSeconds));
+
+	const hours = Math.floor(totalSeconds / 3600);
+	const minutes = Math.floor((totalSeconds % 3600) / 60);
+	const seconds = Math.floor(totalSeconds % 60);
+
+	const roundedMinutes = minutes + (seconds >= 30 ? 1 : 0);
+	const hourNeedsIncrement = roundedMinutes === 60;
+
+	return {
+	  hours,
+	  minutes,
+	  seconds,
+	  minutesRounded: hourNeedsIncrement ? 0 : roundedMinutes,
+	  hourNeedsIncrement
+	};
+  }
 }