Merge branch 'master' into css-refactor

2026-03-13 10:22:08 +08:00 · 2015-12-04 12:55:13 -05:00
parent 9b1e0dc291 d1d40ba7ba
commit 111da2c57d
15 changed files with 199 additions and 128 deletions
--- a/ionic/components/app/id.ts
+++ b/ionic/components/app/id.ts
@@ -55,6 +55,16 @@ export class IdRef {
 }


+/**
+ * @name Attr
+ * @description
+ * Attr allows you to dynamically add or remove an attribute based on the value of an expression or variable.
+ * @usage
+ * ```html
+ * // toggle the no-lines attributes based on whether isAndroid is true or false
+ * <ion-list [attr.no-lines]="isAndroid ? '' : null">
+ * ```
+ */
@Directive({
  selector: '[attr]',
  inputs: ['attr']
--- a/ionic/components/icon/icon.ts
+++ b/ionic/components/icon/icon.ts
@@ -3,6 +3,18 @@ import {Directive, ElementRef, Attribute, Renderer} from 'angular2/angular2';
 import {Config} from '../../config/config';


+/**
+ * @name Icon
+ * @description
+ * Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons, 
+ * check out the [Ionicons resource docs](../../../../../resources/ionicons). 
+ *
+ * @property {boolean} [is-active] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon.
+ * If there is not an outlined version for the particular icon, it will use the default (full) version.
+ * @property {string} [ios] - Explicitly set the icon to use on iOS.
+ * @property {string} [md] - Explicitly set the icon to use on Android.
+ *
+ */
@Directive({
  selector: 'icon',
  inputs: [
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -36,14 +36,14 @@ ion-segment {
      background: $segment-button-ios-bg-color;
      color: $segment-button-ios-bg-color-activated;

-      &.activated {
+      &.segment-activated {
        opacity: 1;
        color: $segment-button-ios-text-color;
        background-color: $segment-button-ios-bg-color-activated;
        transition: $segment-button-ios-activated-transition;
      }

-      &:hover:not(.activated) {
+      &:hover:not(.segment-activated) {
        background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
      }
    }
@@ -95,13 +95,13 @@ ion-segment {
    background: $segment-button-ios-bg-color;
    color: $button-color;

-    &.activated {
+    &.segment-activated {
      opacity: 1;
      color: $activated-text-color;
      background-color: $button-color;
    }

-    &:hover:not(.activated) {
+    &:hover:not(.segment-activated) {
      background-color: rgba($button-color, $segment-button-ios-hover-opacity);
    }
  }
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -24,7 +24,7 @@ ion-segment {
    min-height: $segment-button-md-min-height;
    line-height: $segment-button-md-line-height;

-    &.activated {
+    &.activated, &.segment-activated {
      color: $segment-button-md-text-color-activated;
      background-color: transparent;
      border-color: $segment-button-md-border-color-activated;
@@ -41,7 +41,8 @@ ion-segment {
  ion-segment {
    margin: 0 auto;

-    ion-segment-button[button][outline].activated {
+    ion-segment-button[button][outline].activated,
+    ion-segment-button[button][outline].segment-activated {
      background-color: transparent;
    }
  }
@@ -57,7 +58,7 @@ ion-segment {
  &[outline] {
    color: $button-color;

-    &.activated {
+    &.activated, &.segment-activated {
      background-color: transparent;
      color: $button-color;
      border-color: $button-color;
--- a/ionic/components/segment/segment.ts
+++ b/ionic/components/segment/segment.ts
@@ -132,7 +132,7 @@ export class Segment extends Ion {
  ],
  host: {
    '(click)': 'click($event)',
-    '[class.activated]': 'isActive',
+    '[class.segment-activated]': 'isActive',
  }
 })
 export class SegmentButton {
--- a/ionic/components/tabs/tab.ts
+++ b/ionic/components/tabs/tab.ts
@@ -9,6 +9,16 @@ import {Tabs} from './tabs';


 /**
+ * @name Tab
+ * @usage
+ * ```html
+ * <ion-tabs>
+ * 	 <ion-tab tab-title="Home" tab-icon="home" [root]="tabOneRoot"></ion-tab>
+ * 	 <ion-tab tab-title="Login" tab-icon="star" [root]="tabTwoRoot"></ion-tab>
+ * </ion-tabs>
+ * ```
+ *
+ * @description
 * _For basic Tabs usage, see the [Tabs section](../../../../components/#tabs)
 * of the Component docs._
 *
@@ -21,36 +31,12 @@ import {Tabs} from './tabs';
 *
 * See the [Tabs API reference](../Tabs/) for more details on configuring Tabs
 * and the TabBar.
+
 *
- * Like Nav, you must set a root page to be loaded initially for each Tab with
- * the 'root' property:
- * ```
- * import {GettingStartedPage} from 'getting-started';
- * @App({
- *   template: `<ion-tabs>
- *                <ion-tab [root]="tabOneRoot"></ion-tab>
- *                <ion-tab [root]="tabTwoRoot"></ion-tab>
- *              <ion-tabs>`
- * })
- * class MyApp {
- *   constructor(){
- *     this.tabOneRoot = GettingStartedPage;
- *     this.tabTwoRoot = GettingStartedPage;
- *   }
- * }
- * ```
- * <h3 id="tab_properties">Tab Properties</h3>
- * The Tabs component automatically creates the TabBar from the properties you
- * set on each Tab.
- *
- * To change the title and icon, use the `tab-title` and `tab-icon`
- * inputs:
- * ```html
- * <ion-tabs>
- * 	 <ion-tab tab-title="Home" tab-icon="home" [root]="tabOneRoot"></ion-tab>
- * 	 <ion-tab tab-title="Login" tab-icon="star" [root]="tabTwoRoot"></ion-tab>
- * <ion-tabs>
- * ```
+ * @property {any} [root] - set the root page for this tab
+ * @property {any} [tab-title] - set the title of this tab
+ * @property {any} [tab-icon] - set the icon for this tab
+
 */
@Component({
  selector: 'ion-tab',
@@ -148,6 +134,9 @@ export class Tab extends NavController {
    });
  }

+  /**
+   * @private
+   */
  setSelected(isSelected) {
    this.isSelected = isSelected;
    this.hideNavbars(!isSelected);
@@ -163,10 +152,27 @@ export class Tab extends NavController {
    });
  }

+  /**
+   *
+   * ```ts
+   * export class MyClass{
+   *  constructor(tab: Tab){
+   *    this.tab = tab;
+   *    console.log(this.tab.index);
+   *  }
+   * }
+   * ```
+   *
+   * @returns {Number} Returns the index of this page within its NavController.
+   *
+   */
  get index() {
    return this.parent.getIndex(this);
  }

+  /**
+   * @private
+   */
  onDestroy() {
    clearTimeout(this._loadTimer);
  }
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -13,10 +13,16 @@ import {rafFrames} from '../../util/dom';

 /**
 * @name Tabs
- * @property [tabbar-placement] - set position of the tabbar, top or bottom
- * @property [tabbar-icons] - set the position of the tabbar's icons: top, bottom, left, right, hide
- * @property [tabbar-style] - sets tabbar's style (primary, secondary, etc)
- * @property [preload-tabs] - sets whether to preload all the tabs, true or false
+ * @property {any} [tabbar-placement] - set position of the tabbar, top or bottom
+ * @property {any} [tabbar-icons] - set the position of the tabbar's icons: top, bottom, left, right, hide
+ * @property {any} [tabbar-style] - sets tabbar's style (primary, secondary, etc)
+ * @property {any} [preload-tabs] - sets whether to preload all the tabs, true or false
+ * @usage
+* ```html
+ * <ion-tabs>
+ *   <ion-tab [root]="tabRoot"></ion-tab>
+ * </ion-tabs>
+ * ```
 * @description
 * _For basic Tabs usage, see the [Tabs section](../../../../components/#tabs)
 * of the Component docs._
@@ -27,45 +33,6 @@ import {rafFrames} from '../../util/dom';
 *
 * See the [Tab API reference](../Tab/) for more details on individual Tab components.
 *
- * The TabBar is automatically created for you using the
- * [properties you set on each Tab](../Tab/#tab_properties).
- *
- * To override the platform specific TabBar placement, use the
- * `tabbar-placement` property:
- *
- * ```html
- * <ion-tabs tabbar-placement="top">
- *   <ion-tab [root]="tabRoot"></ion-tab>
- * </ion-tabs>
- * ```
- *
- * To change the location of the icons in the TabBar, use the `tabbar-icons`
- * property:
- * ```html
- * <ion-tabs tabbar-icons="bottom">
- *   <ion-tab [root]="tabRoot"></ion-tab>
- * </ion-tabs>
- * ```
- *
- * You can select tabs programatically by injecting Tabs into any child
- * component, and using the [select()](#select) method:
- * ```ts
- * @Page({
- *   template: `<button (click)="goToTabTwo()">Go to Tab2</button>`
- * })
- * class TabOne {
- *   constructor(tabs: Tabs){
- *     this.tabs = tabs;
- *   }
- *
- *   goToTabTwo() {
- *     this.tabs.select(this.tabs.tabs[1]);
- *   }
- * }
- * ```
- * The [tabs](#tabs) property is an array of all child [Tab](../Tab/) components
- * of that Tabs component.
- *
 */
@ConfigComponent({
  selector: 'ion-tabs',
--- a/ionic/components/tap-click/tap-click.ts
+++ b/ionic/components/tap-click/tap-click.ts
@@ -62,6 +62,7 @@ export class TapClick {
    if (this.usePolyfill && this.startCoord && this.app.isEnabled()) {
      let endCoord = pointerCoord(ev);

+
      if (!hasPointerMoved(POINTER_TOLERANCE, this.startCoord, endCoord)) {
        console.debug('create click from touch ' + Date.now());

@@ -206,7 +207,7 @@ function removeListener(type, listener) {
 }

 const ACTIVATABLE_ELEMENTS = /^(A|BUTTON)$/;
-const ACTIVATABLE_ATTRIBUTES = /tappable/;
+const ACTIVATABLE_ATTRIBUTES = /tappable|button/i;
 const POINTER_TOLERANCE = 4;
 const POINTER_MOVE_UNTIL_CANCEL = 10;
 const DISABLE_NATIVE_CLICK_AMOUNT = 2500;
--- a/ionic/components/text-input/label.ts
+++ b/ionic/components/text-input/label.ts
@@ -3,7 +3,22 @@ import {Directive, Optional} from 'angular2/angular2';
 import {Config} from '../../config/config';
 import {TextInput} from './text-input';
 import {pointerCoord, hasPointerMoved} from '../../util/dom';
-
+/**
+ * @name Label
+ * @description
+ * Labels describe the data that the user should enter in to an input element.
+ * @usage
+ * ```html
+ * <ion-input>
+ *   <ion-label>Username</ion-label>
+ *   <input type="text" value="">
+ * </ion-input>
+ * ```
+ *
+ * @see {@link ../../../../components#inputs Input Component Docs}
+ * @see {@link ../Input Input API Docs}
+ *
+ */

@Directive({
  selector: 'ion-label',
--- a/ionic/platform/platform.ts
+++ b/ionic/platform/platform.ts
@@ -301,8 +301,7 @@ export class Platform {
   * @returns {boolean} TODO
   */
  testNavigatorPlatform(navigatorPlatformExpression) {
-    let rgx = new RegExp(navigatorPlatformExpression, 'i');
-    return rgx.test(this._bPlt || '');
+    return navigatorPlatformExpression.test(this._bPlt || '');
  }

  /**
--- a/ionic/platform/registry.ts
+++ b/ionic/platform/registry.ts
@@ -52,7 +52,7 @@ Platform.register({
      // however, under-powered devices shouldn't use ripple
      // if this a linux device, and is using Android Chrome v36 (Android 5.0)
      // or above then use ripple, otherwise do not use a ripple effect
-      if (p.testNavigatorPlatform('linux')) {
+      if (p.testNavigatorPlatform('/linux/i')) {
        let chromeVersion = p.matchUserAgentVersion(/Chrome\/(\d+).(\d+)?/);
        if (chromeVersion) {
          // linux android device using modern android chrome browser gets ripple
@@ -175,5 +175,5 @@ function isIOSDevice(p) {
  // checks navigator.platform to see if it's an actual iOS device
  // this does not use the user-agent string because it is often spoofed
  // an actual iPad will return true, a chrome dev tools iPad will return false
-  return p.testNavigatorPlatform(/iphone|ipad|ipod/);
+  return p.testNavigatorPlatform(/iphone|ipad|ipod/i);
 }
--- a/ionic/util/events.ts
+++ b/ionic/util/events.ts
@@ -3,6 +3,20 @@ import {Injectable} from 'angular2/angular2';
 /**
 * Events is a pub/sub style event system for sending and responding to application-level
 * events across your app.
+ * @usage
+ * ```ts
+ * // first page (publish an event when a user is created)
+ * function createUser(user) {
+ *   console.log('User created!')
+ *   events.publish('user:created', user);
+ * }
+ *
+ * // second page (listen for the user created event)
+ * events.subscribe('user:created', (user) => {
+ *   console.log('Welcome', user); 
+ * });
+ *
+ * ```
 */
@Injectable()
 export class Events {
--- a/scripts/docs/dgeni-config.js
+++ b/scripts/docs/dgeni-config.js
@@ -67,7 +67,9 @@ module.exports = function(currentVersion){
  var latestVersion = _.find(versions, semver.valid);
  versions = versions.map(function(version) {
    //Latest version is in docs root
-    var folder = version == latestVersion ? '' : version;
+    //var folder = version == latestVersion ? '' : version;
+    // Instead set nightly as docs root
+    var folder = version == 'nightly' ? '' : version;
    return {
      href: path.join('/' + config.v2DocsDir, folder),
      folder: folder,
--- a/scripts/docs/templates/api_menu.template.html
+++ b/scripts/docs/templates/api_menu.template.html
@@ -1,14 +1,12 @@
 <@ for ver in version.list @>
-  <@ if ver.name != version.latest.name @>
    <@ if loop.first @>
 {% if page.versionHref == "<$ ver.href $>" %}
    <@ else @>
 {% elsif page.versionHref == "<$ ver.href $>" %}
    <@ endif @>
  {% include v2_fluid/api_menu_flat_<$ ver.name $>.html %}
-  <@ endif @>
 <@ endfor @>
 <# make the last case always be to show latest version #>
 {% else %}
-  {% include v2_fluid/api_menu_flat_<$ version.latest.name $>.html %}
+  {% include v2_fluid/api_menu_flat_nightly.html %}
 {% endif %}
--- a/scripts/docs/templates/common.template.html
+++ b/scripts/docs/templates/common.template.html
@@ -74,6 +74,7 @@ docType: "<$ doc.docType $>"
 <@- endmacro -@>

 <@ block body @>
+
 <div class="improve-docs">
  <a href='http://github.com/driftyco/ionic2/tree/master/<$ doc.fileInfo.relativePath $>#L<$ doc.location.start.line $>'>
    View Source
@@ -107,59 +108,108 @@ docType: "<$ doc.docType $>"

 <@ block header @>
 <h1 class="api-title">
+
 <@ if doc.docType == "directive" @>
-  <$ doc.name | dashCase $>
+<$ doc.name | dashCase $>
+
 <@ else @>
-  <$ doc.name $>
+<$ doc.name $>
 <@ endif @>
+
 <@ if doc.parent @>
 <br />
 <small>
-  Child of <$ doc.parent $>
+Child of <$ doc.parent $>
 </small>
 <@ endif @>
+
 <@ if doc.delegate @>
 <br/>
 <small>
-  Delegate: <$ doc.delegate $>
+Delegate: <$ doc.delegate $>
 </small>
 <@ endif @>
+
 </h1>

 <@ if doc.codepen @>
 {% include codepen.html id="<$ doc.codepen $>" %}
 <@ endif @>
+
 <@ endblock @>

+
+<h2>Description</h2>
 <@ block description @>
 <$ doc.description | marked $>
 <@ endblock @>

+
+<@- if doc.directiveInfo @>
+<h2><$ doc.directiveInfo.type $></h2>
+<h3><$ doc.directiveInfo.properties[0].name $>: <code><$ doc.directiveInfo.properties[0].values $></code></h3>
+<@ endif -@>
+
+
+<h2>Usage</h2>
 <@ if doc.usage @>
 <@ block usage @>
 <$ doc.usage | marked $>
 <@ endblock @>
 <@ endif @>

-<h1 class="class export"><$ doc.name $> <span class="type"><$ doc.docType $></span></h1>
-<p class="module">exported from {@link <$ doc.moduleDoc.id $> <$doc.moduleDoc.id $> }<br/>
-defined in <$ githubViewLink(doc) $>
-</p>

-<@- if doc.directiveInfo @>
-<h2><$ doc.directiveInfo.type $></h2>
-<@- for prop in doc.directiveInfo.properties @>
-  <span><$ prop.name $>: <@ for v in prop.values @><$ v $><@ if not loop.last @>, <@ endif @><@ endfor @></span>
+<@ if doc.properties @>
+<h2>Attributes:</h2>
+<table class="table" style="margin:0;">
+<thead>
+<tr>
+<th>Attribute</th>
+
+<@ set hasTypes = false @>
+<@ for prop in doc.properties @>
+<@ if prop.type @>
+<@ set hasTypes = true @>
+<@ endif @>
 <@ endfor @>
-<@ endif -@>
+<@ if hasTypes @>
+<th>Type</th>
+<@ endif @>
+
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<@ for prop in doc.properties @>
+<tr>
+<td>
+<$ prop.name $>
+</td>
+
+<@ if hasTypes @>
+<td>
+<$ prop.type.name $>
+</td>
+<@ endif @>
+
+<td>
+<$ prop.description $>
+</td>
+</tr>
+<@ endfor @>
+</tbody>
+</table>
+<@ endif @>

 <@- if doc.members and doc.members.length @>
-<h2>Members</h2>
+
+<h2>Methods</h2>
 <@- for method in doc.members @>

 <div id="<$ method.name $>"></div>
+
 <h3>
-  <$ functionSyntax(method) $>
+<$ functionSyntax(method) $>
 </h3>

 <$ method.description $>
@@ -179,31 +229,27 @@ defined in <$ githubViewLink(doc) $>
 <@ endif @>

 <@ endfor -@>
+
 <@- endif -@>

-<@ if doc.properties @>
-  <h2>Attributes:</h2>
-  <table class="table" style="margin:0;">
-    <thead>
-      <tr>
-        <th>Attribute</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <@ for prop in doc.properties @>
-      <tr>
-        <td>
-          <$ prop.name $>
-        </td>
-        <td>
-          <$ prop.description $>
-        </td>
-      </tr>
-      <@ endfor @>
-    </tbody>
-  </table>
-<@ endif @>

+
+
+
+<@- if doc.see @>
+
+  <h2>Related</h2>
+
+<@ for s in doc.see @>
+<$ s | safe $>
+<@- endfor -@>
+
+<@- endif -@>
+
+
+<!-- end content block -->
 <@ endblock @>
+
+<!-- end body block -->
 <@ endblock @>
+