Skip to content

Commit d570561

Browse files
qianmoQqianmoQ
authored
Merge pull request #9 from qianmoQ/1.1.0-SNAPSHOT
1.1.0 snapshot
2 parents eec3f3d + d661f3e commit d570561

File tree

13 files changed

+351
-0
lines changed

13 files changed

+351
-0
lines changed

‎src/renderer/app/layout/layout.routing.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,18 @@ const LAYOUT_ROUTES: Routes = [
4040
{
4141
path: 'scrollbar',
4242
loadChildren: () => import('../pages/component/scrollbar/scrollbar.module').then(m => m.ScrollbarModule)
43+
},
44+
{
45+
path: 'datepicker',
46+
loadChildren: () => import('../pages/component/datepicker/datepicker.module').then(m => m.DatepickerModule)
47+
},
48+
{
49+
path: 'carousel',
50+
loadChildren: () => import('../pages/component/carousel/carousel.module').then(m => m.CarouselComponentModule)
51+
},
52+
{
53+
path: 'progressbar',
54+
loadChildren: () => import('../pages/component/progressbar/progressbar.module').then(m => m.ProgressbarComponentModule)
4355
}
4456
]
4557
},

‎src/renderer/app/layout/navigation/navigation.component.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,15 @@
2525
<li routerLinkActive="navigation__active">
2626
<a [routerLink]="['/component/scrollbar']"><i class="fa fa-bars"></i> Scrollbar</a>
2727
</li>
28+
<li routerLinkActive="navigation__active">
29+
<a [routerLink]="['/component/datepicker']"><i class="fa fa-clock-o"></i> Datepicker</a>
30+
</li>
31+
<li routerLinkActive="navigation__active">
32+
<a [routerLink]="['/component/carousel']"><i class="fa fa-calculator"></i> Carousel</a>
33+
</li>
34+
<li routerLinkActive="navigation__active">
35+
<a [routerLink]="['/component/progressbar']"><i class="fa fa-pagelines"></i> Progressbar</a>
36+
</li>
2837
</ul>
2938
</li>
3039
<li routerLinkActive="navigation__sub--active" class="navigation__sub">

‎src/renderer/app/pages/component/carousel/carousel.component.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<section class="content--row">
2+
<header class="content__title">
3+
<h1>Carousel</h1>
4+
<small>This template is built using <code>ngx-bootstrap/carousel</code> and provides some usage examples</small>
5+
</header>
6+
<div class="card">
7+
<div class="card-body">
8+
<h4 class="card-title">Default</h4>
9+
<carousel>
10+
<slide *ngFor="let img of defaultCarousels">
11+
<img src="{{img.url}}" alt="{{img.title}}" style="height: 200px;">
12+
</slide>
13+
</carousel>
14+
</div>
15+
</div>
16+
<div class="card">
17+
<div class="card-body">
18+
<h4 class="card-title">Description</h4>
19+
<carousel>
20+
<slide *ngFor="let img of defaultCarousels">
21+
<img src="{{img.url}}" alt="{{img.title}}" style="height: 200px;">
22+
<div class="carousel-caption">
23+
<h3>{{img.title}}</h3>
24+
<p>{{img.description}}</p>
25+
</div>
26+
</slide>
27+
</carousel>
28+
</div>
29+
</div>
30+
</section>

‎src/renderer/app/pages/component/carousel/carousel.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { CarouselService } from '@renderer/services/component/carousel.service';
3+
4+
@Component({
5+
selector: 'app-component-carousel',
6+
templateUrl: './carousel.component.html'
7+
})
8+
export class CarouselComponent implements OnInit {
9+
public defaultCarousels: any = [];
10+
11+
constructor(private carouselService: CarouselService) {
12+
this.defaultCarousels = this.carouselService.builderCarousels();
13+
}
14+
15+
ngOnInit() {
16+
}
17+
}

‎src/renderer/app/pages/component/carousel/carousel.module.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { RouterModule } from '@angular/router';
4+
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
5+
import { CarouselModule } from 'ngx-bootstrap/carousel';
6+
import { CarouselComponent } from './carousel.component';
7+
import { CarouselService } from '@renderer/services/component/carousel.service';
8+
9+
const CAROUSEL_ROUTES = [
10+
{path: '', component: CarouselComponent}
11+
];
12+
13+
@NgModule({
14+
declarations: [
15+
CarouselComponent
16+
],
17+
imports: [
18+
CommonModule,
19+
BsDropdownModule.forRoot(),
20+
CarouselModule.forRoot(),
21+
RouterModule.forChild(CAROUSEL_ROUTES)
22+
],
23+
providers: [
24+
CarouselService
25+
]
26+
})
27+
export class CarouselComponentModule {
28+
}

‎src/renderer/app/pages/component/datepicker/datepicker.component.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<section class="content--row">
2+
<header class="content__title">
3+
<h1>Datepicker</h1>
4+
<small>This template is built using <code>ngx-bootstrap/datepicker</code> and provides some usage examples</small>
5+
</header>
6+
<div class="card-demo">
7+
<div class="card">
8+
<div class="card-body">
9+
<h4 class="card-title">Basic Datepicker</h4>
10+
<div class="form-group">
11+
<input type="text" class="form-control" [minDate]="minDate" [maxDate]="maxDate" #dp="bsDatepicker"
12+
bsDatepicker [(bsValue)]="bsValue">
13+
</div>
14+
<div class="form-group">
15+
<button class="btn btn-success" (click)="dp.toggle()">Basic Datepicker</button>
16+
</div>
17+
</div>
18+
</div>
19+
</div>
20+
<div class="card-demo">
21+
<div class="card">
22+
<div class="card-body">
23+
<h4 class="card-title">Range Datepicker</h4>
24+
<div class="form-group">
25+
<input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker>
26+
</div>
27+
<div class="form-group">
28+
<button class="btn btn-success" (click)="drp.toggle()">Range Datepicker</button>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
<div class="card-demo">
34+
<div class="card">
35+
<div class="card-body">
36+
<h4 class="card-title">Theme Datepicker</h4>
37+
<div class="form-group">
38+
<select class="custom-select form-control " [(ngModel)]="colorTheme" (ngModelChange)="applyTheme(dpTheme);">
39+
<option *ngFor="let theme of colorThemes" value="{{theme}}">{{theme}}</option>
40+
</select>
41+
</div>
42+
<div class="form-group">
43+
<div class="input-group">
44+
<input type="text" class="form-control" bsDatepicker #dpTheme="bsDatepicker" [bsConfig]="bsConfig">
45+
<div class="input-group-btn">
46+
<button class="btn btn-success" (click)="dpTheme.show() ">Theme Datepicker</button>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
</section>

‎src/renderer/app/pages/component/datepicker/datepicker.component.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
3+
import { DatepickerService } from '@renderer/services/component/datepicker.service';
4+
5+
@Component({
6+
selector: 'app-component-datepicker',
7+
templateUrl: './datepicker.component.html'
8+
})
9+
export class DatepickerComponent implements OnInit {
10+
minDate = new Date(2017, 5, 10);
11+
maxDate = new Date(2018, 9, 15);
12+
bsValue: Date = new Date();
13+
colorTheme = 'theme-green';
14+
colorThemes = [];
15+
bsConfig: Partial<BsDatepickerConfig>;
16+
17+
constructor(private datepickerService: DatepickerService) {
18+
this.colorThemes = this.datepickerService.themes;
19+
}
20+
21+
applyTheme(pop: any) {
22+
this.bsConfig = Object.assign({}, {containerClass: this.colorTheme});
23+
setTimeout(() => {
24+
pop.show();
25+
});
26+
}
27+
28+
ngOnInit() {
29+
}
30+
}

‎src/renderer/app/pages/component/datepicker/datepicker.module.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { RouterModule } from '@angular/router';
4+
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
5+
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
6+
import { FormsModule } from '@angular/forms';
7+
import { DatepickerComponent } from './datepicker.component';
8+
import { DatepickerService } from '@renderer/services/component/datepicker.service';
9+
10+
const DATEPICKER_ROUTES = [
11+
{path: '', component: DatepickerComponent}
12+
];
13+
14+
@NgModule({
15+
declarations: [
16+
DatepickerComponent
17+
],
18+
imports: [
19+
CommonModule,
20+
FormsModule,
21+
BsDropdownModule.forRoot(),
22+
BsDatepickerModule.forRoot(),
23+
RouterModule.forChild(DATEPICKER_ROUTES)
24+
],
25+
providers: [
26+
DatepickerService
27+
]
28+
})
29+
export class DatepickerModule {
30+
}

‎src/renderer/app/pages/component/progressbar/progressbar.component.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<section class="content--row">
2+
<header class="content__title">
3+
<h1>Progressbar</h1>
4+
<small>This template is built using <code>ngx-bootstrap/progressbar</code> and provides some usage examples</small>
5+
</header>
6+
<div class="card">
7+
<div class="card-body">
8+
<h4 class="card-title">Static Progressbar</h4>
9+
<progressbar class="progress" value="0" max="100"></progressbar>
10+
<br>
11+
<progressbar class="progress" value="25" max="100"></progressbar>
12+
<br>
13+
<progressbar class="progress" value="50" max="100"></progressbar>
14+
<br>
15+
<progressbar class="progress" value="75" max="100"></progressbar>
16+
<br>
17+
<progressbar class="progress" value="100" max="100"></progressbar>
18+
</div>
19+
</div>
20+
<div class="card">
21+
<div class="card-body">
22+
<h4 class="card-title">Theme Progressbar</h4>
23+
<h6 class="card-subtitle">Theme
24+
<code>type</code> property implementation adds a topic to the Progressbar</h6>
25+
<progressbar class="progress" value="25" max="100" [type]="'success'"></progressbar>
26+
<br>
27+
<progressbar class="progress" value="50" max="100" [type]="'warning'"></progressbar>
28+
<br>
29+
<progressbar class="progress" value="75" max="100" type="info"></progressbar>
30+
<br>
31+
<progressbar class="progress" value="100" max="100" type="danger"></progressbar>
32+
</div>
33+
</div>
34+
<div class="card">
35+
<div class="card-body">
36+
<h4 class="card-title">Dynamic Progressbar</h4>
37+
<progressbar class="progress" [value]="stacked" max="100"></progressbar>
38+
<hr>
39+
<br>
40+
<button type="button" class="btn btn-primary" (click)="randomStacked()">Click</button>
41+
</div>
42+
</div>
43+
</section>

‎src/renderer/app/pages/component/progressbar/progressbar.component.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-component-progressbar',
5+
templateUrl: './progressbar.component.html'
6+
})
7+
export class ProgressbarComponent implements OnInit {
8+
public type: string;
9+
public stacked: any[] = [];
10+
11+
constructor() {
12+
this.randomStacked();
13+
}
14+
15+
public randomStacked(): void {
16+
const types = ['success', 'info', 'warning', 'danger'];
17+
this.stacked = [];
18+
const n = Math.floor((Math.random() * 4) + 1);
19+
for (let i = 0; i < n; i++) {
20+
const index = Math.floor((Math.random() * 4));
21+
const value = Math.floor((Math.random() * 27) + 3);
22+
this.stacked.push({
23+
value,
24+
type: types[index]
25+
});
26+
}
27+
}
28+
29+
ngOnInit() {
30+
}
31+
}

0 commit comments

Comments
 (0)