Skip to content

Commit 4aef4e1

Browse files
yannbfyannbf
committed
Added theming and login pages
1 parent 62b0a34 commit 4aef4e1

File tree

82 files changed

+2156
-983
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+2156
-983
lines changed

‎config.xml

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,41 @@
1-
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
1+
<?xml version='1.0' encoding='utf-8'?>
22
<widget id="com.ionicframework.ionic2components639837" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
3-
<name>Ionic2Components</name>
4-
<description>An awesome Ionic/Cordova app.</description>
5-
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
6-
<content src="index.html"/>
7-
<access origin="*"/>
8-
<allow-intent href="http://*/*"/>
9-
<allow-intent href="https://*/*"/>
10-
<allow-intent href="tel:*"/>
11-
<allow-intent href="sms:*"/>
12-
<allow-intent href="mailto:*"/>
13-
<allow-intent href="geo:*"/>
14-
<platform name="android">
15-
<allow-intent href="market:*"/>
16-
</platform>
17-
<platform name="ios">
18-
<allow-intent href="itms:*"/>
19-
<allow-intent href="itms-apps:*"/>
20-
</platform>
21-
<preference name="webviewbounce" value="false"/>
22-
<preference name="UIWebViewBounce" value="false"/>
23-
<preference name="DisallowOverscroll" value="true"/>
24-
<preference name="android-minSdkVersion" value="16"/>
25-
<preference name="BackupWebStorage" value="none"/>
26-
<preference name="SplashScreenDelay" value="0"/>
27-
<preference name="FadeSplashScreen" value="false"/>
28-
<preference name="FadeSplashScreenDuration" value="0"/>
29-
<preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF"/>
30-
<feature name="StatusBar">
31-
<param name="ios-package" onload="true" value="CDVStatusBar"/>
32-
</feature>
33-
<plugin name="cordova-plugin-device" spec="~1.1.3"/>
34-
<plugin name="cordova-plugin-console" spec="~1.0.4"/>
35-
<plugin name="cordova-plugin-whitelist" spec="~1.3.0"/>
36-
<plugin name="cordova-plugin-splashscreen" spec="~4.0.0"/>
37-
<plugin name="cordova-plugin-statusbar" spec="~2.2.0"/>
38-
<plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
39-
<allow-navigation href="http://192.168.153.117:8100"/>
40-
</widget>
3+
<name>Ionic2Components</name>
4+
<description>An awesome Ionic/Cordova app.</description>
5+
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
6+
<content src="index.html" />
7+
<access origin="*" />
8+
<allow-intent href="http://*/*" />
9+
<allow-intent href="https://*/*" />
10+
<allow-intent href="tel:*" />
11+
<allow-intent href="sms:*" />
12+
<allow-intent href="mailto:*" />
13+
<allow-intent href="geo:*" />
14+
<platform name="android">
15+
<allow-intent href="market:*" />
16+
</platform>
17+
<platform name="ios">
18+
<allow-intent href="itms:*" />
19+
<allow-intent href="itms-apps:*" />
20+
</platform>
21+
<preference name="webviewbounce" value="false" />
22+
<preference name="UIWebViewBounce" value="false" />
23+
<preference name="DisallowOverscroll" value="true" />
24+
<preference name="android-minSdkVersion" value="16" />
25+
<preference name="BackupWebStorage" value="none" />
26+
<preference name="SplashScreenDelay" value="0" />
27+
<preference name="FadeSplashScreen" value="false" />
28+
<preference name="FadeSplashScreenDuration" value="0" />
29+
<preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF" />
30+
<feature name="StatusBar">
31+
<param name="ios-package" onload="true" value="CDVStatusBar" />
32+
</feature>
33+
<plugin name="cordova-plugin-device" spec="~1.1.3" />
34+
<plugin name="cordova-plugin-console" spec="~1.0.4" />
35+
<plugin name="cordova-plugin-whitelist" spec="~1.3.0" />
36+
<plugin name="cordova-plugin-splashscreen" spec="~4.0.0" />
37+
<plugin name="cordova-plugin-statusbar" spec="~2.2.0" />
38+
<plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
39+
<allow-navigation href="http://192.168.153.117:8100" />
40+
<plugin name="cordova-plugin-camera" spec="~2.3.0" />
41+
</widget>

‎dummy/dummy.html

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎dummy/dummy.scss

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎dummy/dummy.ts

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/app/app.component.ts

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import { LoginListPage } from '../pages/login/login';
2+
import { ThemingPage } from '../pages/theming/theming';
3+
import { AppState } from './app.global';
14
import { SlidesPage } from '../pages/slide/slide';
25
import { AlertsPage } from '../pages/alert/alert';
36
import { ModalsPage } from '../pages/modal/modal';
@@ -22,27 +25,31 @@ export class MyApp {
2225
rootPage: any = HomePage;
2326

2427
pages: Array<{ title: string, component: any }>;
28+
state: any;
2529

26-
constructor(public platform: Platform) {
30+
constructor(public platform: Platform, public global: AppState) {
2731
this.initializeApp();
28-
// used for an example of ngFor and navigation
32+
2933
this.pages = [
3034
{ title: 'Home', component: HomePage },
31-
{ title: 'Cards', component: CardListPage },
35+
{ title: 'Theming', component: ThemingPage },
3236
{ title: 'Buttons', component: ButtonsListPage },
3337
{ title: 'Alerts', component: AlertsPage },
34-
{ title: 'Modals', component: ModalsPage },
3538
{ title: 'Lists', component: ListsPage },
39+
{ title: 'Cards', component: CardListPage },
40+
{ title: 'Modals', component: ModalsPage },
3641
{ title: 'Slides', component: SlidesPage },
3742
{ title: 'Popup Menu', component: PopupMenuListPage },
3843
{ title: 'Profile', component: ProfileListPage },
44+
{ title: 'Login', component: LoginListPage },
3945
{ title: 'Miscellaneous', component: MiscellaneousListPage }
4046
];
4147

4248
}
4349

4450
initializeApp() {
4551
this.platform.ready().then(() => {
52+
this.global.set('theme', '');
4653
// Okay, so the platform is ready and our plugins are available.
4754
// Here you can do any higher level native things you might need.
4855
StatusBar.styleDefault();

‎src/app/app.global.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Injectable } from '@angular/core';
2+
@Injectable()
3+
export class AppState {
4+
_state = {}
5+
constructor() {
6+
}
7+
// already return a clone of the current state
8+
get state() {
9+
return this._state = this._clone(this._state);
10+
}
11+
// never allow mutation
12+
set state(value) {
13+
throw new Error('do not mutate the `.state` directly');
14+
}
15+
get(prop?: any) {
16+
// use our state getter for the clone
17+
const state = this.state;
18+
return state.hasOwnProperty(prop) ? state[prop] : state;
19+
}
20+
set(prop: string, value: any) {
21+
// internally mutate our state
22+
return this._state[prop] = value;
23+
}
24+
_clone(object) {
25+
// simple object clone
26+
return JSON.parse(JSON.stringify(object));
27+
}
28+
}

‎src/app/app.html

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
1-
<ion-menu [content]="content" id="menu-components">
2-
<ion-header>
3-
<ion-toolbar>
4-
<ion-title>Menu</ion-title>
5-
</ion-toolbar>
6-
</ion-header>
7-
8-
<ion-content>
9-
<ion-list>
10-
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
1+
<div class="{{global.state['theme']}}">
2+
<ion-menu [content]="content" id="menu-components" class="animated-menu">
3+
<ion-header>
4+
<ion-toolbar>
5+
<ion-title>Menu</ion-title>
6+
</ion-toolbar>
7+
</ion-header>
8+
<ion-content>
9+
<ion-list>
10+
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
1111
{{p.title}}
1212
</button>
13-
</ion-list>
14-
</ion-content>
15-
16-
</ion-menu>
17-
18-
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
19-
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
13+
</ion-list>
14+
</ion-content>
15+
</ion-menu>
16+
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
17+
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
18+
</div>

‎src/app/app.imports.ts

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
import { SlideColorChangingPage } from '../pages/slide/slide-color-changing/slide-color-changing';
1+
// Global state (used for theming)
2+
import { AppState } from './app.global';
3+
24
// Home Page
35
import { HomePage } from '../pages/_home/home';
46

7+
// Theme
8+
import { ThemingPage } from '../pages/theming/theming';
9+
510
// Profile list
611
import { ProfileListPage } from '../pages/profile/profile';
712
import { ProfileOnePage } from '../pages/profile/profile-one/profile-one';
@@ -14,6 +19,11 @@ import { ListsPage } from '../pages/list/list';
1419
import { SlidingItemListPage } from '../pages/list/sliding-item/sliding-item';
1520
import { SettingsListPage } from '../pages/list/settings/settings';
1621

22+
// Login
23+
import { LoginListPage } from '../pages/login/login';
24+
import { LoginOnePage } from '../pages/login/login-one/login-one';
25+
import { LoginInstagramPage } from '../pages/login/login-instagram/login-instagram';
26+
import { LoginSliderPage } from '../pages/login/login-slider/login-slider';
1727
// Miscellaneous list
1828
import { MiscellaneousListPage } from '../pages/miscellaneous/miscellaneous';
1929
import { ClockPage } from '../pages/miscellaneous/clock/clock';
@@ -25,6 +35,8 @@ import { CurrencyConverterPage } from '../pages/miscellaneous/currency-converter
2535
import { WeatherPage } from '../pages/miscellaneous/weather/weather';
2636
import { MessagesPage } from '../pages/miscellaneous/chat/messages/messages';
2737
import { ChatsPage } from '../pages/miscellaneous/chat/chats';
38+
import { BlogPostPage } from '../pages/miscellaneous/blog-post/blog-post';
39+
import { ProfileSettingsPage } from '../pages/profile/profile-settings/profile-settings';
2840

2941
// Popup Menu list
3042
import { PopupMenuListPage } from '../pages/popup-menu/popup-menu';
@@ -69,6 +81,7 @@ import { SlideMultirowPage } from '../pages/slide/slide-multirow/slide-multirow'
6981
import { SlideRightToLeftPage } from '../pages/slide/slide-rtl/slide-rtl';
7082
import { SlideFreeModePage } from '../pages/slide/slide-free-mode/slide-free-mode';
7183
import { SlideNestedPage } from '../pages/slide/slide-nested/slide-nested';
84+
import { SlideColorChangingPage } from '../pages/slide/slide-color-changing/slide-color-changing';
7285

7386
// Providers
7487
import { WeatherService } from '../pages/miscellaneous/weather/weather.service';
@@ -83,19 +96,30 @@ import { TypingEffect } from '../components/typing-effect/typing-effect';
8396
import { MomentPipe } from '../pipes/moment.pipe';
8497
import { TemperaturePipe } from '../pipes/temperature.pipe';
8598
import { OrderByPipe } from '../pipes/orderby.pipe';
99+
import { ShortenStringPipe } from '../pipes/shorten.pipe';
100+
import { CapitalizePipe } from '../pipes/capitalize.pipe';
86101

87102
export class AppImports {
88103

89104
public static Pages = [
90105
// Home
91106
HomePage,
92107

108+
// Theming
109+
ThemingPage,
110+
93111
// Profile
94112
ProfileListPage,
95113
ProfileOnePage,
96114
ProfileTwoPage,
97115
ProfileThreePage,
98116
ProfileFourPage,
117+
ProfileSettingsPage,
118+
119+
LoginListPage,
120+
LoginOnePage,
121+
LoginInstagramPage,
122+
LoginSliderPage,
99123

100124
// Miscellaneous
101125
MiscellaneousListPage,
@@ -110,6 +134,7 @@ export class AppImports {
110134
WeatherPage,
111135
ChatsPage,
112136
MessagesPage,
137+
BlogPostPage,
113138

114139
// Cards
115140
CardListPage,
@@ -163,11 +188,11 @@ export class AppImports {
163188
]
164189

165190
public static Pipes = [
166-
TemperaturePipe, MomentPipe, OrderByPipe,
191+
TemperaturePipe, MomentPipe, OrderByPipe, CapitalizePipe, ShortenStringPipe
167192
]
168193

169194
public static Providers = [
170-
WeatherService, AlertService, ToastService
195+
WeatherService, AlertService, ToastService, AppState
171196
]
172197

173198
public static Directives = [

‎src/app/app.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
// for the .md, .ios, or .wp mode classes. The mode class is
1414
// automatically applied to the <body> element in the app.
1515
@import '../theme/animations';
16+
@import '../theme/dark.theme';
17+
@import '../theme/light.theme';
1618
.align-center {
1719
text-align: center;
1820
}

‎src/assets/img/background/background-1.jpg

12.5 KB
Loading

‎src/assets/img/background/background-2.jpg

30.7 KB
Loading

‎src/assets/img/background/background-3.jpg

45.2 KB
Loading

‎src/assets/img/background/background-4.jpg

22.4 KB
Loading

‎src/assets/img/background/background-5.jpg

62 KB
Loading

‎src/assets/img/background/background-6.jpg

44.1 KB
Loading

‎src/assets/img/logo/logo-canon.png

24 KB
Loading

‎src/assets/img/logo/logo-instagram.png

13.7 KB
Loading

‎src/assets/img/logo/logo-mailchimp.png

14 KB
Loading

‎src/assets/img/logo/logo-pr.png

43 KB
Loading

‎src/assets/img/misc/doge.png

128 KB
Loading

‎src/assets/img/misc/emoji.png

12.8 KB
Loading

‎src/pages/_home/home.html

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
<ion-header>
2-
<ion-navbar>
3-
<button ion-button menuToggle>
2+
<ion-navbar>
3+
<button ion-button menuToggle>
44
<ion-icon name="menu"></ion-icon>
55
</button>
6-
<ion-title>Home</ion-title>
7-
</ion-navbar>
6+
<ion-title>Home</ion-title>
7+
</ion-navbar>
88
</ion-header>
9-
109
<ion-content padding>
11-
<h3>Ionic Menu Starter</h3>
12-
<p>
13-
If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
14-
</p>
10+
<h3>Advanced Ionic 2 Components</h3>
11+
<p>
12+
This app aims to help developers speed up their development process and learn how components work. It would be really nice
13+
if you checked out the <a href="https://github.com/yannbf/ionic2-components">repository</a> and contribute!
14+
</p>
15+
<p>
16+
Also, the best way to understand the ionic framework is by reading the <a href="http://ionicframework.com/docs/v2">docs</a>,
17+
which are really great.
18+
</p>
19+
<button class="pop-in" ion-button secondary menuToggle>Toggle Menu</button>
20+
</ion-content>
1521

16-
<button class="pop-in" ion-button secondary menuToggle>Toggle Menu</button>
17-
</ion-content>

‎src/pages/_home/home.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
page-home {
2-
2+
p {
3+
text-align: justify;
4+
}
35
}
6+

‎src/pages/alert/alert.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component } from '@angular/core';
2-
import { NavController, AlertController } from 'ionic-angular';
2+
import { AlertController } from 'ionic-angular';
33

44
@Component({
55
selector: 'page-alert',

0 commit comments

Comments
 (0)