Opened 7 years ago

Closed 7 years ago

#15909 closed defect (fixed)

dojox/mobile gallery "Headings" demo does not display gray back button correctly on Firefox

Reported by: cjolif Owned by: Eric Durocher
Priority: low Milestone: 1.9
Component: DojoX Mobile Version: 1.8.0
Keywords: Cc:
Blocked By: Blocking:

Description

See attached image.

Attachments (2)

button.png (9.2 KB) - added by cjolif 7 years ago.
screenshot of the problem
patch15909.patch (8.8 KB) - added by Adrian Vasiliu 7 years ago.
Fix misbehavior of "back" buttons - Adrian Vasiliu, IBM, CCLA

Download all attachments as: .zip

Change History (8)

Changed 7 years ago by cjolif

Attachment: button.png added

screenshot of the problem

comment:1 Changed 7 years ago by cjolif

Priority: undecidedlow

comment:2 Changed 7 years ago by Adrian Vasiliu

The same trouble also holds for the button with "Back" label in the "Shape" tab of the "Buttons" demo of the gallery. And it hurts on both Firefox and IE (including IE9).

The good news is... that this does not reveal a defect in the library. It is a defect in the demo with "compat" desktop browsers. It has nothing to do with the behavior of the typical "Back" buttons as they can be seen in most mobile apps. Indeed, in the mobile gallery, these two occurrences of "Back" buttons are usages of dojox/mobile/Button with custom CSS provided in the demo.

Nowadays, users get the "Back" buttons in two very easy ways, without writing any custom CSS: either by setting the "arrow=left|right" property of a ToolBarButton (the property only exists since Dojo 1.8), or by setting the "back" property of a Heading (which internally creates a ToolBarButton). These work fine including in "compat" mode.

From this point of view, we could imagine to modify the gallery demo to use for the "back" buttons a ToolBarButton instead of a customized Button. However, the demo also shows buttons with a rounded shape (in the "Buttons" view) and with various custom colors and textures, so for consistency it might be better to just fix the CSS in the demo. On the other side, if we keep using in the gallery a Button with custom CSS for the "back" button, it might be misleading for users that would use the gallery for learning how to code, because they may miss the fact that there's a much easier solution to get back buttons... Maybe we should show both solutions in the gallery? or this would be overkill?...

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

comment:3 Changed 7 years ago by Adrian Vasiliu

Okay, so my proposal would be:

a) In the "Headings" view, we replace the Button with custom CSS used for the "back" button by the use of a ToolBarButton with arrow=left. This is consistent with the recommended solution for back buttons inside Heading.

b) In the "Buttons" view, we replace the Button with custom CSS used for a button with "Back" label (in the "Shape" tab) by a Button with rectangular shape (labelled "Rectangle"), just to have another Button in this tab besides the "Round" one.

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

Changed 7 years ago by Adrian Vasiliu

Attachment: patch15909.patch added

Fix misbehavior of "back" buttons - Adrian Vasiliu, IBM, CCLA

comment:4 Changed 7 years ago by Adrian Vasiliu

The attached patch15909.patch uses the solution mentioned in the previous comment to fix the trouble in the "Headings" view, while in the "Buttons" view we finally preferred to not mix Button and ToolBarButton. Instead, the "Shape" tab now shows only the round shape when running in FF and IE (that is, on these browsers, we hide the other button; this is a compromise, thinking that it is overkill to redo inside mobileGallery the work we do inside the lib for getting buttons with arrow shape on compat browsers).

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

comment:5 Changed 7 years ago by cjolif

Milestone: tbd1.9

comment:6 Changed 7 years ago by cjolif

Resolution: fixed
Status: newclosed

In [29856]:

fixes #15909. Thanks Adrian Vasiliu (IBM, CCLA). !strict.

Note: See TracTickets for help on using tickets.