diff --git a/demos/weather/main.html b/demos/weather/main.html index 0b4a179435..d4a20e51ae 100644 --- a/demos/weather/main.html +++ b/demos/weather/main.html @@ -2,7 +2,7 @@ - {{currentLocationString}}
 + {{currentLocationString}}
diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss index 2866f0b076..6a41f81645 100644 --- a/ionic/components/card/modes/ios.scss +++ b/ionic/components/card/modes/ios.scss @@ -13,7 +13,7 @@ $card-ios-padding-bottom: 14px !default; $card-ios-padding-left: 16px !default; $card-ios-padding-media-top: 10px !default; -$card-ios-padding-media-bottom: 10px !default; +$card-ios-padding-media-bottom: 9px !default; $card-ios-background-color: $list-background-color !default; $card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default; @@ -43,14 +43,18 @@ ion-card { .list { margin-bottom: 0; + .item { + padding-right: 0; + } + ion-item-content { padding: 0; } } .item { - padding-right: ($card-ios-padding-right / 2); padding-left: ($card-ios-padding-left / 2); + padding-right: ($card-ios-padding-right / 2); font-size: $item-ios-font-size; } diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss index e99f95c1f9..177ffc23f1 100644 --- a/ionic/components/checkbox/checkbox.scss +++ b/ionic/components/checkbox/checkbox.scss @@ -8,7 +8,7 @@ ion-checkbox { @include user-select-none(); } -ion-checkbox[aria-disabled=true] { +ion-checkbox[aria-disabled=true] .item-inner > * { pointer-events: none; opacity: 0.5; color: $subdued-text-color; diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index 16d61c7716..2de01fbd2e 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -33,12 +33,14 @@ import {Form} from '../../util/form'; '(click)': 'click($event)' }, template: - '' + - '' + - '' + - '' + - '' + - '' + '
' + + '' + + '' + + '' + + '' + + '' + + '' + + '
' }) export class Checkbox { diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss index d671f70014..a908839c66 100644 --- a/ionic/components/checkbox/modes/ios.scss +++ b/ionic/components/checkbox/modes/ios.scss @@ -38,7 +38,7 @@ ion-checkbox { media-checkbox { display: block; - margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2); + margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px; } checkbox-icon { diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss index 85c3b492c2..37a33323db 100644 --- a/ionic/components/checkbox/modes/md.scss +++ b/ionic/components/checkbox/modes/md.scss @@ -36,7 +36,8 @@ ion-checkbox { media-checkbox { display: block; - margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2); + // TODO convert these to sass variables + margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px; } checkbox-icon { diff --git a/ionic/components/item/item-media.scss b/ionic/components/item/item-media.scss index 66fb649b98..50eb573211 100644 --- a/ionic/components/item/item-media.scss +++ b/ionic/components/item/item-media.scss @@ -3,17 +3,19 @@ // -------------------------------------------------- // Icons, avatars, thumbnails, notes, etc. +.item > icon[small]:first-child, +.item-inner > icon[small]:first-child { + min-width: 18px; +} -.item > icon:first-child { +.item > icon:first-child, +.item-inner > icon:first-child { min-width: 24px; text-align: center; } -.list .item > icon[small]:first-child { - min-width: 18px; -} - -.item > icon { +.item > icon, +.item-inner > icon { line-height: 1; font-size: 2.4rem; diff --git a/ionic/components/item/item-sliding-gesture.ts b/ionic/components/item/item-sliding-gesture.ts new file mode 100644 index 0000000000..a400fbf7b4 --- /dev/null +++ b/ionic/components/item/item-sliding-gesture.ts @@ -0,0 +1,194 @@ +import {Hammer} from 'ionic/gestures/hammer'; +import {DragGesture} from 'ionic/gestures/drag-gesture'; +import {List} from '../list/list'; + +import {CSS, raf, closest} from 'ionic/util/dom'; + + +export class ItemSlidingGesture extends DragGesture { + constructor(list: List, listEle) { + super(listEle, { + direction: 'x', + threshold: 40 + }); + + this.data = {}; + this.openItems = 0; + + this.list = list; + this.listEle = listEle; + this.canDrag = true; + this.listen(); + + this.on('tap', ev => { + if (!isFromOptionButtons(ev.target)) { + let didClose = this.closeOpened(); + if (didClose) { + ev.preventDefault(); + } + } + }); + + this.mouseOut = (ev) => { + this.onDragEnd(ev); + }; + } + + onDragStart(ev) { + let itemContainerEle = getItemConatiner(ev.target); + if (!itemContainerEle) return; + + this.closeOpened(ev, itemContainerEle); + + let openAmout = this.getOpenAmount(itemContainerEle); + let itemData = this.get(itemContainerEle); + + if (openAmout) { + return ev.preventDefault(); + } + + itemContainerEle.classList.add('active-slide'); + + this.set(itemContainerEle, 'offsetX', openAmout); + this.set(itemContainerEle, 'startX', ev.center[this.direction]); + + if (ev.srcEvent.type.indexOf('mouse') > -1) { + ev.target.addEventListener('mouseout', this.mouseOut); + } + } + + onDrag(ev) { + let itemContainerEle = getItemConatiner(ev.target); + if (!itemContainerEle || !isActive(itemContainerEle)) return; + + let itemData = this.get(itemContainerEle); + + if (!itemData.optsWidth) { + itemData.optsWidth = getOptionsWidth(itemContainerEle); + if (!itemData.optsWidth) return; + } + + let x = ev.center[this.direction]; + let delta = x - itemData.startX; + + let newX = Math.max(0, itemData.offsetX - delta); + + if (newX > itemData.optsWidth) { + // Calculate the new X position, capped at the top of the buttons + newX = -Math.min(-itemData.optsWidth, -itemData.optsWidth + (((delta + itemData.optsWidth) * 0.4))); + } + + this.open(itemContainerEle, newX, false); + } + + onDragEnd(ev) { + let itemContainerEle = getItemConatiner(ev.target); + if (!itemContainerEle || !isActive(itemContainerEle)) return; + + // If we are currently dragging, we want to snap back into place + // The final resting point X will be the width of the exposed buttons + let itemData = this.get(itemContainerEle); + + var restingPoint = itemData.optsWidth; + + // Check if the drag didn't clear the buttons mid-point + // and we aren't moving fast enough to swipe open + + if (this.getOpenAmount(itemContainerEle) < (restingPoint / 2)) { + + // If we are going left but too slow, or going right, go back to resting + if (ev.direction & Hammer.DIRECTION_RIGHT) { + // Left + restingPoint = 0; + + } else if (Math.abs(ev.velocityX) < 0.3) { + // Right + restingPoint = 0; + } + } + + ev.target.removeEventListener('mouseout', this.mouseOut); + + raf(() => { + this.open(itemContainerEle, restingPoint, true); + }); + } + + closeOpened(ev, doNotCloseEle) { + let didClose = false; + if (this.openItems) { + let openItemElements = this.listEle.querySelectorAll('.active-slide'); + for (let i = 0; i < openItemElements.length; i++) { + if (openItemElements[i] !== doNotCloseEle) { + this.open(openItemElements[i], 0, true); + didClose = true; + } + } + } + return didClose; + } + + open(itemContainerEle, openAmount, animate) { + let slidingEle = itemContainerEle.querySelector('ion-item'); + if (!slidingEle) return; + + this.set(itemContainerEle, 'openAmount', openAmount); + + clearTimeout(this.get(itemContainerEle).timerId); + + if (openAmount > 0) { + this.openItems++; + + } else { + let timerId = setTimeout(() => { + if (slidingEle.style[CSS.transform] === '') { + itemContainerEle.classList.remove('active-slide'); + this.openItems--; + } + }, 400); + this.set(itemContainerEle, 'timerId', timerId); + } + + slidingEle.style[CSS.transform] = (openAmount === 0 ? '' : 'translate3d(' + -openAmount + 'px,0,0)'); + slidingEle.style[CSS.transition] = (animate ? '' : 'none'); + } + + getOpenAmount(itemContainerEle) { + return this.get(itemContainerEle).openAmount || 0; + } + + get(itemContainerEle) { + return this.data[itemContainerEle && itemContainerEle.$ionSlide] || {}; + } + + set(itemContainerEle, key, value) { + if (!this.data[itemContainerEle.$ionSlide]) { + this.data[itemContainerEle.$ionSlide] = {}; + } + this.data[itemContainerEle.$ionSlide][key] = value; + } + + unlisten() { + super.unlisten(); + this.listEle = null; + } +} + +function getItemConatiner(ele) { + return closest(ele, 'ion-item-sliding', true); +} + +function isFromOptionButtons(ele) { + return !!closest(ele, 'ion-item-options', true); +} + +function getOptionsWidth(itemContainerEle) { + let optsEle = itemContainerEle.querySelector('ion-item-options'); + if (optsEle) { + return optsEle.offsetWidth; + } +} + +function isActive(itemContainerEle) { + return itemContainerEle.classList.contains('active-slide'); +} diff --git a/ionic/components/item/item-sliding.scss b/ionic/components/item/item-sliding.scss new file mode 100644 index 0000000000..f27705b017 --- /dev/null +++ b/ionic/components/item/item-sliding.scss @@ -0,0 +1,36 @@ + +/** + * The hidden right-side buttons that can be exposed under a list item + * with dragging. + */ + +ion-item-sliding { + display: block; + position: relative; + overflow: hidden; + + .item { + position: static; + } +} + +ion-item-options { + display: none; + position: absolute; + top: 0; + right: 0; + z-index: $z-index-item-options; + height: 100%; +} + +ion-item-sliding.active-slide { + + .item { + position: relative; + z-index: $z-index-item-options + 1; + } + + ion-item-options { + display: flex; + } +} diff --git a/ionic/components/item/item-sliding.ts b/ionic/components/item/item-sliding.ts index ea04bacbfd..4e7fcdae43 100644 --- a/ionic/components/item/item-sliding.ts +++ b/ionic/components/item/item-sliding.ts @@ -1,31 +1,7 @@ -import {Component, Directive, ElementRef, NgIf, Host, Optional, Renderer, NgZone} from 'angular2/angular2'; +import {Component, ElementRef, Optional} from 'angular2/angular2'; -import {Gesture} from 'ionic/gestures/gesture'; -import {DragGesture} from 'ionic/gestures/drag-gesture'; -import {Hammer} from 'ionic/gestures/hammer'; -import {List} from 'ionic/components/list/list'; +import {List} from '../list/list'; -import * as util from 'ionic/util'; - -import {CSS, raf} from 'ionic/util/dom'; - - - -@Directive({ - selector: 'ion-item-options > button,ion-item-options > [button]', - host: { - '(click)': 'clicked($event)' - } -}) -export class ItemSlidingOptionButton { - constructor(elementRef: ElementRef) { - } - clicked(event) { - // Don't allow the click to propagate - event.preventDefault(); - event.stopPropagation(); - } -} /** * @name ionItem @@ -36,238 +12,35 @@ export class ItemSlidingOptionButton { * @usage * ```html * - * - * {{item.title}} - *
- * {{item.note}} - *
+ * + * + * {{item.title}} + * + * + * + * + * * * - * ``` + * ``` */ @Component({ selector: 'ion-item-sliding', - inputs: [ - 'sliding' - ], template: - '' + - '' + - '' + - '' + - '' + - ''+ - '' + - '' + '' + + '' }) export class ItemSliding { - /** - * TODO - * @param {ElementRef} elementRef A reference to the component's DOM element. - */ - 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; - this._isTransitioning = false; - this._transform = ''; - - this.list = list; - - this.elementRef = elementRef; - this.swipeButtons = {}; - this.optionButtons = {}; + constructor(@Optional() private list: List, elementRef: ElementRef) { + list.enableSlidingItems(true); + elementRef.nativeElement.$ionSlide = ++slideIds; } - onInit() { - let ele = this.elementRef.nativeElement; - this.itemSlidingContent = ele.querySelector('ion-item-sliding-content'); - this.itemOptions = ele.querySelector('ion-item-options'); - this.openAmount = 0; - this._zone.runOutsideAngular(() => { - this.gesture = new ItemSlideGesture(this, this.itemSlidingContent, this._zone); - }); + close() { + this.list.closeSlidingItems(); } - onDestroy() { - this.gesture && this.gesture.unlisten(); - this.itemSlidingContent = this.itemOptionsContent = null; - } - - close(andStopDrag) { - this.openAmount = 0; - - // Enable it once, it'll get disabled on the next drag - raf(() => { - this.enableAnimation(); - if (this.itemSlidingContent) { - this.itemSlidingContent.style[CSS.transform] = 'translateX(0)'; - } - }); - } - - open(amt) { - let el = this.itemSlidingContent; - this.openAmount = amt || 0; - - if (this.list) { - this.list.setOpenItem(this); - } - - if (amt === '') { - el.style[CSS.transform] = ''; - } else { - el.style[CSS.transform] = 'translateX(' + -amt + 'px)'; - } - } - - isOpen() { - return this.openAmount > 0; - } - - getOpenAmt() { - return this.openAmount; - } - - disableAnimation() { - this.itemSlidingContent.style[CSS.transition] = 'none'; - } - - enableAnimation() { - // Clear the explicit transition, allow for CSS one to take over - this.itemSlidingContent.style[CSS.transition] = ''; - } - - /** - * User did a touchstart - */ - didTouch() { - if (this.isOpen()) { - this.close(); - this.didClose = true; - - } else { - let openItem = this.list.getOpenItem(); - if (openItem && openItem !== this) { - this.didClose = true; - } - if (this.list) { - this.list.closeOpenItem(); - } - } - } } -class ItemSlideGesture extends DragGesture { - constructor(item: ItemSliding, el: Element, zone) { - super(el, { - direction: 'x', - threshold: el.offsetWidth - }); - this.item = item; - this.canDrag = true; - this.listen(); - - zone.runOutsideAngular(() => { - let touchStart = (e) => { - this.item.didTouch(); - raf(() => { - this.item.itemOptionsWidth = this.item.itemOptions && this.item.itemOptions.offsetWidth || 0; - }) - }; - el.addEventListener('touchstart', touchStart); - el.addEventListener('mousedown', touchStart); - - let touchEnd = (e) => { - // If we have a touch end and the item is closing, - // prevent default to stop a click from triggering - if(this.item.didClose) { - e.preventDefault(); - } - this.item.didClose = false; - }; - el.addEventListener('touchend', touchEnd); - el.addEventListener('mouseup', touchEnd); - el.addEventListener('mouseout', touchEnd); - el.addEventListener('mouseleave', touchEnd); - el.addEventListener('touchcancel', touchEnd); - }); - } - - onDragStart(ev) { - if (this.item.didClose) { return; } - - if (!this.item.itemOptionsWidth) { return; } - - this.slide = {}; - - this.slide.offsetX = this.item.getOpenAmt(); - this.slide.startX = ev.center[this.direction]; - this.slide.started = true; - - this.item.disableAnimation(); - } - - onDrag(ev) { - if (!this.slide || !this.slide.started) return; - - this.slide.x = ev.center[this.direction]; - this.slide.delta = this.slide.x - this.slide.startX; - - let newX = Math.max(0, this.slide.offsetX - this.slide.delta); - - let buttonsWidth = this.item.itemOptionsWidth; - - if (newX > this.item.itemOptionsWidth) { - // Calculate the new X position, capped at the top of the buttons - newX = -Math.min(-buttonsWidth, -buttonsWidth + (((this.slide.delta + buttonsWidth) * 0.4))); - } - - this.item.open(newX); - } - - onDragEnd(ev) { - if (!this.slide || !this.slide.started) return; - - let buttonsWidth = this.item.itemOptionsWidth; - - // If we are currently dragging, we want to snap back into place - // The final resting point X will be the width of the exposed buttons - var restingPoint = this.item.itemOptionsWidth; - - // Check if the drag didn't clear the buttons mid-point - // and we aren't moving fast enough to swipe open - if (this.item.openAmount < (buttonsWidth / 2)) { - - // If we are going left but too slow, or going right, go back to resting - if (ev.direction & Hammer.DIRECTION_RIGHT) { - // Left - restingPoint = 0; - } else if (Math.abs(ev.velocityX) < 0.3) { - // Right - restingPoint = 0; - } - } - - raf(() => { - if (restingPoint === 0) { - // Reset to zero - this.item.open(''); - var buttons = this.item.itemOptions; - clearTimeout(this.hideButtonsTimeout); - this.hideButtonsTimeout = setTimeout(() => { - buttons && buttons.classList.add('invisible'); - }, 250); - - } else { - this.item.open(restingPoint); - } - this.item.enableAnimation(); - - this.slide = null; - }); - } -} +let slideIds = 0; diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index e69e9b070e..bab7f5250e 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -5,7 +5,6 @@ .item { - position: relative; display: flex; justify-content: space-between; align-items: center; @@ -19,6 +18,22 @@ background-color: $list-background-color; color: $list-text-color; + + box-sizing: border-box; +} + +.item-inner { + display: flex; + margin: 0; + padding: 0; + border: 0; + overflow: hidden; + box-sizing: border-box; + + flex: 1; + flex-direction: inherit; + align-items: inherit; + align-self: stretch; } .item-group { @@ -31,7 +46,7 @@ font-weight: 500; width: 100%; z-index: 1000; - + &.sticky { position: -webkit-sticky; position: sticky; @@ -74,10 +89,6 @@ ion-item-content { white-space: normal; } -.list .item { - border-radius: 0; -} - .item { h1 { @@ -129,24 +140,6 @@ ion-input.item { align-items: flex-start; } -/** - * The hidden right-side buttons that can be exposed under a list item - * with dragging. - */ -ion-item-sliding-content { - display: block; - z-index: $z-index-item-options + 1; - flex: 1; -} -ion-item-options { - display: flex; - position: absolute; - top: 0; - right: 0; - z-index: $z-index-item-options; - height: 100%; -} - // TEMP hack for https://github.com/angular/angular/issues/4582 [item-right] { diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts index 875861237e..8d301ccbcf 100644 --- a/ionic/components/item/item.ts +++ b/ionic/components/item/item.ts @@ -32,10 +32,12 @@ import {Component} from 'angular2/angular2'; selector: 'ion-item,[ion-item]', template: '' + - '' + - '' + - ''+ - '', + '
' + + '' + + '' + + ''+ + '' + + '
', host: { '[class.item]': 'isItem' } diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index 725333ec5f..c8a78d40c9 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -6,16 +6,16 @@ $item-ios-border-color: $list-border-color !default; $item-ios-activated-background-color: #d9d9d9 !default; $item-ios-font-size: 1.6rem !default; -$item-ios-padding-top: 13px !default; +$item-ios-padding-top: 12px !default; $item-ios-padding-right: 16px !default; -$item-ios-padding-bottom: 14px !default; +$item-ios-padding-bottom: 13px !default; $item-ios-padding-left: 16px !default; $item-ios-padding-media-top: 10px !default; $item-ios-padding-media-bottom: 10px !default; $item-ios-padding-icon-top: 10px !default; -$item-ios-padding-icon-bottom: 10px !default; +$item-ios-padding-icon-bottom: 9px !default; $item-ios-avatar-size: 3.6rem !default; $item-ios-thumbnail-size: 5.6rem !default; @@ -40,171 +40,21 @@ ion-note { color: $item-ios-note-color; } -.list { - - .item-group { - // Make sure the first and last items don't have borders - > .item:first-of-type:before { - border-top: none !important; - } - > .item:last-of-type:after { - border-top: none !important; - } +.item-group { + ion-item-group-title { + border-bottom: 1px solid $item-ios-border-color; } - .item { - margin-top: -1px; - padding-right: ($item-ios-padding-right / 2); - padding-left: ($item-ios-padding-left / 2); - font-size: $item-ios-font-size; - - &:before { - position: absolute; - top: 0; - right: 0; - left: $item-ios-padding-left; - border-top: 1px solid $item-ios-border-color; - content: ''; - pointer-events: none; - } - - &:after { - position: absolute; - right: 0; - bottom: 0; - left: $item-ios-padding-left; - border-top: 1px solid $item-ios-border-color; - content: ''; - pointer-events: none; - } - - &:first-child:before, - &:last-child:after { - left: 0; - } - } - - ion-header + .item:first-of-type:before { - left: 0; - } - - &[inset] .item { - &:before, - &:after { - left: 0; - } - } - - ion-item-content { - margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2); - } - - [item-left], - [item-right] { - margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2); - } - - icon[item-left], - icon[item-right] { - margin-top: $item-ios-padding-icon-top; - margin-bottom: $item-ios-padding-icon-bottom; - } - - button[item-left], - button[item-right], - [button][item-left], - [button][item-right] { - padding: 0 0.5em; - font-size: 1.3rem; - min-height: 25px; - } - - [item-left].icon-only, - [item-right].icon-only, - [item-left].icon-only icon, - [item-right].icon-only icon, - [item-left][clear], - [item-right][clear] { - padding: 0 1px; - } - - [item-left].icon-left icon, - [item-right].icon-left icon { - margin-left: 0; - margin-bottom: 1px; - padding-right: 0.3em; - } - - [item-left].icon-right icon, - [item-right].icon-right icon { - margin-right: 0; - margin-bottom: 1px; - } - - ion-avatar { - min-width: $item-ios-avatar-size; - min-height: $item-ios-avatar-size; - - img { - max-width: $item-ios-avatar-size; - max-height: $item-ios-avatar-size; - border-radius: $item-ios-avatar-size / 2; - } - } - - ion-thumbnail { - min-width: $item-ios-thumbnail-size; - min-height: $item-ios-thumbnail-size; - - img { - max-width: $item-ios-thumbnail-size; - max-height: $item-ios-thumbnail-size; - } - } - - - ion-item-sliding.item { - padding-left: 0; - padding-right: 0; - } - - ion-item-sliding-content { - background-color: $item-ios-sliding-content-bg; - padding-right: ($item-ios-padding-right / 2); - padding-left: ($item-ios-padding-left / 2); - display: flex; - min-height: 42px; - justify-content: center; - - transition: $item-ios-sliding-transition; - - // To allow the hairlines through - margin-top: 1px; - margin-bottom: 1px; - } - ion-item-options { - button, [button] { - min-height: calc(100% - 2px); - height: calc(100% - 2px); - margin: 1px 0 2px 0; - - border: none; - border-radius: 0; - display: inline-flex; - align-items: center; - box-sizing: border-box; - - &:before{ - margin: 0 auto; - } + .item:first-child { + .item-inner { + border-top-width: 0; } } } .item.activated, a.item.activated, -button.item.activated, -.item.activated ion-item-sliding-content { +button.item.activated { background-color: $item-ios-activated-background-color; transition-duration: 0ms; } @@ -214,69 +64,3 @@ a.item, button.item { transition-duration: 200ms; } - -.list, -ion-card { - button[ion-item]:not([detail-none]), - a[ion-item]:not([detail-none]), - [detail-push]:not(ion-item-sliding) { - @include ios-detail-push-icon($item-ios-detail-push-color); - background-repeat: no-repeat; - background-position: right ($item-ios-padding-right - 2) center; - background-size: 14px 14px; - padding-right: 32px; - } - - ion-item-sliding[detail-push] { - - ion-item-sliding-content { - @include ios-detail-push-icon($item-ios-detail-push-color); - background-repeat: no-repeat; - background-position: right ($item-ios-padding-right - 2) center; - background-size: 14px 14px; - padding-right: 32px; - } - } -} - -&.hairlines .list { - - ion-item-options { - button, [button] { - min-height: calc(100% - 1px); - height: calc(100% - 1px); - margin-top: 0.55px; - margin-bottom: 0.55px; - } - } - - ion-item-sliding-content { - margin-top: 0.55px; - margin-bottom: 0.55px; - } - - .item { - margin-top: -0.55px; - - &:last-child { - margin-bottom: -0.55px; - } - - &:before, - &:after { - border-top-width: 0.55px; - } - } - -} - -.item[no-lines] { - &:before, - &:after { - border-width: 0; - } - - + .item:before { - border-width: 0; - } -} diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index 4afc28a385..651d0bcf52 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -42,230 +42,19 @@ ion-note { color: $item-md-note-color; } -.list { - .item-group { - // Make sure the first and last items don't have borders - > .item:first-of-type:before { - border-top: none !important; - } - > .item:last-of-type:after { - border-top: none !important; - } - } - - .item { - margin-top: -1px; - padding-right: ($item-md-padding-right / 2); - padding-left: ($item-md-padding-left / 2); - font-size: $item-md-font-size; - text-transform: none; - - &:before { - position: absolute; - top: 0; - right: 0; - left: $item-md-padding-left; - border-top: 1px solid $item-md-border-color; - content: ''; - pointer-events: none; - } - - &:after { - position: absolute; - right: 0; - bottom: 0; - left: $item-md-padding-left; - border-top: 1px solid $item-md-border-color; - content: ''; - pointer-events: none; - } - - &:first-child:before, - &:last-child:after { - left: 0; - } - } - - ion-header + .item:before { - left: 0; - } - - ion-item-content { - margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2); - } - - [item-left], - [item-right] { - margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2); - } - - icon[item-left], - icon[item-right] { - margin-top: $item-md-padding-icon-top; - margin-bottom: $item-md-padding-icon-bottom; - } - - button[item-left], - button[item-right], - [button][item-left], - [button][item-right] { - padding: 0 0.6em; - min-height: 26px; - font-size: 1.2rem; - } - - [item-left].icon-only, - [item-right].icon-only, - [item-left].icon-only icon, - [item-right].icon-only icon { - padding: 0 1px; - } - - [item-left][clear], - [item-right][clear] { - padding: 0 8px; - } - - [item-left].icon-left icon, - [item-right].icon-left icon { - margin-left: 0; - margin-bottom: 1px; - padding-right: 0.3em; - } - - [item-left].icon-right icon, - [item-right].icon-right icon { - margin-right: 0; - margin-bottom: 1px; - } - - [text-wrap] ion-item-content { - font-size: $item-md-body-text-font-size; - line-height: $item-md-body-text-line-height; - } - - .item[actions] ion-item-content { - margin: 4px; - } - - icon[item-left] + ion-item-content, - icon[item-left] + [text-input] { - margin-left: $item-md-padding-left + ($item-md-padding-left / 2); - } - - ion-avatar { - min-width: $item-md-avatar-size; - min-height: $item-md-avatar-size; - - img { - max-width: $item-md-avatar-size; - max-height: $item-md-avatar-size; - border-radius: $item-md-avatar-size / 2; - } - } - - ion-thumbnail { - min-width: $item-md-thumbnail-size; - min-height: $item-md-thumbnail-size; - - img { - max-width: $item-md-thumbnail-size; - max-height: $item-md-thumbnail-size; - } - } - - h1 { - margin: 0 0 2px; - font-size: 2.4rem; - font-weight: normal; - } - - h2 { - margin: 2px 0 2px; - font-size: 1.6rem; - font-weight: normal; - } - - h3, - h4, - h5, - h6 { - line-height: normal; - margin: 2px 0 2px; - font-size: 1.4rem; - font-weight: normal; - } - - p { - line-height: normal; - color: #666; - font-size: 1.4rem; - margin: 0 0 2px; - } - - button.item.activated { - box-shadow: none; - } - - ion-item-sliding.item { - padding-left: 0; - padding-right: 0; - } - ion-item-sliding-content { - background-color: $item-md-sliding-content-bg; - padding-right: ($item-md-padding-right / 2); - padding-left: ($item-md-padding-left / 2); - display: flex; - min-height: 42px; - justify-content: center; - - transition: $item-md-sliding-transition; - - // To allow the hairlines through - margin-top: 1px; - margin-bottom: 1px; - } - ion-item-options { - button, [button] { - height: calc(100% - 2px); - margin: 1px 0 1px 0; - box-shadow: none; - - border: none; - border-radius: 0; - display: inline-flex; - align-items: center; - box-sizing: border-box; - - &:before{ - margin: 0 auto; - } - } - } -} - .item, a.item, -button.item, -.item ion-item-sliding-content { - transition: background-color $button-md-transition-duration $button-md-animation-curve; +button.item { + transition: background-color $button-md-transition-duration $button-md-animation-curve, transform 300ms; } .item.activated, a.item.activated, -button.item.activated, -.item.activated ion-item-sliding-content { +button.item.activated { background-color: $item-md-activated-background-color; box-shadow: none; } .item[no-lines] { - &:before, - &:after { - border-width: 0; - } - - + .item:before { - border-width: 0; - } + border-width: 0; } diff --git a/ionic/components/item/test/sliding/index.ts b/ionic/components/item/test/sliding/index.ts index edf8bf5718..96d33e8aca 100644 --- a/ionic/components/item/test/sliding/index.ts +++ b/ionic/components/item/test/sliding/index.ts @@ -1,29 +1,35 @@ -import {App} from 'ionic/ionic'; +import {App, IonicApp} from 'ionic/ionic'; @App({ templateUrl: 'main.html' }) class E2EApp { - constructor() { + constructor(private app: IonicApp) { setTimeout(() => { this.shouldShow = true; }, 10); } + closeOpened() { + this.app.getComponent('myList').closeSlidingItems(); + } + getItems() { - console.log('getItems'); return [0,1]; } - didClick(e) { - console.log('CLICK', e.defaultPrevented, e) + didClick(ev, item) { + console.log('CLICK', ev.defaultPrevented, ev) } - archive(e) { - console.log('Accept', e); + archive(ev, item) { + console.log('Archive', ev, item); + item.close(); } - del(e) { - console.log('Delete', e); + + del(ev, item) { + console.log('Delete', ev, item); + item.close(); } } diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html index 5f13ed5840..7b3fd83541 100644 --- a/ionic/components/item/test/sliding/main.html +++ b/ionic/components/item/test/sliding/main.html @@ -1,77 +1,99 @@ Sliding Items - + + + - -

Max Lynch

-

- Hey do you want to go to the game tonight? -

- - - - - + + +

Max Lynch

+

+ Hey do you want to go to the game tonight? +

+ + + + + + - -

Adam Bradley

-

- I think I figured out how to get more Mountain Dew -

- - - - - + + +

Adam Bradley

+

+ I think I figured out how to get more Mountain Dew +

+ + + + + + - -

Ben Sperry

-

- I like paper -

- - - - - + + +

Ben Sperry

+

+ I like paper +

+ + + + + + - - - One Line w/ Icon, div only text - - - - + + + + One Line w/ Icon, div only text + + + + + - - - - - One Line w/ Avatar, div only text - - - - + + + + + + One Line w/ Avatar, div only text + + + + + - - - - -

Two Lines w/ Thumbnail, H2 Header

-

Paragraph text.

- - - - + + + + + +

Two Lines w/ Thumbnail, H2 Header

+

Paragraph text.

+ + + + + - -

ng-for {{item}}

- - - - + + +

ng-for {{item}}

+ + + + + - + + +

+ +

+ +