#6 [GSoC] Update Ionic to v3
Merged 9 months ago by a2batic. Opened 10 months ago by amitosh.
amitosh/Fedora-app upgrade-ionic  into  master

file modified
+30 -10

@@ -1,15 +1,35 @@ 

- # hidden

- .*/

+ # Specifies intentionally untracked files to ignore when using Git

+ # http://git-scm.com/docs/gitignore

  

- # os files

- *.swp

- .DS_Store

- Thumbs.db

+ *~

+ *.sw[mnpcod]

+ *.log

+ *.tmp

+ *.tmp.*

+ log.txt

+ *.sublime-project

+ *.sublime-workspace

+ .vscode/

+ npm-debug.log*

  

- # packages

+ .idea/

+ .sourcemaps/

+ .sass-cache/

+ .tmp/

+ .versions/

+ coverage/

+ dist/

  node_modules/

- 

- # ionic

- www/build/

+ tmp/

+ temp/

+ hooks/

  platforms/

  plugins/

+ plugins/android.json

+ plugins/ios.json

+ www/

+ $RECYCLE.BIN/

+ 

+ .DS_Store

+ Thumbs.db

+ UserInterfaceState.xcuserstate

file removed
-65

@@ -1,65 +0,0 @@ 

- import {Component, ViewChild} from '@angular/core';

- import {Http, ConnectionBackend, HTTP_PROVIDERS} from '@angular/http';

- import {ionicBootstrap, Platform} from 'ionic-angular';

- import {StatusBar} from 'ionic-native';

- 

- import {IonicConfig} from './providers/ionic-config/ionic-config';

- import {Request} from './providers/request/request';

- 

- import {MagazinePage} from './pages/magazine/magazine';

- import {AskPage} from './pages/ask/ask';

- import {CalendarPage} from './pages/calendar/calendar';

- import {SocialPage} from './pages/social/social';

- import {WomenPage} from './pages/women/women';

- import {FirstPage} from './pages/first/first';

- 

- @Component({

-   templateUrl: 'build/app.html',

-   queries: {

-     nav: new ViewChild('content')

-   }

- })

- class MyApp {

-   static get parameters() {

-     return [[Platform]];

-   }

- 

-   constructor(platform) {

-     this.platform = platform;

- 

-     this.initializeApp();

- 

-     // used for an example of ngFor and navigation

-     this.pages = [

-       { title: 'Home', component: FirstPage },

-       { title: 'Magazine', component: MagazinePage },

-       { title: 'Social', component: SocialPage },

-       { title: 'Ask', component: AskPage },

-       { title: 'Calendar', component: CalendarPage },

-       { title: 'Women', component: WomenPage }

- 

-     ];

- 

-     this.rootPage = FirstPage;

-   }

- 

-   initializeApp() {

-     this.platform.ready().then(() => {

-       // Okay, so the platform is ready and our plugins are available.

-       // Here you can do any higher level native things you might need.

-       StatusBar.styleDefault();

-     });

-   }

- 

-   openPage(page) {

-     // Reset the content nav to have just this page

-     // we wouldn't want the back button to show in this scenario

-     this.nav.setRoot(page.component);

-   }

- }

- 

- ionicBootstrap(MyApp, [

-   Http, ConnectionBackend, HTTP_PROVIDERS, Request, IonicConfig,

- ], {

-   prodMode: window.hasOwnProperty('cordova'),

- });

@@ -1,22 +0,0 @@ 

- import { Injectable } from '@angular/core';

- import { Http } from '@angular/http';

- import 'rxjs/add/operator/map';

- 

- import * as CONFIG from '../../../ionic.config.json';

- 

- /*

-   Generated class for the Config provider.

- 

-   See https://angular.io/docs/ts/latest/guide/dependency-injection.html

-   for more info on providers and Angular 2 DI.

- */

- @Injectable()

- export class IonicConfig {

-   constructor() {

-     this.config = CONFIG;

-   }

- 

-   get(key) {

-     return this.config[key];

-   }

- }

file removed
-23

@@ -1,23 +0,0 @@ 

- // http://ionicframework.com/docs/v2/theming/

- 

- 

- // App Shared Imports

- // --------------------------------------------------

- // These are the imports which make up the design of this app.

- // By default each design mode includes these shared imports.

- // App Shared Sass variables belong in app.variables.scss.

- 

- @import "../pages/magazine/magazine";

- @import "../pages/ask/ask";

- @import "../pages/calendar/calendar";

- @import "../pages/social/social";

- @import "../pages/women/women";

- @import "../pages/first/first";

- 

- 

- // App Shared Rules

- 

- .iframeWrapper iframe {

-   width: 100%;

-   height: 100%;

- }

file removed
-31

@@ -1,31 +0,0 @@ 

- // http://ionicframework.com/docs/v2/theming/

- 

- 

- // App Shared Variables

- // --------------------------------------------------

- // Shared Sass variables go in the app.variables.scss file

- @import 'app.variables';

- 

- 

- // App iOS Variables

- // --------------------------------------------------

- // iOS only Sass variables can go here

- 

- 

- // Ionic iOS Sass

- // --------------------------------------------------

- // Custom App variables must be declared before importing Ionic.

- // Ionic will use its default values when a custom variable isn't provided.

- @import "ionic.ios";

- 

- 

- // App Shared Sass

- // --------------------------------------------------

- // All Sass files that make up this app goes into the app.core.scss file.

- // For simpler CSS overrides, custom app CSS must come after Ionic's CSS.

- @import 'app.core';

- 

- 

- // App iOS Only Sass

- // --------------------------------------------------

- // CSS that should only apply to the iOS app

file removed
-34

@@ -1,34 +0,0 @@ 

- // http://ionicframework.com/docs/v2/theming/

- 

- 

- // App Shared Variables

- // --------------------------------------------------

- // Shared Sass variables go in the app.variables.scss file

- @import 'app.variables';

- 

- 

- // App Material Design Variables

- // --------------------------------------------------

- // Material Design only Sass variables can go here

- ion-content

- {

-   background-color:blue;

- }

- 

- // Ionic Material Design Sass

- // --------------------------------------------------

- // Custom App variables must be declared before importing Ionic.

- // Ionic will use its default values when a custom variable isn't provided.

- @import "ionic.md";

- 

- 

- // App Shared Sass

- // --------------------------------------------------

- // All Sass files that make up this app goes into the app.core.scss file.

- // For simpler CSS overrides, custom app CSS must come after Ionic's CSS.

- @import 'app.core';

- 

- 

- // App Material Design Only Sass

- // --------------------------------------------------

- // CSS that should only apply to the Material Design app

@@ -1,35 +0,0 @@ 

- // http://ionicframework.com/docs/v2/theming/

- 

- // Ionic Shared Functions

- // --------------------------------------------------

- // Makes Ionic Sass functions available to your App

- 

- @import 'globals.core';

- 

- // App Shared Variables

- // --------------------------------------------------

- // To customize the look and feel of this app, you can override

- // the Sass variables found in Ionic's source scss files. Setting

- // variables before Ionic's Sass will use these variables rather than

- // Ionic's default Sass variable values. App Shared Sass imports belong

- // in the app.core.scss file and not this file. Sass variables specific

- // to the mode belong in either the app.ios.scss or app.md.scss files.

- 

- 

- // App Shared Color Variables

- // --------------------------------------------------

- // It's highly recommended to change the default colors

- // to match your app's branding. Ionic uses a Sass map of

- // colors so you can add, rename and remove colors as needed.

- // The "primary" color is the only required color in the map.

- // Both iOS and MD colors can be further customized if colors

- // are different per mode.

- 

- $colors: (

-   primary:    #387ef5,

-   secondary:  #32db64,

-   danger:     #f53d3d,

-   light:      #f4f4f4,

-   dark:       #222,

-   favorite:   #69BB7B

- );

file removed
-31

@@ -1,31 +0,0 @@ 

- // http://ionicframework.com/docs/v2/theming/

- 

- 

- // App Shared Variables

- // --------------------------------------------------

- // Shared Sass variables go in the app.variables.scss file

- @import 'app.variables';

- 

- 

- // App Windows Variables

- // --------------------------------------------------

- // Windows only Sass variables can go here

- 

- 

- // Ionic Windows Sass

- // --------------------------------------------------

- // Custom App variables must be declared before importing Ionic.

- // Ionic will use its default values when a custom variable isn't provided.

- @import "ionic.wp";

- 

- 

- // App Shared Sass

- // --------------------------------------------------

- // All Sass files that make up this app goes into the app.core.scss file.

- // For simpler CSS overrides, custom app CSS must come after Ionic's CSS.

- @import 'app.core';

- 

- 

- // App Windows Only Sass

- // --------------------------------------------------

- // CSS that should only apply to the Windows app

file modified
+7 -4

@@ -48,11 +48,7 @@ 

      <feature name="StatusBar">

          <param name="ios-package" onload="true" value="CDVStatusBar" />

      </feature>

-     <plugin name="cordova-plugin-calendar" spec="~4.5.0" />

-     <plugin name="cordova-plugin-inappbrowser" spec="~1.4.0" />

-     <plugin name="cordova-plugin-x-socialsharing" spec="~5.1.1" />

      <plugin name="cordova-plugin-spinner-dialog" spec="~1.3.1" />

-     <plugin name="cordova-plugin-x-toast" spec="~2.5.2" />

      <icon src="resources/android/icon/drawable-xhdpi-icon.png" />

      <plugin name="cordova-plugin-device" spec="~1.1.3" />

      <plugin name="cordova-plugin-console" spec="~1.0.4" />

@@ -60,4 +56,11 @@ 

      <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />

      <plugin name="cordova-plugin-statusbar" spec="~2.1.3" />

      <plugin name="cordova-plugin-whitelist" spec="~1.2.2" />

+     <plugin name="cordova-plugin-x-socialsharing" spec="^5.1.8" />

+     <plugin name="cordova-plugin-calendar" spec="^4.5.5" />

+     <plugin name="cordova-plugin-inappbrowser" spec="^1.4.0" />

+     <plugin name="cordova-plugin-native-spinner" spec="^1.1.3" />

+     <plugin name="cordova-plugin-x-toast" spec="^2.5.2" />

+     <engine name="browser" spec="5.0.3" />

+     <engine name="android" spec="7.0.0" />

  </widget>

file removed
-74

@@ -1,74 +0,0 @@ 

- var gulp = require('gulp'),

-     gulpWatch = require('gulp-watch'),

-     del = require('del'),

-     runSequence = require('run-sequence'),

-     argv = process.argv;

- 

- 

- /**

-  * Ionic hooks

-  * Add ':before' or ':after' to any Ionic project command name to run the specified

-  * tasks before or after the command.

-  */

- gulp.task('serve:before', ['watch']);

- gulp.task('emulate:before', ['build']);

- gulp.task('deploy:before', ['build']);

- gulp.task('build:before', ['build']);

- 

- // we want to 'watch' when livereloading

- var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1;

- gulp.task('run:before', [shouldWatch ? 'watch' : 'build']);

- 

- /**

-  * Ionic Gulp tasks, for more information on each see

-  * https://github.com/driftyco/ionic-gulp-tasks

-  *

-  * Using these will allow you to stay up to date if the default Ionic 2 build

-  * changes, but you are of course welcome (and encouraged) to customize your

-  * build however you see fit.

-  */

- var buildBrowserify = require('ionic-gulp-browserify-es2015');

- var buildSass = require('ionic-gulp-sass-build');

- var copyHTML = require('ionic-gulp-html-copy');

- var copyFonts = require('ionic-gulp-fonts-copy');

- var copyScripts = require('ionic-gulp-scripts-copy');

- var copyImages = require('ionic-gulp-image-task');

- 

- var isRelease = argv.indexOf('--release') > -1;

- 

- gulp.task('watch', ['clean'], function(done){

-   runSequence(

-     ['sass', 'html', 'fonts', 'images', 'scripts'],

-     function(){

-       gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });

-       gulpWatch('app/**/*.html', function(){ gulp.start('html'); });

-       buildBrowserify({ watch: true }).on('end', done);

-     }

-   );

- });

- 

- gulp.task('build', ['clean'], function(done){

-   runSequence(

-     ['sass', 'html', 'fonts', 'images', 'scripts'],

-     function(){

-       buildBrowserify({

-         minify: isRelease,

-         browserifyOptions: {

-           debug: !isRelease

-         },

-         uglifyOptions: {

-           mangle: false

-         }

-       }).on('end', done);

-     }

-   );

- });

- 

- gulp.task('sass', buildSass);

- gulp.task('html', copyHTML);

- gulp.task('fonts', copyFonts);

- gulp.task('images', copyImages);

- gulp.task('scripts', copyScripts);

- gulp.task('clean', function(){

-   return del('www/build');

- });

file modified
+1 -1

@@ -24,7 +24,7 @@ 

      }

    ],

    "integrations": {

-     "gulp": {}

+     "cordova": {}

    },

    "type": "ionic-angular"

  }

file removed
-15

@@ -1,15 +0,0 @@ 

- {

-   "compilerOptions": {

-     "target": "ES6",

-     "module": "commonjs",

-     "experimentalDecorators": true

-   },

-   "exclude": [

-     "node_modules",

-     "www",

-     "hooks",

-     "platforms",

-     "plugins",

-     "resources"

-   ]

- }

file added
+6578
The added file is too large to be shown here, see it at: package-lock.json
file modified
+66 -49

@@ -1,74 +1,91 @@ 

  {

-   "name": "FedoraApp",

+   "name": "fedora-app",

    "version": "0.0.2",

    "description": "Fedora mobile app",

    "main": "index.js",

+   "private": true,

    "scripts": {

-     "test": "echo \"Error: no test specified\" && exit 1"

+     "clean": "ionic-app-scripts clean",

+     "build": "ionic-app-scripts build",

+     "lint": "ionic-app-scripts lint",

+     "ionic:build": "ionic-app-scripts build",

+     "ionic:serve": "ionic-app-scripts serve"

    },

    "repository": {

      "type": "git",

-     "url": "git+ssh://git@bitbucket.org/fedora-qa/fedora-app.git"

+     "url": "https://pagure.io/Fedora-app.git"

    },

    "author": "fedoraQA",

    "license": "UNLICENSED",

    "homepage": "https://bitbucket.org/fedora-qa/fedora-app#readme",

    "dependencies": {

-     "@angular/common": "^2.0.0-rc.4",

-     "@angular/compiler": "^2.0.0-rc.4",

-     "@angular/core": "^2.0.0-rc.4",

-     "@angular/http": "^2.0.0-rc.4",

-     "@angular/platform-browser": "^2.0.0-rc.4",

-     "@angular/platform-browser-dynamic": "^2.0.0-rc.4",

-     "@angular/router": "^2.0.0-rc.1",

-     "es6-shim": "^0.35.0",

+     "@angular/common": "5.0.3",

+     "@angular/compiler": "5.0.3",

+     "@angular/compiler-cli": "5.0.3",

+     "@angular/core": "5.0.3",

+     "@angular/forms": "5.0.3",

+     "@angular/http": "5.0.3",

+     "@angular/platform-browser": "5.0.3",

+     "@angular/platform-browser-dynamic": "5.0.3",

+     "@ionic-native/calendar": "^4.5.3",

+     "@ionic-native/core": "4.4.0",

+     "@ionic-native/in-app-browser": "^4.5.3",

+     "@ionic-native/social-sharing": "^4.5.3",

+     "@ionic-native/spinner-dialog": "^4.5.3",

+     "@ionic-native/splash-screen": "4.4.0",

+     "@ionic-native/status-bar": "4.4.0",

+     "@ionic-native/toast": "^4.5.3",

+     "@ionic/storage": "2.1.3",

+     "cordova-android": "7.0.0",

+     "cordova-browser": "5.0.3",

+     "cordova-plugin-calendar": "^4.5.5",

+     "cordova-plugin-compat": "^1.2.0",

+     "cordova-plugin-console": "^1.0.7",

+     "cordova-plugin-device": "^1.1.7",

+     "cordova-plugin-inappbrowser": "^1.4.0",

+     "cordova-plugin-native-spinner": "^1.1.3",

+     "cordova-plugin-spinner-dialog": "^1.3.1",

+     "cordova-plugin-splashscreen": "^3.2.2",

+     "cordova-plugin-statusbar": "^2.1.3",

+     "cordova-plugin-whitelist": "^1.2.2",

+     "cordova-plugin-x-socialsharing": "^5.1.8",

+     "cordova-plugin-x-toast": "^2.5.2",

+     "es6-promise-plugin": "^4.2.2",

      "fb": "^1.1.1",

-     "ionic-angular": "^2.0.0-beta.9",

-     "ionic-native": "^1.3.9",

-     "ionicons": "3.0.0",

+     "ionic-angular": "3.9.2",

+     "ionic-plugin-keyboard": "^2.2.1",

+     "ionicons": "^3.0.0",

      "lodash": "^4.14.0",

      "moment": "^2.14.1",

      "moment-timezone": "^0.5.5",

      "query-string": "^4.2.2",

      "reflect-metadata": "^0.1.3",

-     "rxjs": "^5.0.0-beta.6",

-     "zone.js": "^0.6.12"

+     "rxjs": "5.5.2",

+     "sw-toolbox": "3.6.0",

+     "zone.js": "0.8.18"

    },

    "devDependencies": {

-     "@angular/common": "^2.4.8",

-     "@angular/compiler": "^2.4.8",

-     "@angular/compiler-cli": "^2.4.8",

-     "@angular/core": "^2.4.8",

-     "@angular/forms": "^2.4.8",

-     "@angular/http": "^2.4.8",

-     "@angular/platform-browser": "^2.4.8",

-     "@angular/platform-browser-dynamic": "^2.4.10",

-     "@angular/platform-server": "^2.4.8",

-     "@ionic/app-scripts": "^3.1.8",

-     "del": "2.2.1",

-     "eslint-config-angular": "^0.5.0",

-     "eslint-config-ionic": "0.0.2",

-     "eslint-plugin-angular": "^1.3.1",

-     "gulp": "3.9.1",

-     "gulp-watch": "^4.3.8",

-     "ionic-gulp-browserify-es2015": "^1.1.0",

-     "ionic-gulp-fonts-copy": "^1.0.0",

-     "ionic-gulp-html-copy": "^1.0.0",

-     "ionic-gulp-image-task": "^1.0.1",

-     "ionic-gulp-sass-build": "^1.0.0",

-     "ionic-gulp-scripts-copy": "^2.0.0",

-     "run-sequence": "1.2.2",

-     "rxjs": "^5.0.1",

-     "zone.js": "^0.7.2"

+     "@ionic/app-scripts": "3.1.8",

+     "typescript": "2.4.2"

    },

-   "eslintConfig": {

-     "parserOptions": {

-       "ecmaVersion": 6,

-       "sourceType": "module"

+   "cordova": {

+     "plugins": {

+       "cordova-plugin-x-socialsharing": {},

+       "cordova-plugin-calendar": {},

+       "cordova-plugin-inappbrowser": {},

+       "cordova-plugin-native-spinner": {},

+       "cordova-plugin-x-toast": {},

+       "cordova-plugin-spinner-dialog": {},

+       "cordova-plugin-device": {},

+       "cordova-plugin-console": {},

+       "cordova-plugin-splashscreen": {},

+       "ionic-plugin-keyboard": {},

+       "cordova-plugin-statusbar": {},

+       "cordova-plugin-whitelist": {}

      },

-     "extends": [

-       "ionic",

-       "angular"

+     "platforms": [

+       "browser",

+       "android"

      ]

    }

- }

+ } 

\ No newline at end of file

@@ -0,0 +1,48 @@ 

+ import {Component, ViewChild} from '@angular/core';

+ import { Platform, NavController } from 'ionic-angular';

+ 

+ import {MagazinePage} from '../pages/magazine/magazine';

+ import {AskPage} from '../pages/ask/ask';

+ import {CalendarPage} from '../pages/calendar/calendar';

+ import {SocialPage} from '../pages/social/social';

+ import {WomenPage} from '../pages/women/women';

+ import {FirstPage} from '../pages/first/first';

+ import { SplashScreen } from '@ionic-native/splash-screen';

+ 

+ @Component({

+   templateUrl: 'app.html',

+ })

+ export class MyApp {

+   pages:Array<{title:string, component:any}>;

+   rootPage:any;

+ 

+   @ViewChild('content') nav:NavController;

+ 

+ 

+   constructor(platform:Platform, splashScreen:SplashScreen) {

+     // used for an example of ngFor and navigation

+     this.pages = [

+       { title: 'Home', component: FirstPage },

+       { title: 'Magazine', component: MagazinePage },

+       { title: 'Social', component: SocialPage },

+       { title: 'Ask', component: AskPage },

+       { title: 'Calendar', component: CalendarPage },

+       { title: 'Women', component: WomenPage }

+ 

+     ];

+ 

+     this.rootPage = FirstPage;

+ 

+     platform.ready().then(() => {

+       // Okay, so the platform is ready and our plugins are available.

+       // Here you can do any higher level native things you might need.

+       splashScreen.hide();

+     });

+   }

+ 

+   openPage(page) {

+     // Reset the content nav to have just this page

+     // we wouldn't want the back button to show in this scenario

+     this.nav.push(page.component);

+   }

+ }

src/app/app.html app/app.html
file renamed
+15 -13

@@ -1,17 +1,19 @@ 

  <ion-menu [content]="content">

+     <ion-header>

+       <ion-toolbar>

+         <ion-title>Fedora</ion-title>

+       </ion-toolbar>

+     </ion-header>

  

-   <ion-toolbar>

-     <ion-title>fedora</ion-title>

-   </ion-toolbar>

+     <ion-content>

+       <ion-list>

+         <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">

+           {{p.title}}

+         </button>

+       </ion-list>

+     </ion-content>

  

-   <ion-content>

-     <ion-list>

-       <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">

-         {{p.title}}

-       </button>

-     </ion-list>

-   </ion-content>

+   </ion-menu>

  

- </ion-menu>

- 

- <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

+   <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->

+   <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

@@ -0,0 +1,62 @@ 

+ import { BrowserModule } from '@angular/platform-browser';

+ import { ErrorHandler, NgModule } from '@angular/core';

+ import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

+ import { HttpClientModule } from '@angular/common/http';

+ import { InAppBrowser } from '@ionic-native/in-app-browser';

+ import { SplashScreen } from '@ionic-native/splash-screen';

+ import { StatusBar } from '@ionic-native/status-bar';

+ import { SocialSharing } from '@ionic-native/social-sharing';

+ import { SpinnerDialog } from '@ionic-native/spinner-dialog';

+ import { Toast } from '@ionic-native/toast';

+ 

+ import { MyApp } from './app.component';

+ import { FirstPage } from '../pages/first/first';

+ import { MagazinePage } from '../pages/magazine/magazine';

+ import { AskPage } from '../pages/ask/ask';

+ import { CalendarPage } from '../pages/calendar/calendar';

+ import { SocialPage } from '../pages/social/social';

+ import { WomenPage } from '../pages/women/women';

+ 

+ import { Browser } from '../providers/browser/browser';

+ import { Request } from '../providers/request/request';

+ import { IonicConfig } from '../providers/ionic-config/ionic-config';

+ 

+ @NgModule({

+   declarations: [

+     MyApp,

+     FirstPage,

+     MagazinePage,

+     AskPage,

+     CalendarPage,

+     SocialPage,

+     WomenPage

+   ],

+   imports: [

+     BrowserModule,

+     HttpClientModule,

+     IonicModule.forRoot(MyApp)

+   ],

+   bootstrap: [IonicApp],

+   entryComponents: [

+     MyApp,

+     FirstPage,

+     MagazinePage,

+     AskPage,

+     CalendarPage,

+     SocialPage,

+     WomenPage

+   ],

+   providers: [

+     Browser,

+     IonicConfig,

+     InAppBrowser,

+     Request,

+     SocialSharing,

+     SplashScreen,

+     SpinnerDialog,

+     StatusBar,

+     Toast,

+     { provide: ErrorHandler, useClass: IonicErrorHandler }

+   ]

+ })

+ export class AppModule { }

file added
+32

@@ -0,0 +1,32 @@ 

+ // http://ionicframework.com/docs/v2/theming/

+ 

+ 

+ // App Global Sass

+ // --------------------------------------------------

+ // Put style rules here that you want to apply globally. These

+ // styles are for the entire app and not just one component.

+ // Additionally, this file can be also used as an entry point

+ // to import other Sass files to be included in the output CSS.

+ //

+ // Shared Sass variables, which can be used to adjust Ionic's

+ // default Sass variables, belong in "theme/variables.scss".

+ //

+ // To declare rules for a specific mode, create a child rule

+ // for the .md, .ios, or .wp mode classes. The mode class is

+ // automatically applied to the <body> element in the app.

+ // http://ionicframework.com/docs/v2/theming/

+ 

+ // @import "../pages/magazine/magazine";

+ // @import "../pages/ask/ask";

+ // @import "../pages/calendar/calendar";

+ // @import "../pages/social/social";

+ // @import "../pages/women/women";

+ // @import "../pages/first/first";

+ 

+ 

+ // App Shared Rules

+ 

+ .iframeWrapper iframe {

+   width: 100%;

+   height: 100%;

+ }

file added
+5

@@ -0,0 +1,5 @@ 

+ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

+ 

+ import { AppModule } from './app.module';

+ 

+ platformBrowserDynamic().bootstrapModule(AppModule);

src/assets/fonts/Comfortaa-Bold.ttf www/Comfortaa-Bold.ttf
file renamed
file was moved with no change to the file
src/assets/fonts/Comfortaa-Regular.ttf www/Comfortaa-Regular.ttf
file renamed
file was moved with no change to the file
file renamed
file was moved with no change to the file
src/assets/img/ask_back.png www/ask_back.png
file renamed
file was moved with no change to the file
src/assets/img/ask_logo.svg www/ask_logo.svg
file renamed
file was moved with no change to the file
file renamed
file was moved with no change to the file
file renamed
file was moved with no change to the file
src/assets/img/cal_logo.svg www/cal_logo.svg
file renamed
file was moved with no change to the file
file renamed
file was moved with no change to the file
file renamed
file was moved with no change to the file
src/assets/img/mag_logo.svg www/mag_logo.svg
file renamed
file was moved with no change to the file
src/assets/img/mag_title.svg www/mag_title.svg
file renamed
file was moved with no change to the file
file renamed
file was moved with no change to the file
src/assets/img/social_back.png www/social_back.png
file renamed
file was moved with no change to the file
src/assets/img/social_icon.svg www/social_icon.svg
file renamed
file was moved with no change to the file
file added
+66

@@ -0,0 +1,66 @@ 

+ <!DOCTYPE html>

+ <html lang="en" dir="ltr">

+ <head>

+   <meta charset="UTF-8">

+   <title>Ionic App</title>

+   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

+   <meta name="format-detection" content="telephone=no">

+   <meta name="msapplication-tap-highlight" content="no">

+ 

+   <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">

+   <link rel="manifest" href="manifest.json">

+   <meta name="theme-color" content="#4e8ef7">

+ 

+   <!-- add to homescreen for ios -->

+   <meta name="apple-mobile-web-app-capable" content="yes">

+   <meta name="apple-mobile-web-app-status-bar-style" content="black">

+ 

+   <!-- cordova.js required for cordova apps (remove if not needed) -->

+   <script src="cordova.js"></script>

+ 

+   <!-- un-comment this code to enable service worker

+   <script>

+     if ('serviceWorker' in navigator) {

+       navigator.serviceWorker.register('service-worker.js')

+         .then(() => console.log('service worker installed'))

+         .catch(err => console.error('Error', err));

+     }

+   </script>-->

+ 

+   <link href="build/main.css" rel="stylesheet">

+ 

+   <style rel="stylesheet">

+     .toolbar-background {

+       background-color: #ffffff;

+       z-index: 1;

+       display: none;

+     }

+ 

+     .magazine {

+       background-color: white;

+       background-image: url('back.png');

+     }

+ 

+     .calendar {

+       background-color: white;

+ 

+     }

+   </style>

+ </head>

+ 

+ <body class="platform-android">

+   <!-- Ionic's root component and where the app will load -->

+   <ion-app></ion-app>

+ 

+   <!-- The polyfills js is generated during the build process -->

+   <script src="build/polyfills.js"></script>

+ 

+   <!-- The vendor js is generated during the build process

+        It contains all of the dependencies in node_modules -->

+   <script src="build/vendor.js"></script>

+ 

+   <!-- The main bundle js is generated during the build process -->

+   <script src="build/main.js"></script>

+ 

+ </body>

+ </html>

file added
+13

@@ -0,0 +1,13 @@ 

+ {

+   "name": "Ionic",

+   "short_name": "Ionic",

+   "start_url": "index.html",

+   "display": "standalone",

+   "icons": [{

+     "src": "assets/imgs/logo.png",

+     "sizes": "512x512",

+     "type": "image/png"

+   }],

+   "background_color": "#4e8ef7",

+   "theme_color": "#4e8ef7"

+ }

src/pages/ask/ask.html app/pages/ask/ask.html
file renamed
+4 -4

@@ -5,13 +5,13 @@ 

    Ionic pages and navigation.

  -->

  <ion-content padding class="ask">

- <ion-navbar *navbar>

-   <button menuToggle>

+ <ion-navbar>

+   <button ion-button menuToggle>

      <ion-icon name="menu"></ion-icon>

    </button>

  

  </ion-navbar>

- <img id="ask_logo" src="ask_logo.svg">

+ <img id="ask_logo" src="assets/img/ask_logo.svg">

  

    <ion-searchbar class="search_bar"

      [(ngModel)]="myInput"

@@ -30,7 +30,7 @@ 

            </strong>

          </ion-col>

          <ion-col width-10 center>

-           <button small tappable (click)="shareQuestion(question)">

+           <button ion-button small tappable (click)="shareQuestion(question)">

              <ion-icon name="share"></ion-icon>

            </button>

          </ion-col>

src/pages/ask/ask.scss app/pages/ask/ask.scss
file renamed
file was moved with no change to the file
src/pages/ask/ask.ts app/pages/ask/ask.js
file renamed
+7 -13

@@ -1,6 +1,5 @@ 

  import { Component } from '@angular/core';

- import { NavController } from 'ionic-angular';

- import { SocialSharing } from 'ionic-native';

+ import { SocialSharing } from '@ionic-native/social-sharing';

  

  import { Browser } from '../../providers/browser/browser';

  import { AskFedora } from '../../providers/ask-fedora/ask-fedora';

@@ -12,19 +11,14 @@ 

    Ionic pages and navigation.

  */

  @Component({

-   templateUrl: 'build/pages/ask/ask.html',

+   templateUrl: 'ask.html',

    providers: [Browser, AskFedora],

  })

  export class AskPage {

-   static get parameters() {

-     return [[NavController], [Browser], [AskFedora]];

-   }

- 

-   constructor(nav, browser, askfedora) {

-     this.nav = nav;

-     this.browser = browser;

-     this.askfedora = askfedora;

+   private questions: any;

  

+   constructor(private browser: Browser,

+     private askFedora: AskFedora, private socialSharing: SocialSharing) {

      this.questions = [];

    }

  

@@ -33,7 +27,7 @@ 

    }

  

    updateQuestions() {

-     this.askfedora

+     this.askFedora

        .getQuestions()

        .then(questions => {

          this.questions = questions;

@@ -45,7 +39,7 @@ 

    }

  

    shareQuestion(event) {

-     SocialSharing.share(

+     this.socialSharing.share(

        event.title,

        event.title,

        null,

src/pages/calendar/calendar.html app/pages/calendar/calendar.html
file renamed
+10 -14

@@ -4,23 +4,19 @@ 

    See http://ionicframework.com/docs/v2/components/#navigation for more info on

    Ionic pages and navigation.

  -->

- <ion-content padding class="calendar">

- <ion-navbar *navbar>

-   <button menuToggle>

-     <ion-icon name="menu"></ion-icon>

-   </button>

- 

- </ion-navbar>

  

- <img id="cal_icon" src="cal_logo.svg"/>

+ <ion-content padding class="calendar">

+   <ion-navbar>

+     <button ion-button menuToggle>

+       <ion-icon name="menu"></ion-icon>

+     </button>

+   </ion-navbar>

+   <img id="cal_icon" src="assets/img/cal_logo.svg" />

    <ion-list>

      <ion-item>

  

-       <ion-select [(ngModel)]="selectedCalendar"

-                   (ngModelChange)="updateMeetings()">

-         <ion-option *ngFor="let calendar of calendars"

-                     [value]="calendar.real_name"

-                     [checked]="calendar.real_name == selectedCalendar">

+       <ion-select [(ngModel)]="selectedCalendar" (ngModelChange)="updateMeetings()">

+         <ion-option *ngFor="let calendar of calendars" [value]="calendar.real_name" [selected]="calendar.real_name == selectedCalendar">

            {{ calendar.display_name }}

          </ion-option>

        </ion-select>

@@ -39,7 +35,7 @@ 

              <p>{{ meeting.display_time }}</p>

            </ion-col>

            <ion-col width-33 padding>

-             <button id="add_button" small tappable (click)="addToCalendar(meeting)">

+             <button ion-button id="add_button" small tappable (click)="addToCalendar(meeting)">

                <ion-icon name="add"></ion-icon>Add

              </button>

            </ion-col>

src/pages/calendar/calendar.scss app/pages/calendar/calendar.scss
file renamed
+2 -2

@@ -18,8 +18,8 @@ 

    margin:auto;

  }

  

- ion-list{

-   margin-top: 40px;

+ ion-list {

+   margin-top: 40px !important;

  }

  

  .item

src/pages/calendar/calendar.ts app/pages/calendar/calendar.js
file renamed
+13 -15

@@ -1,6 +1,5 @@ 

  import { Component } from '@angular/core';

- import { NavController } from 'ionic-angular';

- import { Calendar } from 'ionic-native';

+ import { Calendar } from '@ionic-native/calendar';

  

  import { FedoCal } from '../../providers/fedo-cal/fedo-cal';

  

@@ -10,23 +9,22 @@ 

    See http://ionicframework.com/docs/v2/components/#navigation for more info on

    Ionic pages and navigation.

  */

+ 

+ const DEFAULT_CALENDAR = 'QA';

+ 

  @Component({

-   templateUrl: 'build/pages/calendar/calendar.html',

-   providers: [FedoCal],

+   templateUrl: 'calendar.html',

+   providers: [ FedoCal, Calendar ]

  })

  export class CalendarPage {

-   static get parameters() {

-     return [[NavController], [FedoCal]];

-   }

- 

-   constructor(nav, fedocal) {

-     this.nav = nav;

-     this.fedocal = fedocal;

+   private calendars:Array<any>;

+   private meetings:Array<any>;

+   private selectedCalendar:string;

  

+   constructor(private fedoCal:FedoCal, private calendar:Calendar) {

      this.calendars = [];

      this.meetings = [];

  

-     var DEFAULT_CALENDAR = 'QA';

      this.selectedCalendar = DEFAULT_CALENDAR;

    }

  

@@ -36,7 +34,7 @@ 

    }

  

    updateCalendars() {

-     this.fedocal

+     this.fedoCal

        .getCalendars()

        .then(calendars => {

          this.calendars = calendars;

@@ -44,7 +42,7 @@ 

    }

  

    updateMeetings() {

-     this.fedocal

+     this.fedoCal

        .getMeetings(this.selectedCalendar)

        .then(meetings => {

          this.meetings = meetings;

@@ -52,7 +50,7 @@ 

    }

  

    addToCalendar(event) {

-     Calendar.createEventInteractively(

+     this.calendar.createEventInteractively(

        event.name,

        event.location,

        event.real_description,

src/pages/first/first.html app/pages/first/first.html
file renamed
+37 -39

@@ -4,46 +4,44 @@ 

    See http://ionicframework.com/docs/v2/components/#navigation for more info on

    Ionic pages and navigation.

  -->

- <ion-content class="first">

- <ion-navbar *navbar>

-   <button menuToggle>

-     <ion-icon name="menu"></ion-icon>

-   </button>

- 

- </ion-navbar>

- 

- 

-   <img id="logo" src="logo.svg" ng-click="login()" />

- 

-         <div id="div1" class="button button1" ion-button  (click)="openMag()">

-           <div id="mag-logo">

-             <img src="m.svg"/>

-             <p class="caption">Magazine</p>

-           </div>

-         </div>

- 

- 

-         <div id="div2" class="button button1" ion-button  (click)="openSocial()">

-           <div id="social-logo">

-             <img src="s.svg"/>

-             <p class="caption">Social</p>

-           </div>

-         </div>

- 

- 

-         <div id="div3" class="button button1" ion-button  (click)="openAsk()">

-           <div id="ask-logo">

-             <img src="a.svg"/>

-             <p class="caption">Ask</p>

-           </div>

-         </div>

  

+ <ion-content class="first">

  

-         <div id="div4" class="button button1" ion-button  (click)="openCal()">

-           <div id="calender-logo">

-             <img src="c.svg"/>

-             <p class="caption">Calendar</p>

-           </div>

-         </div>

+     <ion-navbar class="first-navbar">

+         <button ion-button menuToggle left>

+           <ion-icon name="menu"></ion-icon>

+         </button>

+ 

+       </ion-navbar>

+ 

+   <img id="logo" src="assets/img/logo.svg" ng-click="login()" />

+ 

+   <div id="div1" class="button button1" ion-button (click)="openMag()">

+     <div id="mag-logo">

+       <img src="assets/img/m.svg" />

+       <p class="caption">Magazine</p>

+     </div>

+   </div>

+ 

+   <div id="div2" class="button button1" ion-button (click)="openSocial()">

+     <div id="social-logo">

+       <img src="assets/img/s.svg" />

+       <p class="caption">Social</p>

+     </div>

+   </div>

+ 

+   <div id="div3" class="button button1" ion-button (click)="openAsk()">

+     <div id="ask-logo">

+       <img src="assets/img/a.svg" />

+       <p class="caption">Ask</p>

+     </div>

+   </div>

+ 

+   <div id="div4" class="button button1" ion-button (click)="openCal()">

+     <div id="calender-logo">

+       <img src="assets/img/c.svg" />

+       <p class="caption">Calendar</p>

+     </div>

+   </div>

  

  </ion-content>

src/pages/first/first.scss app/pages/first/first.scss
file renamed
+77 -77

@@ -1,122 +1,122 @@ 

  @font-face {

    font-family: native;

-   src: url(../../Comfortaa-Regular.ttf);

+   src: url('/assets/fonts/Comfortaa-Regular.ttf');

  }

+ 

  @font-face {

    font-family: nativeBold;

-   src: url(../../Comfortaa-Bold.ttf);

+   src: url('/assets/fonts/Comfortaa-Bold.ttf');

  }

  

- 

- .first-page{

- 

- }

  .first {

-   background-color: transparent ;

+   background-color: transparent;

    padding: 0;

    margin: 0;

-   z-index: -1;

- 

+   .first-navbar {

+       z-index: 1;

+   }

  }

  

- /*First page */

  

+ /*First page */

  

- html, body

- {

- height: 100%;

- padding: 0;

- margin: 0;

+ html,

+ body {

+   height: 100%;

+   padding: 0;

+   margin: 0;

  }

  

- #div1, #div2, #div3, #div4

- {

- width: 50%;

- height: 50%;

- position: absolute;

- 

+ #div1,

+ #div2,

+ #div3,

+ #div4 {

+   width: 50%;

+   height: 50%;

+   position: absolute;

+   /* Chrome bug, does not honor z-index properly */

+   z-index: -1;

  }

  

- .button1{

+ .button1 {

    padding: 0;

    margin: 0;

    border-radius: 0;

  }

  

- #div1

- {

- background: #3c6eb4;

- top:0;

- left: 0;

+ #div1 {

+   background: #3c6eb4;

+   top: 0;

+   left: 0;

  }

- #div2

- {

- background: #db3279;

- top:0;

- right:0;

+ 

+ #div2 {

+   background: #db3279;

+   top: 0;

+   right: 0;

  }

- #div3

- {

- background: #e59728;

- bottom: 0;

- left:0;

+ 

+ #div3 {

+   background: #e59728;

+   bottom: 0;

+   left: 0;

  }

- #div4

- {

- background: #79db32;

- bottom: 0;

- right:0;

+ 

+ #div4 {

+   background: #79db32;

+   bottom: 0;

+   right: 0;

  }

  

- #div1, #div2, #div3, #div4 p

- {

- font-family: 'opensans';

- font-size: 16px;

- color:#ffffff;

- position: absolute;

+ #div1,

+ #div2,

+ #div3,

+ #div4 p {

+   font-family: 'opensans';

+   font-size: 16px;

+   color: #ffffff;

+   position: absolute;

  }

  

- #logo

- {

- position: absolute;

- left: 50%;

- top: 50%;

- margin-left: -60px;

- margin-top: -60px;

- z-index: 3;

+ #logo {

+   position: absolute;

+   left: 50%;

+   top: 50%;

+   margin-left: -60px;

+   margin-top: -60px;

+   z-index: 3;

  }

- #mag-logo

- {

- position: absolute;

- left: 25%;

- top: 25%;

+ 

+ #mag-logo {

+   position: absolute;

+   left: 25%;

+   top: 25%;

  }

  

- #social-logo

- {

- position: absolute;

- left: 25%;

- top: 25%;

+ #social-logo {

+   position: absolute;

+   left: 25%;

+   top: 25%;

  }

  

- #ask-logo

- {

- position: absolute;

- left: 25%;

- top: 25%;

+ #ask-logo {

+   position: absolute;

+   left: 25%;

+   top: 25%;

  }

  

- #calender-logo

- {

- position: absolute;

- left: 25%;

- top: 25%;

+ #calender-logo {

+   position: absolute;

+   left: 25%;

+   top: 25%;

  }

  

- .caption{

+ .caption {

    color: #ffffff;

    text-transform: uppercase;

    font-family: nativeBold !important;

    letter-spacing: 1px;

  }

+ 

+ 

  /*Front page ends*/

src/pages/first/first.ts app/pages/first/first.js
file renamed
+26 -35

@@ -1,13 +1,13 @@ 

  import { Component } from '@angular/core';

  import { NavController } from 'ionic-angular';

- import { SocialSharing } from 'ionic-native';

+ import { SocialSharing } from '@ionic-native/social-sharing';

  

  import { Browser } from '../../providers/browser/browser';

  import { FedoraMag } from '../../providers/fedora-mag/fedora-mag';

- import {MagazinePage} from '../magazine/magazine';

- import {AskPage} from '../ask/ask';

- import {CalendarPage} from '../calendar/calendar';

- import {SocialPage} from '../social/social';

+ import { MagazinePage } from '../magazine/magazine';

+ import { AskPage } from '../ask/ask';

+ import { CalendarPage } from '../calendar/calendar';

+ import { SocialPage } from '../social/social';

  

  /*

    Generated class for the MagazinePage page.

@@ -16,22 +16,16 @@ 

    Ionic pages and navigation.

  */

  @Component({

-   templateUrl: 'build/pages/first/first.html',

-   providers: [Browser, FedoraMag],

+   templateUrl: 'first.html',

+   providers: [ FedoraMag ]

  })

- export class FirstPage {

-   static get parameters() {

-     return [[NavController], [Browser], [FedoraMag]];

-   }

  

-   constructor(nav, browser, fedoramag) {

-     this.nav = nav;

-     this.browser = browser;

-     this.fedoramag = fedoramag;

+ export class FirstPage {

+   private posts: Array<any>;

  

+   constructor(private nav: NavController, private browser: Browser,

+     private fedoraMag: FedoraMag, private socialSharing: SocialSharing) {

      this.posts = [];

- 

- 

    }

  

    ngOnInit() {

@@ -39,7 +33,7 @@ 

    }

  

    updatePosts() {

-     this.fedoramag.getPosts().then(posts => {

+     this.fedoraMag.getPosts().then(posts => {

        this.posts = posts;

      });

    }

@@ -48,28 +42,25 @@ 

      this.browser.open(event.link);

    }

  

-   openMag(){

-       this.nav.push(MagazinePage);

-     }

-   openAsk(){

-       this.nav.push(AskPage);

-     }

-   openSocial(){

-       this.nav.push(SocialPage);

-     }

-   openCal(){

-       this.nav.push(CalendarPage);

-     }

- 

- 

- 

+   openMag() {

+     this.nav.push(MagazinePage);

+   }

+   openAsk() {

+     this.nav.push(AskPage);

+   }

+   openSocial() {

+     this.nav.push(SocialPage);

+   }

+   openCal() {

+     this.nav.push(CalendarPage);

+   }

  

-   login(event){

+   login(event) {

  

    }

  

    sharePost(event) {

-     SocialSharing.share(

+     this.socialSharing.share(

        event.title, event.title,

        null, event.link

      );

src/pages/magazine/magazine.html app/pages/magazine/magazine.html
file renamed
+6 -6

@@ -26,14 +26,14 @@ 

  

  </style>

  <ion-content class="magazine">

- <ion-navbar *navbar>

-   <button menuToggle>

+ <ion-navbar>

+   <button ion-button menuToggle>

      <ion-icon name="menu"></ion-icon>

    </button>

- 

  </ion-navbar>

- <img id="maglogo" src="mag_logo.svg">

-     <img id="mag-title" src="mag_title.svg">

+ 

+ <img id="maglogo" src="assets/img/mag_logo.svg">

+     <img id="mag-title" src="assets/img/mag_title.svg">

  

    <ion-list *ngIf="posts.length !== 0">

      <ion-card *ngFor="let post of posts">

@@ -47,7 +47,7 @@ 

            </strong>

          </ion-col>

          <ion-col width-20 center>

-           <button small tappable (click)="sharePost(post)">

+           <button ion-button small tappable clear color="light" (click)="sharePost(post)">

              <ion-icon name="share"></ion-icon>

            </button>

          </ion-col>

src/pages/magazine/magazine.scss app/pages/magazine/magazine.scss
file renamed
file was moved with no change to the file
src/pages/magazine/magazine.ts app/pages/magazine/magazine.js
file renamed
+8 -19

@@ -1,6 +1,5 @@ 

  import { Component } from '@angular/core';

- import { NavController } from 'ionic-angular';

- import { SocialSharing } from 'ionic-native';

+ import { SocialSharing } from '@ionic-native/social-sharing';

  

  import { Browser } from '../../providers/browser/browser';

  import { FedoraMag } from '../../providers/fedora-mag/fedora-mag';

@@ -12,33 +11,23 @@ 

    Ionic pages and navigation.

  */

  @Component({

-   templateUrl: 'build/pages/magazine/magazine.html',

-   providers: [Browser, FedoraMag],

+   templateUrl: 'magazine.html',

+   providers: [FedoraMag],

  })

  export class MagazinePage {

-   static get parameters() {

-     return [[NavController], [Browser], [FedoraMag]];

-   }

- 

-   constructor(nav, browser, fedoramag) {

-     this.nav = nav;

-     this.browser = browser;

-     this.fedoramag = fedoramag;

+   private posts:Array<any>;

  

+   constructor(private browser:Browser,

+     private fedoraMag:FedoraMag, private socialSharing:SocialSharing) {

      this.posts = [];

-     //console.log("hiiiiiiiiiiiii "+post.image);

    }

  

    ngOnInit() {

      this.updatePosts();

    }

  

-     //func_url(id) {

-       //var API2='https://fedoramagazine.org/wp-json/wp/v2/media/'+id;

-     //  console.log("hiiiiiiiiiiiii "+API2);

-   //  }

    updatePosts() {

-     this.fedoramag.getPosts().then(posts => {

+     this.fedoraMag.getPosts().then(posts => {

        this.posts = posts;

      });

    }

@@ -48,7 +37,7 @@ 

    }

  

    sharePost(event) {

-     SocialSharing.share(

+     this.socialSharing.share(

        event.title, event.title,

        null, event.link

      );

src/pages/social/social.html app/pages/social/social.html
file renamed
+8 -8

@@ -6,13 +6,13 @@ 

  -->