styling of dojo mobile "back" buttons too angular

[Chris Mitchell]

the back button styling is too angular on all themes and needs to have more rounded look. where the left side of the point meets the rectangular right-part. Several developers have complained about this (as well as how in some cases the left point part gets styled out of sync from the rectangle--separate ticket).

[nic]

Added two screenshots, the button on the right side is from the iOS simulator.

I could commit the changes if the patch is ok.

[Adrian Vasiliu]

Adrian Vasiliu, IBM, CCLA

[Adrian Vasiliu]

Attached an alternate patch for dojox/mobile/themes/iphone/ToolBarButton.css, and screenshots taken on an iPhone 4S iOS 5.0.1:

1. iPhoneNativeVSdojoxMobileBeforePatches.png Comparison between a native iOS button with left arrow and the original dojox.mobile buttons (before any patch)
2. nicVsAdrianPatches.png Comparison of the results between the two alternate patches.

[Adrian Vasiliu]

Attached:

1. back_button_iphone_and_blackberry_adrian_15400.patch This contains a patch in the same mood for the BlackBerry theme. The patch for the iPhone theme is also included (it is similar to the version in back_button_iphone_adrian_15400.patch except for a simplification by removing useless declarations; so this version replaces the previous one).

2. blackberryBeforeAndAfterPatch.png Comparison before-after for the BlackBerry patch.

[Adrian Vasiliu]

Adrian Vasiliu, IBM, CCLA

[Adrian Vasiliu]

Note that Nic's patch for iphone/common.css was used for my screenshots, in addition to my variant of iphone/ToolBarButton.css, but this change in common.css (which makes the colors of the button closer to the native) was missing in back_button_iphone_and_blackberry_adrian_15400.patch. I reattached back_button_iphone_and_blackberry_adrian_15400.patch such that it now includes the full set of changes (for both iphone and blackberry).

[Chris Mitchell]

Is see that the patches above modify the .css...shouldn't these changes be made to the .less source files?

[nic]

Replying to chrism:

Is see that the patches above modify the .css...shouldn't these changes be made to the .less source files?

Yes, right: we should change at least common/ToolBarButton.less, iphone/variables.less and blackberry/variables.less
Thanks!

[Adrian Vasiliu]

Adrian Vasiliu, IBM, CCLA

[Adrian Vasiliu]

Thanks Chris for the reminder.

The newly attached patch_full_15400.patch replaces my previous patches and includes:

1. Nic's patch for the gradient of the button (iphone only).
2. The patches for the left and right button arrow (iphone and BB), similar to those in my previous patch.
3. The corresponding changes in .less files. Here, the point was to avoid the propagation of changes elsewhere than where we wanted them (and tested them). However, for consistency, a few changes are propagated: the changes in BB's ToolBarButton.css are also propagated to ToolBarButton-compat.css. Ditto for iphone theme (common-compat.css and TabBar.css).

Note that the regeneration of css from less requires a specific nodejs and less version. The versions "ajaxorg-node-builds-bbbdd1c" and "cloudhead-less.js-7739fb1", that I received from Kamiyama, work fine (while recent versions fail).

[cjolif]

This is really a design defect.

[cjolif]

In [29118]:

fixes #15400. Fixing issue with back button design. Thanks Adrian Vasiliu (IBM, CCLA).

[cjolif]

In [29430]:

fixes #15675, fixes Maqetta issue without creating regressions this time (Thanks Kamiyama, Adrian & Damien). refs #14598, #15400. !strict.

[Adrian Vasiliu]

Further improvement: sharper arrow tip on iPhone - Adrian Vasiliu, IBM, CCLA

[Adrian Vasiliu]

Screenshots before and after the patch, on Chrome, iPhone and iPad

[cjolif]

In [29515]:

refs #15400. Further improvement to ToolBarButton? arrow drawing. Thanks Adrian Vasiliu (IBM, CCLA).