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

refactor(e-commerce): earnings

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-17 14:31:15 +03:00
parent da8bcf7b32
commit 368a35110d
9 changed files with 48 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app/@theme/styles/themes.scss
View file

@ -17,6 +17,7 @@ $nb-themes: nb-register-theme((
font-family-secondary: Exo, font-family-secondary: Exo,
card-height-tiny: 13.5rem, card-height-tiny: 13.5rem,
select-min-width: 6rem,
// //
//switcher-background: #ebeff5, //switcher-background: #ebeff5,

2
src/app/pages/e-commerce/e-commerce.module.ts
View file

@ -6,6 +6,7 @@ import {
NbTabsetModule, NbTabsetModule,
NbUserModule, NbUserModule,
NbIconModule, NbIconModule,
NbSelectModule,
} from '@nebular/theme'; } from '@nebular/theme';
import { NgxEchartsModule } from 'ngx-echarts'; import { NgxEchartsModule } from 'ngx-echarts';
import { NgxChartsModule } from '@swimlane/ngx-charts'; import { NgxChartsModule } from '@swimlane/ngx-charts';
@ -62,6 +63,7 @@ import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earni
NbButtonModule, NbButtonModule,
NbIconModule, NbIconModule,
NbTabsetModule, NbTabsetModule,
NbSelectModule,
ChartModule, ChartModule,
NbProgressBarModule, NbProgressBarModule,
NgxEchartsModule, NgxEchartsModule,

6
src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.html
View file

@ -3,9 +3,9 @@
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>
<div class="chart-info"> <div class="chart-info">
<div class="title" [style.color]="color">{{ name }}</div> <div [style.color]="color">{{ name }}</div>
<div class="time-period">Last week</div> <div class="time-period caption">Last week:</div>
<div class="value">{{ value }}%</div> <div class="h6">{{ value }}%</div>
</div> </div>
<ngx-earning-pie-chart [values]="earningPieChartData" <ngx-earning-pie-chart [values]="earningPieChartData"
(selectPie)="changeChartInfo($event)" (selectPie)="changeChartInfo($event)"

19
src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss
View file

@ -3,11 +3,8 @@
@import '~@nebular/theme/styles/global/breakpoints'; @import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() { @include nb-install-component() {
nb-card-header { ngx-earning-pie-chart,
flex-direction: row; .chart-info {
}
ngx-earning-pie-chart, .chart-info {
flex: 1; flex: 1;
} }
@ -15,26 +12,18 @@
padding-top: 0.7rem; padding-top: 0.7rem;
} }
.title {
font-size: nb-theme(font-size-xlg);
}
.time-period { .time-period {
margin-top: 1.5rem; margin-top: 1.5rem;
color: nb-theme(color-fg);
} }
.value { .value {
margin-top: 0.2rem; margin-top: 0.2rem;
font-size: 1.5rem;
font-weight: nb-theme(font-weight-bold);
color: nb-theme(color-fg-heading);
} }
.echart { .echart {
position: absolute; position: absolute;
width: calc(50% - #{nb-theme(card-padding)}); width: calc(50% - 1.25rem);
height: calc(100% - 2 * #{nb-theme(card-padding)}); height: calc(100% - 2rem);
} }
@include media-breakpoint-between(xl, xl) { @include media-breakpoint-between(xl, xl) {

8
src/app/pages/e-commerce/earning-card/earning-card.component.html
View file

@ -1,14 +1,14 @@
<nb-flip-card [showToggleButton]="false" [flipped]="flipped"> <nb-flip-card [showToggleButton]="false" [flipped]="flipped">
<nb-card-front> <nb-card-front>
<nb-card size="xsmall"> <nb-card size="tiny">
<ngx-earning-card-front></ngx-earning-card-front> <ngx-earning-card-front></ngx-earning-card-front>
<i class="nb-arrow-right" (click)="toggleFlipView()"></i> <nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
</nb-card> </nb-card>
</nb-card-front> </nb-card-front>
<nb-card-back> <nb-card-back>
<nb-card size="xsmall"> <nb-card size="tiny">
<ngx-earning-card-back></ngx-earning-card-back> <ngx-earning-card-back></ngx-earning-card-back>
<i class="nb-arrow-right" (click)="toggleFlipView()"></i> <nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
</nb-card> </nb-card>
</nb-card-back> </nb-card-back>
</nb-flip-card> </nb-flip-card>

23
src/app/pages/e-commerce/earning-card/earning-card.component.scss
View file

@ -5,43 +5,36 @@
position: relative; position: relative;
} }
.nb-arrow-right { .flip-icon {
position: absolute; position: absolute;
top: 0; right: 0.625rem;
right: 0; top: 1rem;
@include nb-rtl(right, auto); @include nb-rtl(right, auto);
@include nb-rtl(left, 0); @include nb-rtl(left, 0.625rem);
padding: 1.5rem;
cursor: pointer; cursor: pointer;
} }
::ng-deep .flipped { ::ng-deep .flipped {
.back-container { .back-container {
.nb-arrow-right { .flip-icon {
transform: scaleX(-1); transform: scaleX(-1);
} }
} }
.front-container { .front-container {
.nb-arrow-right { .flip-icon {
display: none; display: none;
} }
} }
} }
ngx-earning-card-back, ngx-earning-card-front { ngx-earning-card-back,
ngx-earning-card-front {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
} }
::ng-deep nb-card-header {
display: flex;
justify-content: space-between;
@include nb-rtl(flex-direction, row-reverse);
padding-left: 1rem;
}
::ng-deep nb-card-body { ::ng-deep nb-card-body {
overflow: hidden; overflow: hidden;
display: flex; display: flex;

2
src/app/pages/e-commerce/earning-card/earning-card.component.ts
View file

@ -9,7 +9,7 @@ export class EarningCardComponent {
flipped = false; flipped = false;
toggleFlipView() { toggleView() {
this.flipped = !this.flipped; this.flipped = !this.flipped;
} }
} }

22
src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html
View file

@ -1,23 +1,19 @@
<nb-card-header> <nb-card-header>
<div class="dropdown ghost-dropdown" ngbDropdown> <nb-select [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
<button type="button" ngbDropdownToggle class="btn" <nb-option *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
[ngClass]="{ </nb-select>
'btn-success': currentTheme === 'default',
'btn-primary': currentTheme !== 'default'}">
{{ selectedCurrency }}
</button>
<ul class="dropdown-menu" ngbDropdownMenu>
<li class="dropdown-item" *ngFor="let currency of currencies" (click)="changeCurrency(currency)">{{ currency }}</li>
</ul>
</div>
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>
<div class="chart-info"> <div class="chart-info">
<div class="title">Daily Income</div> <div>Daily Income</div>
<div class="value">{{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }}</div> <div class="h6">{{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }}</div>
<div class="delta" <div class="delta"
[class.up]="earningLiveUpdateCardData.delta.up" [class.up]="earningLiveUpdateCardData.delta.up"
[class.down]="!earningLiveUpdateCardData.delta.up"> [class.down]="!earningLiveUpdateCardData.delta.up">
<nb-icon [icon]="earningLiveUpdateCardData.delta.up ? 'arrow-up' : 'arrow-down'"
pack="eva"
class="direction">
</nb-icon>
{{ earningLiveUpdateCardData.delta.value }}% {{ earningLiveUpdateCardData.delta.value }}%
</div> </div>
</div> </div>

86
src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss
View file

@ -12,10 +12,6 @@
padding-bottom: 0.45rem; padding-bottom: 0.45rem;
} }
.dropdown {
min-width: 8.125rem;
}
nb-card-body { nb-card-body {
padding: 1rem 0 0; padding: 1rem 0 0;
flex-direction: column; flex-direction: column;
@ -29,87 +25,37 @@
margin: 0 nb-theme(card-padding); margin: 0 nb-theme(card-padding);
} }
.title { .delta {
color: nb-theme(color-fg-heading); &.up .direction {
} color: nb-theme(color-success-default);
}
.value { &.down .direction {
color: nb-theme(color-success); color: nb-theme(color-danger-default);
font-size: 1.5rem;
@include nb-for-theme(corporate) {
color: nb-theme(color-primary);
} }
} }
.delta { .delta {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
color: nb-theme(color-fg-heading);
padding-left: 0.5rem;
font-size: 1rem;
top: 0; top: 0;
right: 0; right: 0;
@include nb-rtl(left, 1.25rem); @include nb-rtl(left, 0);
@include nb-rtl(right, inherit); @include nb-rtl(right, auto);
&::before {
position: absolute;
content: '';
right: 100%;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
&.down {
&::before {
bottom: 4px;
border-top: 7px solid text-danger();
}
}
&.up {
&::before {
top: 4px;
border-bottom: 7px solid text-success();
}
}
} }
ngx-earning-live-update-chart { ngx-earning-live-update-chart {
flex: 1; flex: 1;
position: relative; position: relative;
}
::ng-deep canvas { ::ng-deep {
border-bottom-left-radius: nb-theme(card-border-radius); canvas {
border-bottom-right-radius: nb-theme(card-border-radius); border-bottom-left-radius: nb-theme(card-border-radius);
} border-bottom-right-radius: nb-theme(card-border-radius);
.echart {
position: absolute;
height: 100%;
width: 100%;
}
@include nb-for-theme(corporate) {
.delta {
&.down {
color: text-danger();
&::before {
bottom: 4px;
border-top: 7px solid text-danger();
}
} }
.echart {
&.up { position: absolute;
color: text-primary(); height: 100%;
width: 100%;
&::before {
top: 4px;
border-bottom: 7px solid text-primary();
}
} }
} }
} }