From b3ed75f02b9dfd53d25f34034d059470c76d1751 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Wed, 29 Dec 2021 14:33:24 -0600
Subject: [PATCH] status-bar: add titles

This adds titles to interactive elements. This causes a small (browser-
native) tooltip to display when hovering.
---
 src/status-bar/StatusBar.tsx | 12 ++++++++++--
 src/status-bar/i18n.en.json  |  2 ++
 src/status-bar/i18n.ts       |  2 ++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/status-bar/StatusBar.tsx b/src/status-bar/StatusBar.tsx
index 6f96493d..fbca4972 100644
--- a/src/status-bar/StatusBar.tsx
+++ b/src/status-bar/StatusBar.tsx
@@ -58,7 +58,11 @@ const HubInfoButton: React.VFC = (_props) => {
                 </table>
             }
         >
-            <Button minimal={true} onMouseDown={(e) => e.preventDefault()}>
+            <Button
+                title={i18n.translate(MessageId.HubInfoTitle)}
+                minimal={true}
+                onMouseDown={(e) => e.preventDefault()}
+            >
                 {deviceName}
             </Button>
         </Popover2>
@@ -82,7 +86,11 @@ const BatteryIndicator: React.VFC = (_props) => {
                 </span>
             }
         >
-            <div className="pb-battery-indicator" style={{ cursor: 'pointer' }}>
+            <div
+                title={i18n.translate(MessageId.BatteryTitle)}
+                className="pb-battery-indicator"
+                style={{ cursor: 'pointer' }}
+            >
                 <div className="pb-battery-indicator-body">
                     <ProgressBar
                         animate={charging}
diff --git a/src/status-bar/i18n.en.json b/src/status-bar/i18n.en.json
index 61d9161a..fc5b974b 100644
--- a/src/status-bar/i18n.en.json
+++ b/src/status-bar/i18n.en.json
@@ -1,10 +1,12 @@
 {
     "hubInfo": {
+        "title": "Connected hub",
         "connectedTo": "Connected to:",
         "hubType": "Hub type:",
         "firmware": "Firmware:"
     },
     "battery": {
+        "title": "Battery",
         "low": "Battery is low. Hub will turn off soon.",
         "ok": "Battery level is OK."
     }
diff --git a/src/status-bar/i18n.ts b/src/status-bar/i18n.ts
index 48076c76..5abced99 100644
--- a/src/status-bar/i18n.ts
+++ b/src/status-bar/i18n.ts
@@ -4,8 +4,10 @@
 // Status bar translation keys.
 
 export enum MessageId {
+    BatteryTitle = 'battery.title',
     BatteryLow = 'battery.low',
     BatteryOk = 'battery.ok',
+    HubInfoTitle = 'hubInfo.title',
     HubInfoConnectedTo = 'hubInfo.connectedTo',
     HubInfoHubType = 'hubInfo.hubType',
     HubInfoFirmware = 'hubInfo.firmware',