7/20/16 ComponentAdded

app/app.ts

@@ -25,6 +25,11 @@ import {GridPage} from './pages/grid/grid';
 import {IconsPage} from './pages/icons/icons';
 import {InputPage} from './pages/inputs/inputs';
 import {LoadingPage} from './pages/loading/loading';
+import {BasicPage} from './pages/popover/popover';
+import {RadioPage} from './pages/radio/radio';
+import {RangePage} from  './pages/range/range';
+import {SearchbarPage} from  './pages/searchbar/searchbar';
+import {SegmentPage} from  './pages/segment/segment';
 
 
 @Component({
@@ -54,6 +59,11 @@ constructor(private platform:Platform, private menu: MenuController ) {
         { title: "Icons",component:IconsPage},
         { title: "Inputs",component:InputPage},
         { title: "Loading",component:LoadingPage},
+        { title: "Popover", component:BasicPage},
+        { title: "Radio", component:RadioPage},
+        { title: "Range", component:RangePage},
+        { title: "Searchbar", component:SearchbarPage},
+        { title: "Segment", component:SegmentPage},
         { title: "My ChatRooms", component: HomePage },
         { title: "Public Chat Rooms", component: TabsPage },
         { title: "Toolbar" , component: ToolbarPage}

app/pages/buttons/buttons.html

@@ -0,0 +1,12 @@
+<ion-header>
+    <ion-navbar>
+    <button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Buttons</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content padding class="button">
+
+</ion-content>

app/pages/buttons/buttons.scss

@@ -0,0 +1,3 @@
+.button {
+
+}

app/pages/buttons/buttons.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {NavController, MenuController} from 'ionic-angular';
+
+@Component({
+  templateUrl: 'build/pages/buttons/buttons.html'
+})
+export class ButtonPage {
+  constructor(private navController: NavController,menu: MenuController) {
+    menu.enable(true);
+  }
+}

app/pages/popover/popover.html

@@ -0,0 +1,17 @@
+<ion-header>
+    <ion-navbar favorite>
+    <button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Popover</ion-title>
+    <ion-buttons end>
+      <button (click)="presentPopover($event)">
+        <ion-icon name="more"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-navbar>
+</ion-header>
+
+<ion-content padding class="popover">
+
+</ion-content>

app/pages/popover/popover.scss

@@ -0,0 +1,3 @@
+.home {
+
+}

app/pages/popover/popover.ts

@@ -0,0 +1,157 @@
+import {Component, ViewChild, ElementRef} from '@angular/core';
+import {App, Popover, NavController, Content, NavParams} from 'ionic-angular';
+
+@Component({
+  template: `
+    <ion-list radio-group [(ngModel)]="fontFamily" (ionChange)="changeFontFamily()" class="popover-page">
+      <ion-row>
+        <ion-col>
+          <button (click)="changeFontSize('smaller')" ion-item detail-none class="text-button text-smaller">A</button>
+        </ion-col>
+        <ion-col>
+          <button (click)="changeFontSize('larger')" ion-item detail-none class="text-button text-larger">A</button>
+        </ion-col>
+      </ion-row>
+      <ion-row class="row-dots">
+        <ion-col>
+          <button (click)="changeBackground('white')" category="dot" class="dot-white" [class.selected]="background == 'white'"></button>
+        </ion-col>
+        <ion-col>
+          <button (click)="changeBackground('tan')" category="dot" class="dot-tan" [class.selected]="background == 'tan'"></button>
+        </ion-col>
+        <ion-col>
+          <button (click)="changeBackground('grey')" category="dot" class="dot-grey" [class.selected]="background == 'grey'"></button>
+        </ion-col>
+        <ion-col>
+          <button (click)="changeBackground('black')" category="dot" class="dot-black" [class.selected]="background == 'black'"></button>
+        </ion-col>
+      </ion-row>
+      <ion-item class="text-athelas">
+        <ion-label>Athelas</ion-label>
+        <ion-radio value="Athelas"></ion-radio>
+      </ion-item>
+      <ion-item class="text-charter">
+        <ion-label>Charter</ion-label>
+        <ion-radio value="Charter"></ion-radio>
+      </ion-item>
+      <ion-item class="text-iowan">
+        <ion-label>Iowan</ion-label>
+        <ion-radio value="Iowan"></ion-radio>
+      </ion-item>
+      <ion-item class="text-palatino">
+        <ion-label>Palatino</ion-label>
+        <ion-radio value="Palatino"></ion-radio>
+      </ion-item>
+      <ion-item class="text-san-francisco">
+        <ion-label>San Francisco</ion-label>
+        <ion-radio value="San Francisco"></ion-radio>
+      </ion-item>
+      <ion-item class="text-seravek">
+        <ion-label>Seravek</ion-label>
+        <ion-radio value="Seravek"></ion-radio>
+      </ion-item>
+      <ion-item class="text-times-new-roman">
+        <ion-label>Times New Roman</ion-label>
+        <ion-radio value="Times New Roman"></ion-radio>
+      </ion-item>
+    </ion-list>
+  `,
+})
+class PopoverPage {
+  background: string;
+  contentEle: any;
+  textEle: any;
+  fontFamily;
+
+  colors = {
+    'white': {
+      'bg': 'rgb(255, 255, 255)',
+      'fg': 'rgb(0, 0, 0)'
+    },
+    'tan': {
+      'bg': 'rgb(249, 241, 228)',
+      'fg': 'rgb(0, 0, 0)'
+    },
+    'grey': {
+      'bg': 'rgb(76, 75, 80)',
+      'fg': 'rgb(255, 255, 255)'
+    },
+    'black': {
+      'bg': 'rgb(0, 0, 0)',
+      'fg': 'rgb(255, 255, 255)'
+    },
+  };
+
+  constructor(private navParams: NavParams) {
+
+  }
+
+  ngOnInit() {
+    if (this.navParams.data) {
+      this.contentEle = this.navParams.data.contentEle;
+      this.textEle = this.navParams.data.textEle;
+
+      this.background = this.getColorName(this.contentEle.style.backgroundColor);
+      this.setFontFamily();
+    }
+  }
+
+  getColorName(background) {
+    let colorName = 'white';
+
+    if (!background) return 'white';
+
+    for(var key in this.colors) {
+      if (this.colors[key].bg == background) {
+        colorName = key;
+      }
+    }
+
+    return colorName;
+  }
+
+  setFontFamily() {
+    if (this.textEle.style.fontFamily) {
+      this.fontFamily = this.textEle.style.fontFamily.replace(/'/g, "");
+    }
+  }
+
+  changeBackground(color) {
+    this.background = color;
+    this.contentEle.style.backgroundColor = this.colors[color].bg;
+    this.textEle.style.color = this.colors[color].fg;
+  }
+
+  changeFontSize(direction) {
+    this.textEle.style.fontSize = direction;
+  }
+
+  changeFontFamily() {
+    if (this.fontFamily) this.textEle.style.fontFamily = this.fontFamily;
+  }
+}
+
+
+@Component({
+  templateUrl: 'build/pages/popover/popover.html'
+
+})
+export class BasicPage {
+  @ViewChild('popoverContent', {read: ElementRef}) content: ElementRef;
+  @ViewChild('popoverText', {read: ElementRef}) text: ElementRef;
+
+  constructor(private nav: NavController) {
+
+  }
+
+  presentPopover(ev) {
+    let popover = Popover.create(PopoverPage, {
+      contentEle: this.content.nativeElement,
+      textEle: this.text.nativeElement
+    });
+
+    this.nav.present(popover, {
+      ev: ev
+    });
+  }
+}

app/pages/radio/radio.html

@@ -0,0 +1,66 @@
+<ion-header>
+    <ion-navbar favorite>
+    <button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Radio</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content padding class="radio">
+  <form (submit)="doSubmit($event)" [ngFormModel]="langForm">
+      <ion-list radio-group ngControl="langs">
+          <ion-list-header>
+            Language
+          </ion-list-header>
+           <ion-item>
+        <ion-label>Go</ion-label>
+        <ion-radio value="golang" checked="true"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>Rust</ion-label>
+        <ion-radio value="rust"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>Python</ion-label>
+        <ion-radio value="python"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>Ruby</ion-label>
+        <ion-radio value="ruby"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>Clojure</ion-label>
+        <ion-radio value="clojure"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>Java</ion-label>
+        <ion-radio value="java"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>PHP</ion-label>
+        <ion-radio value="php"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>.NET</ion-label>
+        <ion-radio value="dotnet"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>C++</ion-label>
+        <ion-radio value="cplusplus"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>Scala</ion-label>
+        <ion-radio value="scala"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>Haskell</ion-label>
+        <ion-radio value="haskell"></ion-radio>
+      </ion-item>
+      <ion-item>
+        <ion-label>Erlang</ion-label>
+        <ion-radio value="erlang"></ion-radio>
+      </ion-item>
+      </ion-list>
+  </form>
+</ion-content>

app/pages/radio/radio.scss

@@ -0,0 +1,3 @@
+.home {
+
+}

app/pages/radio/radio.ts

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {NavController, MenuController} from 'ionic-angular';
+import {
+  Control,
+  ControlGroup,
+  NgForm,
+  Validators,
+  ControlValueAccessor,
+  NgControlName,
+  NgFormModel,
+  FormBuilder
+} from '@angular/common';
+
+@Component({
+  templateUrl: 'build/pages/radio/radio.html'
+})
+export class RadioPage {
+  langs;
+  langForm;
+  constructor(private navController: NavController,menu: MenuController) {
+    menu.enable(true);
+    this.langs = new Control("");
+    this.langForm = new ControlGroup({
+      "langs" : this.langs
+    });
+  }
+  doSubmit(event){
+     console.log('Submitting form', this.langForm.value);
+     event.preventDefault();
+  }
+}

app/pages/range/range.html

@@ -0,0 +1,61 @@
+<ion-header>
+    <ion-navbar favorite>
+    <button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Range</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content class="outer-content">
+  <ion-list>
+    <ion-list-header>
+      Adjust Display
+    </ion-list-header>
+    <ion-item>
+      <ion-range [(ngModel)]="brightness">
+        <ion-icon range-left small name="sunny"></ion-icon>
+        <ion-icon range-right name="sunny"></ion-icon>
+      </ion-range>
+    </ion-item>
+    <ion-item>
+      <ion-range min="-200" max="200" pin="true" [(ngModel)]="contrast" secondary>
+        <ion-icon range-left small name="contrast"></ion-icon>
+        <ion-icon range-right name="contrast"></ion-icon>
+      </ion-range>
+    </ion-item>
+    <ion-item>
+      <ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" dark>
+        <ion-icon range-left small name="brush"></ion-icon>
+        <ion-icon range-right name="brush"></ion-icon>
+      </ion-range>
+    </ion-item>
+    <ion-item>
+      <ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" danger>
+        <ion-icon range-left small danger name="thermometer"></ion-icon>
+        <ion-icon range-right danger name="thermometer"></ion-icon>
+      </ion-range>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      Adjust Text
+    </ion-list-header>
+    <ion-item>
+      <ion-range min="-100" step="10" snaps="true" [(ngModel)]="text">
+        <ion-label range-left class="small-text">A</ion-label>
+        <ion-label range-right>A</ion-label>
+      </ion-range>
+    </ion-item>
+  </ion-list>
+</ion-content>
+
+<style>
+  ion-list + ion-list {
+    margin-top: 0;
+  }
+  .small-text {
+    font-size: 10px;
+  }
+</style>