diff --git a/apps/messages/ChangeLog b/apps/messages/ChangeLog index 74a77a0a1..b37919e4f 100644 --- a/apps/messages/ChangeLog +++ b/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) diff --git a/apps/messages/README.md b/apps/messages/README.md index 23f9ba5c1..d3d55f95c 100644 --- a/apps/messages/README.md +++ b/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_ diff --git a/apps/messages/app.js b/apps/messages/app.js index d475be9c1..f06edfd5e 100644 --- a/apps/messages/app.js +++ b/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=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"}) + ]; } diff --git a/apps/messages/metadata.json b/apps/messages/metadata.json index 3c96df021..7b6141cae 100644 --- a/apps/messages/metadata.json +++ b/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",