diff options
Diffstat (limited to 'ui/src')
-rw-r--r-- | ui/src/components/navbar.tsx | 48 | ||||
-rw-r--r-- | ui/src/utils.ts | 24 |
2 files changed, 62 insertions, 10 deletions
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: [ |