add some bootswatch to the docs

Kuazark · Aug 5, 2017 · aead80a · aead80a
1 parent 7039de7
commit aead80a
Show file tree

Hide file tree

Showing 12 changed files with 120 additions and 96 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@angular/platform-browser-dynamic": "^4.3.3",
     "@angular/router": "^4.3.3",
     "bootstrap": "^4.0.0-alpha.6",
+    "bootswatch": "^v4.0.0-alpha.6",
     "core-js": "^2.4.1",
     "lodash.clonedeep": "^4.5.0",
     "lodash.random": "^3.2.0",

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,5 +1,4 @@
 <app-header></app-header>
-<github-link class="cornerGithubLink"></github-link>
 
 <div class="container">
   <div class="row justify-content-center">
@@ -18,34 +17,35 @@
               </div>
 
               <div class="form-group">
-                <div class="checkbox">
-                  <label>
-                    <input type="checkbox" [(ngModel)]="options.enableHtml"> Enable Html
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="checkbox" [(ngModel)]="options.enableHtml">
+                    Enable Html (message)
                   </label>
                 </div>
-                <div class="checkbox">
-                  <label>
-                    <input type="checkbox" [(ngModel)]="options.tapToDismiss"> Tap to dismiss
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="checkbox" [(ngModel)]="options.tapToDismiss"> Tap to dismiss
                   </label>
                 </div>
-                <div class="checkbox">
-                  <label>
-                    <input type="checkbox" [(ngModel)]="options.closeButton"> Close button
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="checkbox" [(ngModel)]="options.closeButton"> Close button
                   </label>
                 </div>
-                <div class="checkbox">
-                  <label>
-                    <input type="checkbox" [(ngModel)]="options.preventDuplicates"> Prevent duplicates
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="checkbox" [(ngModel)]="options.preventDuplicates"> Prevent duplicates
                   </label>
                 </div>
-                <div class="checkbox">
-                  <label>
-                    <input type="checkbox" [(ngModel)]="options.newestOnTop"> New toasts on top
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="checkbox" [(ngModel)]="options.newestOnTop"> New toasts on top
                   </label>
                 </div>
-                <div class="checkbox">
-                  <label>
-                    <input type="checkbox" [(ngModel)]="options.progressBar"> Progress bar
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="checkbox" [(ngModel)]="options.progressBar"> Progress bar
                   </label>
                 </div>
               </div>
@@ -58,52 +58,52 @@
               </div>
               <div class="form-group">
                 <label for="maxNumberToasts">Maximum Toasts</label>
-                <input [(ngModel)]="toastrService.toastrConfig.maxOpened" type="text" class="form-control" id="maxNumberToasts" aria-describedby="maxNumberToastsHelp">
+                <input [(ngModel)]="toastr.toastrConfig.maxOpened" type="text" class="form-control" id="maxNumberToasts" aria-describedby="maxNumberToastsHelp">
                 <small id="maxNumberToastsHelp" class="form-text text-muted">0 is no limit</small>
               </div>
               <div class="form-group">
                 <label for="toastExtendedTimeout">Extended Timeout</label>
-                <input type="text" [(ngModel)]="toastrService.toastrConfig.extendedTimeOut" class="form-control" id="toastExtendedTimeout">
+                <input type="text" [(ngModel)]="toastr.toastrConfig.extendedTimeOut" class="form-control" id="toastExtendedTimeout">
               </div>
               <div class="checkbox">
                 <label>
-                  <input type="checkbox" [(ngModel)]="toastrService.toastrConfig.autoDismiss"> Auto dismiss on max
+                  <input type="checkbox" [(ngModel)]="toastr.toastrConfig.autoDismiss"> Auto dismiss on max
                 </label>
               </div>
             </div>
             <div class="col-md-3">
               <fieldset class="form-group">
                 <label>Toast type</label>
-                <div class="radio">
-                  <label>
-                    <input type="radio" name="typeRadios" [(ngModel)]="type" value="success">
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="typeRadios" [(ngModel)]="type" value="success">
                     Success
                   </label>
                 </div>
-                <div class="radio">
-                  <label>
-                    <input type="radio" name="typeRadios" [(ngModel)]="type" value="info">
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="typeRadios" [(ngModel)]="type" value="info">
                     Info
                   </label>
                 </div>
-                <div class="radio">
-                  <label>
-                    <input type="radio" name="typeRadios" [(ngModel)]="type" value="warning">
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="typeRadios" [(ngModel)]="type" value="warning">
                     Warning
                   </label>
                 </div>
-                <div class="radio">
-                  <label>
-                    <input type="radio" name="typeRadios" [(ngModel)]="type" value="error">
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="typeRadios" [(ngModel)]="type" value="error">
                     Error
                   </label>
                 </div>
               </fieldset>
               <fieldset class="form-group">
                 <label>Toast position</label>
-                <div class="radio">
-                  <label>
-                    <input type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-top-right">
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-top-right">
                     Top Right
                   </label>
                 </div>
@@ -113,59 +113,77 @@
                     Bottom Right
                   </label>
                 </div>
-                <div class="radio">
-                  <label>
-                    <input type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-bottom-left">
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-bottom-left">
                     Bottom Left
                   </label>
                 </div>
-                <div class="radio">
-                  <label>
-                    <input type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-top-left">
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-top-left">
                     Top Left
                   </label>
                 </div>
-                <div class="radio">
-                  <label>
-                    <input type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-top-full-width">
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-top-full-width">
                     Top Full Width
                   </label>
                 </div>
-                <div class="radio">
-                  <label>
-                    <input type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-bottom-full-width">
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-bottom-full-width">
                     Bottom Full Width
                   </label>
                 </div>
-                <div class="radio">
-                  <label>
-                    <input type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-top-center">
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-top-center">
                     Top Center
                   </label>
                 </div>
-                <div class="radio">
-                  <label>
-                    <input type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-bottom-center">
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="positionRadio" [(ngModel)]="options.positionClass" value="toast-bottom-center">
                     Bottom Center
                   </label>
                 </div>
               </fieldset>
             </div>
           </div>
 
-          <div class="row">
+          <div class="row mb-3">
             <div class="col text-center">
-              <p class="mb-0 mt-1"><small>Toast Controls:</small></p>
-              <button (click)="openToast()" type="button" role="button" class="btn btn-primary">Open Toast</button>
-              <button (click)="clearLastToast()" type="button" role="button" class="btn btn-secondary">Clear Last Toast</button>
-              <button (click)="clearToasts()" type="button" role="button" class="btn btn-secondary">Clear All Toasts</button>
+              <p class="mb-1"><small>Toast Controls:</small></p>
+              <div class="row justify-content-center">
+                <div class="col-xl-2 col-md-3 col-sm-4 col-12 mb-2">
+                  <button (click)="openToast()" type="button" role="button" class="btn btn-primary btn-block">
+                    Open Toast
+                  </button>
+                </div>
+                <div class="col-xl-2 col-md-3 col-sm-4 col-12 mb-2">
+                  <button (click)="clearLastToast()" type="button" role="button" class="btn btn-secondary btn-block">
+                    Clear Last Toast
+                  </button>
+                </div>
+                <div class="col-xl-2 col-md-3 col-sm-4 col-12 mb-2">
+                  <button (click)="clearToasts()" type="button" role="button" class="btn btn-secondary btn-block">
+                    Clear All Toasts
+                  </button>
+                </div>
+              </div>
             </div>
           </div>
-          <div class="row mb-3">
+          <div class="row mb-2">
             <div class="col text-center">
-              <p class="mb-0 mt-2"><small>Example Custom Toasts:</small></p>
-              <button (click)="openPinkToast()" type="button" role="button" class="btn btn-pink">Custom Pink Toast</button>
-              <button (click)="openNotyf()" type="button" role="button" class="btn btn-secondary">Notyf Example</button>
+              <p class="mb-1"><small>Example Custom Toasts:</small></p>
+              <button (click)="openPinkToast()" type="button" role="button" class="btn btn-pink">
+                Pink Toast
+              </button>
+              <button (click)="openNotyf()" type="button" role="button" class="btn btn-secondary">
+                Notyf
+              </button>
             </div>
           </div>
         </div>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -49,12 +49,12 @@ export class AppComponent {
   private lastInserted: number[] = [];
 
   constructor(
-    public toastrService: ToastrService,
+    public toastr: ToastrService,
     private t: Title
   ) {
     // sync options to toastrservice
     // this sets the options in the demo
-    this.options = this.toastrService.toastrConfig;
+    this.options = this.toastr.toastrConfig;
     const current = t.getTitle();
     // fix for tests
     if (json) {
@@ -71,7 +71,7 @@ export class AppComponent {
       t = randomMessage.title;
     }
     const opt = cloneDeep(this.options);
-    const inserted = this.toastrService[this.type](m, t, opt);
+    const inserted = this.toastr[this.type](m, t, opt);
     if (inserted) {
       this.lastInserted.push(inserted.toastId);
     }
@@ -88,7 +88,7 @@ export class AppComponent {
       m = randomMessage.message;
       t = randomMessage.title;
     }
-    const inserted = this.toastrService.show(m, t, opt);
+    const inserted = this.toastr.show(m, t, opt);
     if (inserted) {
       this.lastInserted.push(inserted.toastId);
     }
@@ -108,16 +108,16 @@ export class AppComponent {
       t = randomMessage.title;
     }
     m = m || 'Success';
-    const inserted = this.toastrService.show(m, t, opt);
+    const inserted = this.toastr.show(m, t, opt);
     if (inserted) {
       this.lastInserted.push(inserted.toastId);
     }
     return inserted;
   }
   clearToasts() {
-    this.toastrService.clear();
+    this.toastr.clear();
   }
   clearLastToast() {
-    this.toastrService.clear(this.lastInserted.pop());
+    this.toastr.clear(this.lastInserted.pop());
   }
 }
diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts
@@ -3,7 +3,7 @@ import { Component, OnInit, VERSION } from '@angular/core';
 @Component({
   selector: 'app-footer',
   template: `
-  <footer class="footer">
+  <footer class="footer mb-4 mt-5">
     Demo using Anuglar {{version}}
     <br>
     Released under the
@@ -13,17 +13,11 @@ import { Component, OnInit, VERSION } from '@angular/core';
   `,
   styles: [`
   .footer {
-    margin-top: 3rem;
     line-height: 2;
     text-align: center;
     font-size: 12px;
     color: #999;
   }
-  @media only screen and (max-width: 480px) {
-    .footer {
-      font-size: 10px;
-    }
-  }
   `],
 })
 export class FooterComponent implements OnInit {

diff --git a/src/app/github-link/github-link.component.ts b/src/app/github-link/github-link.component.ts
@@ -6,23 +6,16 @@ import { Component, Input } from '@angular/core';
   .githubLink {
     text-decoration: none;
   }
-  .githubLink img {
-    width: 36px;
-  }
   `],
   template: `
-  <a class="githubLink {{className}}"
-    [href]="href(username, repo)"
-  >
-    <img alt="Github mark" src="./assets/github-icon.svg" />
+  <a class="githubLink" [href]="href(username, repo)">
+    <svg fill="#181717" height="32" aria-labelledby="title" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
   </a>
   `,
 })
 export class GithubLinkComponent {
-  @Input() className = '';
   @Input() username = 'scttcper';
   @Input() repo = 'ngx-toastr';
-  // githubIcon = githubIcon;
   constructor() { }
 
   href(username, repo) {

diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
@@ -8,12 +8,15 @@ import { Component, OnInit } from '@angular/core';
   }
   .header h1 {
     font-size: 46px;
+    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
+    font-weight: bold;
   }
   `],
   template: `
-  <header class="header">
+  <header class="header mt-5">
     <h1>Angular Toastr</h1>
     <p>Easy Toasts for Angular.</p>
+    <github-link></github-link>
   </header>
   `,
 })

diff --git a/src/assets/github-icon.png b/src/assets/github-icon.png
diff --git a/src/assets/github-icon.svg b/src/assets/github-icon.svg
diff --git a/src/index.html b/src/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>Angular Toastr</title>
   <base href="/">
 

diff --git a/src/lib/toastr/toastr-config.ts b/src/lib/toastr/toastr-config.ts
@@ -1,4 +1,3 @@
-/* tslint:disable:no-inferrable-types */
 import { SafeHtml } from '@angular/platform-browser';
 
 import { Subject } from 'rxjs/Subject';