diff options
author | Florian Dold <florian.dold@gmail.com> | 2017-12-12 16:39:55 +0100 |
---|---|---|
committer | Florian Dold <florian.dold@gmail.com> | 2017-12-12 16:39:55 +0100 |
commit | b5a4bcb247ec94ee99ca83c068d660574a36a0d7 (patch) | |
tree | b6fe2b9aebc35f342f730a776ec9a50eb480caa6 /src/webex | |
parent | 1bcc5022c27fff2c28c38b3db12ac353cc7d3481 (diff) |
show notification dot when balance changes (#5214)
Diffstat (limited to 'src/webex')
-rw-r--r-- | src/webex/chromeBadge.ts | 37 | ||||
-rw-r--r-- | src/webex/messages.ts | 4 | ||||
-rw-r--r-- | src/webex/pages/popup.tsx | 3 | ||||
-rw-r--r-- | src/webex/wxApi.ts | 4 | ||||
-rw-r--r-- | src/webex/wxBackend.ts | 20 |
5 files changed, 68 insertions, 0 deletions
diff --git a/src/webex/chromeBadge.ts b/src/webex/chromeBadge.ts index 13add9b3f..3dfe94518 100644 --- a/src/webex/chromeBadge.ts +++ b/src/webex/chromeBadge.ts @@ -63,6 +63,11 @@ export class ChromeBadge implements Badge { private gapWidth: number = 0; /** + * Should we show the notification dot? + */ + private hasNotification = false; + + /** * Maximum value for our rotationAngle, corresponds to 2 Pi. */ static rotationAngleMax = 1000; @@ -150,6 +155,21 @@ export class ChromeBadge implements Badge { // go back to the origin this.ctx.translate(-this.canvas.width / 2, -this.canvas.height / 2); + if (this.hasNotification) { + // We draw a circle with a soft border in the + // lower right corner. + const r = 8; + const cw = this.canvas.width; + const ch = this.canvas.height; + this.ctx.beginPath(); + this.ctx.arc(cw - r, ch - r, r, 0, 2 * Math.PI, false); + const gradient = this.ctx.createRadialGradient(cw - r, ch - r, r, cw - r, ch - r, 5); + gradient.addColorStop(0, "rgba(255, 255, 255, 1)"); + gradient.addColorStop(1, "blue"); + this.ctx.fillStyle = gradient; + this.ctx.fill(); + } + // Allow running outside the extension for testing // tslint:disable-next-line:no-string-literal if (window["chrome"] && window.chrome["browserAction"]) { @@ -211,6 +231,23 @@ export class ChromeBadge implements Badge { rAF(step); } + /** + * Draw the badge such that it shows the + * user that something happened (balance changed). + */ + showNotification() { + this.hasNotification = true; + this.draw(); + } + + /** + * Draw the badge without the notification mark. + */ + clearNotification() { + this.hasNotification = false; + this.draw(); + } + startBusy() { if (this.isBusy) { return; diff --git a/src/webex/messages.ts b/src/webex/messages.ts index 7cc6c4259..44c9f166c 100644 --- a/src/webex/messages.ts +++ b/src/webex/messages.ts @@ -208,6 +208,10 @@ export interface MessageMap { request: types.TipStatusRequest; response: void; }; + "clear-notification": { + request: { }; + response: void; + }; } /** diff --git a/src/webex/pages/popup.tsx b/src/webex/pages/popup.tsx index 389be3b5c..6d1ff3b2b 100644 --- a/src/webex/pages/popup.tsx +++ b/src/webex/pages/popup.tsx @@ -566,4 +566,7 @@ const el = ( document.addEventListener("DOMContentLoaded", () => { ReactDOM.render(el, document.getElementById("content")!); + // Will be used by the backend to detect when the popup gets closed, + // so we can clear notifications + chrome.runtime.connect({name: "popup"}); }); diff --git a/src/webex/wxApi.ts b/src/webex/wxApi.ts index 61a45c024..2575eec90 100644 --- a/src/webex/wxApi.ts +++ b/src/webex/wxApi.ts @@ -381,3 +381,7 @@ export function acceptTip(merchantDomain: string, tipId: string): Promise<TipSta export function processTipResponse(merchantDomain: string, tipId: string, tipResponse: TipResponse): Promise<void> { return callBackend("process-tip-response", { merchantDomain, tipId, tipResponse }); } + +export function clearNotification(): Promise<void> { + return callBackend("clear-notification", { }); +} diff --git a/src/webex/wxBackend.ts b/src/webex/wxBackend.ts index a7757c68e..a804c73d1 100644 --- a/src/webex/wxBackend.ts +++ b/src/webex/wxBackend.ts @@ -337,6 +337,9 @@ function handleMessage(sender: MessageSender, const req = GetTipPlanchetsRequest.checked(detail); return needsWallet().getTipPlanchets(req.merchantDomain, req.tipId, req.amount, req.deadline, req.exchangeUrl, req.nextUrl); } + case "clear-notification": { + return needsWallet().clearNotification(); + } default: // Exhaustiveness check. // See https://www.typescriptlang.org/docs/handbook/advanced-types.html @@ -698,6 +701,23 @@ export async function wxMain() { }); + + // Clear notifications both when the popop opens, + // as well when it closes. + chrome.runtime.onConnect.addListener((port) => { + if (port.name == "popup") { + if (currentWallet) { + currentWallet.clearNotification(); + } + port.onDisconnect.addListener(() => { + if (currentWallet) { + currentWallet.clearNotification(); + } + }); + } + }); + + // Handlers for catching HTTP requests chrome.webRequest.onHeadersReceived.addListener((details) => { const wallet = currentWallet; |