chore(docs): fix progress bar for bs3, templates merged in ugly way

valor-software · Dec 7, 2016 · fe7e39b · fe7e39b
1 parent 97660df
commit fe7e39b
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 7 deletions.
diff --git a/demo/src/app/components/progressbar/demos/progressbar-demo-bs3.component.html b/demo/src/app/components/progressbar/demos/progressbar-demo-bs3.component.html
@@ -0,0 +1,82 @@
+<div *ngIf="isBs3">
+<h3>Static</h3>
+<div class="row">
+  <div class="col-sm-4">
+    <progressbar value="55"></progressbar>
+  </div>
+  <div class="col-sm-4">
+    <progressbar class="progress-striped" value="22" type="warning">22%</progressbar>
+  </div>
+  <div class="col-sm-4">
+    <progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progressbar>
+  </div>
+</div>
+
+<hr/>
+<h3>Dynamic
+  <button type="button" class="btn btn-sm btn-primary" (click)="random()">Randomize</button>
+</h3>
+<progressbar [max]="max" [value]="dynamic"><span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span>
+</progressbar>
+
+<small><em>No animation</em></small>
+<progressbar [animate]="false" [value]="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>
+
+<small><em>Object (changes type based on value)</em></small>
+<progressbar class="progress-striped active" [value]="dynamic" [type]="type">{{type}} <i *ngIf="showWarning">!!!
+  Watch out !!!</i></progressbar>
+
+<hr/>
+<h3>Stacked
+  <button type="button" class="btn btn-sm btn-primary" (click)="randomStacked()">Randomize</button>
+</h3>
+<bs-progress>
+  <bar *ngFor="let baz of stacked" [value]="baz.value" [type]="baz?.type">
+    <span *ngIf="baz.value > 5">{{baz?.value}}%</span>
+  </bar>
+</bs-progress>
+</div>
+
+<div *ngIf="!isBs3">
+  <h3>In bootstrap 4 progress has a different concept, no inner text, no default transition animation</h3>
+  <h3>Static</h3>
+  <div class="row">
+    <div class="col-sm-4">
+      <progress class="progress" value="55" max="100"></progress>
+    </div>
+    <div class="col-sm-4">
+      <progress class="progress progress-striped" value="22" max="100" type="warning">22%</progress>
+    </div>
+    <div class="col-sm-4">
+      <progress class="progress progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progress>
+    </div>
+  </div>
+
+  <h3>Dynamic <button type="button" class="btn btn-sm btn-primary" (click)="random()">Randomize</button></h3>
+  <progress class="progress progress-striped progress-animated" [max]="max" [value]="dynamic">
+    <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span>
+  </progress>
+
+  <small><em>No animation</em></small>
+  <progress class="progress progress-success" [value]="dynamic" [max]="100"><b>{{dynamic}}%</b></progress>
+
+  <small><em>Object (changes type based on value)</em></small>
+  <progress class="progress progress-striped progress-animated active progress-{{ type }}" [value]="dynamic" [max]="max">
+    {{type}} <i *ngIf="showWarning">!!! Watch out !!!</i>
+  </progress>
+
+  <hr />
+  <h3>Stacked <button type="button" class="btn btn-sm btn-primary" (click)="randomStacked()">Randomize</button></h3>
+  <div class="row col-lg-12">
+    <!-- todo: implement as component -->
+    <progress *ngFor="let baz of stacked"
+              class="progress progress-{{ baz?.type }}"
+              style="float: left;"
+              [ngStyle]="{width: baz.value + '%'}"
+              [value]="baz.value" [max]="baz.max">
+      <span *ngIf="baz.value > 3">{{baz?.value}}%</span>
+    </progress>
+    <!-- gray background -->
+    <progress class="progress" value="0" max="100" style="width: 100%;"></progress>
+  </div>
+</div>
diff --git a/demo/src/app/components/progressbar/demos/progressbar-demo.component.html b/demo/src/app/components/progressbar/demos/progressbar-demo.component.html
@@ -1,3 +1,4 @@
+<div *ngIf="isBs3">
 <h3>Static</h3>
 <div class="row">
   <div class="col-sm-4">
@@ -34,3 +35,48 @@ <h3>Stacked
     <span *ngIf="baz.value > 5">{{baz?.value}}%</span>
   </bar>
 </bs-progress>
+</div>
+
+<div *ngIf="!isBs3">
+  <h3>In bootstrap 4 progress has a different concept, no inner text, no default transition animation</h3>
+  <h3>Static</h3>
+  <div class="row">
+    <div class="col-sm-4">
+      <progress class="progress" value="55" max="100"></progress>
+    </div>
+    <div class="col-sm-4">
+      <progress class="progress progress-striped" value="22" max="100" type="warning">22%</progress>
+    </div>
+    <div class="col-sm-4">
+      <progress class="progress progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progress>
+    </div>
+  </div>
+
+  <h3>Dynamic <button type="button" class="btn btn-sm btn-primary" (click)="random()">Randomize</button></h3>
+  <progress class="progress progress-striped progress-animated" [max]="max" [value]="dynamic">
+    <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span>
+  </progress>
+
+  <small><em>No animation</em></small>
+  <progress class="progress progress-success" [value]="dynamic" [max]="100"><b>{{dynamic}}%</b></progress>
+
+  <small><em>Object (changes type based on value)</em></small>
+  <progress class="progress progress-striped progress-animated active progress-{{ type }}" [value]="dynamic" [max]="max">
+    {{type}} <i *ngIf="showWarning">!!! Watch out !!!</i>
+  </progress>
+
+  <hr />
+  <h3>Stacked <button type="button" class="btn btn-sm btn-primary" (click)="randomStacked()">Randomize</button></h3>
+  <div class="row col-lg-12">
+    <!-- todo: implement as component -->
+    <progress *ngFor="let baz of stacked"
+              class="progress progress-{{ baz?.type }}"
+              style="float: left;"
+              [ngStyle]="{width: baz.value + '%'}"
+              [value]="baz.value" [max]="baz.max">
+      <span *ngIf="baz.value > 3">{{baz?.value}}%</span>
+    </progress>
+    <!-- gray background -->
+    <progress class="progress" value="0" max="100" style="width: 100%;"></progress>
+  </div>
+</div>
diff --git a/demo/src/app/components/progressbar/demos/progressbar-demo.component.ts b/demo/src/app/components/progressbar/demos/progressbar-demo.component.ts
@@ -1,20 +1,20 @@
 import { Component } from '@angular/core';
 
 import { Ng2BootstrapConfig, Ng2BootstrapTheme } from 'ng2-bootstrap';
-const isBs3 = Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS3;
-const templateUrl = isBs3 ? './progressbar-demo.component.html' : './progressbar-demo-bs4.component.html';
 
 @Component({
   selector: 'progressbar-demo',
-  // tslint:disable-next-line
-  templateUrl: templateUrl
+  templateUrl: './progressbar-demo.component.html'
 })
 export class ProgressbarDemoComponent {
   public max: number = 200;
   public showWarning: boolean;
   public dynamic: number;
   public type: string;
   public stacked: any[] = [];
+  public get isBs3(): boolean {
+    return Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS3;
+  }
 
   public constructor() {
     this.random();

diff --git a/demo/src/app/components/progressbar/progressbar-section.component.ts b/demo/src/app/components/progressbar/progressbar-section.component.ts
@@ -9,7 +9,7 @@ let titleDoc = require('html!markdown!./docs/title.md');
 let ts = require('!!raw?lang=typescript!./demos/progressbar-demo.component.ts');
 
 let templates:any = {
-  [Ng2BootstrapTheme.BS3]: require('!!raw?lang=markup!./demos/progressbar-demo.component.html'),
+  [Ng2BootstrapTheme.BS3]: require('!!raw?lang=markup!./demos/progressbar-demo-bs3.component.html'),
   [Ng2BootstrapTheme.BS4]: require('!!raw?lang=markup!./demos/progressbar-demo-bs4.component.html')
 };
 

diff --git a/demo/src/assets/css/prettify-angulario.css b/demo/src/assets/css/prettify-angulario.css
@@ -36,7 +36,7 @@
   font-size: 13px
 }
 
-.prettyprint ol li {
+.prettyprint ol li,.prettyprint .tag {
   color: #7a8b94;
   background: none;
   margin-bottom: 5px;

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "typedoc": "typedoc --exclude '**/*.spec.ts' ./src/",
     "demo.serve": "run-s build demo.build lite-server",
     "demo.gh-pages": "run-s build demo.build demo.deploy",
-    "demo.build": "ng build -p --aot && npm run generate-bs4",
+    "demo.build": "ng build -prod --aot && npm run generate-bs4",
     "demo.deploy": "gh-pages -d demo/dist",
     "link": "ngm link -p src && npm link ng2-bootstrap",
     "lint": "tslint \"**/*.ts\" -c tslint.json --fix --type-check -t prose -e \"node_modules/**\" -e \"dist/**\" -e \"temp/**\"",