-
Notifications
You must be signed in to change notification settings - Fork 358
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
…213) * initial notificaiton-count component and notifications module * update(notifications): styles & docs * pushing scenario usages for notification count * added color input for `warn` `primary` and `accent` notification count * updated docs and demo with color * created menu submodule * first try with inner `td-menu` for better md-menu layout * fixed scss for a more flexible usage * added more scenarios for notification-count * update(menu): add dividers * update(menu): list styles * update(notification): explicit colors * update(notifications): smaller * update(docs): notifications example * update(home): add notifications * added noCount and showNoCount for notifications without a known number * make noCount an attribute input * removed [showNoCount] so component is shown when there is a positive input in [notifications] (true or > 1) * update(docs): notification examples * update(menu): limit styles just to menu * updated docs and added docblocks * added README.md for notifications module * changes notifications type to number | boolean * removed noCount attribute and just check [notifications] type (boolean or number) * updated README.md and docs with removal of `noCount` * fixed readme setup in notifications module * initial unit tests for notification-count component * fixed lint issues * renamed script show-coverage-win to coverage-win
- Loading branch information
1 parent
3eb3638
commit 746fe3c
Showing
22 changed files
with
721 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
160 changes: 160 additions & 0 deletions
160
src/app/components/components/notifications/notifications.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| <md-card> | ||
| <md-card-title>Notifications</md-card-title> | ||
| <md-card-subtitle>Notifications count & 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 | ||
| </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> | ||
| </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> | ||
| </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> | ||
| </md-card-content> | ||
| </md-card> | ||
| <md-card> | ||
| <md-card-title>TdNotificationCountComponent</md-card-title> | ||
| <md-card-subtitle>How to use this component</md-card-subtitle> | ||
| <md-divider></md-divider> | ||
| <md-card-content> | ||
| <p>Use <code><![CDATA[<td-notification-count>]]></code> element to show number of notifications.</p> | ||
| <h3>Properties:</h3> | ||
| <p>The <code><![CDATA[<td-notification-count>]]></code> component has {{notificationsAttrs.length}} properties:</p> | ||
| <md-list> | ||
| <template let-attr let-last="attr" ngFor [ngForOf]="notificationsAttrs"> | ||
| <a md-list-item layout-align="row"> | ||
| <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3> | ||
| <p md-line> {{attr.description}} </p> | ||
| </a> | ||
| <md-divider *ngIf="!last"></md-divider> | ||
| </template> | ||
| </md-list> | ||
| <h3>Example:</h3> | ||
| <p>HTML:</p> | ||
| <td-highlight lang="html"> | ||
| <![CDATA[ | ||
| <button md-icon-button [mdMenuTriggerFor]="notificationsMenu"> | ||
| <td-notification-count color="accent" [notifications]="notificationCount"> | ||
| <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> | ||
| ]]> | ||
| </td-highlight> | ||
| <p>Typescript:</p> | ||
| <td-highlight lang="typescript"> | ||
| <![CDATA[ | ||
| export class Demo { | ||
| notificationCount: number = 100; | ||
| } | ||
| ]]> | ||
| </td-highlight> | ||
| <h3>Setup:</h3> | ||
| <p>Import the [CovalentNotificationsModule] using the <code>forRoot()</code> method in your NgModule:</p> | ||
| <td-highlight lang="typescript"> | ||
| <![CDATA[ | ||
| import { CovalentNotificationsModule } from '@covalent/core'; | ||
| @NgModule({ | ||
| imports: [ | ||
| CovalentNotificationsModule.forRoot(), // or CovalentCoreModule.forRoot() (included inside of it) | ||
| ... | ||
| ], | ||
| ... | ||
| }) | ||
| export class MyModule {} | ||
| ]]> | ||
| </td-highlight> | ||
| </md-card-content> | ||
| </md-card> |
Empty file.
22 changes: 22 additions & 0 deletions
22
src/app/components/components/notifications/notifications.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'notifications-demo', | ||
| styleUrls: ['./notifications.component.scss'], | ||
| templateUrl: './notifications.component.html', | ||
| }) | ||
| 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'`, | ||
| name: 'notifications', | ||
| type: 'number | boolean', | ||
| }, { | ||
| description: `Sets the theme color of the notification tip. | ||
| Defaults to 'warn'`, | ||
| name: 'color', | ||
| type: '"primary" | "accent" | "warn"', | ||
| }]; | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <div layout="column"> | ||
| <ng-content select="[td-menu-header]"></ng-content> | ||
| <md-divider></md-divider> | ||
| <div class="td-menu-content"> | ||
| <ng-content></ng-content> | ||
| </div> | ||
| <md-divider></md-divider> | ||
| <ng-content select="[td-menu-footer]"></ng-content> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| $td-menu-spacing: 8px !default; | ||
| :host { | ||
| display: block; | ||
| margin-top: -$td-menu-spacing; | ||
| margin-bottom: -$td-menu-spacing; | ||
| } | ||
| :host /deep/ { | ||
| [td-menu-header] { | ||
| padding: $td-menu-spacing; | ||
| text-align: center; | ||
| } | ||
| md-list, | ||
| md-list[dense], | ||
| md-nav-list, | ||
| md-nav-list[dense], { | ||
| a[md-list-item].md-2-line .md-list-item, | ||
| md-list-item.md-2-line .md-list-item { | ||
| height: auto; | ||
| padding: $td-menu-spacing; | ||
| .md-list-text { | ||
| padding-right: 0px; | ||
| } | ||
| [md-line] + [md-line] { | ||
| margin-top: $td-menu-spacing / 2; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| .td-menu-content { | ||
| max-height: calc(50vh); | ||
| overflow-y: auto; | ||
| } |
Oops, something went wrong.