Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-11 20:18:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(iot): contacts widget

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-18 15:58:26 +03:00
parent e881f83a3c
commit 6a5baa79e7
2 changed files with 24 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,16 +1,23 @@
<nb-card [size]="breakpoint.width >= breakpoints.xxxl || breakpoint.width < breakpoints.md ? 'large' : 'xlarge'">
<nb-card size="large">
<nb-tabset fullWidth>
<nb-tab tabTitle="Contacts">
<div class="contact" *ngFor="let c of contacts">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<i class="i-contact nb-phone"></i>
</div>
<nb-list>
<nb-list-item class="contact" *ngFor="let c of contacts">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<nb-icon icon="phone-outline" pack="eva"></nb-icon>
</nb-list-item>
</nb-list>
</nb-tab>
<nb-tab tabTitle="Recent">
<div class="contact" *ngFor="let c of recent">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<span class="time">{{ c.time | date: 'shortTime' }}</span>
</div>
<nb-list>
<nb-list-item class="contact" *ngFor="let c of recent">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<span class="caption">{{ c.time | date: 'shortTime' }}</span>
</nb-list-item>
</nb-list>
</nb-tab>
</nb-tabset>
</nb-card>

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

@ -1,16 +1,19 @@
@import '../../../@theme/styles/themes';
//@import '~@nebular/bootstrap/styles/hero-buttons';
@include nb-install-component() {
nb-card {
overflow: hidden;
}
nb-tabset {
height: 100%;
display: flex;
flex-direction: column;
::ng-deep .tab-link {
padding: 1.25rem 2rem;
}
}
nb-tab {
flex: 1;
overflow-y: auto;
padding: 0;
}
@ -18,50 +21,5 @@
display: flex;
align-items: center;
justify-content: space-between;
color: nb-theme(color-fg);
padding: 1rem;
&:not(:last-child) {
border-bottom: 1px solid nb-theme(separator);
@include nb-for-theme(corporate) {
border-bottom-color: nb-theme(tabs-separator);
}
}
}
.i-contact {
font-size: 2rem;
cursor: pointer;
}
.time {
font-size: 0.875rem;
font-weight: nb-theme(font-weight-light);
text-transform: uppercase;
}
nb-user ::ng-deep {
.info-container {
@include nb-ltr(margin-left, 0.875rem);
@include nb-rtl(margin-right, 0.875rem);
}
.user-name {
font-family: nb-theme(font-secondary);
font-weight: nb-theme(font-weight-bold);
color: nb-theme(color-fg-heading);
font-size: 1.25rem;
@include nb-for-theme(cosmic) {
font-weight: nb-theme(font-weight-bolder);
}
}
.user-title {
font-size: 0.875rem;
font-weight: nb-theme(font-weight-light);
text-transform: uppercase;
}
}
}