docs: update examples with new icons and typo fixes

lokesh-coder · lokesh-coder · commit f1d625ae5314 · 2019-01-05T23:53:23.000+05:30
diff --git a/docs/app/app.component.ts b/docs/app/app.component.ts
@@ -84,7 +84,7 @@ export class AppComponent {
       return ['resizable,scrollbars,status', 'height=' + height, 'width=' + width, 'left=' + left, 'top=' + top].join();
     };
     // const text = encodeURIComponent('Hey everyone, come & see how good I look!');
-    const shareUrl = `https://twitter.com/intent/tweet?hashtags=angular&original_referer=http%3A%2F%2Flocalhost%3A4200%2F&ref_src=twsrc%5Etfw&text=Cute%20overlay%20library%20for%20Angular%20-%20tooltips%2C%20modals%2C%20toastr%2C%20menu%2C%20dropdowns%2C%20alerts%2C%20popovers%2C%20sidebar%20and%20more...%20&tw_p=tweetbutton&url=https%3A%2F%2Flokesh-coder.github.io%2Ftoppy%2F&via=lokesh-coder`;
+    const shareUrl = `https://twitter.com/intent/tweet?hashtags=angular&original_referer=http%3A%2F%2Flocalhost%3A4200%2F&ref_src=twsrc%5Etfw&text=Cute%20overlay%20library%20for%20Angular%20-%20tooltips%2C%20modals%2C%20toastr%2C%20menu%2C%20dropdowns%2C%20alerts%2C%20popovers%2C%20sidebar%20and%20more...%20&tw_p=tweetbutton&url=https%3A%2F%2Flokesh-coder.github.io%2Ftoppy%2F&via=lokesh_coder`;
 
     e.preventDefault();
     const win = window.open(shareUrl, 'ShareOnTwitter', getWindowOptions());
diff --git a/docs/app/examples/drag-example/drag-example.component.html b/docs/app/examples/drag-example/drag-example.component.html
@@ -7,7 +7,7 @@
 -->
 <div class="drag-element-holder">
   <img
-    src="./assets/img/fly.png"
+    src="./assets/icons/icons8-scooter-50.png"
     draggable="true"
     #el
     class="drag-element"
diff --git a/docs/app/examples/dropdown-example/dropdown-example.component.html b/docs/app/examples/dropdown-example/dropdown-example.component.html
@@ -1,15 +1,15 @@
 <div class="dropdown-field" #el (click)="open()" [ngClass]="{ open: isOpen }">
-  <img src="./assets/img/{{ selectedData.icon }}.png" alt="" /> {{ selectedData.name }}
+  <img src="./assets/icons/{{ selectedData.icon }}.png" alt="" /> {{ selectedData.name }}
 </div>
 
 <div class="text-selection" #el2 (click)="open2()">
-  Do you like it? <span>{{ selectedEatable.name }}</span>
+  I like <span>{{ selectedEatable.name }}</span>
 </div>
 
 <ng-template #tpl let-toppy>
   <ul class="dropdown-ist">
     <li (click)="select(item)" *ngFor="let item of items" [ngClass]="{ selected: item.name == selectedData.name }">
-      <img src="./assets/img/{{ item.icon }}.png" alt="" /> {{ item.name }}
+      <img src="./assets/icons/{{ item.icon }}.png" alt="" /> {{ item.name }}
     </li>
   </ul>
 </ng-template>
@@ -21,7 +21,7 @@
       *ngFor="let item of eatables"
       [ngClass]="{ selected: item.name == selectedEatable.name }"
     >
-      <img src="./assets/img/{{ item.icon }}.png" alt="" />
+      <img src="./assets/icons/{{ item.icon }}.png" alt="" />
     </li>
   </ul>
 </ng-template>
diff --git a/docs/app/examples/dropdown-example/dropdown-example.component.ts b/docs/app/examples/dropdown-example/dropdown-example.component.ts
@@ -14,13 +14,20 @@ export class DropdownExampleComponent implements OnInit {
   private _toppyControl2: ToppyControl;
   @ViewChild('tpl', { read: TemplateRef }) tpl: TemplateRef<any>;
   @ViewChild('tpl2', { read: TemplateRef }) tpl2: TemplateRef<any>;
-  items = [{ name: 'Cow', icon: 'cow' }, { name: 'Goat', icon: 'goat' }, { name: 'Snake', icon: 'snake' }];
+  items = [
+    { name: 'Beer', icon: 'icons8-beer-50' },
+    { name: 'Coffee', icon: 'icons8-cafe-50' },
+    { name: 'Cocktail', icon: 'icons8-cocktail-50' },
+    { name: 'Cola', icon: 'icons8-cola-50' },
+    { name: 'Tequila', icon: 'icons8-tequila-shot-50' },
+    { name: 'Whiskey', icon: 'icons8-whiskey-50' }
+  ];
   eatables = [
-    { name: 'Nah!', icon: 'one' },
-    { name: 'Not so much', icon: 'two' },
-    { name: 'Okay', icon: 'three' },
-    { name: 'looks good!', icon: 'four' },
-    { name: 'Yes, it is cool!!', icon: 'five' }
+    { name: 'French fries', icon: 'icons8-french-fries-50' },
+    { name: 'Fried chicken', icon: 'icons8-fried-chicken-50' },
+    { name: 'Hamburger', icon: 'icons8-hamburger-50' },
+    { name: 'Pizza', icon: 'icons8-pizza-50' },
+    { name: 'Sandwich', icon: 'icons8-sandwich-50' }
   ];
   selectedData;
   selectedEatable;
diff --git a/docs/app/examples/dynamic-text-example/dynamic-text-example.component.html b/docs/app/examples/dynamic-text-example/dynamic-text-example.component.html
@@ -1,3 +1,3 @@
 <div class="drag-element-holder">
-  <img src="./assets/img/clock.png" #el (mouseenter)="onMouseOver()" (mouseleave)="onMouseLeave()" />
+  <img src="./assets/icons/icons8-watch-50.png" #el (mouseenter)="onMouseOver()" (mouseleave)="onMouseLeave()" />
 </div>
diff --git a/docs/app/examples/fullscreen-position-example/fullscreen-position-example.component.ts b/docs/app/examples/fullscreen-position-example/fullscreen-position-example.component.ts
@@ -4,11 +4,9 @@ import { HeroScreenComponent } from '../../host-components/hero-screen/hero-scre
 
 @Component({
   selector: 'app-fullscreen-position-example',
-  templateUrl: './fullscreen-position-example.component.html',
-  styles: []
+  templateUrl: './fullscreen-position-example.component.html'
 })
 export class FullscreenPositionExampleComponent implements OnInit {
-  selectedPlacement = null;
   private _toppyControl: ToppyControl;
   constructor(private toppy: Toppy) {}
 
@@ -20,13 +18,12 @@ export class FullscreenPositionExampleComponent implements OnInit {
       })
       .content(HeroScreenComponent)
       .create();
+    this._toppyControl.listen('t_compins').subscribe(d => {
+      console.log('HeroScreenComponent initiated', d);
+    });
   }
 
   open() {
     this._toppyControl.open();
   }
-
-  onOptionChange() {
-    console.log('option changed');
-  }
 }
diff --git a/docs/app/examples/global-position-example/global-position-example.component.ts b/docs/app/examples/global-position-example/global-position-example.component.ts
@@ -9,13 +9,12 @@ import { SimpleModalComponent } from '../../host-components/simple-modal/simple-
   styles: [
     `
       .global-content-wrapper {
-        background: #ff5722;
+        background: #e91e63;
         padding: 1rem 2rem;
-        border: 2px solid #c4532f;
+        border: 2px solid #cc1a57;
         border-radius: 3px;
         color: #fff;
-        text-transform: uppercase;
-        font-weight: 700;
+        font-weight: 500;
       }
     `
   ]
diff --git a/docs/app/examples/modal-example/modal-example.component.html b/docs/app/examples/modal-example/modal-example.component.html
@@ -1,18 +1,21 @@
-<div class="drag-element-holder"><img src="./assets/img/mail.png" class="pointer" #el (click)="open()" /></div>
+<div class="drag-element-holder">
+  <img src="./assets/icons/icons8-comments-50.png" class="pointer" #el (click)="open()" />
+</div>
 
-<div class="drag-element-holder"><img src="./assets/img/bomb.png" class="pointer" #el2 (click)="openImage()" /></div>
+<div class="drag-element-holder">
+  <img src="./assets/icons/icons8-dynamite-50.png" class="pointer" #el2 (click)="openImage()" />
+</div>
 
 <ng-template #modalTpl let-foo>
   <div class="modal-container">
-    <div class="modal-header"><h3 class="m-0">Modal example</h3></div>
-    <div class="modal-body">
-      <p>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur assumenda aspernatur, eligendi
-        dignissimos itaque provident accusantium dolor repellendus maiores quia veniam blanditiis ipsum, perspiciatis
-        perferendis a ex, quibusdam voluptatibus? Vel.
-      </p>
+    <div class="modal-header">Congratulations!</div>
+    <div class="modal-body text-center">
+      <div class="illus"><img src="./assets/illus/congrats.svg" alt="" width="90%" /></div>
+      <div class="mt-4 desc">Wow, You made it!</div>
+    </div>
+    <div class="modal-footer text-center pt-0">
+      <button class="dismiss btn btn-dark btn-lg" (click)="foo.close()">Okay</button>
     </div>
-    <div class="modal-footer"><button class="dismiss btn btn-danger" (click)="foo.close()">Close</button></div>
   </div>
 </ng-template>
-<img src="./assets/img/blast.png" style="display:none;" />
+<img src="./assets/icons/icons8-firework-explosion-100.png" style="display:none;" />
diff --git a/docs/app/examples/modal-example/modal-example.component.ts b/docs/app/examples/modal-example/modal-example.component.ts
@@ -18,7 +18,7 @@ export class ModalExampleComponent implements OnInit {
       .position(
         new GlobalPosition({
           placement: InsidePlacement.CENTER,
-          width: '40%',
+          width: 300,
           height: 'auto'
         })
       )
@@ -34,15 +34,15 @@ export class ModalExampleComponent implements OnInit {
       .position(
         new GlobalPosition({
           placement: InsidePlacement.CENTER,
-          width: '25%',
+          width: 'auto',
           height: 'auto'
         })
       )
       .config({
         closeOnEsc: true,
         closeOnDocClick: true
       })
-      .content('<img src="./assets/img/blast.png" width="100%"/>', { hasHTML: true })
+      .content('<img src="./assets/icons/icons8-firework-explosion-100.png" width="100%"/>', { hasHTML: true })
       .create();
   }
   open() {
diff --git a/docs/app/host-components/hero-screen/hero-screen.component.ts b/docs/app/host-components/hero-screen/hero-screen.component.ts
@@ -7,7 +7,6 @@ import { Component } from '@angular/core';
 })
 export class HeroScreenComponent {
   close;
-  constructor() {}
   dispose() {
     this.close();
   }
diff --git a/docs/app/host-components/simple-list/simple-list.component.html b/docs/app/host-components/simple-list/simple-list.component.html
@@ -1 +1 @@
-<div class="comp blade"><h3 class="m-0">Slide example</h3></div>
+<div class="comp blade"><h3 class="m-0 text-success">Slide example</h3></div>

Original file line number	Diff line number	Diff line change
`@@ -9,13 +9,12 @@ import { SimpleModalComponent } from '../../host-components/simple-modal/simple-`
`9`	`9`	`styles: [`
`10`	`10`	`
`11`	`11`	`.global-content-wrapper {`
`12`		`- background: #ff5722;`
	`12`	`+ background: #e91e63;`
`13`	`13`	`padding: 1rem 2rem;`
`14`		`- border: 2px solid #c4532f;`
	`14`	`+ border: 2px solid #cc1a57;`
`15`	`15`	`border-radius: 3px;`
`16`	`16`	`color: #fff;`
`17`		`- text-transform: uppercase;`
`18`		`- font-weight: 700;`
	`17`	`+ font-weight: 500;`
`19`	`18`	`}`
`20`	`19`	`
`21`	`20`	`]`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,6 @@ import { Component } from '@angular/core';`
`7`	`7`	`})`
`8`	`8`	`export class HeroScreenComponent {`
`9`	`9`	`close;`
`10`		`- constructor() {}`
`11`	`10`	`dispose() {`
`12`	`11`	`this.close();`
`13`	`12`	`}`