[bug] Issues with ion-list in last nightly version

[gastonbesada]

#1024

• 1: Reorder loses vertical when some components are included in top of content (previously to ion-list): http://codepen.io/gastonbesada/full/wrCay
• 2: Tap/click is active in the Item when reorder button is active.
• 3: Tap/click is active in the Item when option button is active.
• 4: Tap/click is active in the Item when delete button is active.
• 5: Tap/click item prior to swipe. Or prevent change active selector in ion-list when swipe.
• 5: Swipe item is allowed when delete button is active.
• 6: Swipe item is allowed when reorder button is active.
• 7: Option buttons do not have the same width.
• 8: Vertical align is not centered in option buttons.
• 9: Option button not working properly in iOS 7, after click the 1st button, the 2nd calls the same function: https://dl.dropboxusercontent.com/u/30682887/ion-list-option-buttons-not-working-on-ios.mp4
• 10: Wrong routing when delete an item in nav-view: https://dl.dropboxusercontent.com/u/30682887/ion-list-not-working-delete-in-nav.mp4

Thanks

[ajoslin]

Hi @gastonbesada!

Thanks for the super detailed bug report. awesome job. Looking at all of these.

[ajoslin]

Checked off the ones that I fixed. Here are the ones that I won't fix / can't reproduce:

7 -- The buttons don't have the same width because the content isn't the same. You can set a css class to make them the same if you wish.
8 -- Unfortunately, this is not possible to do with the current css to cover all use cases. We could vertically center the text, but it would make it so multi-line text wouldn't work. You can manually set this with a css class if you wish (line-height: 79px)
10 -- I couldn't reproduce this sort of problem; are you sure you're properly removing the item from the array after deleting it?

Thanks again @gastonbesada!

[gastonbesada]

@ajoslin Thanks a lot for review all issues!
7 and 8 - Worked 100% with custom CSS, you can close these issues:
.button-swiped {
width: 100px;
line-height: 79px;
}
10 - I need more time to review your suggestion. I'll give you feedback soon.

Thanks again.

[gastonbesada]

Hi @ajoslin I tried the last nightly version 1838. I saw you merged the changes already, great work!
1: Open, now a similar issue happen when the list is scrolled down.
2: Closed in iOS, but still open in web (mouse click).
3: Open in both, iOS and web.
4: Closed in iOS, but still open in web (mouse click).
5: Open. What I'm trying to say is, I don't want to see the gray (active selector CSS) when I tap/click the item when I start the swipe (or drag) items. The swipe will be prior to tap.
5: Closed in both.
6: Closed in both.
7: Closed
8: Closed
9: Open. Same Issue. https://dl.dropboxusercontent.com/u/30682887/ion-list-option-buttons-not-working-on-ios.mp4
10: It is not an ion-item issue. I'll open a new issue with this.

[gastonbesada]

@ajoslin Regarding item 9, I think that the issue could be solved if the item closes the option buttons when a button is pressed. Like when I swipe a closed item when other item is opened. For example, an option button activates an action sheet, when the action sheet is closed, then it closes the option button item too. How can I do this programmatically?
This use case will not work in the case that the action sheet have a Cancel button, then the Control button in the item should be remain opened. Thanks

[gastonbesada]

Also, I opened a new topic in ionic forum for the issue 10: http://forum.ionicframework.com/t/problem-when-removing-items-from-scope-array/3406
Thanks

[ajoslin]

Sorry about the above commit spam.... O_O

1: Fixed the reorder really this time
5: May have been fixed separately, can you try again with the nightly version?
9: It should work on a phone

[gastonbesada]

@ajoslin Awesome work! Thanks and don't worry about the commit spam.
A question about option buttons swipe animation: Are you using ease-in-out? If yes, Could you change it to ease-out and a little more faster?
This is the items status with some comments and a new 1b issue (sorry for the double 5):
1: Open :( Now, I tried with a bar-subheader, and the same issue.
1b: (new) When I reorder an item down is working fine, the item that I'm reordering, takes the upper margin of the down item to make the switch between items, but when I reorder an item up, it's taking the upper margin of the upper item too, this way, I need overtake the upper item to make the switch. Could you take the bottom margin of the upper item when the item is reordering to up? Or, maybe it will be easy if you use middle margin in both.
2: Closed in iOS, but still open in web (mouse click).
3: Open in both, iOS and web. Maybe it should close the option buttons instead of the href.
4: Closed in iOS, but still open in web (mouse click).
5: Closed in iOS, but still open in web. Just only a minor comment: now, the tap (in iOS) changes the active selector css with a long tap but not with a short tap. I like this situation more than the previously, but if you can, you could change it.
5: Closed in both.
6: Closed in both.
7: Closed
8: Closed
9: Closed. The issue happen when I use an alert but not with console.log. I assume that it will work fine with other function.
10 Closed.

Thanks a lot.

[taylorotwell]

Is the option button vertical alignment (8) supposed to be fix in the latest beta? I still can't get that to work?

[ajoslin]

Fixing 1 and 1b.

[ajoslin]

Fixed! Lemme know how it works.

Apologies for the long wait :-)

[gastonbesada]

Thanks @ajoslin 1 and 1b working 100%.
Could you review the point 3? It's a minor issue.
I'll open a new Feature request to make an animation when an item is deleted.

Thanks again

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.