Commit 8cef1445 authored by Matthieu Fesselier's avatar Matthieu Fesselier

Merge branch 'feature/sib-badge' into 'master'

feature: sib-badge

See merge request !12
parents b5a26094 bcd09cbc
Pipeline #3704 passed with stage
in 28 seconds
......@@ -34,4 +34,26 @@ For example:
:root{
--sib-notifications-theme: #ffd759;
}
```
# SiB Badge
sib-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.
```html
<sib-badge data-src="http://server/resourceId"></sib-badge>
```
### Design
To customize your component, you can set the css variable `--sib-badge-theme` anywhere in your stylesheet to the color you want.
For example:
```css
:root{
--sib-badge-theme: #ffd759;
}
```
\ No newline at end of file
sib-badge{
box-sizing: border-box;
font-family: sans-serif;
font-size: 13px;
}
sib-badge .counter{
display: block;
background-color: var(--sib-badge-theme, gray);
border-radius: 50%;
line-height: 25px;
width: 25px;
height: 25px;
text-align: center;
font-weight: bold;
}
sib-badge .counter[data-nb-unread="0"]{
display: none;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<title>SIB Badge - Demo</title>
<script type="module" src="../index.js"></script>
<script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
<style>
:root{
--sib-badge-theme: #ffd759;
}
</style>
</head>
<body>
<h1>SIB Badge - demo</h1>
<p>Number of notifications related to conversation 7</p>
<sib-badge data-src="http://127.0.0.1:8000/conversations/7/"></sib-badge>
</body>
</html>
......@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<title>SIB Notifications - Demo</title>
<script type="module" src="../sib-notifications.js"></script>
<script type="module" src="../index.js"></script>
<script type="module" src="https://unpkg.com/@startinblox/oidc@latest"></script>
<sib-auth>
......
......@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<title>SIB Notifications - Demo</title>
<script type="module" src="../sib-notifications.js"></script>
<script type="module" src="../index.js"></script>
<script type="module" src="https://unpkg.com/@startinblox/oidc@latest"></script>
<sib-auth>
......
......@@ -17,11 +17,15 @@
</head>
<body>
<h1>SIB Notifications - Demo</h1>
<h2>Examples</h2>
<h1>Demo</h1>
<h2>SIB Notifications</h2>
<ul>
<li><a href="examples/notifications.html">notifications</a></li>
<li><a href="examples/notifications-routing.html">notifications-routing</a></li>
</ul>
<h2>SIB Badge</h2>
<ul>
<li><a href="examples/badge.html">badge</a></li>
</ul>
</body>
</html>
import SIBNotifications from './sib-notifications.js';
import SIBBadge from './sib-badge.js';
export {
SIBNotifications,
SIBBadge
}
\ No newline at end of file
......@@ -2,7 +2,7 @@
"name": "@startinblox/component-notifications",
"version": "0.1.0",
"description": "Notifications component for startinblox",
"main": "sib-notifications.js",
"main": "index.js",
"repository": {
"type": "git",
"url": "git@git.happy-dev.fr:startinblox/framework/sib-notifications.git"
......
import { SIBTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core@0.7';
const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
Helpers.importCSS(`${base_url}/css/badge.css`)
class SIBBadge extends SIBTemplateElement {
static get propsDefinition() {
return {
dataSrc: 'data-src',
idSuffix: 'id-suffix'
}
}
template({ dataSrc, idSuffix }) {
if (dataSrc) {
let sourceUrl = dataSrc + (idSuffix ? idSuffix + '/' : '')
return `
<sib-display
bind-user
data-fields
search-fields="unread, object"
search-value-unread="true"
search-value-object="${sourceUrl}"
search-widget-unread="sib-form-hidden"
search-widget-object="sib-form-hidden"
counter-template="<div class='counter' data-nb-unread='\${counter}'>\${counter}</div>"
></sib-display>
`;
}
return '';
}
}
customElements.define('sib-badge', SIBBadge);
export default SIBBadge;
\ No newline at end of file
......@@ -167,4 +167,5 @@ class SIBNotifications extends SIBTemplateElement {
}
}
customElements.define('sib-notifications', SIBNotifications);
\ No newline at end of file
customElements.define('sib-notifications', SIBNotifications);
export default SIBNotifications;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment