Skip to content
This repository was archived by the owner on Aug 7, 2020. It is now read-only.

feat(oui-navbar): add placeholder for notification #199

Merged
merged 2 commits into from
Jun 13, 2018
Merged

feat(oui-navbar): add placeholder for notification #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f359c7
feat(oui-navbar): add placeholder for notification
JDownloader Jun 8, 2018
cf20401
refactor(oui-navbar): modify class for notification
JDownloader Jun 12, 2018
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
24 changes: 24 additions & 0 deletions packages/oui-navbar/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,30 @@ The property `name` **must be** `"notifications"`.

If `footerTemplate` is defined, `footerTitle` and `footerUrl` are not used.

#### Placeholder for notification
In the notification submenu, a placeholder is shown depending if there's no notification or if variable `subLinks` is not defined inside an `aside-links`.
```javascript
// Something went wong with the notification
subLinks = undefined;
// No notification
subLinks = [];
```
```html:preview
<div class="oui-doc-preview-only-keep-children" style="margin-bottom: 15px;">
<oui-navbar
brand="$ctrl.brand"
active-link="lorem"
aside-links="$ctrl.placeholderNotification"
toggler-links="$ctrl.togglerLinks">
</oui-navbar>
</div>
<oui-radio-toggle-group id="xxxxx" model="$ctrl.placeholderNotification[0].subLinks">
<oui-radio text="Error in notification" value="null"></oui-radio>
<oui-radio text="No notification" value="[]" default></oui-radio>
</oui-radio-toggle-group>
```


##### Example

```json
Expand Down
16 changes: 12 additions & 4 deletions packages/oui-navbar/src/index.spec.data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
"url": "#/",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum faucibus ante, sed ullamcorper quam pretium ut. Donec et eros at nisi egestas scelerisque quis id erat. Cras suscipit diam id lorem congue aliquam. Integer ornare urna vel turpis blandit, mattis placerat est dictum. Etiam porta venenatis odio tristique condimentum."
}, {
"subject": "Duis placerat lacus at nibh fringilla",
"subject": "Duis placerat lacus at nibh fringil",
"time": "February 21",
"level": "success",
"url": "#/",
Expand All @@ -72,9 +72,9 @@
}, {
"subject": "Mauris ipsum",
"time": "February 22, 2017",
"level": "error",
"level": "incident",
"url": "#/",
"description": "Duis placerat lacus at nibh fringilla, at ultrices nunc suscipit."
"description": "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis."
}
],
"limitTo": 10,
Expand Down Expand Up @@ -400,5 +400,13 @@
"url": "#!/oui-angular/navbar",
"isPrimary": false
}
]
],
"placeholderNotification": [{
"name": "notifications",
"class": "navbar-notification__list",
"title": "Notifications",
"iconClass": "oui-icon oui-icon-info_circle",
"subLinks": null,
"limitTo": 10
}]
}
40 changes: 39 additions & 1 deletion packages/oui-navbar/src/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,14 @@ <h3 class="oui-navbar-menu__title" ng-bind="::asideLink.headerTitle || asideLink
ng-class="!!subLink.isActive ? 'oui-navbar-menu__item_active' : null"
oui-navbar-group="{{::asideLink.name}}">
<i class="oui-icon oui-icon_bicolor oui-navbar-notification__icon"
ng-class=":: 'oui-icon-' + subLink.level + '_circle'"
ng-class=":: {
'oui-icon_bicolor': subLink.level !== 'incident',
'oui-icon-error_circle': subLink.level === 'error',
'oui-icon-success_circle': subLink.level === 'success',
'oui-icon-info_circle': subLink.level === 'info',
'oui-icon-warning_circle': subLink.level === 'warning',
'oui-icon-clock-wait': subLink.level === 'incident'
}"
aria-hidden="true">
</i>
<a class="oui-navbar-notification__content"
Expand All @@ -133,6 +140,37 @@ <h3 class="oui-navbar-menu__title" ng-bind="::asideLink.headerTitle || asideLink
aria-hidden="true"></i>
</button>
</li>
<li class="oui-navbar-menu__item oui-navbar-notification oui-navbar-notification-placeholder"
ng-if="asideLink.subLinks.length === 0"
oui-navbar-group="{{::asideLink.name}}">
<div class="oui-navbar-notification-placeholder__content">
<i class="oui-icon oui-icon_bicolor oui-icon-success_circle oui-navbar-notification__icon"
aria-hidden="true">
</i>
<div>
<div class="oui-navbar-notification-placeholder__title"
ng-bind="$ctrl.config.translations.notification.noNotification"></div>
<div class="oui-navbar-notification-placeholder__description"
ng-bind="$ctrl.config.translations.notification.noNotificationDescription"></div>
</div>

</div>
</li>
<li class="oui-navbar-menu__item oui-navbar-notification oui-navbar-notification-placeholder"
ng-if="!asideLink.subLinks"
oui-navbar-group="{{::asideLink.name}}">
<div class="oui-navbar-notification-placeholder__content">
<i class="oui-icon oui-icon_bicolor oui-icon-error_circle oui-navbar-notification__icon"
aria-hidden="true">
</i>
<div>
<div class="oui-navbar-notification-placeholder__title"
ng-bind="$ctrl.config.translations.notification.errorInNotification"></div>
<div class="oui-navbar-notification-placeholder__description"
ng-bind="$ctrl.config.translations.notification.errorInNotificationDescription"></div>
</div>
</div>
</li>
</ul>
<footer class="oui-navbar-menu__footer"
ng-if="::!asideLink.footerTemplate && !!asideLink.footerTitle">
Expand Down
6 changes: 5 additions & 1 deletion packages/oui-navbar/src/navbar.provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,12 @@ export default class {
constructor () {
this.translations = {
notification: {
errorInNotification: "Oups, there’s an error!",
errorInNotificationDescription: "We can’t initialize the menu.",
markRead: "Mark as read",
markUnread: "Mark as unread"
markUnread: "Mark as unread",
noNotification: "You are all caught up!",
noNotificationDescription: "You don't have any notification."
}
};
}
Expand Down