feature(notifications): initial notifications module. (closes #148)

[emoralesb05]

Description

Introducing new core submodule notifications module. (CovalentNotificationsModule) #148

Adding core submodule menu for internal usage.

<td-notification-count>

Use element to show number of notifications.

Properties:

Usage

  <td-notification-count color="primary | accent | warn" [notifications]="boolean | number">
     ... // could be an icon <md-icon>notifications</md-icon> or empty
  </td-notification-count>

Test Steps

• ng serve
• Go to http://localhost:4200/#/components/notifications
• See docs and demo.
• npm run test
• npm run tslint
• npm run build

Screenshots or link to CodePen/Plunker/JSfiddle

[kyleledbetter]

pushed updates

[emoralesb05]

• Created inner td-menu (composition vs inheritance) for better layout inside md-menu

     <md-menu #notificationsMenu="mdMenu">
        <td-menu>
          <div td-menu-header class="md-title pad-sm text-center">Notifications</div>
          <md-nav-list dense>
            <template let-last="last" ngFor [ngForOf]="[0,1,2,3,4]">
              <a md-list-item>
                <md-icon md-list-avatar>today</md-icon>
                <h3 md-line>Example notification here.</h3>
                <p md-line>Action</p>
                <span>23m</span>
              </a>
              <md-divider md-inset *ngIf="!last"></md-divider>
            </template>
          </md-nav-list>
          <button td-menu-footer md-raised-button color="accent">
            See All Notifications
          </button>
        </td-menu>
      </md-menu>

[emoralesb05]

• scss fix for notification-count
• Added more usage cases for notification-count

[emoralesb05]

• Added noCount attribute to show a smaller notification

<td-notification-count color="accent" noCount [notifications]="true">

[richavyas]

observed an issue with search box placeholder Search:
scenario:

• click on search, write some text, close it, click on search sign again and check the search placeholder placement.

[emoralesb05]

Its actually always there, we just hide it when we focus the input. We can revisit this in a different PR or open an issue to check if that is confusing or something.

[richavyas]

I pointed out the placement, not visible/hide. First time when search is clicked, it's placed correctly inside the input box. During second time, the text is shifted upwards.

[emoralesb05]

Cool, could you please open an issue to keep track of it?