diff --git a/README.md b/README.md index c639b8cc9b2b0cdccb9f7d903cbb195d09b99d91..e0efe71bbfb7dbaa092af9746e63cef145db8660 100644 --- a/README.md +++ b/README.md @@ -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 + +``` + +### 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 diff --git a/css/badge.css b/css/badge.css new file mode 100644 index 0000000000000000000000000000000000000000..5b99f1ee074f9568a4083088adc1a2d015075a2e --- /dev/null +++ b/css/badge.css @@ -0,0 +1,20 @@ +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 diff --git a/examples/badge.html b/examples/badge.html new file mode 100644 index 0000000000000000000000000000000000000000..fa292fcc2320ae0b96e58d7f80661dbd05edd5da --- /dev/null +++ b/examples/badge.html @@ -0,0 +1,21 @@ + + + + + + SIB Badge - Demo + + + + + + +

SIB Badge - demo

+

Number of notifications related to conversation 7

+ + + diff --git a/examples/notifications-routing.html b/examples/notifications-routing.html index 3353e509282a40dbc0a79132fd8725b7a75fa07c..1f4c5a2b4ebce2fc633023190ead34e7f0283c9e 100644 --- a/examples/notifications-routing.html +++ b/examples/notifications-routing.html @@ -4,7 +4,7 @@ SIB Notifications - Demo - + diff --git a/examples/notifications.html b/examples/notifications.html index aa797039fa8df3e46e738cf27672b3ba283cd694..f4526c72bed57dce56cd0f196679b825f673223a 100644 --- a/examples/notifications.html +++ b/examples/notifications.html @@ -4,7 +4,7 @@ SIB Notifications - Demo - + diff --git a/index.html b/index.html index a351b6fc62cf8222a91e15fc2416c157b3c190ef..7067027a0b8ebf69a0baa5bb4e73d4c73979ccd1 100644 --- a/index.html +++ b/index.html @@ -17,11 +17,15 @@ -

SIB Notifications - Demo

-

Examples

+

Demo

+

SIB Notifications

+

SIB Badge

+ diff --git a/index.js b/index.js new file mode 100644 index 0000000000000000000000000000000000000000..3089ff98d6ac51fa9739ab89fceca9c0980df8d9 --- /dev/null +++ b/index.js @@ -0,0 +1,7 @@ +import SIBNotifications from './sib-notifications.js'; +import SIBBadge from './sib-badge.js'; + +export { + SIBNotifications, + SIBBadge +} \ No newline at end of file diff --git a/package.json b/package.json index 317809d6c01f24c60221c2047124fbd38cbd483f..aba71e5cec26d418ccd45afd9ec4552f2763b5ea 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/sib-badge.js b/sib-badge.js new file mode 100644 index 0000000000000000000000000000000000000000..3632dcdbb483d5ceff10d81ad2c60aa386faa453 --- /dev/null +++ b/sib-badge.js @@ -0,0 +1,35 @@ +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 ` + + `; + } + return ''; + } +} + +customElements.define('sib-badge', SIBBadge); +export default SIBBadge; \ No newline at end of file diff --git a/sib-notifications.js b/sib-notifications.js index ebe5dc3c77369dea7abfb633c161f08746adf481..6d915dbcfa9fecfa6e58d86aba9a93d3897edcc7 100644 --- a/sib-notifications.js +++ b/sib-notifications.js @@ -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