diff options
author | Dessalines <tyhou13@gmx.com> | 2020-03-20 16:13:54 -0400 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2020-03-20 16:13:54 -0400 |
commit | 522649d9d3c21c15cb00740fb8c86a51a64468a4 (patch) | |
tree | 358394402647682fa2c055f760215a62e9329edb | |
parent | b3066db08b2c71b882f03228fd280a236c19eeef (diff) |
Notification improvements.
- Adding a navbar notification icon for mobile.
- Adding an in-app notification toast. To be improved later.
- Fixes #607
-rw-r--r-- | docs/src/about_goals.md | 2 | ||||
-rw-r--r-- | ui/.eslintrc.json | 1 | ||||
-rw-r--r-- | ui/src/components/navbar.tsx | 48 | ||||
-rw-r--r-- | ui/src/utils.ts | 24 |
4 files changed, 65 insertions, 10 deletions
diff --git a/docs/src/about_goals.md b/docs/src/about_goals.md index 1463eeb0..0d666f4f 100644 --- a/docs/src/about_goals.md +++ b/docs/src/about_goals.md @@ -47,3 +47,5 @@ - https://docs.rs/activitypub/0.1.4/activitypub/ - [Activitypub vocab.](https://www.w3.org/TR/activitystreams-vocabulary/) - [Activitypub main](https://www.w3.org/TR/activitypub/) +- [Federation.md](https://github.com/dariusk/gathio/blob/7fc93dbe9d4d99457a0e85c6c532112f415b7af2/FEDERATION.md) +- [Activitypub implementers guide](https://socialhub.activitypub.rocks/t/draft-guide-for-new-activitypub-implementers/479) diff --git a/ui/.eslintrc.json b/ui/.eslintrc.json index bee9e538..a4aecfa0 100644 --- a/ui/.eslintrc.json +++ b/ui/.eslintrc.json @@ -38,6 +38,7 @@ "inferno/no-direct-mutation-state": 0, "inferno/no-unknown-property": 0, "max-statements": 0, + "max-params": 0, "new-cap": 0, "no-console": 0, "no-duplicate-imports": 0, diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index ef3f8430..76930e3b 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -26,6 +26,8 @@ import { fetchLimit, isCommentType, toast, + messageToastify, + md, } from '../utils'; import { version } from '../version'; import { i18n } from '../i18next'; @@ -100,6 +102,22 @@ export class Navbar extends Component<any, NavbarState> { <Link title={version} class="navbar-brand" to="/"> {this.state.siteName} </Link> + {this.state.isLoggedIn && ( + <Link + class="ml-auto navbar-toggler nav-link" + to="/inbox" + title={i18n.t('inbox')} + > + <svg class="icon"> + <use xlinkHref="#icon-bell"></use> + </svg> + {this.state.unreadCount > 0 && ( + <span class="ml-1 badge badge-light"> + {this.state.unreadCount} + </span> + )} + </Link> + )} <button class="navbar-toggler" type="button" @@ -350,21 +368,33 @@ export class Navbar extends Component<any, NavbarState> { } notify(reply: Comment | PrivateMessage) { + let creator_name = reply.creator_name; + let creator_avatar = reply.creator_avatar + ? reply.creator_avatar + : `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`; + let link = isCommentType(reply) + ? `/post/${reply.post_id}/comment/${reply.id}` + : `/inbox`; + let body = md.render(reply.content); + + messageToastify( + creator_name, + creator_avatar, + body, + link, + this.context.router + ); + if (Notification.permission !== 'granted') Notification.requestPermission(); else { var notification = new Notification(reply.creator_name, { - icon: reply.creator_avatar - ? reply.creator_avatar - : `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`, - body: `${reply.content}`, + icon: creator_avatar, + body: body, }); notification.onclick = () => { - this.context.router.history.push( - isCommentType(reply) - ? `/post/${reply.post_id}/comment/${reply.id}` - : `/inbox` - ); + event.preventDefault(); + this.context.router.history.push(link); }; } } diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 89fbe51c..cab1fd5b 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -218,7 +218,7 @@ export function validURL(str: string) { } export function validEmail(email: string) { - let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + let re = /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/; return re.test(String(email).toLowerCase()); } @@ -436,6 +436,28 @@ export function toast(text: string, background: string = 'success') { }).showToast(); } +export function messageToastify( + creator: string, + avatar: string, + body: string, + link: string, + router: any +) { + let backgroundColor = `var(--light)`; + Toastify({ + text: `${body}<br />${creator}`, + avatar: avatar, + backgroundColor: backgroundColor, + close: true, + gravity: 'top', + position: 'right', + duration: 0, + onClick: () => { + router.history.push(link); + }, + }).showToast(); +} + export function setupTribute(): Tribute { return new Tribute({ collection: [ |