Adds separate menu item for ionic official components

src/app/app.component.ts

@@ -1,12 +1,10 @@
+import { IonicOfficialComponentsPage } from '../pages/ionic-official-components/ionic-official-components';
 import { LoginListPage } from '../pages/login/login';
 import { ThemingPage } from '../pages/theming/theming';
 import { AppState } from './app.global';
 import { SlidesPage } from '../pages/slide/slide';
-import { AlertsPage } from '../pages/alert/alert';
 import { ModalsPage } from '../pages/modal/modal';
 import { ListsPage } from '../pages/list/list';
-import { ButtonsListPage } from '../pages/button/button';
-import { CardListPage } from '../pages/card/card';
 import { PopupMenuListPage } from '../pages/popup-menu/popup-menu';
 import { MiscellaneousListPage } from '../pages/miscellaneous/miscellaneous';
 import { ProfileListPage } from '../pages/profile/profile';
@@ -32,18 +30,16 @@ export class MyApp {
 
     this.pages = [
       { title: 'Home', component: HomePage },
-      { title: 'Theming', component: ThemingPage },
-      { title: 'Buttons', component: ButtonsListPage },
-      { title: 'Alerts', component: AlertsPage },
+      { title: 'Ionic Official Components', component: IonicOfficialComponentsPage },
+      { title: 'Login', component: LoginListPage },
       { title: 'Lists', component: ListsPage },
-      { title: 'Cards', component: CardListPage },
       { title: 'Modals', component: ModalsPage },
-      // Removed for now as there were breaking changes in slides
-      { title: 'Slides', component: SlidesPage },
+      { title: 'Miscellaneous', component: MiscellaneousListPage },
       { title: 'Popup Menu', component: PopupMenuListPage },
       { title: 'Profile', component: ProfileListPage },
-      { title: 'Login', component: LoginListPage },
-      { title: 'Miscellaneous', component: MiscellaneousListPage }
+      // Removed for now as there were breaking changes in slides
+      // { title: 'Slides', component: SlidesPage },
+      { title: 'Theming', component: ThemingPage },
     ];
 
   }

src/app/app.imports.ts

@@ -1,3 +1,4 @@
+import { IonicOfficialComponentsPage } from '../pages/ionic-official-components/ionic-official-components';
 import { ChartsPage } from '../pages/miscellaneous/charts/charts';
 // Global state (used for theming)
 import { AppState } from './app.global';
@@ -32,18 +33,18 @@ import { PopupMenuListPage } from '../pages/popup-menu/popup-menu';
 import { PopupMenuOnePage } from '../pages/popup-menu/popup-menu-one/popup-menu-one';
 
 // Cards list
-import { CardListPage } from '../pages/card/card';
-import { CardSocialPage } from '../pages/card/card-social/card-social';
-import { CardImagePage } from '../pages/card/card-image/card-image';
-import { CardMapPage } from '../pages/card/card-map/card-map';
-import { CardBackgroundPage } from '../pages/card/card-background/card-background';
-import { CardBadgePage } from '../pages/card/card-badge/card-badge';
+import { CardListPage } from '../pages/ionic-official-components/card/card';
+import { CardSocialPage } from '../pages/ionic-official-components/card/card-social/card-social';
+import { CardImagePage } from '../pages/ionic-official-components/card/card-image/card-image';
+import { CardMapPage } from '../pages/ionic-official-components/card/card-map/card-map';
+import { CardBackgroundPage } from '../pages/ionic-official-components/card/card-background/card-background';
+import { CardBadgePage } from '../pages/ionic-official-components/card/card-badge/card-badge';
 
 // Buttons list
-import { ButtonsListPage } from '../pages/button/button';
-import { ButtonStylesPage } from '../pages/button/button-styles/button-styles';
-import { IconButtonsPage } from '../pages/button/icon-buttons/icon-buttons';
-import { ButtonComponentsPage } from '../pages/button/button-components/button-components';
+import { ButtonsListPage } from '../pages/ionic-official-components/button/button';
+import { ButtonStylesPage } from '../pages/ionic-official-components/button/button-styles/button-styles';
+import { IconButtonsPage } from '../pages/ionic-official-components/button/icon-buttons/icon-buttons';
+import { ButtonComponentsPage } from '../pages/ionic-official-components/button/button-components/button-components';
 
 // Modals
 import { ModalsPage } from '../pages/modal/modal';
@@ -56,7 +57,7 @@ import { SignupModalPage } from '../pages/modal/small-modal/signup-modal/signup-
 import { WalkthroughModalPage } from '../pages/modal/small-modal/walkthrough-modal/walkthrough-modal';
 
 // Alerts
-import { AlertsPage } from '../pages/alert/alert';
+import { AlertsPage } from '../pages/ionic-official-components/alert/alert';
 
 // Slides
 import { SlidesPage } from '../pages/slide/slide';
@@ -112,6 +113,31 @@ export const Pages = [
     // Theming
     ThemingPage,
 
+    // Ionic Official Components
+    IonicOfficialComponentsPage,
+
+    // Buttons
+    ButtonsListPage,
+    IconButtonsPage,
+    ButtonComponentsPage,
+    ButtonStylesPage,
+
+    // Lists
+    ListsPage,
+    SettingsListPage,
+    SlidingItemListPage,
+
+    // Alerts
+    AlertsPage,
+
+    // Cards
+    CardListPage,
+    CardBackgroundPage,
+    CardMapPage,
+    CardImagePage,
+    CardSocialPage,
+    CardBadgePage,
+
     // Profile
     ProfileListPage,
     ProfileOnePage,
@@ -143,13 +169,6 @@ export const Pages = [
     ChartsPage,
     RuntimePermissionsPage,
 
-    // Cards
-    CardListPage,
-    CardBackgroundPage,
-    CardMapPage,
-    CardImagePage,
-    CardSocialPage,
-    CardBadgePage,
 
     // Modals
     ModalsPage,
@@ -161,20 +180,6 @@ export const Pages = [
     WalkthroughModalPage,
     HintModalPage,
 
-    // Buttons
-    ButtonsListPage,
-    IconButtonsPage,
-    ButtonComponentsPage,
-    ButtonStylesPage,
-
-    // Lists
-    ListsPage,
-    SettingsListPage,
-    SlidingItemListPage,
-
-    // Alerts
-    AlertsPage,
-
     // Slides
     SlidesPage,
     SlideCarouselPage,

src/app/app.module.ts

@@ -1,8 +1,6 @@
 import { NgModule, ErrorHandler } from '@angular/core';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { MyApp } from './app.component';
-import { Page1 } from '../pages/page1/page1';
-import { Page2 } from '../pages/page2/page2';
 import { SwingModule } from 'angular2-swing';
 
 import { Pages, Directives, Pipes, Providers } from './app.imports';

src/pages/alert/alert.ts → src/pages/ionic-official-components/alert/alert.ts

@@ -66,7 +66,7 @@ export class AlertsPage {
         {
           text: 'Save',
           handler: (data: any) => {
-            console.log('Saved clicked');
+            console.log('Saved clicked', data);
           }
         }
       ]

src/pages/card/card.html → src/pages/ionic-official-components/card/card.html

@@ -1,10 +1,10 @@
 <ion-header>
-	<ion-navbar>
-		<button ion-button menuToggle>
+  <ion-navbar>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
-		<ion-title>Profiles</ion-title>
-	</ion-navbar>
+    <ion-title>Profiles</ion-title>
+  </ion-navbar>
 </ion-header>
 <!--<ion-menu [content]="profilecontent" id="menu-profile">
 
@@ -19,11 +19,10 @@
 </ion-menu>
 
 <ion-nav [root]="root" #profilecontent swipeBackEnabled="false"></ion-nav>-->
-
 <ion-content>
-	<ion-list>
-		<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
+  <ion-list>
+    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
       {{item.title}}
     </button>
-	</ion-list>
-</ion-content>
+  </ion-list>
+</ion-content>

src/pages/ionic-official-components/ionic-official-components.html

@@ -0,0 +1,15 @@
+<ion-header>
+  <ion-navbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Ionic Official Components</ion-title>
+  </ion-navbar>
+</ion-header>
+<ion-content>
+  <ion-list>
+    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
+      {{item.title}}
+    </button>
+  </ion-list>
+</ion-content>

src/pages/ionic-official-components/ionic-official-components.ts

@@ -0,0 +1,38 @@
+import { AlertsPage } from './alert/alert';
+import { ButtonsListPage } from './button/button';
+import { CardListPage } from './card/card';
+import { Component } from '@angular/core';
+
+import { NavController } from 'ionic-angular';
+
+@Component({
+    selector: 'page-ionic-official-components',
+    templateUrl: 'ionic-official-components.html'
+})
+export class IonicOfficialComponentsPage {
+    rootPage: any;
+    items: Array<{ title: string, page: any }>;
+
+    constructor(public navCtrl: NavController) {
+        this.rootPage = CardListPage;
+
+        this.items = [
+            {
+                title: 'Buttons',
+                page: ButtonsListPage
+            },
+            {
+                title: 'Alerts',
+                page: AlertsPage
+            },
+            {
+                title: 'Cards',
+                page: CardListPage
+            },
+        ]
+    }
+
+    itemTapped(event, item) {
+        this.navCtrl.push(item.page);
+    }
+}

src/pages/profile/profile-four/profile-four.ts

@@ -1,5 +1,4 @@
 import { ToastService } from '../../../providers/util/toast.service';
-import { AlertService } from '../../../providers/util/alert.service';
 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
 
@@ -53,7 +52,7 @@ export class ProfileFourPage {
   ionViewDidLoad() {
     console.log('Hello ProfileFour Page');
   }
-  
+
   follow() {
     this.following = !this.following;
     this.toastCtrl.create('Follow user clicked');