Opened 7 years ago

Last modified 2 years ago

#16518 assigned defect

[patch][cla] SpinWheel: Color gradient should be applied to a foreground element (.mblSpinWheelSlotTouch) and not to background element (.mblSpinWheel)

Reported by: Paul Christopher Owned by: Patrick Ruzand
Priority: undecided Milestone: 1.14
Component: DojoX Mobile Version: 1.8.0
Keywords: Cc:
Blocked By: Blocking:

Description

Description

Currently the color gradient is applied to the background element, which has the following effect:

Text colors other than black break the look and feel of the spin wheel.

This could be fixed by applying the gradient to a foreground element, i.e. the top most element, i.e. the touch scroll container (see attached patch). Result is:

Discussion

I have just changed with GIMP the gradient of themes/common/compat/spinwheel-bg.png from "gray to white" to "gray to transparent".

I did not know how to achieve the same effect with CSS3. Apparently you have to switch to rgba syntax. Attached you can find some auto-generated CSS taken from http://www.colorzilla.com/gradient-editor/. There you can upload a PNG and get the CSS generated. However the result is much too big (compared to the original CSS3 version with the gradient "gray to white").

Attachments (5)

before.png (14.3 KB) - added by Paul Christopher 7 years ago.
after.png (14.9 KB) - added by Paul Christopher 7 years ago.
patchSpinWheelGradient.html (1.2 KB) - added by Paul Christopher 7 years ago.
spinwheel-fg.css (10.1 KB) - added by Paul Christopher 7 years ago.
spinwheel-fg.png (489 bytes) - added by Paul Christopher 7 years ago.

Download all attachments as: .zip

Change History (11)

Changed 7 years ago by Paul Christopher

Attachment: before.png added

Changed 7 years ago by Paul Christopher

Attachment: after.png added

Changed 7 years ago by Paul Christopher

Attachment: patchSpinWheelGradient.html added

Changed 7 years ago by Paul Christopher

Attachment: spinwheel-fg.css added

Changed 7 years ago by Paul Christopher

Attachment: spinwheel-fg.png added

comment:1 Changed 7 years ago by Paul Christopher

Maybe this CSS gradient is a good approximation?

.mblSpinWheelSlotTouch { background: -webkit-gradient(linear, left top, left bottom,color-stop(0%,rgba(0,0,7,0.81)), color-stop(4%,rgba(0,0,13,0.58)), color-stop(7%,rgba(0,0,22,0.43)), color-stop(10%,rgba(0,3,35,0.31)), color-stop(12%,rgba(0,5,37,0.23)), color-stop(16%,rgba(0,8,41,0.12)), color-stop(22%,rgba(0,21,43,0.04)), color-stop(34%,rgba(0,64,64,0.04)), color-stop(61%,rgba(0,44,65,0.29)), color-stop(65%,rgba(0,64,64,0.02)), color-stop(78%,rgba(0,21,43,0.06)), color-stop(84%,rgba(0,8,40,0.12)), color-stop(88%,rgba(0,4,40,0.22)), color-stop(92%,rgba(0,3,25,0.38)), color-stop(96%,rgba(0,2,16,0.59)), color-stop(100%,rgba(0,0,7,0.81))); }

I have just thrown out some unnecessary lines form the auto-generated code thereby orienting myself at the used color-stop-steps of the original gradient "gray to white".

comment:2 Changed 7 years ago by Patrick Ruzand

Owner: changed from Eric Durocher to Patrick Ruzand
Status: newassigned

comment:3 Changed 4 years ago by dylan

Milestone: tbd1.11
Summary: SpinWheel: Color gradient should be applied to a foreground element (.mblSpinWheelSlotTouch) and not to background element (.mblSpinWheel)[patch][cla] SpinWheel: Color gradient should be applied to a foreground element (.mblSpinWheelSlotTouch) and not to background element (.mblSpinWheel)

This is for the older iOS theme. Should do a quick review and decide if it should be landed or not for 1.11.

comment:4 Changed 4 years ago by dylan

Milestone: 1.111.12

Ok, after massive triage, ended up with about 80 tickets for 1.11 and 400 or so for 1.12. That's a bit unrealistic, so first I changed all 1.12 to 1.13 (with the plan to move some forward to the new 1.12. Now, I'm moving some of the 1.11 tickets that are less likely to get done this month without help to 1.11. Feel free to help out in January if you want to see this ticket land in 1.11.

comment:5 Changed 3 years ago by dylan

Milestone: 1.121.13

Ticket planning... move current 1.12 tickets out to 1.13 that likely won't get fixed in 1.12.

comment:6 Changed 2 years ago by dylan

Milestone: 1.131.14
Note: See TracTickets for help on using tickets.