mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
Msg center to pageTop.
This commit is contained in:
smartapant
parent
af30088daf
commit
112d9be673
8 changed files with 332 additions and 2 deletions
|
|
@ -1 +1,2 @@
|
|||
export * from './pageTop';
|
||||
export * from './msgCenter';
|
||||
|
|
|
|||
1
src/app/theme/msgCenter/index.ts
Normal file
1
src/app/theme/msgCenter/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './msgCenter.component';
|
||||
8
src/app/theme/msgCenter/msgCenter.component.ts
Normal file
8
src/app/theme/msgCenter/msgCenter.component.ts
Normal file
|
|
@ -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 {}
|
||||
53
src/app/theme/msgCenter/msgCenter.html
Normal file
53
src/app/theme/msgCenter/msgCenter.html
Normal file
|
|
@ -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>
|
||||
263
src/app/theme/msgCenter/msgCenter.scss
Normal file
263
src/app/theme/msgCenter/msgCenter.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import '../sass/conf/conf';
|
||||
@import '../msgCenter/msgCenter';
|
||||
|
||||
.page-top {
|
||||
@include bg-translucent-dark(0.5);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue