From a03807d54add77c271eeb9747b0f358fcdc118bc Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Mon, 2 Nov 2015 15:02:21 -0600 Subject: [PATCH 1/5] docs(demos): rename three-line-list to multiline list --- demos/component-docs/helpers.ts | 4 ++-- demos/component-docs/lists/lists.ts | 4 ++-- .../lists/{three-lists.html => multiline-lists.html} | 9 +++++++-- 3 files changed, 11 insertions(+), 6 deletions(-) rename demos/component-docs/lists/{three-lists.html => multiline-lists.html} (95%) 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...

-
+ +
From 0840bdf0d7db56a0f586ba6e91d945dc272006d5 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 2 Nov 2015 15:16:28 -0600 Subject: [PATCH 2/5] fix(tap): activated/ripple on ion-item-sliding Closes #413 --- ionic/components.ts | 1 + ionic/components/item/item-sliding.ts | 3 +- ionic/components/item/modes/ios.scss | 3 +- ionic/components/item/modes/md.scss | 14 +++--- ionic/components/item/test/sliding/main.html | 2 +- ionic/components/tap-click/ripple.scss | 4 ++ ionic/components/tap-click/tap-click.ts | 9 ++-- .../tap-click/test/tapClick.spec.ts | 44 +++++++++++++++++++ 8 files changed, 69 insertions(+), 11 deletions(-) create mode 100644 ionic/components/tap-click/test/tapClick.spec.ts 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/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/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