@startinblox/component-notifications v1.0.1

Solid Notifications

solid-notifications is a component that displays all elements of an inbox, i.e. a notification container.

When the user clicks one of the notifications, a 'navigate' event is triggered with the object of the notification given as the resource parameter.

The component listens to 'read' events. These events details contain a resource. When such an event is triggered, it sets all notifications with that resource as read, and saves these notifications back to the container. To send an event, you can dispatch it like this:

window.dispatchEvent(new CustomEvent('read', {detail: {resource: resource}}))

Usage

In your template, insert the following line where you want to display the component.

<solid-notifications bind-user nested-field="inbox"></solid-notifications>

If you want to use the bind-user attribute, do not forget to use sib-oidc for authentication.

Parameters

Routing

To redirect to specific pages when you click on a notification, you should:

1. Choose a route to be the default view for a resource type. To do this, add the attribute rdf-type to a solid-route (ex: <solid-route name="project" rdf-type="doap:project"></solid-route>)
2. Add an extra-context to the sib-conversation component, so it can understands the rdf_type you used before.

For more informations, please see the example at index.html

Template

You can customize the template of a notification based on its object type. To do this, use the solid-notifications-template component, and set the data-rdf-type attribute:

<solid-notifications-template
  data-rdf-type="hd:circle"
>
  <template>
    <!-- your template -->
  </template>
</solid-notifications-template>

For each notification with an object of type hd:circle, this template will be used.

The following variables are available in your template:

• summary: summary of the notification
• date: formatted date of the notification
• object: Proxy of the object of the notification (needs await keyword to access its properties)
• author: Proxy of the author of the notification (needs await keyword to access its properties)
• unread: boolean which indicates if the notification is unread/read

For example, your template can look like this:

<solid-notifications-template
  data-rdf-type="hd:circle"
>
  <template>
    <div class="solid-notification__avatar">
      <img src="${await author['account.picture']}">
    </div>
    <div class="solid-notification__content">
      <div class="solid-notification__title">${await author.name} in the circle #${await object.name}</div>
      <p class="solid-notification__summary">${summary}</p>
      <div class="solid-notification__date">${date}</div>
    </div>
  </template>
</solid-notifications-template>

The default notification template is:

<div class="solid-notification__avatar">
  <img src="[author.account.picture]">
</div>
<div class="solid-notification__content">
  <solid-display class="solid-notification__title">[notification.object.name]</solid-display>
  <p class="solid-notification__summary">[notification.summary]</p>
  <div class="solid-notification__date">[notification.date]</div>
</div>

Design

To customize your component, you can set the css variable --solid-notifications-theme anywhere in your stylesheet to the color you want. For example:

:root{
  --solid-notifications-theme: #ffd759;
}

Solid Badge

solid-badge is a component that displays the number of unread notifications in the inbox of the logged in user related to a resource or a container.

As it uses the bind-user, you have to make sure to include a valid sib-auth configuration.

Usage

In your template, insert the following line where you want to display the component.

<solid-badge data-src="http://server/resourceId"></solid-badge>

Parameters

You can combine the data-src, data-type and data-rdf-type attributes to filter a specific kind of notification. For example, this will count the unread notification of the circle-1, for user additions:

<solid-badge data-src="http://server/circle/1" data-type="New User"></solid-badge>

Design

To customize your component, you can set the css variable --solid-badge-theme anywhere in your stylesheet to the color you want. For example:

:root{
  --solid-badge-theme: #ffd759;
}