javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
Adam Bradley
2015-10-01 15:49:02 -05:00
parent d4a3005524 4ad0b9638d
commit 13ca9dabea
23 changed files with 655 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ionic/components/app/app.ts
View File

@@ -4,6 +4,7 @@ import {ROUTER_BINDINGS, HashLocationStrategy, LocationStrategy, Router} from 'a
import {IonicConfig} from '../../config/config';
import {IonicPlatform, Platform} from '../../platform/platform';
import {ClickBlock} from '../../util/click-block';
import {ScrollTo} from '../../animations/scroll-to';
import * as dom from '../../util/dom';
// injectables
@@ -53,7 +54,7 @@ export class IonicApp {
/**
* Bind some global events and publish on the 'app' channel
*/
bindEvents(events) {
bindEvents(platform, events) {
window.addEventListener('online', (event) => {
events.publish('app:online', event);
}, false);
@@ -65,6 +66,19 @@ export class IonicApp {
window.addEventListener('orientationchange', (event) => {
events.publish('app:rotated', event);
});
// When that status taps, we respond
window.addEventListener('statusTap', (event) => {
// TODO: Make this more better
var el = document.elementFromPoint(platform.width() / 2, platform.height() / 2);
if(!el) { return; }
var content = dom.closest(el, 'scroll-content');
if(content) {
var scrollTo = new ScrollTo(content);
scrollTo.start(0, 0, 300, 0);
}
});
}
/**
@@ -176,7 +190,7 @@ export class IonicApp {
*/
register(id, component) {
if (this.components[id] && this.components[id] !== component) {
console.error('Component id "' + id + '" already registered.');
//console.error('Component id "' + id + '" already registered.');
}
this.components[id] = component;
}
@@ -319,7 +333,7 @@ export function ionicBootstrap(rootComponentType, views, config) {
let translate = new Translate();
let navRegistry = new NavRegistry(views);
app.bindEvents(events);
app.bindEvents(platform, events);
// add injectables that will be available to all child components
let appBindings = Injector.resolve([

20
ionic/components/content/content.ts
View File

@@ -1,9 +1,11 @@
import {Component, View, ElementRef} from 'angular2/angular2';
import {Component, View, ElementRef, Optional, Host} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicPlatform} from '../../platform/platform';
import {IonicComponent} from '../../config/decorators';
import {ViewController} from '../nav/view-controller';
import {Tab} from '../tabs/tab';
import {ScrollTo} from '../../animations/scroll-to';
@@ -38,10 +40,14 @@ export class Content extends Ion {
* @param {ElementRef} elementRef A reference to the component's DOM element.
* @param {IonicConfig} config The config object to change content's default settings.
*/
constructor(elementRef: ElementRef, config: IonicConfig, platform: IonicPlatform) {
constructor(elementRef: ElementRef, config: IonicConfig, platform: IonicPlatform, @Optional() viewCtrl: ViewController) {
super(elementRef, config);
this.scrollPadding = 0;
this.platform = platform;
if(viewCtrl) {
viewCtrl.setContent(this);
}
}
/**
@@ -107,6 +113,16 @@ export class Content extends Ion {
return this._scrollTo.start(x, y, duration, tolerance);
}
scrollToTop() {
if (this._scrollTo) {
this._scrollTo.dispose();
}
this._scrollTo = new ScrollTo(this.scrollElement);
return this._scrollTo.start(0, 0, 300, 0);
}
/**
* Returns the content and scroll elements' dimensions.
* @returns {Object} dimensions The content and scroll elements' dimensions

23
ionic/components/menu/test/basic/main.html
View File

@@ -22,28 +22,5 @@
</ion-menu>
<ion-menu side="right" [content]="content" id="rightMenu">
<ion-toolbar secondary>
<ion-title>Right Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item *ng-for="#p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button ion-item menu-toggle="rightMenu" no-forward-icon class="e2eCloseMenu">
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>

27
ionic/components/popup/modes/ios.scss
View File

@@ -2,13 +2,15 @@
// iOS Popups
// --------------------------------------------------
$popup-ios-max-width: 280px !default;
$popup-ios-max-width: 84% !default;
$popup-ios-background: rgba(0,0,0,0) !default;
$popup-ios-border-radius: 13px !default;
$popup-ios-background-color: #f8f8f8 !default;
$popup-ios-background-color: rgba(255,255,255,0.85) !default;
$popup-ios-head-text-align: center !default;
$popup-ios-title-font-size: 15px !default;
$popup-ios-sub-title-font-size: 14px !default;
$popup-ios-sub-title-text-color: #666 !default;
$popup-ios-body-text-color: inherit !default;
$popup-ios-button-text-color: color(primary) !default;
@@ -26,30 +28,37 @@ ion-popup {
}
.popup-head {
padding: 10px;
text-align: $popup-ios-head-text-align;
padding-top: 24px;
}
.popup-title {
margin-top: 10px;
font-size: $popup-ios-title-font-size;
}
.popup-sub-title {
font-size: $popup-ios-sub-title-font-size;
color: $popup-ios-sub-title-text-color;
}
.popup-body {
padding: 10px;
padding: 10px 20px;
color: $popup-ios-body-text-color;
}
.popup-body:empty {
padding: 0;
.prompt-input {
margin-top: 5px;
}
.popup-buttons {
padding: 0;
padding-bottom: 10px;
min-height: 0;
button {
background-color: transparent;
color: $popup-ios-button-text-color;
@extend button[clear];
flex: 1;
min-height: $popup-ios-button-min-height;
&:last-child {

58
ionic/components/popup/modes/md.scss
View File

@@ -2,23 +2,27 @@
// Material Design Popups
// --------------------------------------------------
$popup-md-max-width: 280px !default;
$popup-md-background: rgba(0,0,0,0.5) !default;
$popup-md-border-radius: 2px !default;
$popup-md-background-color: #fafafa !default;
$popup-md-box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.4) !default;
$popup-md-max-width: 280px !default;
$popup-md-border-radius: 2px !default;
$popup-md-background-color: #fafafa !default;
$popup-md-box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.4) !default;
$popup-md-head-text-align: left !default;
$popup-md-title-font-size: 20px !default;
$popup-md-body-text-color: rgba(0,0,0,.5) !default;
$popup-md-head-text-align: left !default;
$popup-md-title-font-size: 20px !default;
$popup-md-sub-title-font-size: 15px !default;
$popup-md-body-text-color: rgba(0,0,0,.5) !default;
$popup-md-button-text-color: color(primary) !default;
$popup-md-button-min-height: 36px !default;
$popup-md-button-min-height: 36px !default;
$popup-md-prompt-input-border-color: #dedede !default;
$popup-md-prompt-input-text-color: #000000 !default;
$popup-md-prompt-input-highlight-color: map-get($colors, primary) !default;
$popup-md-prompt-input-placeholder-color: #b9b9b9 !default;
$popup-md-prompt-input-margin-top: 5px !default;
$popup-md-prompt-input-margin-bottom: 5px !default;
ion-popup {
background: $popup-md-background;
popup-wrapper {
max-width: $popup-md-max-width;
border-radius: $popup-md-border-radius;
@@ -37,13 +41,24 @@ ion-popup {
font-size: $popup-md-title-font-size;
}
.popup-sub-title {
font-size: $popup-md-sub-title-font-size;
}
.popup-body {
padding: 10px 24px 24px 24px;
color: $popup-md-body-text-color;
}
.popup-body:empty {
padding: 0;
.prompt-input {
border-bottom: 1px solid $popup-md-prompt-input-border-color;
color: $popup-md-prompt-input-text-color;
margin: $popup-md-prompt-input-margin-top 0 $popup-md-prompt-input-margin-bottom 0;
&:focus {
border-bottom: 2px solid $popup-md-prompt-input-highlight-color;
margin-bottom: $popup-md-prompt-input-margin-bottom - 1;
}
}
.popup-buttons {
@@ -51,21 +66,8 @@ ion-popup {
justify-content: flex-end;
button {
-webkit-box-flex: initial;
-webkit-flex: intiial;
-ms-flex: initial;
flex: initial;
@extend button[clear];
background-color: transparent;
color: $popup-md-button-text-color;
min-height: $popup-md-button-min-height;
box-shadow: none;
-webkit-transition: none;
transition: none;
&:last-child {
margin-right: 0;
}
}
}

25
ionic/components/popup/popup.scss
View File

@@ -6,8 +6,6 @@ $popup-min-width: 250px !default;
$popup-max-width: 100% !default;
$popup-max-height: 90% !default;
$popup-sub-title-font-size: 11px !default;
$popup-button-line-height: 20px !default;
$popup-button-font-size: 14px !default;
$popup-button-margin-right: 8px !default;
@@ -41,10 +39,6 @@ ion-popup {
}
}
.popup-head {
padding: 15px 10px;
}
.popup-title {
margin: 0;
padding: 0;
@@ -54,11 +48,23 @@ ion-popup {
margin: 5px 0 0 0;
padding: 0;
font-weight: normal;
font-size: $popup-sub-title-font-size;
}
.popup-body {
overflow: auto;
// TODO is this needed, it is never empty
&:empty {
padding: 0;
}
}
.prompt-input {
@include placeholder();
border: 0;
background: inherit;
padding: 10px 0;
}
.popup-buttons {
@@ -66,15 +72,10 @@ ion-popup {
flex-direction: row;
button {
flex: 1;
display: block;
margin: 0;
line-height: $popup-button-line-height;
font-size: $popup-button-font-size;
margin-right: $popup-button-margin-right;
&:last-child {
margin-right: 0;
}
}
}

46
ionic/components/popup/popup.ts
View File

@@ -3,6 +3,7 @@ import {FORM_DIRECTIVES, NgControl, NgControlGroup,
import {Overlay} from '../overlay/overlay';
import {Animation} from '../../animations/animation';
import {Ion} from '../ion';
import * as util from 'ionic/util';
@@ -56,9 +57,10 @@ export class Popup extends Overlay {
*/
popup(context, opts={}) {
return new Promise((resolve, reject)=> {
let config = this.config;
let defaults = {
enterAnimation: 'popup-pop-in',
leaveAnimation: 'popup-pop-out',
enterAnimation: config.setting('popupPopIn'),
leaveAnimation: config.setting('popupPopOut'),
};
context.promiseResolve = resolve;
@@ -81,7 +83,7 @@ export class Popup extends Overlay {
};
}
let button = {
text: 'OK',
text: context.okText || 'OK',
onTap: (event, popupRef) => {
// Allow it to close
//resolve();
@@ -112,13 +114,13 @@ export class Popup extends Overlay {
}
}
let okButton = {
text: 'OK',
text: context.okText || 'OK',
onTap: (event, popupRef) => {
// Allow it to close
}
}
let cancelButton = {
text: 'Cancel',
text: context.cancelText || 'Cancel',
isCancel: true,
onTap: (event, popupRef) => {
// Allow it to close
@@ -146,16 +148,17 @@ export class Popup extends Overlay {
title: context
};
}
let okButton = {
text: 'Ok',
text: context.okText || 'OK',
type: context.okType,
onTap: (event, popupRef) => {
// Allow it to close
}
}
let cancelButton = {
text: 'Cancel',
text: context.cancelText || 'Cancel',
type: context.cancelType,
isCancel: true,
onTap: (event, popupRef) => {
// Allow it to close
@@ -201,14 +204,15 @@ const OVERLAY_TYPE = 'popup';
'<backdrop (click)="_cancel($event)" tappable disable-activated></backdrop>' +
'<popup-wrapper>' +
'<div class="popup-head">' +
'<h3 class="popup-title" [inner-html]="title"></h3>' +
'<h5 class="popup-sub-title" [inner-html]="subTitle" *ng-if="subTitle"></h5>' +
'<h2 class="popup-title" [inner-html]="title" *ng-if="title"></h2>' +
'<h3 class="popup-sub-title" [inner-html]="subTitle" *ng-if="subTitle"></h3>' +
'</div>' +
'<div class="popup-body">' +
'<input type="text" *ng-if="showPrompt" placeholder="{{promptPlaceholder}}">' +
'<div [inner-html]="template" *ng-if="template"></div>' +
'<input type="{{inputType || \'text\'}}" placeholder="{{inputPlaceholder}}" *ng-if="showPrompt" class="prompt-input">' +
'</div>' +
'<div class="popup-buttons" *ng-if="buttons.length">' +
'<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [ng-class]="button.type || \'button-default\'" [inner-html]="button.text"></button>' +
'<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [inner-html]="button.text"></button>' +
'</div>' +
'</popup-wrapper>',
directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor]
@@ -277,7 +281,6 @@ class PopupAnimation extends Animation {
class PopupPopIn extends PopupAnimation {
constructor(element) {
super(element);
this.wrapper.fromTo('opacity', '0', '1')
this.wrapper.fromTo('scale', '1.1', '1');
@@ -286,7 +289,6 @@ class PopupPopIn extends PopupAnimation {
}
Animation.register('popup-pop-in', PopupPopIn);
class PopupPopOut extends PopupAnimation {
constructor(element) {
super(element);
@@ -297,3 +299,19 @@ class PopupPopOut extends PopupAnimation {
}
}
Animation.register('popup-pop-out', PopupPopOut);
class PopupMdPopIn extends PopupPopIn {
constructor(element) {
super(element);
this.backdrop.fromTo('opacity', '0', '0.5')
}
}
Animation.register('popup-md-pop-in', PopupMdPopIn);
class PopupMdPopOut extends PopupPopOut {
constructor(element) {
super(element);
this.backdrop.fromTo('opacity', '0.5', '0')
}
}
Animation.register('popup-md-pop-out', PopupMdPopOut);

21
ionic/components/popup/test/basic/index.ts
View File

@@ -17,14 +17,23 @@ class E2EApp {
doAlert() {
this.alertOpen = true;
this.popup.alert('Alert').then(() => {
this.popup.alert({
title: "New Friend!",
template: "Your friend, Obi wan Kenobi, just accepted your friend request!"
}).then(() => {
this.alertOpen = false;
});
}
doPrompt() {
this.promptOpen = true;
this.popup.prompt('What is your name?').then((name) => {
this.popup.prompt({
title: "New Album",
template: "Enter a name for this new album you're so keen on adding",
inputPlaceholder: "Title",
okText: "Save",
okType: "secondary"
}).then((name) => {
this.promptResult = name;
this.promptOpen = false;
}, () => {
@@ -35,7 +44,13 @@ class E2EApp {
doConfirm() {
this.confirmOpen = true;
this.popup.confirm('Are you sure?').then((result, ev) => {
this.popup.confirm({
title: "Use this lightsaber?",
subTitle: "You can't exchange lightsabers",
template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
cancelText: "Disagree",
okText: "Agree"
}).then((result, ev) => {
console.log('CONFIRMED', result);
this.confirmResult = result;
this.confirmOpen = false;