Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#15400 closed defect (fixed)

styling of dojo mobile "back" buttons too angular

Reported by: Chris Mitchell Owned by: cjolif
Priority: undecided Milestone: 1.8
Component: DojoX Mobile Version: 1.7.2
Keywords: Cc:
Blocked By: Blocking:

Description

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).

Attachments (11)

back_button.patch (2.8 KB) - added by nic 7 years ago.
before.png (11.5 KB) - added by nic 7 years ago.
after.png (11.7 KB) - added by nic 7 years ago.
back_button_iphone_adrian_15400.patch (1.2 KB) - added by Adrian Vasiliu 7 years ago.
Adrian Vasiliu, IBM, CCLA
iPhoneNativeVSdojoxMobileBeforePatches.png (31.2 KB) - added by Adrian Vasiliu 7 years ago.
nicVsAdrianPatches.png (41.1 KB) - added by Adrian Vasiliu 7 years ago.
blackberryBeforeAndAfterPatch.png (36.2 KB) - added by Adrian Vasiliu 7 years ago.
back_button_iphone_and_blackberry_adrian_15400.patch (3.0 KB) - added by Adrian Vasiliu 7 years ago.
Adrian Vasiliu, IBM, CCLA
patch_full_15400.patch (12.8 KB) - added by Adrian Vasiliu 7 years ago.
Adrian Vasiliu, IBM, CCLA
patch15400SharperArrowTipOnIphone.patch (2.8 KB) - added by Adrian Vasiliu 7 years ago.
Further improvement: sharper arrow tip on iPhone - Adrian Vasiliu, IBM, CCLA
beforeAndAfterOnChromeIphoneIpad.png (179.2 KB) - added by Adrian Vasiliu 7 years ago.
Screenshots before and after the patch, on Chrome, iPhone and iPad

Download all attachments as: .zip

Change History (22)

Changed 7 years ago by nic

Attachment: back_button.patch added

Changed 7 years ago by nic

Attachment: before.png added

Changed 7 years ago by nic

Attachment: after.png added

comment:1 Changed 7 years ago by 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.

Changed 7 years ago by Adrian Vasiliu

Adrian Vasiliu, IBM, CCLA

Changed 7 years ago by Adrian Vasiliu

Changed 7 years ago by Adrian Vasiliu

Attachment: nicVsAdrianPatches.png added

comment:2 Changed 7 years ago by Adrian Vasiliu

Attached an alternate patch for dojox/mobile/themes/iphone/ToolBarButton.css (against the current dojo-trunk version), 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.
Last edited 7 years ago by Adrian Vasiliu (previous) (diff)

Changed 7 years ago by Adrian Vasiliu

comment:3 Changed 7 years ago by 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).
  1. blackberryBeforeAndAfterPatch.png Comparison before-after for the BlackBerry patch.
Last edited 7 years ago by Adrian Vasiliu (previous) (diff)

Changed 7 years ago by Adrian Vasiliu

Adrian Vasiliu, IBM, CCLA

comment:4 Changed 7 years ago by 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).

comment:5 Changed 7 years ago by Chris Mitchell

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

comment:6 in reply to:  5 Changed 7 years ago by 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!

Changed 7 years ago by Adrian Vasiliu

Attachment: patch_full_15400.patch added

Adrian Vasiliu, IBM, CCLA

comment:7 Changed 7 years ago by 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).

Last edited 7 years ago by Adrian Vasiliu (previous) (diff)

comment:8 Changed 7 years ago by cjolif

Milestone: tbd1.8
Owner: changed from Eric Durocher to cjolif
Status: newassigned
Type: enhancementdefect

This is really a design defect.

comment:9 Changed 7 years ago by cjolif

Resolution: fixed
Status: assignedclosed

In [29118]:

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

comment:10 Changed 7 years ago by cjolif

In [29430]:

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

Changed 7 years ago by Adrian Vasiliu

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

Changed 7 years ago by Adrian Vasiliu

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

comment:9 Changed 7 years ago by cjolif

In [29515]:

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

Note: See TracTickets for help on using tickets.