Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-03-05 05:10:16 +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

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 },
]
}
];