Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 16:30:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(dashboard): add recent tab and add scroll to contacts

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-05 20:18:53 +03:00
parent b4b32a3577
commit d8b7c81f46
3 changed files with 36 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/app/pages/dashboard/contacts/contacts.component.html
View file

@ -3,11 +3,14 @@
<nga-tab tabTitle="Contacts"> <nga-tab tabTitle="Contacts">
<div class="contact" *ngFor="let c of contacts"> <div class="contact" *ngFor="let c of contacts">
<nga-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="xmedium"></nga-user> <nga-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="xmedium"></nga-user>
<i class="ion-ios-telephone-outline"></i> <i class="i-contact ion-ios-telephone-outline"></i>
</div> </div>
</nga-tab> </nga-tab>
<nga-tab tabTitle="Recent"> <nga-tab tabTitle="Recent">
<span>Content #2</span> <div class="contact" *ngFor="let c of recent">
<nga-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="xmedium"></nga-user>
<span class="time">{{ c.time }}</span>
</div>
</nga-tab> </nga-tab>
</nga-tabset> </nga-tabset>
</nga-card> </nga-card>

18
src/app/pages/dashboard/contacts/contacts.component.scss
View file

@ -2,11 +2,19 @@
@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons'; @import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';
@include nga-install-component() { @include nga-install-component() {
nga-tabset /deep/ ul { nga-tabset {
height: 100%;
display: flex;
flex-direction: column;
/deep/ ul {
border-bottom: 1px solid nga-theme(separator); border-bottom: 1px solid nga-theme(separator);
} }
}
nga-tab { nga-tab {
flex: 1;
overflow-y: scroll;
padding: 0; padding: 0;
} }
@ -18,11 +26,17 @@
border-bottom: 1px solid nga-theme(separator); border-bottom: 1px solid nga-theme(separator);
} }
i { .i-contact {
font-size: 2.5rem; font-size: 2.5rem;
cursor: pointer; cursor: pointer;
} }
.time {
font-size: 0.875rem;
font-weight: nga-theme(font-weight-light);
text-transform: uppercase;
}
nga-user /deep/ { nga-user /deep/ {
.info-container { .info-container {
margin-left: 0.875rem; margin-left: 0.875rem;

14
src/app/pages/dashboard/contacts/contacts.component.ts
View file

@ -8,8 +8,11 @@ import { UserService } from '../../../@core/data/users.service';
templateUrl: './contacts.component.html', templateUrl: './contacts.component.html',
}) })
export class ContactsComponent { export class ContactsComponent {
contacts: any[]; contacts: any[];
recent: any[];
constructor(private userService: UserService) { constructor(private userService: UserService) {
const users = this.userService.getUsers(); const users = this.userService.getUsers();
@ -21,5 +24,16 @@ export class ContactsComponent {
{ user: users.alan, type: 'home' }, { user: users.alan, type: 'home' },
{ user: users.kate, type: 'work' }, { user: users.kate, type: 'work' },
]; ];
this.recent = [
{ user: users.alan, type: 'home', time: '9:12 pm' },
{ user: users.eva, type: 'home', time: '7:45 pm' },
{ user: users.nick, type: 'mobile', time: '5:29 pm' },
{ user: users.lee, type: 'mobile', time: '11:24 am' },
{ user: users.jack, type: 'mobile', time: '10:45 am' },
{ user: users.kate, type: 'work', time: '9:42 am' },
{ user: users.kate, type: 'work', time: '9:31 am' },
{ user: users.jack, type: 'mobile', time: '8:01 am' },
];
} }
} }