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 branch '2.0' into picker

Browse Source 
# Conflicts:
#	ionic/components.ts
This commit is contained in:
Adam Bradley
2016-04-21 23:47:16 -05:00
parent d5068f8430 f68ac8a3fd
commit 985bb89082
65 changed files with 1105 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/action-sheet/action-sheet.ios.scss
View File

@@ -91,7 +91,7 @@ ion-action-sheet {
.action-sheet-selected {
font-weight: bold;
background: white;
background: #fff;
}
.action-sheet-destructive {

4
ionic/components/action-sheet/action-sheet.md.scss
View File

@@ -70,6 +70,10 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default;
&:last-child .action-sheet-button {
margin-bottom: $action-sheet-md-group-margin-bottom;
}
.button-inner {
justify-content: flex-start;
}
}
.action-sheet-selected {

6
ionic/components/action-sheet/action-sheet.ts
View File

@@ -122,7 +122,7 @@ import {ViewController} from '../nav/view-controller';
* this.nav.present(actionSheet);
* ```
*
* It's important to note that the the handler returns `false`. A feature of
* It's important to note that the handler returns `false`. A feature of
* button handlers is that they automatically dismiss the action sheet when their button
* was clicked, however, we'll need more control regarding the transition. Because
* the handler returns `false`, then the action sheet does not automatically dismiss
@@ -222,14 +222,14 @@ export class ActionSheet extends ViewController {
'<div class="action-sheet-group">' +
'<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
'<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
'<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' +
'<button category="action-sheet-button" (click)="click(b)" *ngFor="#b of d.buttons" class="disable-hover" [ngClass]="b.cssClass">' +
'<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon> ' +
'{{b.text}}' +
'<ion-button-effect></ion-button-effect>' +
'</button>' +
'</div>' +
'<div class="action-sheet-group" *ngIf="d.cancelButton">' +
'<button (click)="click(d.cancelButton)" class="action-sheet-button action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">' +
'<button category="action-sheet-button" (click)="click(d.cancelButton)" class="action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">' +
'<ion-icon [name]="d.cancelButton.icon" *ngIf="d.cancelButton.icon" class="action-sheet-icon"></ion-icon> ' +
'{{d.cancelButton.text}}' +
'<ion-button-effect></ion-button-effect>' +

4
ionic/components/action-sheet/action-sheet.wp.scss
View File

@@ -73,6 +73,10 @@ $action-sheet-wp-icon-margin: 0 16px 0 0 !default;
&:last-child .action-sheet-button {
margin-bottom: $action-sheet-wp-group-margin-bottom;
}
.button-inner {
justify-content: flex-start;
}
}
.action-sheet-selected {

2
ionic/components/alert/alert.ios.scss
View File

@@ -58,7 +58,7 @@ $alert-ios-radio-label-padding: 13px !default;
$alert-ios-radio-min-width: 30px !default;
$alert-ios-radio-icon-top: 13px !default;
$alert-ios-radio-icon-top: -7px !default;
$alert-ios-radio-icon-left: 7px !default;
$alert-ios-radio-icon-width: 6px !default;
$alert-ios-radio-icon-height: 12px !default;

8
ionic/components/alert/alert.md.scss
View File

@@ -57,7 +57,7 @@ $alert-md-list-border-bottom: $alert-md-list-border-top !default
$alert-md-radio-label-padding: 13px 26px !default;
$alert-md-radio-top: 13px !default;
$alert-md-radio-top: 0 !default;
$alert-md-radio-left: 13px !default;
$alert-md-radio-width: 16px !default;
$alert-md-radio-height: 16px !default;
@@ -78,7 +78,7 @@ $alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0
$alert-md-checkbox-label-padding: 13px 26px !default;
$alert-md-checkbox-top: 13px !default;
$alert-md-checkbox-top: 0 !default;
$alert-md-checkbox-left: 13px !default;
$alert-md-checkbox-width: 16px !default;
$alert-md-checkbox-height: 16px !default;
@@ -337,4 +337,8 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
&.activated {
background-color: $alert-md-button-background-color-activated;
}
.button-inner {
justify-content: $alert-md-button-group-justify-content;
}
}

10
ionic/components/alert/alert.ts
View File

@@ -175,7 +175,7 @@ import {ViewController} from '../nav/view-controller';
* this.nav.present(alert);
* ```
*
* It's important to note that the the handler returns `false`. A feature of
* It's important to note that the handler returns `false`. A feature of
* button handlers is that they automatically dismiss the alert when their button
* was clicked, however, we'll need more control regarding the transition. Because
* the handler returns `false`, then the alert does not automatically dismiss
@@ -298,7 +298,7 @@ export class Alert extends ViewController {
* | cssClass | `string` | An additional CSS class for the button |
* | role | `string` | The buttons role, null or `cancel` |
*
* @param {object} opts Alert. See the tabel above
* @param {object} opts Alert. See the table above
*/
static create(opts: AlertOptions = {}) {
return new Alert(opts);
@@ -323,7 +323,7 @@ export class Alert extends ViewController {
'<template ngSwitchWhen="radio">' +
'<div class="alert-radio-group" role="radiogroup" [attr.aria-labelledby]="hdrId" [attr.aria-activedescendant]="activeId">' +
'<button *ngFor="#i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
'<button category="alert-radio-button" *ngFor="#i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
'<div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>' +
'<div class="alert-radio-label">' +
'{{i.label}}' +
@@ -334,7 +334,7 @@ export class Alert extends ViewController {
'<template ngSwitchWhen="checkbox">' +
'<div class="alert-checkbox-group">' +
'<button *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" role="checkbox">' +
'<button category="alert-checkbox-button" *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" role="checkbox">' +
'<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>' +
'<div class="alert-checkbox-label">' +
'{{i.label}}' +
@@ -353,7 +353,7 @@ export class Alert extends ViewController {
'</div>' +
'<div class="alert-button-group" [ngClass]="{vertical: d.buttons.length>2}">' +
'<button *ngFor="#b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass" class="alert-button">' +
'<button category="alert-button" *ngFor="#b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass">' +
'{{b.text}}' +
'<ion-button-effect></ion-button-effect>' +
'</button>' +

4
ionic/components/alert/alert.wp.scss
View File

@@ -59,7 +59,7 @@ $alert-wp-radio-border-color: $input-wp-border-color !default;
$alert-wp-radio-label-padding: 13px 26px !default;
$alert-wp-radio-top: 13px !default;
$alert-wp-radio-top: 0 !default;
$alert-wp-radio-left: 13px !default;
$alert-wp-radio-width: 16px !default;
$alert-wp-radio-height: 16px !default;
@@ -76,7 +76,7 @@ $alert-wp-radio-icon-border-radius: $alert-wp-radio-border-radius !de
$alert-wp-checkbox-label-padding: 13px 26px !default;
$alert-wp-checkbox-top: 13px !default;
$alert-wp-checkbox-top: 0 !default;
$alert-wp-checkbox-left: 13px !default;
$alert-wp-checkbox-width: 16px !default;
$alert-wp-checkbox-height: 16px !default;

9
ionic/components/app/test/app.spec.ts
View File

@@ -89,9 +89,10 @@ describe('IonicApp', () => {
var app: IonicApp;
var config: Config;
var platform: Platform;
var _cd: any;
function mockNav(): Nav {
return new Nav(null,null,null,config,null,null,null,null,null,null);
return new Nav(null, null, null, config, null, null, null, null, null, null);
}
function mockTabs(): Tabs {
@@ -99,13 +100,17 @@ describe('IonicApp', () => {
}
function mockTab(parentTabs: Tabs): Tab {
return new Tab(parentTabs,null,config,null,null,null,null,null,null);
return new Tab(parentTabs, app, config, null, null, null, null, null, null, _cd);
}
beforeEach(() => {
config = new Config();
platform = new Platform();
app = new IonicApp(config, null, platform);
_cd = {
reattach: function(){},
detach: function(){}
};
});
});

26
ionic/components/blur/blur.ts
View File

@@ -1,26 +0,0 @@
import {Directive, Renderer, ElementRef} from 'angular2/core';
/**
* @name Blur
* @description
* The blur attribute applies the CSS blur attribute to an element. Safari only.
*
* @usage
* ```html
* <ion-card blur>
* This card will blur the content behind it.
* </ion-card>
* ```
*
* @demo /docs/v2/demos/blur/
* @private
*/
@Directive({
selector: '[blur]'
})
export class Blur {
constructor(private _elementRef: ElementRef, private _renderer: Renderer) {
_renderer.setElementStyle(_elementRef.nativeElement, '-webkit-backdrop-filter', 'blur(10px)');
}
}

BIN
ionic/components/blur/test/basic/bg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 517 KiB

10
ionic/components/blur/test/basic/index.ts
View File

@@ -1,10 +0,0 @@
import {App} from 'ionic-angular';
@App({
templateUrl: 'main.html'
})
class E2EApp {
constructor() {
}
}

34
ionic/components/blur/test/basic/main.html
View File

@@ -1,34 +0,0 @@
<ion-toolbar>
<ion-title>Blur</ion-title>
</ion-toolbar>
<ion-content>
<div class="blur-content">
<ion-card blur class="blur-card">
<ion-card-header>
Card
</ion-card-header>
<ion-card-content>
This card will blur the content behind it.
</ion-card-content>
</ion-card>
</div>
</ion-content>
<style>
.blur-content {
position: absolute;
text-align:center;
background: url('bg.jpg') no-repeat transparent;
background-size: cover;
height: 100%;
width: 100%;
}
.blur-card,
.blur-card ion-card-header {
background: transparent;
color: white;
}
</style>

15
ionic/components/button/button.ts
View File

@@ -58,6 +58,11 @@ export class Button {
*/
isItem: boolean;
/**
* @input {string} The category of the button.
*/
@Input() category: string;
/**
* @input {string} Large button.
*/
@@ -179,6 +184,16 @@ export class Button {
this._readAttrs(element);
}
/**
* @private
*/
ngOnInit() {
// If the button has a role applied to it
if (this.category) {
this.setRole(this.category);
}
}
/**
* @private
*/

1
ionic/components/checkbox/checkbox.ts
View File

@@ -55,6 +55,7 @@ const CHECKBOX_VALUE_ACCESSOR = new Provider(
'</div>' +
'<button role="checkbox" ' +
'type="button" ' +
'category="item-cover" ' +
'[id]="id" ' +
'[attr.aria-checked]="_checked" ' +
'[attr.aria-labelledby]="_labelId" ' +

2
ionic/components/input/input-base.ts
View File

@@ -434,7 +434,7 @@ export class InputBase {
/**
* @private
* Angular2 Forms API method called by the the view (NgControl) to register
* Angular2 Forms API method called by the view (NgControl) to register
* the onTouched event handler that marks model (Control) as touched.
* @param {Function} fn onTouched event handler.
*/

4
ionic/components/input/native-input.ts
View File

@@ -44,7 +44,7 @@ export class NativeInput {
function docTouchEnd(ev) {
var tapped: HTMLElement = ev.target;
if (tapped && self.element()) {
if (tapped.tagName !== "INPUT" && tapped.tagName !== "TEXTAREA" && !tapped.classList.contains('input-cover')) {
if (tapped.tagName !== 'INPUT' && tapped.tagName !== 'TEXTAREA' && !tapped.classList.contains('input-cover')) {
self.element().blur();
}
}
@@ -211,4 +211,4 @@ export class NextInput {
this.focused.emit(true);
}
}
}

6
ionic/components/label/label.ts
View File

@@ -7,9 +7,9 @@ import {Directive, ElementRef, Renderer, Input, Optional, Attribute} from 'angul
* Labels are placed inside of an `ion-item` element and can be used
* to describe an `ion-input`, `ion-toggle`, `ion-checkbox`, and more.
*
* @property [fixed] - a persistant label that sits next the the input
* @property [floating] - a label that will float about the input if the input is empty of looses focus
* @property [stacked] - A stacked label will always appear on top of the input
* @property [fixed] - A persistant label that sits next the input.
* @property [floating] - A label that will float about the input if the input is empty of looses focus.
* @property [stacked] - A stacked label will always appear on top of the input.
*
* @usage

8
ionic/components/loading/loading.ts
View File

@@ -36,7 +36,9 @@ import {ViewController} from '../nav/view-controller';
* the `duration` of the loading options. By default the loading indicator
* will show even during page changes, but this can be disabled by setting
* `dismissOnPageChange` to `true`. To dismiss the loading indicator after
* creation, call the `dismiss()` method on the Loading instance.
* creation, call the `dismiss()` method on the Loading instance. The
* `onDismiss` function can be called to perform an action after the loading
* indicator is dismissed.
*
* ### Limitations
* The element is styled to appear on top of other content by setting its
@@ -71,6 +73,10 @@ import {ViewController} from '../nav/view-controller';
* duration: 5000
* });
*
* loading.onDismiss(() => {
* console.log('Dismissed loading');
* });
*
* this.nav.present(loading);
* }
*

4
ionic/components/loading/test/basic/index.ts
View File

@@ -13,6 +13,10 @@ class E2EPage {
duration: 1000
});
loading.onDismiss(() => {
console.log('Dismissed loading');
});
this.nav.present(loading);
}

4
ionic/components/modal/test/basic/index.ts
View File

@@ -25,8 +25,8 @@ class E2EPage {
console.log('android', platform.is('android'));
console.log('windows phone', platform.is('windows'));
platform.ready().then(() => {
console.log('platform.ready');
platform.ready().then((readySource) => {
console.log('platform.ready, readySource:', readySource);
});
this.platforms = platform.platforms();

2
ionic/components/nav/nav-controller.ts
View File

@@ -1399,7 +1399,7 @@ export class NavController extends Ion {
}
this._views.length = 0;
if (this.parent) {
if (this.parent && this.parent.unregisterChildNav) {
this.parent.unregisterChildNav(this);
}
}

2
ionic/components/navbar/navbar.ts
View File

@@ -91,7 +91,7 @@ class ToolbarBackground {
selector: 'ion-navbar',
template:
'<div class="toolbar-background"></div>' +
'<button class="back-button bar-button bar-button-default" [hidden]="_hideBb">' +
'<button category="bar-button" class="back-button" [hidden]="_hideBb">' +
'<span class="button-inner">' +
'<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
'<span class="back-button-text">' +

1
ionic/components/radio/radio-button.ts
View File

@@ -37,6 +37,7 @@ import {RadioGroup} from './radio-group';
'</div>' +
'<button role="radio" ' +
'type="button" ' +
'category="item-cover" ' +
'[id]="id" ' +
'[attr.aria-checked]="_checked" ' +
'[attr.aria-labelledby]="_labelId" ' +

5
ionic/components/select/select.ts
View File

@@ -109,6 +109,7 @@ const SELECT_VALUE_ACCESSOR = new Provider(
'</div>' +
'<button aria-haspopup="true" ' +
'[id]="id" ' +
'category="item-cover" ' +
'[attr.aria-labelledby]="_labelId" ' +
'[attr.aria-disabled]="_disabled" ' +
'class="item-cover">' +
@@ -255,7 +256,7 @@ export class Select {
this.onChange(input.value);
this.change.emit(input.value);
}
}
};
}));
alertOptions.cssClass = 'select-action-sheet';
@@ -273,7 +274,7 @@ export class Select {
label: input.text,
value: input.value,
checked: input.checked
}
};
});
// create the alert instance from our built up alertOptions

4
ionic/components/show-hide-when/show-hide-when.scss
View File

@@ -5,10 +5,10 @@
// Applied by the showWhen directive
.hidden-show-when {
display: none;
display: none !important;
}
// Applied by the hideWhen directive
.hidden-hide-when {
display: none;
display: none !important;
}

12
ionic/components/show-hide-when/test/basic/main.html
View File

@@ -1,8 +1,18 @@
<ion-toolbar><ion-title>Show/Hide When</ion-title></ion-toolbar>
<ion-toolbar>
<ion-title>Show/Hide When</ion-title>
<ion-buttons end>
<button showWhen="ios">iOS</button>
<button showWhen="windows">Windows</button>
<button showWhen="android">Android</button>
</ion-buttons>
</ion-toolbar>
<ion-content padding>
<button showWhen="ios">iOS</button>
<button showWhen="windows">Windows</button>
<button showWhen="android">Android</button>
<p showWhen="ios" style="background:blue; color:white">
showWhen="ios"

24
ionic/components/slides/slides.ts
View File

@@ -44,6 +44,7 @@ import {Scroll} from '../scroll/scroll';
* | direction | `string` | 'horizontal' | Swipe direction: 'horizontal' or 'vertical'. |
* | initialSlide | `number` | 0 | Index number of initial slide |
* | loop | `boolean` | false | Whether to continuously loop from the last slide to the first slide. |
* | pager | `boolean` | false | Show the pagination bullets. |
* | speed | `number` | 300 | Duration of transition between slides (in ms). |
*
* See [Usage](#usage) below for more information on configuring slides.
@@ -371,17 +372,9 @@ export class Slides extends Ion {
console.warn('The "zoom" attribute has been deprecated. Please pass it in options.');
}
if (isPresent(this.change)) {
// beta.5 2016-04-18 deprecated warning
// change has been renamed to didChange
console.warn('The "change" event has been deprecated. Please use "didChange" instead.');
}
if (isPresent(this.slideChangeStart)) {
// beta.5 2016-04-18 deprecated warning
// slideChangeStart has been renamed to willChange
console.warn('The "slideChangeStart" event has been deprecated. Please use "willChange" instead.');
}
// Deprecated 04-18 beta.5
console.warn('The "slideChangeStart" event has been deprecated. Please use "willChange" instead. Ignore this if you aren\'t using it.');
console.warn('The "change" event has been deprecated. Please use "didChange" instead. Ignore this if you aren\'t using it.');
if (isPresent(this.options.pager)) {
this.showPager = isTrueProperty(this.options.pager);
@@ -827,6 +820,15 @@ export class Slides extends Ion {
return this.slider.activeIndex;
}
/**
* Get the index of the previous slide.
*
* @returns {number} The index number of the previous slide.
*/
getPreviousIndex(): number {
return this.slider.previousIndex;
}
/**
* Get the total number of slides.
*

1
ionic/components/slides/swiper-widget.d.ts vendored
View File

@@ -3,6 +3,7 @@ export declare class Swiper {
constructor(container: HTMLElement, params: any);
slides: Array<HTMLElement>;
activeIndex: number;
previousIndex: number;
isEnd: boolean;
isBeginning: boolean;
update(): any;

7
ionic/components/slides/test/controller/index.ts
View File

@@ -9,7 +9,7 @@ class MyPage {
@ViewChild('mySlider') slider: Slides;
mySlideOptions = {
initialSlide: 1,
loop: true
loop: false
};
ngAfterViewInit() {
@@ -17,8 +17,9 @@ class MyPage {
}
onSlideChanged() {
let previousIndex = this.slider.getPreviousIndex();
let currentIndex = this.slider.getActiveIndex();
console.log("Current index is", currentIndex);
console.log("Previous index is", previousIndex, "Current index is", currentIndex);
}
goToPrevSlide() {
@@ -30,7 +31,7 @@ class MyPage {
}
goToSlide(index) {
this.slider.slideTo(index, 500, false);
this.slider.slideTo(index);
}
getIndex() {

7
ionic/components/slides/test/controller/main.html
View File

@@ -1,16 +1,23 @@
<ion-slides #mySlider [options]="mySlideOptions" (didChange)="onSlideChanged()">
<ion-slide padding>
<h1>Slide 1</h1>
<button block (click)="goToPrevSlide()">Navigate Back</button>
<button block (click)="goToNextSlide()">Navigate Forward</button>
<button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
<button block (click)="getLength()">Get Slide Length</button>
<button block (click)="getIndex()">Get Index</button>
</ion-slide>
<ion-slide padding>
<h1>Slide 2</h1>
<button block (click)="goToPrevSlide()">Navigate Back</button>
<button block (click)="goToNextSlide()">Navigate Forward</button>
<button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
<button block (click)="getIndex()">Get Index</button>
</ion-slide>
<ion-slide padding>
<h1>Slide 3</h1>
<button block (click)="goToPrevSlide()">Navigate Back</button>
<button block (click)="goToNextSlide()">Navigate Forward</button>
<button block (click)="getIndex()">Get Index</button>
</ion-slide>
</ion-slides>

2
ionic/components/tabs/tabs.ios.scss
View File

@@ -10,7 +10,6 @@ $tabbar-ios-item-font-size: 10px !default;
$tabbar-ios-item-icon-size: 30px !default;
$tabbar-ios-height: 49px !default;
$tab-button-ios-min-width: 80px !default;
$tab-button-ios-max-width: 240px !default;
$tab-button-ios-active-color: $toolbar-ios-active-color !default;
$tab-button-ios-inactive-color: $toolbar-ios-inactive-color !default;
@@ -29,7 +28,6 @@ ion-tabs[tabbarPlacement=top] tabbar {
.tab-button {
padding: $tabbar-ios-item-padding;
min-width: $tab-button-ios-min-width;
max-width: $tab-button-ios-max-width;
min-height: $tabbar-ios-height;

2
ionic/components/tabs/tabs.scss
View File

@@ -90,7 +90,7 @@ tabbar {
ion-badge,
ion-icon,
span {
opacity: 0.4;
opacity: .4;
}
}

4
ionic/components/tabs/tabs.wp.scss
View File

@@ -81,7 +81,7 @@ tabbar {
// Windows Tabbar Color Mixin
// --------------------------------------------------
@mixin tabbar-wp($color-name, $color-base) {
@mixin tabbar-wp($color-name, $color-base, $color-contrast) {
ion-tabs[#{$color-name}] tabbar {
background-color: $color-base;
@@ -104,5 +104,5 @@ tabbar {
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
@include tabbar-wp($color-name, $color-base);
@include tabbar-wp($color-name, $color-base, $color-contrast);
}

2
ionic/components/tabs/test/tab-bar-scenarios/main.html
View File

@@ -59,6 +59,8 @@
<ion-tabs tabbarLayout="title-hide" secondary no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
<ion-tab tabTitle="Messages" tabIcon="chatboxes" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>

8
ionic/components/toast/test/basic/e2e.ts Normal file
View File

@@ -0,0 +1,8 @@
it('should open toast', function() {
element(by.css('.e2eOpenToast')).click();
});
it('should close with backdrop click', function() {
element(by.css('.backdrop')).click();
});

84
ionic/components/toast/test/basic/index.ts Normal file
View File

@@ -0,0 +1,84 @@
import {App, Page, Toast, NavController} from 'ionic-angular';
@Page({
template: `
<ion-navbar *navbar>
<ion-title>Another Page</ion-title>
</ion-navbar>
<ion-content padding>
<p>This is another page to show that the toast stays.</p>
</ion-content>
`
})
class AnotherPage {
}
@Page({
templateUrl: 'main.html'
})
class E2EPage {
constructor(private nav: NavController) { }
showToast() {
const toast = Toast.create({
message: 'User was created successfully',
showCloseButton: true,
enableBackdropDismiss: false
});
toast.onDismiss(() => {
console.log('Dismissed toast');
});
this.nav.present(toast);
setTimeout(() => {
this.nav.push(AnotherPage);
}, 1000);
}
showLongToast() {
const toast = Toast.create({
message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.',
});
toast.onDismiss(this.dismissHandler);
this.nav.present(toast);
}
showDismissDurationToast() {
const toast = Toast.create({
message: 'I am dismissed after 1.5 seconds',
duration: 1500
});
toast.onDismiss(this.dismissHandler);
this.nav.present(toast);
}
showToastWithCloseButton() {
const toast = Toast.create({
message: 'Your internet connection appears to be offline. Data integrity is not gauranteed.',
showCloseButton: true,
closeButtonText: 'Ok'
});
toast.onDismiss(this.dismissHandler);
this.nav.present(toast);
}
private dismissHandler(toast: Toast) {
console.info('Toast onDismiss()');
}
}
@App({
template: '<ion-nav [root]="root"></ion-nav>'
})
class E2EApp {
root = E2EPage;
constructor() {
}
}

23
ionic/components/toast/test/basic/main.html Normal file
View File

@@ -0,0 +1,23 @@
<ion-navbar *navbar>
<ion-title>Toasts</ion-title>
</ion-navbar>
<ion-content padding>
<button block (click)="showToast()">Show Toast and Navigate</button>
<button block (click)="showLongToast()">Show Long Toast</button>
<br />
<button block (click)="showDismissDurationToast()">Custom (1.5s) Duration</button>
<button block (click)="showToastWithCloseButton()" class="e2eOpenToast">With closeButtonText</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia purus ac turpis fermentum, nec accumsan nulla rutrum. Aenean lorem est, luctus id iaculis ac, ultricies quis odio. Aenean imperdiet imperdiet ex et vehicula. Suspendisse vulputate turpis quis ultricies porttitor. Proin malesuada tortor at libero laoreet, eu eleifend enim pulvinar. Nulla facilisi. Fusce sit amet mauris mauris. Mauris consequat libero sed egestas tincidunt.
</p>
<p>
In felis augue, sagittis id dui ac, tempor luctus turpis. Vestibulum nec urna vitae nisl malesuada lacinia ut sit amet orci. Suspendisse sed mauris vitae mauris porttitor pulvinar. Donec quis ante id dui cursus malesuada ut nec magna. Vestibulum venenatis efficitur urna, quis tempus quam. Curabitur id elementum eros, at euismod nisl. Aliquam ultricies imperdiet arcu id consequat. Aliquam erat volutpat. Nam quis laoreet dui. Donec eget neque non leo porta scelerisque. In blandit placerat nibh, ut viverra nisi feugiat a. Pellentesque semper, ligula et tincidunt egestas, urna arcu pellentesque massa, vitae accumsan ligula velit vitae sem. Nulla porta est id ligula viverra, ut placerat quam auctor. Morbi eget efficitur nibh.
</p>
<p>
Aenean viverra commodo enim eget interdum. Donec condimentum tincidunt sollicitudin. Curabitur malesuada est elementum lectus sodales, vitae eleifend massa dignissim. Pellentesque nec diam dapibus purus vulputate pharetra at id nunc. Vivamus dapibus sed turpis in facilisis. Nulla sollicitudin lacus sem, vel fringilla neque accumsan non. Suspendisse non congue turpis, id mattis ex. Nam sit amet diam quis neque convallis aliquet quis et lorem. Donec sit amet libero sit amet nisl mollis vehicula nec id eros. Curabitur rutrum condimentum porta. Donec pellentesque consectetur lacus. Etiam maximus ante vitae varius eleifend. Integer ac justo sem. Morbi iaculis vel urna in tempus. Aenean at rhoncus nulla.
</p>
</ion-content>

52
ionic/components/toast/toast.ios.scss Normal file
View File

@@ -0,0 +1,52 @@
@import "../../globals.ios";
@import "./toast";
// iOS Toast
// --------------------------------------------------
$toast-ios-text-align: left !default;
$toast-ios-background: rgba(0, 0, 0, .9) !default;
$toast-ios-border-radius: .65rem !default;
$toast-ios-title-color: #fff !default;
$toast-ios-title-font-size: 1.4rem !default;
$toast-ios-title-padding: 1.5rem !default;
ion-toast {
position: absolute;
top: 0;
left: 0;
z-index: $z-index-overlay;
display: block;
width: $toast-width;
height: $toast-width;
}
.toast-wrapper {
position: absolute;
right: 10px;
bottom: 10px;
left: 10px;
z-index: $z-index-overlay-wrapper;
display: block;
margin: auto;
max-width: $toast-max-width;
border-radius: $toast-ios-border-radius;
background: $toast-ios-background;
transform: translate3d(0, 100%, 0);
}
.toast-message {
padding: $toast-ios-title-padding;
font-size: $toast-ios-title-font-size;
color: $toast-ios-title-color;
}

51
ionic/components/toast/toast.md.scss Normal file
View File

@@ -0,0 +1,51 @@
@import "../../globals.md";
@import "./toast";
// Material Design Toast
// --------------------------------------------------
$toast-md-text-align: left !default;
$toast-md-background: #333 !default;
$toast-md-group-margin-bottom: 8px !default;
$toast-md-title-color: #fff !default;
$toast-md-title-font-size: 1.5rem !default;
$toast-md-title-padding: 19px 16px 17px !default;
ion-toast {
position: absolute;
top: 0;
left: 0;
z-index: $z-index-overlay;
display: block;
width: $toast-width;
height: $toast-width;
}
.toast-wrapper {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: $z-index-overlay-wrapper;
display: block;
margin: auto;
width: $toast-width;
max-width: $toast-max-width;
background: $toast-md-background;
transform: translate3d(0, 100%, 0);
}
.toast-message {
padding: $toast-md-title-padding;
font-size: $toast-md-title-font-size;
color: $toast-md-title-color;
}

52
ionic/components/toast/toast.scss Normal file
View File

@@ -0,0 +1,52 @@
@import "../../globals.core";
// Toast
// --------------------------------------------------
$toast-width: 100% !default;
$toast-max-width: 700px !default;
ion-toast {
position: absolute;
top: 0;
left: 0;
z-index: $z-index-overlay;
display: block;
width: $toast-width;
height: $toast-width;
}
.toast-container {
display: flex;
align-items: center;
button {
padding: 19px 16px 17px;
font-size: 1.5rem;
}
}
.toast-message {
flex: 1;
}
.toast-wrapper {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: $z-index-overlay-wrapper;
display: block;
margin: auto;
max-width: $toast-max-width;
transform: translate3d(0, 100%, 0);
}

322
ionic/components/toast/toast.ts Normal file
View File

@@ -0,0 +1,322 @@
import {Component, ElementRef, Renderer, Output, EventEmitter} from 'angular2/core';
import {NgClass, NgIf, NgFor} from 'angular2/common';
import {Button} from '../button/button';
import {Icon} from '../icon/icon';
import {ActionSheet, ActionSheetOptions} from '../action-sheet/action-sheet';
import {Animation} from '../../animations/animation';
import {Transition, TransitionOptions} from '../../transitions/transition';
import {Config} from '../../config/config';
import {isPresent} from '../../util/util';
import {NavParams} from '../nav/nav-params';
import {NavController} from '../nav/nav-controller';
import {ViewController} from '../nav/view-controller';
/**
* @name Toast
* @description
* A Toast is a subtle notification that appears at the bottom of the
* screen. It can be used to provide feedback about an operation or to
* display a system message. The toast appears on top of the app's content,
* and can be dismissed by the app to resume user interaction with
* the app. It includes a backdrop, which can optionally be clicked to
* dismiss the toast.
*
* ### Creating
* All of the toast options should be passed in the first argument of
* the create method: `Toast.create(opts)`. The message to display should be
* passed in the `message` property. The `showCloseButton` option can be set to
* true in order to display a close button on the toast. See the [create](#create)
* method below for all available options.
*
* ### Dismissing
* The toast can be dismissed automatically after a specific amount of time
* by passing the number of milliseconds to display it in the `duration` of
* the toast options. It can also be dismissed by clicking on the backdrop,
* unless `enableBackdropDismiss` is set to `false` upon creation. If `showCloseButton`
* is set to true, then the close button will dismiss the toast. To dismiss
* the toast after creation, call the `dismiss()` method on the Toast instance.
* The `onDismiss` function can be called to perform an action after the toast
* is dismissed.
*
* @usage
* ```ts
* constructor(nav: NavController) {
* this.nav = nav;
* }
*
* presentToast() {
* let toast = Toast.create({
* message: 'User was added successfully',
* duration: 3000
* });
*
* toast.onDismiss(() => {
* console.log('Dismissed toast');
* });
*
* this.nav.present(toast);
* }
* ```
*
* @demo /docs/v2/demos/toast/
*/
export class Toast extends ViewController {
constructor(opts: ToastOptions = {}) {
opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
opts.dismissOnPageChange = isPresent(opts.dismissOnPageChange) ? !!opts.dismissOnPageChange : false;
super(ToastCmp, opts);
this.viewType = 'toast';
this.isOverlay = true;
this.usePortal = true;
// by default, toasts should not fire lifecycle events of other views
// for example, when an toast enters, the current active view should
// not fire its lifecycle events because it's not conceptually leaving
this.fireOtherLifecycles = false;
}
/**
* @private
*/
getTransitionName(direction: string) {
let key = 'toast' + (direction === 'back' ? 'Leave' : 'Enter');
return this._nav && this._nav.config.get(key);
}
/**
* @param {string} message Toast message content
*/
setMessage(message: string) {
this.data.message = message;
}
/**
*
* Toast options
*
* | Property | Type | Default | Description |
* |-----------------------|-----------|-----------------|---------------------------------------------------------------------------------------------------------------|
* | message | `string` | - | The message for the toast. Long strings will wrap and the toast container will expand. |
* | duration | `number` | - | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. |
* | cssClass | `string` | - | Any additional class for custom styles. |
* | showCloseButton | `boolean` | false | Whether or not to show a button to close the toast. |
* | closeButtonText | `string` | "Close" | Text to display in the close button. |
* | enableBackdropDismiss | `boolean` | true | Whether the toast should be dismissed by tapping the backdrop. |
* | dismissOnPageChange | `boolean` | false | Whether to dismiss the toast when navigating to a new page. |
*
* @param {object} opts Toast options. See the above table for available options.
*/
static create(opts: ToastOptions = {}) {
return new Toast(opts);
}
}
/**
* @private
*/
@Component({
selector: 'ion-toast',
template: `
<div (click)="bdClick()" tappable disable-activated class="backdrop" role="presentation"></div>
<div class="toast-wrapper">
<div class="toast-container">
<div class="toast-message" id="{{hdrId}}" *ngIf="d.message">{{d.message}}</div>
<button clear class="toast-button" *ngIf="d.showCloseButton" (click)="cbClick()">
{{ d.closeButtonText || 'Close' }}
<ion-button-effect></ion-button-effect>
</button>
</div>
</div>
`,
host: {
'role': 'dialog',
'[attr.aria-labelledby]': 'hdrId',
'[attr.aria-describedby]': 'descId'
},
directives: [NgIf, Icon, Button]
})
class ToastCmp {
private d: any;
private descId: string;
private hdrId: string;
private created: number;
private id: number;
private dismissTimeout: number = undefined;
constructor(
private _nav: NavController,
private _viewCtrl: ViewController,
private _config: Config,
private _elementRef: ElementRef,
params: NavParams,
renderer: Renderer
) {
this.d = params.data;
this.created = Date.now();
if (this.d.cssClass) {
renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
}
this.id = (++toastIds);
if (this.d.message) {
this.hdrId = 'toast-hdr-' + this.id;
}
}
onPageDidEnter() {
const { activeElement }: any = document;
if (activeElement) {
activeElement.blur();
}
let focusableEle = this._elementRef.nativeElement.querySelector('button');
if (focusableEle) {
focusableEle.focus();
}
// if there's a `duration` set, automatically dismiss.
if (this.d.duration) {
this.dismissTimeout =
setTimeout(() => {
this.dismiss('backdrop');
}, this.d.duration);
}
}
bdClick() {
if (this.isEnabled() && this.d.enableBackdropDismiss) {
this.dismiss('backdrop');
}
}
cbClick() {
if (this.isEnabled()) {
this.dismiss('close');
}
}
dismiss(role): Promise<any> {
clearTimeout(this.dismissTimeout);
this.dismissTimeout = undefined;
return this._viewCtrl.dismiss(null, role);
}
isEnabled() {
let tm = this._config.getNumber('overlayCreatedDiff', 750);
return (this.created + tm < Date.now());
}
}
export interface ToastOptions {
message?: string;
cssClass?: string;
duration?: number;
showCloseButton?: boolean;
closeButtonText?: string;
enableBackdropDismiss?: boolean;
dismissOnPageChange?: boolean;
}
class ToastSlideIn extends Transition {
constructor(enteringView, leavingView, opts: TransitionOptions) {
super(opts);
let ele = enteringView.pageRef().nativeElement;
let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
wrapper.fromTo('translateY', '120%', '0%');
this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(wrapper);
}
}
class ToastSlideOut extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(opts);
let ele = leavingView.pageRef().nativeElement;
let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
wrapper.fromTo('translateY', '0%', '120%');
this.easing('cubic-bezier(.36,.66,.04,1)').duration(300).add(wrapper);
}
}
class ToastMdSlideIn extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(opts);
let ele = enteringView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('.backdrop'));
let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
backdrop.fromTo('opacity', 0, 0);
wrapper.fromTo('translateY', '120%', '0%');
this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(backdrop).add(wrapper);
}
}
class ToastMdSlideOut extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(opts);
let ele = leavingView.pageRef().nativeElement;
let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
let backdrop = new Animation(ele.querySelector('.backdrop'));
wrapper.fromTo('translateY', '0%', '120%');
backdrop.fromTo('opacity', 0, 0);
this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper);
}
}
class ToastWpPopIn extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(opts);
let ele = enteringView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('.backdrop'));
let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1');
backdrop.fromTo('opacity', 0, 0);
this.easing('cubic-bezier(0,0 0.05,1)').duration(200).add(backdrop).add(wrapper);
}
}
class ToastWpPopOut extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(opts);
let ele = leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('.backdrop'));
let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3');
backdrop.fromTo('opacity', 0, 0);
this.easing('ease-out').duration(150).add(backdrop).add(wrapper);
}
}
Transition.register('toast-slide-in', ToastSlideIn);
Transition.register('toast-slide-out', ToastSlideOut);
Transition.register('toast-md-slide-in', ToastMdSlideIn);
Transition.register('toast-md-slide-out', ToastMdSlideOut);
Transition.register('toast-wp-slide-out', ToastWpPopOut);
Transition.register('toast-wp-slide-in', ToastWpPopIn);
let toastIds = -1;

44
ionic/components/toast/toast.wp.scss Normal file
View File

@@ -0,0 +1,44 @@
@import "../../globals.wp";
@import "./toast";
// Windows Phone Toast
// --------------------------------------------------
$toast-wp-text-align: left !default;
$toast-wp-background: rgba(0, 0, 0, 1) !default;
$toast-wp-border-radius: 0 !default;
$toast-wp-button-color: #fff !default;
$toast-wp-title-color: #fff !default;
$toast-wp-title-font-size: 1.4rem !default;
$toast-wp-title-padding: 1.5rem !default;
.toast-wrapper {
position: absolute;
bottom: 0;
left: 0;
z-index: $z-index-overlay-wrapper;
display: block;
margin: auto;
max-width: $toast-max-width;
border-radius: $toast-wp-border-radius;
background: $toast-wp-background;
transform: translate3d(0, 100%, 0);
}
.toast-message {
padding: $toast-wp-title-padding;
font-size: $toast-wp-title-font-size;
color: $toast-wp-title-color;
}
.toast-button {
color: $toast-wp-button-color;
}

1
ionic/components/toggle/toggle.ts
View File

@@ -58,6 +58,7 @@ const TOGGLE_VALUE_ACCESSOR = new Provider(
'</div>' +
'<button role="checkbox" ' +
'type="button" ' +
'category="item-cover" ' +
'[id]="id" ' +
'[attr.aria-checked]="_checked" ' +
'[attr.aria-labelledby]="_labelId" ' +

4
ionic/components/toggle/toggle.wp.scss
View File

@@ -128,7 +128,7 @@ ion-toggle {
// Windows Color Mixin
// --------------------------------------------------
@mixin toggle-theme-wp($color-name, $color-base) {
@mixin toggle-theme-wp($color-name, $color-base, $color-contrast) {
ion-toggle[#{$color-name}] {
@@ -151,6 +151,6 @@ ion-toggle {
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
@include toggle-theme-wp($color-name, $color-base);
@include toggle-theme-wp($color-name, $color-base, $color-contrast);
}