diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts index af68e71ff4..ff238fa617 100644 --- a/demos/component-docs/helpers.ts +++ b/demos/component-docs/helpers.ts @@ -46,7 +46,7 @@ import {BasicListsPage, BasicDividersPage, BasicInsetListsPage, ListHeadersPage, - ThreeLineListsPage, + MultilineListsPage, ThumbnailListsPage} from './lists/lists'; import {MenusPage} from './menus/menus'; @@ -152,7 +152,7 @@ export function getPageFor(hash) { 'list-dividers': BasicDividersPage, 'inset-list': BasicInsetListsPage, 'list-headers': ListHeadersPage, - 'three-line-list': ThreeLineListsPage, + 'multiline-list': MultilineListsPage, 'thumbnail-list': ThumbnailListsPage, 'menus': MenusPage, diff --git a/demos/component-docs/lists/lists.ts b/demos/component-docs/lists/lists.ts index 9df6c0120a..2355607fc3 100644 --- a/demos/component-docs/lists/lists.ts +++ b/demos/component-docs/lists/lists.ts @@ -64,10 +64,10 @@ export class AvatarListsPage { } @Page({ - templateUrl: 'lists/three-lists.html', + templateUrl: 'lists/multiline-lists.html', directives: [forwardRef(() => AndroidAttribute)] }) -export class ThreeLineListsPage { +export class MultilineListsPage { constructor() { } diff --git a/demos/component-docs/lists/three-lists.html b/demos/component-docs/lists/multiline-lists.html similarity index 95% rename from demos/component-docs/lists/three-lists.html rename to demos/component-docs/lists/multiline-lists.html index d28354833c..be1f4834f5 100644 --- a/demos/component-docs/lists/three-lists.html +++ b/demos/component-docs/lists/multiline-lists.html @@ -1,6 +1,6 @@ - Three-line Items + Multiline Items @@ -37,6 +37,10 @@

Was scavaging around the other day and...

+ + + + Last Week @@ -67,6 +71,7 @@

You're My Only Hope

I've placed information vital to the survival...

-
+ +
diff --git a/ionic/components.ts b/ionic/components.ts index b8e6e64809..3d7cd58ef2 100644 --- a/ionic/components.ts +++ b/ionic/components.ts @@ -36,4 +36,5 @@ export * from 'ionic/components/segment/segment' export * from 'ionic/components/switch/switch' export * from 'ionic/components/tabs/tabs' export * from 'ionic/components/tabs/tab' +export * from 'ionic/components/tap-click/tap-click' export * from 'ionic/components/toolbar/toolbar' diff --git a/ionic/components/item/item-sliding.ts b/ionic/components/item/item-sliding.ts index 1497be6926..ea04bacbfd 100644 --- a/ionic/components/item/item-sliding.ts +++ b/ionic/components/item/item-sliding.ts @@ -46,7 +46,7 @@ export class ItemSlidingOptionButton { * ``` */ @Component({ - selector: 'ion-item-sliding,[ion-item-sliding]', + selector: 'ion-item-sliding', inputs: [ 'sliding' ], @@ -68,6 +68,7 @@ export class ItemSliding { constructor(elementRef: ElementRef, renderer: Renderer, @Optional() @Host() list: List, zone: NgZone) { this._zone = zone; renderer.setElementClass(elementRef, 'item', true); + renderer.setElementAttribute(elementRef, 'tappable', ''); this._isOpen = false; this._isSlideActive = false; diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 1bbafda128..e69e9b070e 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -30,8 +30,8 @@ min-height: 30px; font-weight: 500; width: 100%; - z-index: 100; z-index: 1000; + &.sticky { position: -webkit-sticky; position: sticky; diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index 5187d8efc5..725333ec5f 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -203,7 +203,8 @@ ion-note { .item.activated, a.item.activated, -button.item.activated { +button.item.activated, +.item.activated ion-item-sliding-content { background-color: $item-ios-activated-background-color; transition-duration: 0ms; } diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index b42f9f42e6..4afc28a385 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -246,13 +246,17 @@ ion-note { .item, a.item, -button.item { +button.item, +.item ion-item-sliding-content { transition: background-color $button-md-transition-duration $button-md-animation-curve; +} - &.activated { - background-color: $item-md-activated-background-color; - box-shadow: none; - } +.item.activated, +a.item.activated, +button.item.activated, +.item.activated ion-item-sliding-content { + background-color: $item-md-activated-background-color; + box-shadow: none; } .item[no-lines] { diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html index 2cce43fbbf..5f13ed5840 100644 --- a/ionic/components/item/test/sliding/main.html +++ b/ionic/components/item/test/sliding/main.html @@ -13,7 +13,7 @@ - +

Adam Bradley

I think I figured out how to get more Mountain Dew diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index bae12c2640..185cb06a8b 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -579,7 +579,7 @@ export class NavController extends Ion { _setZIndex(enteringInstance, leavingInstance, direction) { if (!leavingInstance) { - enteringInstance._zIndex = 0; + enteringInstance._zIndex = 10; } else if (direction === 'back') { // moving back diff --git a/ionic/components/nav/test/nav-controller.spec.ts b/ionic/components/nav/test/nav-controller.spec.ts index 84e5d546da..801fd1809d 100644 --- a/ionic/components/nav/test/nav-controller.spec.ts +++ b/ionic/components/nav/test/nav-controller.spec.ts @@ -1,20 +1,3 @@ -// import { -// ddescribe, -// describe, -// xdescribe, -// it, -// iit, -// xit, -// expect, -// beforeEach, -// afterEach, -// AsyncTestCompleter, -// inject, -// beforeEachBindings -// } from 'angular2/test'; - -// import {Compiler} from 'angular2/angular2'; - import { NavController, Config, diff --git a/ionic/components/tabs/modes/md.scss b/ionic/components/tabs/modes/md.scss index af0a777f44..25ebc48d99 100644 --- a/ionic/components/tabs/modes/md.scss +++ b/ionic/components/tabs/modes/md.scss @@ -65,3 +65,6 @@ tab-highlight { } } +[tab-bar-placement=bottom] tab-highlight { + top: 0; +} diff --git a/ionic/components/tap-click/ripple.scss b/ionic/components/tap-click/ripple.scss index 2b6f7f33a4..0399e6d2d1 100644 --- a/ionic/components/tap-click/ripple.scss +++ b/ionic/components/tap-click/ripple.scss @@ -18,3 +18,7 @@ md-ripple { transform: scale(0.001) translateZ(0); } + +ion-item-sliding md-ripple { + z-index: 2; +} diff --git a/ionic/components/tap-click/tap-click.ts b/ionic/components/tap-click/tap-click.ts index 861f5a2c27..940d525658 100644 --- a/ionic/components/tap-click/tap-click.ts +++ b/ionic/components/tap-click/tap-click.ts @@ -174,14 +174,14 @@ function getActivatableTarget(ele) { return null; } -function isActivatable(ele) { - if (/^(A|BUTTON)$/.test(ele.tagName)) { +export function isActivatable(ele) { + if (ACTIVATABLE_ELEMENTS.test(ele.tagName)) { return true; } let attributes = ele.attributes; for (let i = 0, l = attributes.length; i < l; i++) { - if (/click|tappable/.test(attributes[i].name)) { + if (ACTIVATABLE_ATTRIBUTES.test(attributes[i].name)) { return true; } } @@ -200,3 +200,6 @@ function addListener(type, listener, useCapture) { function removeListener(type, listener) { doc.removeEventListener(type, listener); } + +const ACTIVATABLE_ELEMENTS = /^(A|BUTTON)$/; +const ACTIVATABLE_ATTRIBUTES = /tappable/; diff --git a/ionic/components/tap-click/test/tapClick.spec.ts b/ionic/components/tap-click/test/tapClick.spec.ts new file mode 100644 index 0000000000..ba51b24fde --- /dev/null +++ b/ionic/components/tap-click/test/tapClick.spec.ts @@ -0,0 +1,44 @@ +import * as tapClick from 'ionic/ionic'; + +export function run() { + + describe("TapClick", () => { + + describe("isActivatable", () => { + + it('should be activatable on element', () => { + let ele = document.createElement('a'); + expect( tapClick.isActivatable(ele) ).toBe(true); + }); + + it('should be activatable on