0.20: If message doesn't fit, allow tapping on the body to show a scrollable

view of the message and title in a bigger font (fix #1405, #1031)

apps/messages/ChangeLog

@@ -29,3 +29,5 @@
       Back button now goes back to list of messages
       If showMessage called with no message (eg all messages deleted) now return to the clock (fix #1267)
 0.19: Use a larger font for message text if it'll fit
+0.20: If message doesn't fit, allow tapping on the body to show a scrollable
+      view of the message and title in a bigger font (fix #1405, #1031)

apps/messages/README.md

@@ -26,19 +26,15 @@ When a new message is received:
 
 When a message is shown, you'll see a screen showing the message title and text.
 
-### Android
-
-* The 'back-arrow' button goes back to Messages, marking the current message as read.
-* If shown, the 'tick' button opens the notification on the phone
-* If shown, the 'cross' button dismisses the notification on the phone
-* The top-left icon shows more options, for instance deleting the message of marking unread
-
-### iOS
-
-* The 'back-arrow' button goes back to Messages, marking the current message as read.
-* If shown, the 'tick' button responds positively to the notification (accept call/etc)
-* If shown, the 'cross' button responds negatively to the notification (dismiss call/etc)
+* The 'back-arrow' button (or physical button on Bangle.js 2) goes back to Messages, marking the current message as read.
 * The top-left icon shows more options, for instance deleting the message of marking unread
+* If the message text doesn't fit in, you can tap on the message to view a scrollable version of the title and text
+* If shown, the 'tick' button:
+   * **Android** opens the notification on the phone
+   * **iOS** responds positively to the notification (accept call/etc)
+* If shown, the 'cross' button:
+   * **Android** dismisses the notification on the phone
+   * **iOS** responds negatively to the notification (dismiss call/etc)
 
 ## Images
 _1. Screenshot of a notification_

apps/messages/app.js

@@ -198,9 +198,37 @@ function showMusicMessage(msg) {
   layout.render();
 }
 
+function showMessageScroller(msg) {
+  var bodyFont = fontBig;
+  g.setFont(bodyFont);
+  var lines = [];
+  if (msg.title) lines = g.wrapString(msg.title, g.getWidth()-10)
+  var titleCnt = lines.length;
+  lines = lines.concat(g.wrapString(msg.body, g.getWidth()-10),["",/*LANG*/"< Back"]);
+  E.showScroller({
+    h : g.getFontHeight(), // height of each menu item in pixels
+    c : lines.length, // number of menu items
+    // a function to draw a menu item
+    draw : function(idx, r) {
+      g.setBgColor(idx<titleCnt ? colBg : g.theme.bg).clearRect(r);
+      g.setFont(bodyFont).drawString(lines[idx], r.x, r.y);
+    }, select : function(idx) {
+      if (idx>=lines.length-2)
+        showMessage(msg.id);
+    }
+  });
+  // ensure button-press on Bangle.js 2 takes us back
+  if (process.env.HWVERSION>1) Bangle.btnWatches = [
+    setWatch(() => showMessage(msg.id), BTN1, {repeat:1,edge:"falling"})
+  ];
+}
+
 function showMessageSettings(msg) {
   E.showMenu({"":{"title":/*LANG*/"Message"},
     "< Back" : () => showMessage(msg.id),
+    /*LANG*/"View Message" : () => {
+      showMessageScroller(msg);
+    },
     /*LANG*/"Delete" : () => {
       MESSAGES = MESSAGES.filter(m=>m.id!=msg.id);
       saveMessages();
@@ -245,12 +273,13 @@ function showMessage(msgid) {
       title = (lines.length>2) ? lines.slice(0,2).join("\n")+"..." : lines.join("\n");
     }
   }
+  function goBack() {
+    msg.new = false; saveMessages(); // read mail
+    cancelReloadTimeout(); // don't auto-reload to clock now
+    checkMessages({clockIfNoMsg:1,clockIfAllRead:0,showMsgIfUnread:0});
+  }
   var buttons = [
-    {type:"btn", src:getBackImage(), cb:()=>{
-      msg.new = false; saveMessages(); // read mail
-      cancelReloadTimeout(); // don't auto-reload to clock now
-      checkMessages({clockIfNoMsg:1,clockIfAllRead:0,showMsgIfUnread:0});
-    }} // back
+    {type:"btn", src:getBackImage(), cb:goBack} // back
   ];
   if (msg.positive) {
     buttons.push({fillx:1});
@@ -271,17 +300,18 @@ function showMessage(msgid) {
     }});
   }
   // If body of message is only two lines long w/ large font, use large font.
-  var body=msg.body, bodyFont = fontLarge, lines;
+  var body=msg.body, bodyFont = fontLarge, lines, bodyScroll = false;
   if (body) {
     var w = g.getWidth()-48;
     if (g.setFont(bodyFont).stringWidth(body) > w * 2)
       bodyFont = fontMedium;
     if (g.setFont(bodyFont).stringWidth(body) > w) {
       lines = g.setFont(bodyFont).wrapString(msg.body, g.getWidth()-10);
-      body = (lines.length>4) ? lines.slice(0,4).join("\n")+"..." : lines.join("\n");
+      bodyScroll = lines.length>4;
+      body = bodyScroll ? lines.slice(0,4).join("\n")+"..." : lines.join("\n");
     }
   }
-     
+
   layout = new Layout({ type:"v", c: [
     {type:"h", fillx:1, bgCol:colBg,  c: [
       { type:"btn", src:getMessageImage(msg), col:getMessageImageCol(msg), pad: 3, cb:()=>{
@@ -293,11 +323,18 @@ function showMessage(msgid) {
         title?{type:"txt", font:titleFont, label:title, bgCol:colBg, fillx:1, pad:2 }:{},
       ]},
     ]},
-    {type:"txt", font:bodyFont, label:body, fillx:1, filly:1, pad:2 },
+    {type:"txt", font:bodyFont, label:body, fillx:1, filly:1, pad:2, cb:()=>{
+      // if the text was cropped, allow tapping to show a larger version
+      if (bodyScroll) showMessageScroller(msg);
+    } },
     {type:"h",fillx:1, c: buttons}
   ]});
   g.clearRect(Bangle.appRect);
   layout.render();
+  // ensure button-press on Bangle.js 2 takes us back
+  if (process.env.HWVERSION>1) Bangle.btnWatches = [
+    setWatch(goBack, BTN1, {repeat:1,edge:"falling"})
+  ];
 }
 
 

apps/messages/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "messages",
   "name": "Messages",
-  "version": "0.19",
+  "version": "0.20",
   "description": "App to display notifications from iOS and Gadgetbridge",
   "icon": "app.png",
   "type": "app",