mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-28 12:16:10 +01:00
msgCenter -> baMsgCenter
This commit is contained in:
nixa
parent
e125febda6
commit
12a1056c12
9 changed files with 41 additions and 17 deletions
|
|
@ -0,0 +1,23 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import {BaMsgCenterService} from './baMsgCenter.service';
|
||||
import {BaProfilePicturePipe} from '../../pipes';
|
||||
|
||||
@Component({
|
||||
selector: 'msg-center',
|
||||
providers: [BaMsgCenterService],
|
||||
styles: [require('./baMsgCenter.scss')],
|
||||
template: require('./baMsgCenter.html'),
|
||||
pipes: [BaProfilePicturePipe]
|
||||
})
|
||||
export class BaMsgCenter {
|
||||
|
||||
public notifications:Array<Object>;
|
||||
public messages:Array<Object>;
|
||||
|
||||
constructor(private _baMsgCenterService:BaMsgCenterService) {
|
||||
this.notifications = this._baMsgCenterService.getNotifications();
|
||||
this.messages = this._baMsgCenterService.getMessages();
|
||||
}
|
||||
|
||||
}
|
||||
55
src/app/theme/components/baMsgCenter/baMsgCenter.html
Normal file
55
src/app/theme/components/baMsgCenter/baMsgCenter.html
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<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 *ngFor="let msg of notifications" href class="clearfix">
|
||||
<div class="img-area"><img [ngClass]="{'photo-msg-item': !msg.image}"
|
||||
src="{{ ( msg.image || (msg.name | baProfilePicture)) }}"></div>
|
||||
<div class="msg-area">
|
||||
<div>{{ msg.text }}</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 *ngFor="let msg of messages" href class="clearfix">
|
||||
<div class="img-area"><img [ngClass]="{'photo-msg-item': !msg.image}"
|
||||
src="{{ ( msg.image || (msg.name | baProfilePicture)) }}"></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>
|
||||
264
src/app/theme/components/baMsgCenter/baMsgCenter.scss
Normal file
264
src/app/theme/components/baMsgCenter/baMsgCenter.scss
Normal file
|
|
@ -0,0 +1,264 @@
|
|||
@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: $sidebar-text;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
span {
|
||||
display: inline-block;
|
||||
min-width: 10px;
|
||||
padding: 2px 4px 2px 4px;
|
||||
color: $sidebar-text;
|
||||
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 $default;
|
||||
font-size: 12px;
|
||||
strong {
|
||||
float: left;
|
||||
color: $dropdown-text;
|
||||
}
|
||||
& > a {
|
||||
float: right;
|
||||
margin-left: 12px;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $dropdown-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
.msg-list {
|
||||
max-height: 296px;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
& > a {
|
||||
border-top: 1px solid $default;
|
||||
padding: 10px 12px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: $dropdown-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 $default;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $dropdown-text;
|
||||
}
|
||||
}
|
||||
|
||||
&.profile-dropdown {
|
||||
width: 145px;
|
||||
top: 55px;
|
||||
right: -25px;
|
||||
a {
|
||||
text-align: left;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
color: $dropdown-text;
|
||||
padding: 4px 16px 4px 20px;
|
||||
&.signout {
|
||||
border-top: 1px solid $default;
|
||||
}
|
||||
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: $default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 415px) {
|
||||
.top-dropdown-menu {
|
||||
right: -81px;
|
||||
i.dropdown-arr {
|
||||
right: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
89
src/app/theme/components/baMsgCenter/baMsgCenter.service.ts
Normal file
89
src/app/theme/components/baMsgCenter/baMsgCenter.service.ts
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import {Injectable} from '@angular/core'
|
||||
|
||||
@Injectable()
|
||||
export class BaMsgCenterService {
|
||||
|
||||
private _notifications = [
|
||||
{
|
||||
name: 'Vlad',
|
||||
text: 'Vlad posted a new article.',
|
||||
time: '1 min ago'
|
||||
},
|
||||
{
|
||||
name: 'Kostya',
|
||||
text: 'Kostya changed his contact information.',
|
||||
time: '2 hrs ago'
|
||||
},
|
||||
{
|
||||
image: 'assets/img/shopping-cart.svg',
|
||||
text: 'New orders received.',
|
||||
time: '5 hrs ago'
|
||||
},
|
||||
{
|
||||
name: 'Andrey',
|
||||
text: 'Andrey replied to your comment.',
|
||||
time: '1 day ago'
|
||||
},
|
||||
{
|
||||
name: 'Nasta',
|
||||
text: 'Today is Nasta\'s birthday.',
|
||||
time: '2 days ago'
|
||||
},
|
||||
{
|
||||
image: 'assets/img/comments.svg',
|
||||
text: 'New comments on your post.',
|
||||
time: '3 days ago'
|
||||
},
|
||||
{
|
||||
name: 'Kostya',
|
||||
text: 'Kostya invited you to join the event.',
|
||||
time: '1 week ago'
|
||||
}
|
||||
];
|
||||
|
||||
private _messages = [
|
||||
{
|
||||
name: 'Nasta',
|
||||
text: 'After you get up and running, you can place Font Awesome icons just about...',
|
||||
time: '1 min ago'
|
||||
},
|
||||
{
|
||||
name: 'Vlad',
|
||||
text: 'You asked, Font Awesome delivers with 40 shiny new icons in version 4.2.',
|
||||
time: '2 hrs ago'
|
||||
},
|
||||
{
|
||||
name: 'Kostya',
|
||||
text: 'Want to request new icons? Here\'s how. Need vectors or want to use on the...',
|
||||
time: '10 hrs ago'
|
||||
},
|
||||
{
|
||||
name: 'Andrey',
|
||||
text: 'Explore your passions and discover new ones by getting involved. Stretch your...',
|
||||
time: '1 day ago'
|
||||
},
|
||||
{
|
||||
name: 'Nasta',
|
||||
text: 'Get to know who we are - from the inside out. From our history and culture, to the...',
|
||||
time: '1 day ago'
|
||||
},
|
||||
{
|
||||
name: 'Kostya',
|
||||
text: 'Need some support to reach your goals? Apply for scholarships across a variety of...',
|
||||
time: '2 days ago'
|
||||
},
|
||||
{
|
||||
name: 'Vlad',
|
||||
text: 'Wrap the dropdown\'s trigger and the dropdown menu within .dropdown, or...',
|
||||
time: '1 week ago'
|
||||
}
|
||||
];
|
||||
|
||||
public getMessages():Array<Object> {
|
||||
return this._messages;
|
||||
}
|
||||
|
||||
public getNotifications():Array<Object> {
|
||||
return this._notifications;
|
||||
}
|
||||
}
|
||||
1
src/app/theme/components/baMsgCenter/index.ts
Normal file
1
src/app/theme/components/baMsgCenter/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './baMsgCenter.component.ts';
|
||||
Loading…
Add table
Add a link
Reference in a new issue