[TIMOB-20405] iconInsets: Weird behaviour when not repositioning but also enlarging icon

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2016-02-19T03:48:31.000+0000
Affected Version/s	Release 5.2.0
Fix Version/s	Release 5.2.1, Release 5.4.0
Components	iOS
Labels	n/a
Reporter	Fokke Zandbergen
Assignee	Hans Knöchel
Created	2016-02-15T14:12:17.000+0000
Updated	2016-03-01T23:31:13.000+0000

Description

Using the new property introduced by TIMOB-18515 you get strange behaviour when you play with iconSets to not only reposition but also enlarge the icon:

"Tab": {
  iconInsets: {
    top: 2,
    right: -4,
    bottom: -10,
    left: -4
  }
}

The icon resizes when you select/unselect the tab. And when you repeatedly tap on the icon it will continue to grow. See the attached video. While the behavior is native, we should only allow the top and left property to calculate the negative bottom and right automatically.

Attachments

File	Date	Size
insets.mov	2016-02-15T14:12:09.000+0000	359672

Comments

Fokke Zandbergen 2016-02-15

If it is only meant to be used to reposition we should expose only top and left and calculate bottom and right. (negative of their counterparts).
Hans Knöchel 2016-02-15

Just created a native demo project, it's a native behavior: https://www.dropbox.com/s/bvqi8ro5a7muplo/Native.mov?dl=0 What we can do (and [~cng] suggested) is to update the docs and link to the Apple docs to ensure people don't set "bad" values. Or (what [~fokkezb] suggested) to handle it internally. What's the best solution? I would stick to the native behavior if possible. Calculating stuff internally can always cause more trouble.
Fokke Zandbergen 2016-02-16

Let's just remove right and bottom and calculate those as the negative of what you set to left and top. That way you can still off-center it any way you like but not stretch and get strange behavior. We could do this in 5.2.1 since it would not break anything.

Hans Knöchel 2016-02-16

PR: https://github.com/appcelerator/titanium_mobile/pull/7742 Demo:

   Titanium.UI.setBackgroundColor('#fff');
   var tabGroup = Titanium.UI.createTabGroup();
   
   var win1 = Titanium.UI.createWindow();
   var tab1 = Titanium.UI.createTab({
   	window: win1,
   	icon:'images/tabs/KS_nav_ui.png',
   	iconInsets: {
   		top: 6
   	}
   });
   
   var win2 = Titanium.UI.createWindow();
   var tab2 = Titanium.UI.createTab({
   	window: win2,
   	icon:'images/tabs/KS_nav_ui.png',
   	title: "Test"
   });
   
   tabGroup.addTab(tab1);
   tabGroup.addTab(tab2);
   
   tabGroup.open();

You guys decide if it's 5.2.1 or 5.4.0 :-)

Chee Kiat Ng 2016-02-19

PR Merged!
Hans Knöchel 2016-02-23

5.2.1 backport: https://github.com/appcelerator/titanium_mobile/pull/7769
Eric Wieber 2016-03-01

Verified fixed, using: MacOS 10.11.3 (15D21) Studio 4.5.0.201602170821 Ti SDK 5.2.1.v20160228190750 Appc NPM 4.2.3 Appc CLI 5.2.0 Alloy 1.7.33 Xcode 7.2 (7C68) Icons no longer change size when tapping on them multiple times, with the iconInsets property set. Tested using the provided code and modifying the two-tab sample project.

JSON Source