Skip to content

Commit cfedcd3

Browse files
zdrawkuzdrawku
authored
Merge branch 'vNext' into boston-sample-vNext
2 parents 3de7997 + 7ca98ba commit cfedcd3

16 files changed

+136
-254
lines changed

‎live-editing/configs/CircularProgressbarConfigGenerator.ts

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
/* tslint:disable:object-literal-sort-keys */
22
import { IgxButtonModule, IgxIconModule, IgxProgressBarModule, IgxRippleModule } from "igniteui-angular";
3+
import {
4+
CircularDynamicSampleComponent
5+
} from "../../src/app/data-display/circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component";
36
// tslint:disable-next-line:max-line-length
47
import { CircularIndeterminateProgressbarComponent } from "../../src/app/data-display/circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component";
58
import { CircularProgressbarComponent
@@ -18,32 +21,48 @@ export class CircularProgressbarConfigGenerator implements IConfigGenerator {
1821
configs.push(new Config({
1922
component: CircularProgressbarComponent,
2023
appModuleConfig: new AppModuleConfig({
21-
imports: [IgxButtonModule, IgxIconModule, IgxProgressBarModule,
22-
IgxRippleModule, CircularProgressbarComponent],
24+
imports: [IgxProgressBarModule, CircularProgressbarComponent],
2325
ngDeclarations: [CircularProgressbarComponent],
24-
ngImports: [IgxButtonModule, IgxIconModule, IgxProgressBarModule, IgxRippleModule]
26+
ngImports: [IgxProgressBarModule]
2527
}),
2628
shortenComponentPathBy: "/data-display/"
2729
}));
2830

2931
configs.push(new Config({
3032
component: CircularIndeterminateProgressbarComponent,
3133
appModuleConfig: new AppModuleConfig({
32-
imports: [IgxButtonModule, IgxIconModule, IgxProgressBarModule,
33-
IgxRippleModule, CircularIndeterminateProgressbarComponent],
34+
imports: [IgxProgressBarModule, CircularIndeterminateProgressbarComponent],
3435
ngDeclarations: [CircularIndeterminateProgressbarComponent],
35-
ngImports: [IgxButtonModule, IgxIconModule, IgxProgressBarModule, IgxRippleModule]
36+
ngImports: [IgxProgressBarModule]
3637
}),
3738
shortenComponentPathBy: "/data-display/circular-progressbar/"
3839
}));
3940

41+
configs.push(new Config({
42+
component: CircularDynamicSampleComponent,
43+
appModuleConfig: new AppModuleConfig({
44+
imports: [
45+
IgxButtonModule,
46+
IgxIconModule,
47+
IgxProgressBarModule,
48+
IgxRippleModule,
49+
CircularDynamicSampleComponent],
50+
ngDeclarations: [CircularDynamicSampleComponent],
51+
ngImports: [
52+
IgxButtonModule,
53+
IgxIconModule,
54+
IgxProgressBarModule,
55+
IgxRippleModule]
56+
}),
57+
shortenComponentPathBy: "/data-display/"
58+
}));
59+
4060
configs.push(new Config({
4161
component: CircularStylingSampleComponent,
4262
appModuleConfig: new AppModuleConfig({
43-
imports: [IgxButtonModule, IgxIconModule, IgxProgressBarModule,
44-
IgxRippleModule, CircularStylingSampleComponent],
63+
imports: [IgxProgressBarModule, CircularStylingSampleComponent],
4564
ngDeclarations: [CircularStylingSampleComponent],
46-
ngImports: [IgxButtonModule, IgxIconModule, IgxProgressBarModule, IgxRippleModule]
65+
ngImports: [IgxProgressBarModule]
4766
}),
4867
shortenComponentPathBy: "/data-display/circular-progressbar/"
4968
}));

‎src/app/data-display/circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<div class="wrapper">
2+
<div class="sample-content">
3+
<igx-circular-bar
4+
[value]="currentValue"
5+
[max]="100"
6+
[animate]="true"
7+
class="custom-size"
8+
>
9+
<ng-template igxProgressBarGradient let-id>
10+
<svg:linearGradient [id]="id" gradientTransform="rotate(90)">
11+
<stop offset="0%" stop-color="#ff9a40"/>
12+
<stop offset="50%" stop-color="#1eccd4"/>
13+
<stop offset="100%" stop-color="#ff0079"/>
14+
</svg:linearGradient>
15+
</ng-template>
16+
</igx-circular-bar>
17+
18+
<div class="button-container">
19+
<button igxButton="icon" (click)="decrementProgress()">
20+
<igx-icon fontSet="material">remove</igx-icon>
21+
</button>
22+
<button igxButton="icon" (click)="incrementProgress()">
23+
<igx-icon fontSet="material">add</igx-icon>
24+
</button>
25+
</div>
26+
</div>
27+
</div>
28+

‎src/app/data-display/circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.custom-size {
2+
width: 100px;
3+
height: 100px;
4+
}
5+
6+
.sample-content {
7+
width: 300px;
8+
display: flex;
9+
align-items: center;
10+
margin-top: 30px;
11+
}

‎src/app/data-display/circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component, OnInit } from "@angular/core";
2+
3+
@Component({
4+
selector: "app-circular-dynamic-sample",
5+
styleUrls: ["./circular-dynamic-sample.component.scss"],
6+
templateUrl: "./circular-dynamic-sample.component.html"
7+
})
8+
export class CircularDynamicSampleComponent implements OnInit {
9+
10+
public currentValue: number;
11+
12+
public ngOnInit() {
13+
this.currentValue = 0;
14+
}
15+
16+
public incrementProgress() {
17+
this.currentValue += 10;
18+
if (this.currentValue > 100) {
19+
this.currentValue = 100;
20+
}
21+
}
22+
23+
public decrementProgress() {
24+
this.currentValue -= 10;
25+
if (this.currentValue < 0) {
26+
this.currentValue = 0;
27+
}
28+
}
29+
}

‎src/app/data-display/circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component.html

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,5 @@
1-
<div class="sample-wrapper">
2-
<section class="sample-content">
3-
<article class="sample-column">
4-
<h5>Indeterminate</h5>
5-
<div class="circular-container">
6-
<igx-circular-bar [animate]="false" [indeterminate]="isDeterminated" [textVisibility]="false"></igx-circular-bar>
7-
</div>
8-
</article>
9-
</section>
10-
<section class="sample-content">
11-
<div class="button-container">
12-
<p>Press the button to<span *ngIf="isRunning"> stop</span><span *ngIf="!isRunning"> start</span></p>
13-
<button igxButton="fab" igxButtonBackground="#333" igxRipple="white" (click)="toggle()">
14-
<igx-icon fontSet="material">{{changeIcon()}}</igx-icon>
15-
</button>
16-
</div>
17-
</section>
18-
</div>
1+
<igx-circular-bar
2+
[animate]="false"
3+
[indeterminate]="true"
4+
[textVisibility]="false"
5+
></igx-circular-bar>

‎src/app/data-display/circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component.scss

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +0,0 @@
1-
.circular-container {
2-
height: 64px;
3-
width: 64px;
4-
}
5-
6-
.button-container {
7-
margin-left: 20px;
8-
}

‎src/app/data-display/circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component.ts

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,8 @@
1-
import { Component, OnInit } from "@angular/core";
1+
import { Component } from "@angular/core";
22

33
@Component({
44
selector: "app-circular-indeterminate-progressbar",
55
styleUrls: ["./circular-indeterminate-progressbar.component.scss"],
66
templateUrl: "./circular-indeterminate-progressbar.component.html"
77
})
8-
export class CircularIndeterminateProgressbarComponent implements OnInit {
9-
10-
public isDeterminated: boolean;
11-
public isRunning: boolean;
12-
13-
constructor() { }
14-
15-
public ngOnInit() {
16-
}
17-
18-
public changeIcon() {
19-
return this.isRunning ? "pause" : "play_arrow";
20-
}
21-
22-
public toggle() {
23-
this.isDeterminated = !this.isDeterminated;
24-
this.isRunning = !this.isRunning;
25-
}
26-
}
8+
export class CircularIndeterminateProgressbarComponent { }

‎src/app/data-display/circular-progressbar/circular-progressbar.component.html

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,5 @@
1-
<div class="sample-wrapper">
2-
<h4 class="sample-title">Circular progress indicator</h4>
3-
<section class="sample-content">
4-
<article class="sample-column">
5-
<h5>Text is hidden</h5>
6-
<div class="circular-container">
7-
<igx-circular-bar [value]="currentValue" [max]="100" [animate]="true" [textVisibility]="false" (onProgressChanged)="progresChanged($event)"></igx-circular-bar>
8-
</div>
9-
</article>
10-
<article class="sample-column">
11-
<h5>Text is displayed</h5>
12-
<div class="circular-container">
13-
<igx-circular-bar [value]="currentValue" [max]="100" [animate]="true" [textVisibility]="true" (onProgressChanged)="progresChanged($event)"></igx-circular-bar>
14-
</div>
15-
</article>
16-
</section>
17-
<section class="sample-content">
18-
<div class="button-container">
19-
<p>Press the button to start updating the bar</p>
20-
<button igxButton="fab" igxButtonBackground="#333" igxRipple="white" (click)="tick()">
21-
<igx-icon fontSet="material">{{changeIcon()}}</igx-icon>
22-
</button>
23-
</div>
24-
</section>
25-
</div>
1+
<igx-circular-bar
2+
[value]="100"
3+
[animate]="true"
4+
class="custom-size"
5+
></igx-circular-bar>

‎src/app/data-display/circular-progressbar/circular-progressbar.component.scss

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
.circular-container {
2-
height: 64px;
3-
width: 64px;
1+
.custom-size {
2+
margin-top: 20px;
3+
width: 50px;
4+
height: 50px;
45
}
5-
.button-container {
6-
margin-left: 20px;
7-
}

‎src/app/data-display/circular-progressbar/circular-progressbar.component.ts

Lines changed: 2 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,8 @@
1-
import { Component, OnInit, QueryList, ViewChild, ViewEncapsulation } from "@angular/core";
2-
import { IgxCircularProgressBarComponent, IgxLinearProgressBarComponent } from "igniteui-angular";
1+
import { Component } from "@angular/core";
32

43
@Component({
5-
encapsulation: ViewEncapsulation.None,
64
selector: "app-circular-progressbar",
75
styleUrls: ["./circular-progressbar.component.scss"],
86
templateUrl: "./circular-progressbar.component.html"
97
})
10-
export class CircularProgressbarComponent implements OnInit {
11-
12-
public currentValue: number;
13-
public interval: any;
14-
15-
@ViewChild(IgxCircularProgressBarComponent, { static: true }) public circularBar: IgxCircularProgressBarComponent;
16-
17-
constructor() { }
18-
19-
public ngOnInit() {
20-
this.currentValue = 0;
21-
}
22-
public changeIcon() {
23-
return this.interval ? "pause" : "play_arrow";
24-
}
25-
public tick() {
26-
if (this.interval) {
27-
this.interval = clearInterval(this.interval);
28-
return;
29-
}
30-
this.interval = setInterval(this.updateValue.bind(this), 60);
31-
}
32-
public updateValue() {
33-
this.circularBar.updateProgressSmoothly(this.currentValue += this.randomIntFromInterval(1, 3), 1);
34-
if (this.circularBar.value > this.circularBar.max + 3) {
35-
this.interval = clearInterval(this.interval);
36-
}
37-
}
38-
public progresChanged(progress) {
39-
}
40-
private randomIntFromInterval(min: number, max: number) {
41-
return Math.floor(Math.random() * (max - min + 1) + min);
42-
}
43-
44-
}
8+
export class CircularProgressbarComponent { }

‎src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.html

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,4 @@
1-
<div class="sample-wrapper">
2-
<section class="sample-content">
3-
<article class="sample-column">
4-
<h5>Indeterminate</h5>
5-
<div class="circular-container">
6-
<igx-circular-bar [animate]="false" [indeterminate]="isDeterminated" [textVisibility]="false"></igx-circular-bar>
7-
</div>
8-
</article>
9-
<article class="sample-column">
10-
<h5>Text is displayed</h5>
11-
<div class="circular-container">
12-
<igx-circular-bar #progBar [value]="currentValue" [max]="100" [animate]="true" [textVisibility]="true" (onProgressChanged)="progresChanged($event)"></igx-circular-bar>
13-
</div>
14-
</article>
15-
</section>
16-
<section class="sample-content">
17-
<div class="button-container">
18-
<p>Press the button to<span *ngIf="isRunning"> stop</span><span *ngIf="!isRunning"> start</span></p>
19-
<button igxButton="fab" igxButtonBackground="#333" igxRipple="white" (click)="toggle()">
20-
<igx-icon fontSet="material">{{changeIcon()}}</igx-icon>
21-
</button>
22-
</div>
23-
</section>
24-
</div>
1+
<igx-circular-bar
2+
[animate]="false"
3+
[indeterminate]="true"
4+
></igx-circular-bar>

‎src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss

Lines changed: 3 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,64 +4,10 @@
44

55
$custom-theme: igx-progress-circular-theme(
66
$base-circle-color: lightgray,
7-
$progress-circle-color: rgb(32, 192, 17),
8-
$text-color: lightgray
9-
);
10-
11-
/*ENHANCED APPROACHES*/
12-
13-
// $gray-color: lightgray;
14-
// $green-color: rgb(32, 192, 17);
15-
16-
/*PALETTE*/
17-
18-
// $custom-palette: igx-palette(
19-
// $primary: $gray-color,
20-
// $secondary: $green-color
21-
// );
22-
23-
// $custom-theme: igx-progress-circular-theme(
24-
// $base-circle-color: igx-color($custom-palette, "primary", 500),
25-
// $progress-circle-color: igx-color($custom-palette, "secondary", 500),
26-
// $text-color: igx-color($custom-palette, "primary", 500)
27-
// );
28-
29-
/*SCHEMAS*/
30-
31-
// $custom-progress-schema: extend($_light-progress-circular,
32-
// (
33-
// base-circle-color: (igx-color:('primary', 500)),
34-
// progress-circle-color: (igx-color:('secondary', 500)),
35-
// text-color: (igx-color:('primary', 500))
36-
// )
37-
// );
7+
$progress-circle-color: rgb(32, 192, 17)
388
39-
// $my-custom-schema: extend($light-schema,
40-
// (
41-
// igx-circular-bar: $custom-progress-schema
42-
// )
43-
// );
44-
45-
/*THEME*/
46-
47-
// $custom-theme: igx-progress-circular-theme(
48-
// $palette: $custom-palette,
49-
// $schema: $my-custom-schema
50-
// );
51-
52-
/*INCLUSION by DEFAULT ViewEncapsulation strategy*/
9+
);
5310

5411
:host {
55-
::ng-deep {
56-
@include igx-progress-circular($custom-theme);
57-
}
12+
@include igx-css-vars($custom-theme);
5813
}
59-
60-
.circular-container {
61-
height: 64px;
62-
width: 64px;
63-
}
64-
65-
.button-container {
66-
margin-left: 20px;
67-
}

0 commit comments

Comments
 (0)