mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-18 08:20:13 +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 '../../../@theme/styles/themes';
|
||||||
@import '~@nebular/theme/styles/global/typography/typography';
|
|
||||||
|
|
||||||
@include nb-install-component() {
|
@include nb-install-component() {
|
||||||
nb-card-header {
|
nb-card-header {
|
||||||
|
|
@ -7,78 +6,31 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border: none;
|
border: none;
|
||||||
|
padding-top: 0.45rem;
|
||||||
|
padding-bottom: 0.45rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nb-card-body {
|
nb-list {
|
||||||
padding: 0;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown {
|
nb-list-item {
|
||||||
min-width: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-activity-list {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-activity-list li {
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
position: relative;
|
justify-content: space-between;
|
||||||
color: nb-theme(color-fg);
|
margin: 0 -0.25rem;
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.visited-date,
|
.visited-date,
|
||||||
.value,
|
.visited-pages-count,
|
||||||
.title {
|
.visited-percentages {
|
||||||
font-size: 1.25rem;
|
flex: 1 0 auto;
|
||||||
}
|
margin: 0 0.25rem;
|
||||||
|
|
||||||
.visited-date {
|
|
||||||
color: nb-theme(color-fg-heading);
|
|
||||||
|
|
||||||
@include nb-for-theme(cosmic) {
|
|
||||||
color: nb-theme(color-fg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.25rem;
|
||||||
color: nb-theme(color-success);
|
color: nb-theme(color-success-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
.delta {
|
.delta {
|
||||||
|
|
@ -89,78 +41,25 @@
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
right: 100%;
|
right: 100%;
|
||||||
margin-right: 0.7rem;
|
@include nb-ltr(margin-right, 0.7rem);
|
||||||
@include nb-rtl(margin-right, 0);
|
|
||||||
@include nb-rtl(margin-left, 0.7rem);
|
@include nb-rtl(margin-left, 0.7rem);
|
||||||
border-left: 6px solid transparent;
|
border-left: 6px solid transparent;
|
||||||
border-right: 6px solid transparent;
|
border-right: 6px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.down {
|
&.down {
|
||||||
color: text-danger();
|
color: nb-theme(color-danger-default);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
border-top: 6px solid text-danger();
|
border-top: 6px solid nb-theme(color-danger-default);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.up {
|
&.up {
|
||||||
color: text-success();
|
color: nb-theme(color-success-default);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
border-bottom: 6px solid text-success();
|
border-bottom: 6px solid nb-theme(color-success-default);
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,47 +7,7 @@ import { UserActivityData, UserActive } from '../../../@core/data/user-activity'
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-user-activity',
|
selector: 'ngx-user-activity',
|
||||||
styleUrls: ['./user-activity.component.scss'],
|
styleUrls: ['./user-activity.component.scss'],
|
||||||
template: `
|
templateUrl: './user-activity.component.html',
|
||||||
<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>
|
|
||||||
`,
|
|
||||||
})
|
})
|
||||||
export class ECommerceUserActivityComponent implements OnDestroy {
|
export class ECommerceUserActivityComponent implements OnDestroy {
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue