Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-17 15:05:30 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(aio): add a slim loading bar component page. Fix the hot table styles (#1055)

Browse source
This commit is contained in:
Daouda Diallo 2017-05-03 15:42:48 +00:00 • committed by Lex Zhukov
parent b6ffcbc167
commit 9af47feb6b
15 changed files with 200 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/app/pages/pages.menu.ts
View file

@ -124,6 +124,14 @@ export const PAGES_MENU = [
}
}
},
{
path: 'slim',
data: {
menu: {
title: 'Slim loading bar',
}
}
},
{
path: 'grid',
data: {

44
src/app/pages/tables/components/hotTables/handsontable-section.ts
View file

@ -3,27 +3,35 @@ import { Component } from '@angular/core';
@Component({
selector: 'handsontable-section',
template: `
<section id="handsontable">
<div class="row">
<div class="widgets">
<div class="row">
<div class="col-md-12">
<basic-demo></basic-demo>
<br>
<br>
<advanced-demo></advanced-demo>
<br>
<br>
<finance-demo></finance-demo>
<br>
<science-demo></science-demo>
<br>
<br>
<sheet-demo></sheet-demo>
<br>
<br>
<sport-demo></sport-demo>
<ba-card title="Examples">
<section id="handsontable">
<div class="row">
<div class="col-md-12">
<basic-demo></basic-demo>
<br>
<br>
<advanced-demo></advanced-demo>
<br>
<br>
<finance-demo></finance-demo>
<br>
<science-demo></science-demo>
<br>
<br>
<sheet-demo></sheet-demo>
<br>
<br>
<sport-demo></sport-demo>
</div>
</div>
</section>
</ba-card>
</div>
</div>
</div>
</section>
`
})
export class HandsontableSectionComponent {

2
src/app/pages/tables/components/hotTables/handsontable/advanced-demo.ts
View file

@ -24,7 +24,7 @@ export class AdvancedDemoComponent {
{data: 4, type: 'numeric', format: '0.00%',
renderer: function percentRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.NumericRenderer.apply(this, arguments);
td.style.color = (value < 0) ? 'red' : 'green';
td.style.color = 'white';
}},
{data: 5, type: 'numeric', format: '0,0.00[0000]'},
{data: 6, type: 'numeric', format: '0,0.00[0000]'}

26
src/app/pages/tables/components/hotTables/handsontable/science-demo.service.ts Normal file
View file

@ -0,0 +1,26 @@
let heatmap = [];
export function updateHeatmap(change, source) {
if (change && change.length) {
heatmap[change[0][1]] = generateHeatmapData(this, change[0][1]);
} else {
heatmap = [];
for (let i = 1, colCount = this.countCols(); i < colCount; i++) {
heatmap[i] = generateHeatmapData(this, i);
}
}
}
export function point(min, max, value) {
return (value - min) / (max - min);
}
export function generateHeatmapData(context:any, colId) {
let values = context.getDataAtCol(colId);
return {
min: Math.min.apply(null, values),
max: Math.max.apply(null, values)
};
}

28
src/app/pages/tables/components/hotTables/handsontable/science-demo.ts
View file

@ -1,35 +1,13 @@
import { Component } from '@angular/core';
import * as Handsontable from 'handsontable/dist/handsontable.full.js';
import { getScienceData } from './data';
import { updateHeatmap } from './science-demo.service';
import { point } from './science-demo.service';
import { generateHeatmapData } from './science-demo.service';
let heatmapScale = chroma.scale(['#17F556', '#ED6D47']);
let heatmap = [];
function updateHeatmap(change, source) {
if (change && change.length) {
heatmap[change[0][1]] = generateHeatmapData(this, change[0][1]);
} else {
heatmap = [];
for (let i = 1, colCount = this.countCols(); i < colCount; i++) {
heatmap[i] = generateHeatmapData(this, i);
}
}
}
function point(min, max, value) {
return (value - min) / (max - min);
}
function generateHeatmapData(context:any, colId) {
let values = context.getDataAtCol(colId);
return {
min: Math.min.apply(null, values),
max: Math.max.apply(null, values)
};
}
function heatmapRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);

17
src/app/pages/tables/components/hotTables/hotTables.scss
View file

@ -1,5 +1,18 @@
:host /deep/ {
.handsontable td {
color: #000;
.handsontable {
tr:first-child th, tr:first-child td {
border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}
th:first-child, th:nth-child(2), td:first-of-type, .htNoFrame + th, .htNoFrame + td {
border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}
td, th {
border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
background-color: transparent !important;
color: #fff;
}
}
}

1
src/app/pages/ui/components/slim/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './slim.component';

55
src/app/pages/ui/components/slim/slim.component.ts Normal file
View file

@ -0,0 +1,55 @@
import { Component } from '@angular/core';
import { SlimLoadingBarService } from 'ng2-slim-loading-bar';
@Component({
selector: 'slim',
styleUrls: ['./slim.scss'],
templateUrl: './slim.html'
})
export class SlimComponent {
constructor(private slimLoader: SlimLoadingBarService) {}
setProgres30() {
this.slimLoader.progress = 30;
}
startProgress() {
this.slimLoader.start(() => {
console.log('Loading complete');
});
}
completeProgress() {
this.slimLoader.complete();
}
stopProgress() {
this.slimLoader.stop();
}
resetProgress() {
this.slimLoader.reset();
}
incrementProgress() {
this.slimLoader.progress++;
}
changeProgressTo4px() {
this.slimLoader.height = '4px';
}
changeProgressTo2px() {
this.slimLoader.height = '2px';
}
changeProgressToWhite() {
this.slimLoader.color = 'white';
}
changeProgressToGreen() {
this.slimLoader.color = 'green';
}
}

28
src/app/pages/ui/components/slim/slim.html Normal file
View file

@ -0,0 +1,28 @@
<div class="widgets">
<div class="row">
<div class="col-md-12">
<ba-card title="Slim loading bar" class="slim-loading-bar-block">
<button class="btn btn-default" (click)="setProgres30()">Set progress equals 30</button>
<br>
<button class="btn btn-default" (click)="incrementProgress()">Increment progress</button>
<br>
<button class="btn btn-default" (click)="startProgress()">Start progress</button>
<br>
<button class="btn btn-default" (click)="completeProgress()">Complete progress</button>
<br>
<button class="btn btn-default" (click)="stopProgress()">Stop progress</button>
<br>
<button class="btn btn-default" (click)="resetProgress()">Reset progress</button>
<br>
<button class="btn btn-default" (click)="changeProgressTo4px()">Change height to 4px</button>
<br>
<button class="btn btn-default" (click)="changeProgressTo2px()">Change height to 2px</button>
<br>
<button class="btn btn-default" (click)="changeProgressToWhite()">Change color to white</button>
<br>
<button class="btn btn-default" (click)="changeProgressToGreen()">Change color to green</button>
</ba-card>
</div>
</div>
</div>
<ng2-slim-loading-bar></ng2-slim-loading-bar>

5
src/app/pages/ui/components/slim/slim.scss Normal file
View file

@ -0,0 +1,5 @@
:host /deep/ {
.slim-loading-bar-block button {
margin-bottom: 10px;
}
}

4
src/app/pages/ui/ui.module.ts
View file

@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgaModule } from '../../theme/nga.module';
import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';
import { NgbDropdownModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { routing } from './ui.routing';
@ -10,6 +11,7 @@ import { Buttons } from './components/buttons/buttons.component';
import { Grid } from './components/grid/grid.component';
import { Icons } from './components/icons/icons.component';
import { Modals } from './components/modals/modals.component';
import { SlimComponent } from './components/slim/slim.component';
import { Typography } from './components/typography/typography.component';
import { FlatButtons } from './components/buttons/components/flatButtons';
@ -31,6 +33,7 @@ import { DefaultModal } from './components/modals/default-modal/default-modal.co
NgaModule,
NgbDropdownModule,
NgbModalModule,
SlimLoadingBarModule.forRoot(),
routing
],
declarations: [
@ -38,6 +41,7 @@ import { DefaultModal } from './components/modals/default-modal/default-modal.co
Grid,
Icons,
Modals,
SlimComponent,
Typography,
Ui,
FlatButtons,

4
src/app/pages/ui/ui.routing.ts
View file

@ -6,6 +6,7 @@ import { Grid } from './components/grid/grid.component';
import { Icons } from './components/icons/icons.component';
import { Modals } from './components/modals/modals.component';
import { Typography } from './components/typography/typography.component';
import { SlimComponent } from './components/slim/slim.component';
// noinspection TypeScriptValidateTypes
const routes: Routes = [
@ -17,7 +18,8 @@ const routes: Routes = [
{ path: 'grid', component: Grid },
{ path: 'icons', component: Icons },
{ path: 'typography', component: Typography },
{ path: 'modals', component: Modals }
{ path: 'modals', component: Modals },
{ path: 'slim', component: SlimComponent },
]
}
];