From 92a5acdbca1633e4ff12fef863673369dcdd6c9c Mon Sep 17 00:00:00 2001
From: Gordon Williams <gw@pur3.co.uk>
Date: Fri, 28 Apr 2023 09:58:39 +0100
Subject: [PATCH] Add more tooltips, allow sorting by Clock Info

---
 README.md    |  2 +-
 android.html | 49 +++++++++++++++++++++++++------------------------
 core         |  2 +-
 css/main.css | 13 +++++++++++++
 index.html   | 49 +++++++++++++++++++++++++------------------------
 5 files changed, 65 insertions(+), 50 deletions(-)

diff --git a/README.md b/README.md
index aa8afdbca..6ad899421 100644
--- a/README.md
+++ b/README.md
@@ -277,7 +277,7 @@ and which gives information about the app for the Launcher.
                               //   'game' - a game
                               //   'bluetooth' - uses Bluetooth LE
                               //   'system' - used by the system
-                              //   'clkinfo' - provides or uses clock_info module for data on your clock face (see modules/clock_info.js)
+                              //   'clkinfo' - provides or uses clock_info module for data on your clock face or clocks that support it (see apps/clock_info/README.md)
   "supports": ["BANGLEJS2"],  // List of device IDs supported, either BANGLEJS or BANGLEJS2
   "dependencies" : { "notify":"type" } // optional, app 'types' we depend on (see "type" above)
   "dependencies" : { "messages":"app" } // optional, depend on a specific app ID
diff --git a/android.html b/android.html
index e11e533b5..3c78f486c 100644
--- a/android.html
+++ b/android.html
@@ -73,25 +73,26 @@
           </ul>
         </div>
         <div class="filter-nav">
-          <label class="chip active" filterid="">Default</label>
-          <label class="chip" filterid="clock">Clocks</label>
-          <label class="chip" filterid="launch">Launchers</label>
-          <label class="chip" filterid="game">Games</label>
-          <label class="chip" filterid="tool">Tools</label>
-          <label class="chip" filterid="textinput">Keyboards</label>
-          <label class="chip" filterid="widget">Widgets</label>
-          <label class="chip" filterid="bluetooth">Bluetooth</label>
-          <label class="chip" filterid="outdoors">Outdoors</label>
-          <label class="chip" filterid="ram">Online</label>
-          <label class="chip" filterid="favourites">Favourites</label>
+          <label class="chip active" filterid="" data-tooltip="Show all apps">All</label>
+          <label class="chip tooltip" filterid="clock" data-tooltip="To tell the time!">Clocks</label>
+          <label class="chip tooltip" filterid="launch" data-tooltip="Choose which apps to launch">Launchers</label>
+          <label class="chip tooltip" filterid="game" data-tooltip="Have fun!">Games</label>
+          <label class="chip tooltip" filterid="tool" data-tooltip="Useful applications">Tools</label>
+          <label class="chip tooltip" filterid="textinput" data-tooltip="To allow you to enter text">Keyboards</label>
+          <label class="chip tooltip" filterid="widget" data-tooltip="Appear in the top bar of Bangle.js apps">Widgets</label>
+          <label class="chip tooltip" filterid="bluetooth" data-tooltip="Using Bluetooth Functionality">Bluetooth</label>
+          <label class="chip tooltip" filterid="outdoors" data-tooltip="For outdoor use">Outdoors</label>
+          <label class="chip tooltip" filterid="ram" data-tooltip="Apps that don't save anything to flash memory">Online</label>
+          <label class="chip tooltip" filterid="clkinfo" data-tooltip="Info displayed on clocks, or clocks with info">Clock Info</label>
+          <label class="chip tooltip" filterid="favourites" data-tooltip="Apps that you've liked ❤️">Favourites</label>
         </div>
         <div class="sort-nav hidden">
           <span>Sort by:</span>
           <label class="chip active" sortid="">None</label>
-          <label class="chip hidden" sortid="created">New</label>
-          <label class="chip hidden" sortid="modified">Updated</label>
-          <label class="chip hidden" sortid="installs">Installed</label>
-          <label class="chip hidden" sortid="favourites">Favourited</label>
+          <label class="chip hidden tooltip" sortid="created"  data-tooltip="Most recent apps">New</label>
+          <label class="chip hidden tooltip" sortid="modified" data-tooltip="Most recently changed">Updated</label>
+          <label class="chip hidden tooltip" sortid="installs" data-tooltip="Most installed by users">Installed</label>
+          <label class="chip hidden tooltip" sortid="favourites" data-tooltip="Most liked by users">Favourited</label>
         </div>
       </div>
 
@@ -132,14 +133,14 @@
         <p>Using <a href="https://espruino.com/" target="_blank">Espruino</a>, Icons from <a href="https://icons8.com/" target="_blank">icons8.com</a></p>
 
         <h3>Utilities</h3>
-        <p><button class="btn" id="settime">Set Bangle.js Time</button>
-           <button class="btn" id="removeall" data-tooltip="Delete everything from your Bangle, leaving it blank">Remove all Apps</button>
-           <button class="btn" id="reinstallall" data-tooltip="Remove and re-install every app, leaving all other data intact">Reinstall apps</button>
-           <button class="btn" id="installdefault">Install default apps</button>
-           <button class="btn" id="installfavourite" data-tooltip="Delete everything, install apps you've marked as favourites">Install favourite apps</button>
-           <button class="btn" id="newGithubIssue" data-tooltip="Create a new issue on github">New issue on github</button></p>
-        <p><button class="btn tooltip tooltip-right" id="downloadallapps" data-tooltip="Download all Bangle.js files to a ZIP file">Backup</button>
-           <button class="btn tooltip tooltip-right" id="uploadallapps" data-tooltip="Restore Bangle.js from a ZIP file">Restore</button></p>
+        <p><button class="btn tooltip" id="settime" data-tooltip="Set the Bangle's time to your Browser's time">Set Bangle.js Time</button>
+           <button class="btn tooltip" id="removeall" data-tooltip="Delete everything, leave it blank">Remove all Apps</button>
+           <button class="btn tooltip" id="reinstallall" data-tooltip="Re-install every app, leave all data">Reinstall apps</button>
+           <button class="btn tooltip" id="installdefault" data-tooltip="Delete everything, install default apps">Install default apps</button>
+           <button class="btn tooltip" id="installfavourite" data-tooltip="Delete everything, install your favourites">Install favourite apps</button>
+           <button class="btn tooltip" id="newGithubIssue" data-tooltip="Create a new issue on GitHub">New issue on GitHub</button></p>
+        <p><button class="btn tooltip" id="downloadallapps" data-tooltip="Download all Bangle.js files to a ZIP file">Backup</button>
+           <button class="btn tooltip" id="uploadallapps" data-tooltip="Restore Bangle.js from a ZIP file">Restore</button></p>
         <h3>Settings</h3>
         <div class="form-group">
           <label class="form-switch">
@@ -164,7 +165,7 @@
             <summary>Advanced Options</summary>
             <label class="form-switch">
               <input type="checkbox" id="settings-minify">
-              <i class="form-icon"></i> Minify apps before upload (DANGER: BETA, not recommended. Uploads smaller, faster apps but this minification <b>will</b> break some apps)
+              <i class="form-icon"></i> Minify apps before upload (⚠️DANGER⚠️: Not recommended. Uploads smaller, faster apps but this <b>will</b> break many apps)
             </label>
             <button class="btn" id="defaultsettings">Reset to default settings</button>
           </details>
diff --git a/core b/core
index 425c4a98a..83d92f217 160000
--- a/core
+++ b/core
@@ -1 +1 @@
-Subproject commit 425c4a98aed7c4d9b640e37463b534a45a20def7
+Subproject commit 83d92f2178901aa3130643e3a580fdda0801f8c1
diff --git a/css/main.css b/css/main.css
index ceb9fcd17..2ea2ab40d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -125,3 +125,16 @@ a.btn.btn-link.dropdown-toggle {
   transform: translate(-50%,-50%);
   content: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg fill='rgb(87, 85, 217)' xmlns='http://www.w3.org/2000/svg' viewBox='2 2 28 28' width='1.5em' height='1.5em'%3E%3Cpath d='M 6 4 C 4.895 4 4 4.895 4 6 L 4 24 C 4 25.105 4.895 26 6 26 L 24 26 C 25.105 26 26 25.105 26 24 L 26 8 L 22 4 L 20 4 L 20 10 C 20 10.552 19.552 11 19 11 L 10 11 C 9.448 11 9 10.552 9 10 L 9 4 L 6 4 z M 16 4 L 16 9 L 18 9 L 18 4 L 16 4 z M 10 16 L 20 16 C 21.105 16 22 16.895 22 18 L 22 24 L 8 24 L 8 18 C 8 16.895 8.895 16 10 16 z'/%3E%3C/svg%3E");
 }
+
+/* https://github.com/picturepan2/spectre/issues/595 */
+.chip.tooltip:hover {
+  overflow: visible;
+  overflow-y: unset;
+}
+
+/* Normally tooltips don't wrap, but if you enable it, then they wrap until they are really thin!
+Not sure how to get 'normal' wrap behaviour (eg fill up until max-width, then wrap) */
+/*.tooltip:hover::after {
+  white-space: normal;
+  min-width: 160px;
+}*/
\ No newline at end of file
diff --git a/index.html b/index.html
index 86763b98c..d7ca4169f 100644
--- a/index.html
+++ b/index.html
@@ -73,25 +73,26 @@
           </ul>
         </div>
         <div class="filter-nav">
-          <label class="chip active" filterid="">Default</label>
-          <label class="chip" filterid="clock">Clocks</label>
-          <label class="chip" filterid="launch">Launchers</label>
-          <label class="chip" filterid="game">Games</label>
-          <label class="chip" filterid="tool">Tools</label>
-          <label class="chip" filterid="textinput">Keyboards</label>
-          <label class="chip" filterid="widget">Widgets</label>
-          <label class="chip" filterid="bluetooth">Bluetooth</label>
-          <label class="chip" filterid="outdoors">Outdoors</label>
-          <label class="chip" filterid="ram">Online</label>
-          <label class="chip" filterid="favourites">Favourites</label>
+          <label class="chip active" filterid="" data-tooltip="Show all apps">All</label>
+          <label class="chip tooltip" filterid="clock" data-tooltip="To tell the time!">Clocks</label>
+          <label class="chip tooltip" filterid="launch" data-tooltip="Choose which apps to launch">Launchers</label>
+          <label class="chip tooltip" filterid="game" data-tooltip="Have fun!">Games</label>
+          <label class="chip tooltip" filterid="tool" data-tooltip="Useful applications">Tools</label>
+          <label class="chip tooltip" filterid="textinput" data-tooltip="To allow you to enter text">Keyboards</label>
+          <label class="chip tooltip" filterid="widget" data-tooltip="Appear in the top bar of Bangle.js apps">Widgets</label>
+          <label class="chip tooltip" filterid="bluetooth" data-tooltip="Using Bluetooth Functionality">Bluetooth</label>
+          <label class="chip tooltip" filterid="outdoors" data-tooltip="For outdoor use">Outdoors</label>
+          <label class="chip tooltip" filterid="ram" data-tooltip="Apps that don't save anything to flash memory">Online</label>
+          <label class="chip tooltip" filterid="clkinfo" data-tooltip="Info displayed on clocks, or clocks with info">Clock Info</label>
+          <label class="chip tooltip" filterid="favourites" data-tooltip="Apps that you've liked ❤️">Favourites</label>
         </div>
         <div class="sort-nav hidden">
           <span>Sort by:</span>
           <label class="chip active" sortid="">None</label>
-          <label class="chip hidden" sortid="created">New</label>
-          <label class="chip hidden" sortid="modified">Updated</label>
-          <label class="chip hidden" sortid="installs">Installed</label>
-          <label class="chip hidden" sortid="favourites">Favourited</label>
+          <label class="chip hidden tooltip" sortid="created"  data-tooltip="Most recent apps">New</label>
+          <label class="chip hidden tooltip" sortid="modified" data-tooltip="Most recently changed">Updated</label>
+          <label class="chip hidden tooltip" sortid="installs" data-tooltip="Most installed by users">Installed</label>
+          <label class="chip hidden tooltip" sortid="favourites" data-tooltip="Most liked by users">Favourited</label>
         </div>
       </div>
 
@@ -132,14 +133,14 @@
         <p>Using <a href="https://espruino.com/" target="_blank">Espruino</a>, Icons from <a href="https://icons8.com/" target="_blank">icons8.com</a></p>
 
         <h3>Utilities</h3>
-        <p><button class="btn" id="settime">Set Bangle.js Time</button>
-           <button class="btn" id="removeall" data-tooltip="Delete everything from your Bangle, leaving it blank">Remove all Apps</button>
-           <button class="btn" id="reinstallall" data-tooltip="Remove and re-install every app, leaving all other data intact">Reinstall apps</button>
-           <button class="btn" id="installdefault">Install default apps</button>
-           <button class="btn" id="installfavourite" data-tooltip="Delete everything, install apps you've marked as favourites">Install favourite apps</button>
-           <button class="btn" id="newGithubIssue" data-tooltip="Create a new issue on github">New issue on github</button></p>
-        <p><button class="btn tooltip tooltip-right" id="downloadallapps" data-tooltip="Download all Bangle.js files to a ZIP file">Backup</button>
-           <button class="btn tooltip tooltip-right" id="uploadallapps" data-tooltip="Restore Bangle.js from a ZIP file">Restore</button></p>
+        <p><button class="btn tooltip" id="settime" data-tooltip="Set the Bangle's time to your Browser's time">Set Bangle.js Time</button>
+           <button class="btn tooltip" id="removeall" data-tooltip="Delete everything, leave it blank">Remove all Apps</button>
+           <button class="btn tooltip" id="reinstallall" data-tooltip="Re-install every app, leave all data">Reinstall apps</button>
+           <button class="btn tooltip" id="installdefault" data-tooltip="Delete everything, install default apps">Install default apps</button>
+           <button class="btn tooltip" id="installfavourite" data-tooltip="Delete everything, install your favourites">Install favourite apps</button>
+           <button class="btn tooltip" id="newGithubIssue" data-tooltip="Create a new issue on GitHub">New issue on GitHub</button></p>
+        <p><button class="btn tooltip" id="downloadallapps" data-tooltip="Download all Bangle.js files to a ZIP file">Backup</button>
+           <button class="btn tooltip" id="uploadallapps" data-tooltip="Restore Bangle.js from a ZIP file">Restore</button></p>
         <h3>Settings</h3>
         <div class="form-group">
           <label class="form-switch">
@@ -168,7 +169,7 @@
             <summary>Advanced Options</summary>
             <label class="form-switch">
               <input type="checkbox" id="settings-minify">
-              <i class="form-icon"></i> Minify apps before upload (DANGER: BETA, not recommended. Uploads smaller, faster apps but this minification <b>will</b> break some apps)
+              <i class="form-icon"></i> Minify apps before upload (⚠️DANGER⚠️: Not recommended. Uploads smaller, faster apps but this <b>will</b> break many apps)
             </label>
             <button class="btn" id="defaultsettings">Reset to default settings</button>
           </details>