Skip to content

Features/customisable notification template #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Features/customisable notification template #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2375325
Customisable notification template
Aug 22, 2019
dc63ebf
Document customisable template feature
Aug 22, 2019
e9f4c6c
Custom templates documentation tweaks
Aug 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,13 +103,33 @@ Add these two lines to the layout template:
@include('nova::partials.user')
</dropdown>

@include('nova_notification_feed::notification_feed') <!-- AND THIS LINE HERE -->
@include('nova_notification_feed::notification_feed') <!-- AND THIS LINE HERE OR INCLUDE YOUR CUSTOM PARTIAL INSTEAD -->

...
```

You should now be able to see the notification bell on the top right of your Nova UI.

## Custom template
Sometimes the default notification template does not meet your requirements. In that case you can create your own partial with your own template
```
// file: resources/views/custom-nova-notification-feed.blade.php

<notification-feed>
<template v-slot="{ notification }">
<notification-message :notification="notification" inline-template>
<a class="notification table mt-4 table-fixed w-full" :href="notification.data.url">
<div class="table-cell w-full">
<p v-html="notification.data.message"></p>
<span class="text-sm text-70">@{{ notification.created_at | fromNow }}</span>
</div>
</a>
</notification-message>
</template>
</notification-feed>

```

## Usage

To broadcast notifications to your notification feed in the Nova app, you can make a notification class that sends notifications via `database` and `broadcast`. Here is an example notification class:
Expand Down
1,299 changes: 1,298 additions & 1 deletion dist/js/notification_feed.js
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions resources/js/components/NotificationFeed.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
@showUnreadNotificationCount="showUnreadNotificationCount"
@incrementUnreadCount="incrementUnreadCount"
v-bind:broadcast-on="this.broadcastOn">
<template v-slot="{ notification }">
<slot :notification="notification"></slot>
</template>
</notifications-panel>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions resources/js/components/NotificationsPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
Close
</div>
</div>
<div class="px-4 border-b border-80 overflow-y-scroll h-full">
<div class="px-4 border-b border-80 overflow-y-auto h-full">
<div v-for="notification in notifications">
<notification-message :notification="notification"></notification-message>
<slot :notification="notification"></slot>
</div>
<infinite-loading @infinite="getNotifications"></infinite-loading>
</div>
Expand Down