Skip to content

Commit

Permalink
feature(notifications): Added positionX and positionY to `notific…
Browse files Browse the repository at this point in the history 
…ation-count` + `rtl` support. (#248)

* positionX and positionY implementation in notification-count.component

* Added code blocks for position inputs and methods

* updated docs and README

* adding different demo usages and code examples for notifications

* replace left/right with before/after and ltr/rtl support

* updated unit tests with position (notifications)

* fix lint issues

* docs corrected

* set specific height and width depending on font-size for icons

* remove css override for md-icon-button
  • Loading branch information
@emoralesb05
emoralesb05 authored Jan 14, 2017
1 parent 88be8c3 commit 8015a67
Show file tree
Hide file tree
Showing 11 changed files with 514 additions and 114 deletions.
340 changes: 258 additions & 82 deletions src/app/components/components/notifications/notifications.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,266 @@
<md-card>
<md-card-title>Notifications</md-card-title>
<md-card-subtitle>Notifications count &amp; menu for toolbar</md-card-subtitle>
<md-card-subtitle>Notification count &amp; menu for toolbar</md-card-subtitle>
<md-divider></md-divider>
<md-card-content>
<p>Typical usage in a toolbar:</p>
<md-toolbar color="accent">
<button md-icon-button>
<md-icon>menu</md-icon>
</button>
<span>Toolbar</span>
<span flex></span>
<td-search-box placeholder="Search" [alwaysVisible]="false" flex></td-search-box>
<td-notification-count color="primary" [notifications]="true">
<md-icon>person</md-icon>
</td-notification-count>
<button md-icon-button [mdMenuTriggerFor]="notificationsMenu">
<td-notification-count [notifications]="101">
<md-icon>notifications</md-icon>
</td-notification-count>
</button>
<md-menu #notificationsMenu="mdMenu">
<td-menu>
<div td-menu-header class="md-subhead">Notifications</div>
<md-nav-list dense>
<template let-last="last" ngFor [ngForOf]="[0,1,2,3,4,5,6,7,8,9]">
<a md-list-item>
<md-icon md-list-avatar>today</md-icon>
<h4 md-line><span class="text-wrap">A user did an activity on an item that you've subscribed to follow actions on.</span></h4>
<p md-line>22 minutes ago</p>
</a>
<md-divider *ngIf="!last"></md-divider>
</template>
</md-nav-list>
<button md-button color="accent" td-menu-footer>
See All Notifications
<h3 class="md-title">Toolbar notification &amp; menu</h3>
<md-tab-group md-stretch-tabs>
<md-tab>
<template md-tab-label>Demo</template>
<md-toolbar color="accent">
<button md-icon-button>
<md-icon>menu</md-icon>
</button>
</td-menu>
</md-menu>
<button md-icon-button [mdMenuTriggerFor]="toolbarMenu1"><md-icon>more_vert</md-icon></button>
<md-menu #toolbarMenu1="mdMenu">
<button md-menu-item>
<md-icon>settings</md-icon>
<span>Settings</span>
</button>
<button md-menu-item>
<md-icon>exit_to_app</md-icon>
<span>Sign out</span>
</button>
</md-menu>
</md-toolbar>
<div layout="row">
<div layout="column" class="bgc-grey-300">
<button md-icon-button [mdMenuTriggerFor]="notificationsMenu">
<td-notification-count color="primary" [notifications]="12">
<md-icon>message</md-icon>
<span>Toolbar</span>
<td-search-box placeholder="Search" [alwaysVisible]="false" flex></td-search-box>
<td-notification-count color="primary" positionX="before" [notifications]="true">
<md-icon>person</md-icon>
</td-notification-count>
</button>
<td-notification-count color="accent" [notifications]="true">
<md-icon>people</md-icon>
</td-notification-count>
<button md-icon-button>
<td-notification-count [notifications]="0">
<md-icon>notifications</md-icon>
</td-notification-count>
</button>
</div>
<md-nav-list dense flex>
<a md-list-item>
<md-icon md-list-avatar>person</md-icon>
<h3 md-line> Jyn Erso stole the plans to the Death Star </h3>
<p md-line> 10 mins ago </p>
<span></span>
<td-notification-count color="accent" [notifications]="1">
<td-notification-count color="primary" [notifications]="false">
<md-icon>messages</md-icon>
</td-notification-count>
</a>
<md-divider md-inset></md-divider>
<a md-list-item>
<md-icon md-list-avatar>person</md-icon>
<h3 md-line> Chirrut Îmwe beat down a bunch of storm troopers with a stick </h3>
<p md-line> 2 days ago </p>
<span></span>
<td-notification-count [notifications]="true">
</td-notification-count>
</a>
</md-nav-list>
</div>
<button md-icon-button [mdMenuTriggerFor]="notificationsMenu">
<td-notification-count [notifications]="101">
<md-icon>notifications</md-icon>
</td-notification-count>
</button>
<md-menu #notificationsMenu="mdMenu">
<td-menu>
<div td-menu-header class="md-subhead">Notifications</div>
<md-nav-list dense>
<template let-last="last" ngFor [ngForOf]="[0,1,2,3,4,5,6,7,8,9]">
<a md-list-item>
<md-icon md-list-avatar>today</md-icon>
<h4 md-line><span class="text-wrap">A user did an activity on an item that you've subscribed to follow actions on.</span></h4>
<p md-line>22 minutes ago</p>
</a>
<md-divider *ngIf="!last"></md-divider>
</template>
</md-nav-list>
<button md-button color="accent" td-menu-footer>
See All Notifications
</button>
</td-menu>
</md-menu>
<button md-icon-button [mdMenuTriggerFor]="toolbarMenu1"><md-icon>more_vert</md-icon></button>
<md-menu #toolbarMenu1="mdMenu">
<button md-menu-item>
<md-icon>settings</md-icon>
<span>Settings</span>
</button>
<button md-menu-item>
<md-icon>exit_to_app</md-icon>
<span>Sign out</span>
</button>
</md-menu>
</md-toolbar>
</md-tab>
<md-tab>
<template md-tab-label>Code</template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<md-toolbar color="accent">
<button md-icon-button>
<md-icon>menu</md-icon>
</button>
<span>Toolbar</span>
<td-search-box placeholder="Search" [alwaysVisible]="false" flex></td-search-box>
<td-notification-count color="primary" positionX="before" [notifications]="true">
<md-icon>person</md-icon>
</td-notification-count>
<td-notification-count color="primary" [notifications]="false">
<md-icon>messages</md-icon>
</td-notification-count>
<button md-icon-button [mdMenuTriggerFor]="notificationsMenu">
<td-notification-count [notifications]="101">
<md-icon>notifications</md-icon>
</td-notification-count>
</button>
<md-menu #notificationsMenu="mdMenu">
<td-menu>
<div td-menu-header class="md-subhead">Notifications</div>
<md-nav-list dense>
<template let-last="last" ngFor [ngForOf]="[0,1,2,3,4,5,6,7,8,9]">
<a md-list-item>
<md-icon md-list-avatar>today</md-icon>
<h4 md-line><span class="text-wrap">A user did an activity on an item that you've subscribed to follow actions on.</span></h4>
<p md-line>22 minutes ago</p>
</a>
<md-divider *ngIf="!last"></md-divider>
</template>
</md-nav-list>
<button md-button color="accent" td-menu-footer>
See All Notifications
</button>
</td-menu>
</md-menu>
<button md-icon-button [mdMenuTriggerFor]="toolbarMenu1"><md-icon>more_vert</md-icon></button>
<md-menu #toolbarMenu1="mdMenu">
<button md-menu-item>
<md-icon>settings</md-icon>
<span>Settings</span>
</button>
<button md-menu-item>
<md-icon>exit_to_app</md-icon>
<span>Sign out</span>
</button>
</md-menu>
</md-toolbar>
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card>
<md-card>
<md-card-content>
<h3 class="md-title">Tabs notification</h3>
<md-tab-group md-stretch-tabs>
<md-tab>
<template md-tab-label>Demo</template>
<md-tab-group md-stretch-tabs>
<md-tab>
<template md-tab-label>
<div layout="row" layout-align="center center">
Activities
<td-notification-count color="primary" [notifications]="true">
</td-notification-count>
</div>
</template>
</md-tab>
<md-tab>
<template md-tab-label>
<div layout="row" layout-align="center center">
Logs
<td-notification-count color="warn" [notifications]="0">
</td-notification-count>
</div>
</template>
</md-tab>
<md-tab>
<template md-tab-label>
<div layout="row" layout-align="center center">
Chats
<td-notification-count color="accent" [notifications]="12">
</td-notification-count>
</div>
</template>
</md-tab>
</md-tab-group>
</md-tab>
<md-tab>
<template md-tab-label>Code</template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<md-tab-group md-stretch-tabs>
<md-tab>
<template md-tab-label>
<div layout="row" layout-align="center center">
Activities
<td-notification-count color="primary" [notifications]="true">
</td-notification-count>
</div>
</template>
</md-tab>
<md-tab>
<template md-tab-label>
<div layout="row" layout-align="center center">
Logs
<td-notification-count color="warn" [notifications]="0">
</td-notification-count>
</div>
</template>
</md-tab>
<md-tab>
<template md-tab-label>
<div layout="row" layout-align="center center">
Chats
<td-notification-count color="accent" [notifications]="12">
</td-notification-count>
</div>
</template>
</md-tab>
</md-tab-group>
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card>
<md-card>
<md-card-content>
<h3 class="md-title">List item notification</h3>
<md-tab-group md-stretch-tabs>
<md-tab>
<template md-tab-label>Demo</template>
<md-nav-list dense flex>
<a md-list-item>
<md-icon md-list-avatar>person</md-icon>
<h3 md-line> Jyn Erso stole the plans to the Death Star </h3>
<p md-line> 10 mins ago </p>
<span></span>
<td-notification-count color="accent" [notifications]="1">
</td-notification-count>
</a>
<md-divider md-inset></md-divider>
<a md-list-item>
<md-icon md-list-avatar>person</md-icon>
<h3 md-line> Something something something.. dark side. </h3>
<p md-line> 9 hours ago </p>
<span></span>
<td-notification-count color="primary" [notifications]="0">
</td-notification-count>
</a>
<md-divider md-inset></md-divider>
<a md-list-item>
<md-icon md-list-avatar>person</md-icon>
<h3 md-line> Chirrut Îmwe beat down a bunch of storm troopers with a stick </h3>
<p md-line> 2 days ago </p>
<span></span>
<td-notification-count [notifications]="true">
</td-notification-count>
</a>
</md-nav-list>
</md-tab>
<md-tab>
<template md-tab-label>Code</template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<md-nav-list dense flex>
<a md-list-item>
<md-icon md-list-avatar>person</md-icon>
<h3 md-line> Jyn Erso stole the plans to the Death Star </h3>
<p md-line> 10 mins ago </p>
<span></span>
<td-notification-count color="accent" [notifications]="1">
</td-notification-count>
</a>
<md-divider md-inset></md-divider>
<a md-list-item>
<md-icon md-list-avatar>person</md-icon>
<h3 md-line> Something something something.. dark side. </h3>
<p md-line> 9 hours ago </p>
<span></span>
<td-notification-count color="primary" [notifications]="0">
</td-notification-count>
</a>
<md-divider md-inset></md-divider>
<a md-list-item>
<md-icon md-list-avatar>person</md-icon>
<h3 md-line> Chirrut Îmwe beat down a bunch of storm troopers with a stick </h3>
<p md-line> 2 days ago </p>
<span></span>
<td-notification-count [notifications]="true">
</td-notification-count>
</a>
</md-nav-list>
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card>
<md-card>
Expand All @@ -108,8 +284,8 @@ <h3>Example:</h3>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<button md-icon-button [mdMenuTriggerFor]="notificationsMenu">
<td-notification-count color="accent" [notifications]="notificationCount">
<button md-icon-button (click)="notificationCount = 0" [mdMenuTriggerFor]="notificationsMenu">
<td-notification-count color="accent" positionY="top" positionX="after" [notifications]="notificationCount">
<md-icon>notifications</md-icon>
</td-notification-count>
</button>
Expand Down
14 changes: 12 additions & 2 deletions src/app/components/components/notifications/notifications.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,24 @@ export class NotificationsDemoComponent {

notificationsAttrs: Object[] = [{
description: `Number for the notification count.
Shows number if the input is a positive number or its no count state if boolean 'true'`,
Shows number if the input is a positive number; shows no count state if boolean is "true"`,
name: 'notifications',
type: 'number | boolean',
}, {
description: `Sets the theme color of the notification tip.
Defaults to 'warn'`,
Defaults to "warn"`,
name: 'color',
type: '"primary" | "accent" | "warn"',
}, {
description: `Sets the X position of the notification tip.
Defaults to "after" if it has content, else "center"`,
name: 'positionX',
type: 'TdNotificationCountPositionX or "before" | "after" | "center"',
}, {
description: `Sets the Y position of the notification tip.
Defaults to "top" if it has content, else "center"`,
name: 'positionY',
type: 'TdNotificationCountPositionY or "top" | "bottom" | "center"',
}];

}
Loading

0 comments on commit 8015a67

Please sign in to comment.