Msg center to pageTop.

src/app/theme/index.ts

@@ -1 +1,2 @@
 export * from './pageTop';
+export * from './msgCenter';

src/app/theme/msgCenter/index.ts

@@ -0,0 +1 @@
+export * from './msgCenter.component';

src/app/theme/msgCenter/msgCenter.component.ts

@@ -0,0 +1,8 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+@Component({
+    selector: 'msg-center',
+    styles: [ require('./msgCenter.scss') ],
+    template: require('./msgCenter.html')
+})
+export class MsgCenter {}

src/app/theme/msgCenter/msgCenter.html

@@ -0,0 +1,53 @@
+<ul class="al-msg-center clearfix">
+  <li class="dropdown">
+    <a href class="dropdown-toggle" id="msg-dd1" data-toggle="dropdown" aria-expanded="false">
+      <i class="fa fa-bell-o"></i><span>5</span>
+
+      <div class="notification-ring"></div>
+    </a>
+
+    <div class="top-dropdown-menu dropdown-menu" aria-labelledby="msg-dd1">
+      <i class="dropdown-arr"></i>
+
+      <div class="header clearfix">
+        <strong>Notifications</strong>
+        <a href>Mark All as Read</a>
+        <a href>Settings</a>
+      </div>
+      <div class="msg-list">
+        <!--<a href class="clearfix" ng-repeat="msg in notifications">-->
+          <!--<div class="img-area"><img ng-class="{'photo-msg-item' : !msg.image}" ng-src="{{::( msg.image ||  (users[msg.userId].name | profilePicture) )}}"></div>-->
+          <!--<div class="msg-area">-->
+            <!--<div ng-bind-html="getMessage(msg)"></div>-->
+            <!--<span>{{ msg.time }}</span>-->
+          <!--</div>-->
+        <!--</a>-->
+      </div>
+      <a href>See all notifications</a>
+    </div>
+  </li>
+  <li class="dropdown">
+    <a href class="msg dropdown-toggle" id="msg-dd2" data-toggle="dropdown" aria-expanded="false">
+      <i class="fa fa-envelope-o"></i><span>5</span>
+      <div class="notification-ring"></div>
+    </a>
+    <div class="top-dropdown-menu dropdown-menu" aria-labelledby="msg-dd2">
+      <i class="dropdown-arr"></i>
+      <div class="header clearfix">
+        <strong>Messages</strong>
+        <a href>Mark All as Read</a>
+        <a href>Settings</a>
+      </div>
+      <div class="msg-list">
+        <!--<a href class="clearfix" ng-repeat="msg in messages">-->
+          <!--<div class="img-area"><img class="photo-msg-item" ng-src="{{::( users[msg.userId].name | profilePicture )}}"></div>-->
+          <!--<div class="msg-area">-->
+            <!--<div>{{ msg.text }}</div>-->
+            <!--<span>{{ msg.time }}</span>-->
+          <!--</div>-->
+        <!--</a>-->
+      </div>
+      <a href>See all messages</a>
+    </div>
+  </li>
+</ul>

src/app/theme/msgCenter/msgCenter.scss

@@ -0,0 +1,263 @@
+@import '../sass/conf/conf';
+
+/* msg center */
+@-webkit-keyframes pulsate {
+  30% {
+    -webkit-transform: scale(0.1, 0.1);
+    opacity: 0.0;
+  }
+  35% {
+    opacity: 1.0;
+  }
+  40% {
+    -webkit-transform: scale(1.2, 1.2);
+    opacity: 0.0;
+  }
+}
+
+.al-msg-center {
+  float: right;
+  padding: 0;
+  list-style: none;
+  margin: 13px 47px 0 0;
+
+  li {
+    list-style: none;
+    float: left;
+    margin-left: 30px;
+    &:first-child {
+      margin-left: 0;
+    }
+    & > a {
+      color: #ffffff;
+      text-decoration: none;
+      font-size: 13px;
+      position: relative;
+      span {
+        display: inline-block;
+        min-width: 10px;
+        padding: 2px 4px 2px 4px;
+        color: #ffffff;
+        vertical-align: baseline;
+        white-space: nowrap;
+        text-align: center;
+        border-radius: 13px;
+        text-shadow: none;
+        line-height: 11px;
+        background-color: $danger;
+        position: absolute;
+        top: -5px;
+        right: -14px;
+        font-size: 11px;
+      }
+      .notification-ring {
+        border: 1px solid $danger;
+        border-radius: 100px;
+        height: 40px;
+        width: 40px;
+        position: absolute;
+        top: -18px;
+        right: -27px;
+        animation: pulsate 8s ease-out;
+        animation-iteration-count: infinite;
+        opacity: 0.0
+      }
+
+      &:hover {
+        color: $danger;
+        &.msg {
+          color: $primary;
+        }
+      }
+      &.msg {
+        span {
+          background-color: $primary;
+        }
+        .notification-ring {
+          border-color: $primary;
+        }
+      }
+    }
+    &.open {
+      & > a {
+        color: $danger;
+        &.msg {
+          color: $primary;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: $resXXS) {
+  .al-msg-center {
+    margin-right: 20px;
+    li {
+      margin-left: 20px;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.msg-block-header {
+  display: inline-block;
+  padding: 0;
+  font-size: 13px;
+  margin: 0 0 0 6px;
+}
+
+.top-dropdown-menu {
+  width: 316px;
+  left: auto;
+  right: -47px;
+  top: 26px;
+  @include scrollbars(.4em, rgba(0,0,0,0.5), #fff);
+  .header {
+    padding: 10px 12px;
+    border-bottom: 1px solid $border-light;
+    font-size: 12px;
+    strong {
+      float: left;
+    }
+    & > a {
+      float: right;
+      margin-left: 12px;
+      text-decoration: none;
+      &:hover {
+        color: $default-text;
+      }
+    }
+  }
+  .msg-list {
+    max-height: 296px;
+    overflow: scroll;
+    overflow-x: hidden;
+    & > a {
+      border-top: 1px solid $border-light;
+      padding: 10px 12px;
+      display: block;
+      text-decoration: none;
+      color: $default-text;
+      font-size: 12px;
+      &:first-child {
+        border-top: none;
+      }
+      .img-area {
+        float: left;
+        width: 36px;
+        img {
+          width: 36px;
+          height: 36px;
+          &.photo-msg-item{
+            border-radius: 18px;
+          }
+        }
+        & > div {
+          width: 36px;
+          height: 36px;
+          border-radius: 4px;
+          font-size: 24px;
+          text-align: center;
+          &.comments {
+            color: $warning;
+          }
+          &.orders {
+            color: $warning;
+          }
+          i {
+            width: 36px;
+            line-height: 36px;
+          }
+        }
+      }
+      .msg-area {
+        float: right;
+        width: 230px;
+        div {
+          max-height: 34px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        span {
+          font-style: italic;
+          text-align: right;
+          display: block;
+          font-size: 11px;
+        }
+      }
+      &:hover {
+        background: #E2F0FF;
+      }
+    }
+  }
+  & > a {
+    border-top: 1px solid $border-light;
+    display: block;
+    text-align: center;
+    padding: 10px;
+    font-size: 12px;
+    text-decoration: none;
+    &:hover {
+      color: $default-text;
+    }
+  }
+
+  &.profile-dropdown {
+    width: 145px;
+    top: 55px;
+    right: -25px;
+    a {
+      text-align: left;
+      border: none;
+      text-decoration: none;
+      color: $default-text;
+      padding: 4px 16px 4px 20px;
+      &.signout {
+        border-top: 1px solid $border-light;
+      }
+      i {
+        margin-right: 10px;
+      }
+      &:hover {
+        background: #f4fcff;
+      }
+    }
+    i.dropdown-arr {
+      right: 25px;
+    }
+  }
+
+  i.dropdown-arr {
+    position: absolute;
+    top: -22px;
+    right: 42px;
+    display: block;
+    width: 0;
+    height: 0;
+    border: 11px solid transparent;
+    border-bottom-color: rgba(0, 0, 0, .15);
+    &:after {
+      top: -9px;
+      left: 0px;
+      margin-left: -10px;
+      content: " ";
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+      border: 10px solid transparent;
+      border-bottom-color: #ffffff;
+    }
+  }
+}
+
+@media (max-width: 415px) {
+  .top-dropdown-menu {
+    right: -81px;
+    i.dropdown-arr {
+      right: 75px;
+    }
+  }
+}

src/app/theme/pageTop/pageTop.component.ts

@@ -1,8 +1,11 @@
 import {Component, ViewEncapsulation} from 'angular2/core';
 
+import {MsgCenter} from '../msgCenter';
+
 @Component({
     selector: 'page-top',
     styles: [ require('./pageTop.scss') ],
-    template: require('./pageTop.html')
+    template: require('./pageTop.html'),
+    directives: [MsgCenter]
 })
 export class PageTop {}

src/app/theme/pageTop/pageTop.html

@@ -10,7 +10,7 @@
     <div class="user-profile clearfix">
         <div class="dropdown al-user-profile">
             <a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" data-toggle="dropdown" aria-expanded="false">
-                Dropdown
+                <img src="http://akveo.com/blur-admin/assets/img/app/profile/Nasta.png">
             </a>
             <div class="dropdown-menu top-dropdown-menu profile-dropdown" aria-labelledby="user-profile-dd">
                 <li class="dropdown-item"><i class="dropdown-arr"></i></li>

src/app/theme/pageTop/pageTop.scss

@@ -1,4 +1,5 @@
 @import '../sass/conf/conf';
+@import '../msgCenter/msgCenter';
 
 .page-top {
   @include bg-translucent-dark(0.5);