Define a template based on rdf:type of notification
Update: spec edited the 11/06/20 - 18:30
In Hubl, we want the notifications to look like this: https://projects.invisionapp.com/share/VEWRR0679ZA#/screens/412676803_Notification_Pop_Up
It means that we should be able to create a template depending on what type of notification we want to display.
We can create a new component which registers a template related to a type on the notification component:
<sib-notifications-template
data-rdf-type="hd:circle"
data-notification-type="Mention"
>
<template>
<div>
<img src="${await author.avatar}" />
</div>
<div>
<p>${await author.name} in ${await object.name}</p>
<p>${summary}</p>
</div>
</template>
</sib-notifications-template>
A default template can be:
<template>
<div>
<!-- no image -->
</div>
<div>
<p>${await object.name}</p>
<p>${summary}</p>
</div>
</template>
An agnostic default template will be provided by sib-notifications
.
The following variables would be available to use in the template
author: Proxy of the author resource
object: Proxy of the object resource
summary: content of the notification
date: formatted date of the notification
unread: boolean which says if a notification is read
Then, the notification component is responsible for rendering the right template for each notification.
sib-notification
provide some classes by default for the general layout of the template (image on the left, one title, one subtitle)
Today, it uses SibTemplateElement
. It should probably migrate to use the Mixin API, which can allow to take advantage of some mixins (probably ListMixin
and StoreMixin
)
The read/unread tick stays defined by the notification component, and cannot be overriden.
@sylvain @balessan @alexbourlier @jbpasquier what do you think?