mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
refactor(e-commerce): user activity
This commit is contained in:
Sergey Andrievskiy
parent
4b0401de09
commit
c7a928a5ca
3 changed files with 51 additions and 160 deletions
|
|
@ -0,0 +1,32 @@
|
|||
<nb-card size="medium">
|
||||
|
||||
<nb-card-header>
|
||||
<span>User Activity</span>
|
||||
<nb-select [selected]="type" (selectedChange)="getUserActivity($event); type = $event">
|
||||
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-header>
|
||||
|
||||
<nb-list class="user-activity-list">
|
||||
<nb-list-item *ngFor="let item of userActivity">
|
||||
|
||||
<div class="visited-date">
|
||||
{{ item.date }}
|
||||
</div>
|
||||
|
||||
<div class="visited-pages-count">
|
||||
<div class="caption">Pages Visit</div>
|
||||
<div class="value">{{ item.pagesVisitCount }}</div>
|
||||
</div>
|
||||
|
||||
<div class="visited-percentages">
|
||||
<div class="caption">New visits, %</div>
|
||||
<div class="delta value" [class.up]="item.deltaUp" [class.down]="!item.deltaUp">
|
||||
{{ item.newVisits }}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
|
||||
</nb-card>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/styles/global/typography/typography';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-card-header {
|
||||
|
|
@ -7,78 +6,31 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: none;
|
||||
padding-top: 0.45rem;
|
||||
padding-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
padding: 0;
|
||||
nb-list {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.user-activity-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.user-activity-list li {
|
||||
list-style: none;
|
||||
nb-list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
color: nb-theme(color-fg);
|
||||
padding: nb-theme(card-padding);
|
||||
border-bottom:
|
||||
nb-theme(list-item-border-width)
|
||||
nb-theme(card-header-border-type)
|
||||
nb-theme(separator);
|
||||
|
||||
&:first-child {
|
||||
border-top:
|
||||
nb-theme(list-item-border-width)
|
||||
nb-theme(card-header-border-type)
|
||||
nb-theme(separator);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: nb-theme(layout-bg);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: nb-theme(color-success);
|
||||
border-radius: nb-theme(radius);
|
||||
}
|
||||
}
|
||||
justify-content: space-between;
|
||||
margin: 0 -0.25rem;
|
||||
}
|
||||
|
||||
.visited-date,
|
||||
.value,
|
||||
.title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.visited-date {
|
||||
color: nb-theme(color-fg-heading);
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
.visited-pages-count,
|
||||
.visited-percentages {
|
||||
flex: 1 0 auto;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: 0.5rem;
|
||||
color: nb-theme(color-success);
|
||||
margin-top: 0.25rem;
|
||||
color: nb-theme(color-success-default);
|
||||
}
|
||||
|
||||
.delta {
|
||||
|
|
@ -89,78 +41,25 @@
|
|||
&::before {
|
||||
content: '';
|
||||
right: 100%;
|
||||
margin-right: 0.7rem;
|
||||
@include nb-rtl(margin-right, 0);
|
||||
@include nb-ltr(margin-right, 0.7rem);
|
||||
@include nb-rtl(margin-left, 0.7rem);
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
}
|
||||
|
||||
&.down {
|
||||
color: text-danger();
|
||||
color: nb-theme(color-danger-default);
|
||||
|
||||
&::before {
|
||||
border-top: 6px solid text-danger();
|
||||
border-top: 6px solid nb-theme(color-danger-default);
|
||||
}
|
||||
}
|
||||
|
||||
&.up {
|
||||
color: text-success();
|
||||
color: nb-theme(color-success-default);
|
||||
|
||||
&::before {
|
||||
border-bottom: 6px solid text-success();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
.user-activity-list li {
|
||||
&:hover {
|
||||
&::before {
|
||||
$color-top: nb-theme(btn-success-bg);
|
||||
$color-bottom: btn-hero-success-left-color();
|
||||
|
||||
background-image: linear-gradient(to top, $color-top, $color-bottom);
|
||||
box-shadow: 0 0 16px -2px btn-hero-success-middle-color();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delta {
|
||||
&.down, &.up {
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.user-activity-list li {
|
||||
border-color: nb-theme(tabs-separator);
|
||||
|
||||
&:first-child {
|
||||
border-color: nb-theme(tabs-separator);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.visited-pages-count {
|
||||
.value {
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
|
||||
.delta {
|
||||
&.up {
|
||||
color: text-primary();
|
||||
|
||||
&::before {
|
||||
border-bottom-color: text-primary();
|
||||
}
|
||||
border-bottom: 6px solid nb-theme(color-success-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,47 +7,7 @@ import { UserActivityData, UserActive } from '../../../@core/data/user-activity'
|
|||
@Component({
|
||||
selector: 'ngx-user-activity',
|
||||
styleUrls: ['./user-activity.component.scss'],
|
||||
template: `
|
||||
<nb-card size="medium">
|
||||
<nb-card-header>
|
||||
<span>User Activity</span>
|
||||
<div class="dropdown ghost-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-sm" ngbDropdownToggle
|
||||
[ngClass]="{ 'btn-success': currentTheme == 'default', 'btn-primary': currentTheme != 'default'}">
|
||||
{{ type }}
|
||||
</button>
|
||||
<ul ngbDropdownMenu class="dropdown-menu">
|
||||
<li class="dropdown-item"
|
||||
*ngFor="let t of types"
|
||||
(click)="getUserActivity(t); type = t">
|
||||
{{ t }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ul class="user-activity-list">
|
||||
<li *ngFor="let item of userActivity">
|
||||
<div class="visited-date">
|
||||
{{ item.date }}
|
||||
</div>
|
||||
<div class="visited-pages-count">
|
||||
<div class="title">Pages Visit</div>
|
||||
<div class="value">{{ item.pagesVisitCount }}</div>
|
||||
</div>
|
||||
<div class="visited-percentages">
|
||||
<div class="title">New visits, %</div>
|
||||
<div class="delta value"
|
||||
[class.up]="item.deltaUp"
|
||||
[class.down]="!item.deltaUp">
|
||||
{{ item.newVisits }}%
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
`,
|
||||
templateUrl: './user-activity.component.html',
|
||||
})
|
||||
export class ECommerceUserActivityComponent implements OnDestroy {
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue