[Utility tray] "Clear all" button should have a hit state

RESOLVED FIXED

Status

Firefox OS
Gaia::System
RESOLVED FIXED
5 years ago
2 years ago

People

(Reporter: pabloUX, Assigned: Durwasa Chakraborty, Mentored)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: interaction)

Attachments

(4 attachments, 3 obsolete attachments)

(Reporter)

Description

5 years ago
In order to give feedback to the user, specially when any notification is non-erasable (update avalaible, e.g.), is important to show a hit state when the button is tapped. If not, the user could be confused and think its mobile doesn't work fine.
(Reporter)

Updated

5 years ago
Whiteboard: visual design

Updated

5 years ago
Whiteboard: visual design → interaction
Mentor: etienne@segonzac.info

Comment 1

3 years ago
Created attachment 8575935 [details]
Add style on notification clear all button when hit, on lines  171-173
Attachment #8575935 - Flags: review?(etienne)

Comment 2

3 years ago
Created attachment 8575937 [details]
Video of th new hit state

Updated

3 years ago
Attachment #8575935 - Attachment is patch: false

Updated

3 years ago
Attachment #8575937 - Attachment is patch: false
Attachment #8575937 - Attachment mime type: text/plain → video/mp4

Updated

3 years ago
Attachment #8575935 - Flags: review?(etienne)
Created attachment 8575952 [details] [review]
[gaia] giniouxe:Bug#819304 > mozilla-b2g:master
Attachment #8575937 - Flags: ui-review?(epang)
Comment on attachment 8575952 [details] [review]
[gaia] giniouxe:Bug#819304 > mozilla-b2g:master

All good, just waiting for the ui-review before landing.
(<3 the orange but Eric will know for sure what was spec'ed)
Attachment #8575952 - Flags: review+

Comment 5

3 years ago
Thanks for the feed back !
(In reply to aurelie.ginioux from comment #5)
> Thanks for the feed back !

Great that we're adding a hit state!  We don't have a colour defined, why don't we try out 50% opacity of the current unpressed state. Thanks!
Flags: needinfo?(aurelie.burnier)
Sorry, ni'ed the wrong person
Flags: needinfo?(aurelie.burnier) → needinfo?(aurelie.ginioux)

Comment 8

3 years ago
(In reply to Eric Pang [:epang] from comment #6)
> (In reply to aurelie.ginioux from comment #5)
> > Thanks for the feed back !
> 
> Great that we're adding a hit state!  We don't have a colour defined, why
> don't we try out 50% opacity of the current unpressed state. Thanks!

OK, I'm updating the PR.
Flags: needinfo?(aurelie.ginioux)

Comment 9

3 years ago
Created attachment 8576075 [details] [diff] [review]
Hit state : add 50% opacity to button on hit
Attachment #8575937 - Attachment is obsolete: true
Attachment #8575937 - Flags: ui-review?(epang)
Attachment #8576075 - Flags: review?(etienne)
Attachment #8575952 - Attachment is obsolete: true
Comment on attachment 8576075 [details] [diff] [review]
Hit state : add 50% opacity to button on hit

Hey Eric, since we switch the text-color to gray once the "Clear all" button is pressed (because it's disabled when there's no notification) it's indeed really hard to see the hit state.

Could we add a background-color on the button instead?
Flags: needinfo?(epang)
Attachment #8576075 - Flags: review?(etienne)
(In reply to Etienne Segonzac (:etienne) from comment #10)
> Comment on attachment 8576075 [details] [diff] [review]
> Hit state : add 50% opacity to button on hit
> 
> Hey Eric, since we switch the text-color to gray once the "Clear all" button
> is pressed (because it's disabled when there's no notification) it's indeed
> really hard to see the hit state.
> 
> Could we add a background-color on the button instead?

sure, let's try #00caf2 at 20% opacity and see how that looks.  Thanks!
Flags: needinfo?(epang)
> > Could we add a background-color on the button instead?
> 
> sure, let's try #00caf2 at 20% opacity and see how that looks.  Thanks!

Note: we'll probably need to remove the border-radius that's added by default to buttons too.
Flags: needinfo?(aurelie.ginioux)

Comment 13

3 years ago
Hi,

I applied the changes, but it seems I have no way to test it : the WebIDE simulator doesn't seem to work (can't visualize CSS changes, tried with an ugly pink to be sure), and I have no Firefox OS phone... Any idea ?

Thanks !
Flags: needinfo?(aurelie.ginioux)
Assignee: nobody → durwasa.chakraborty
Created attachment 8666907 [details] [review]
[gaia] durwasa-chakraborty:master > mozilla-b2g:master
Created attachment 8667177 [details] [review]
[gaia] durwasa-chakraborty:bug-hit-state > mozilla-b2g:master
(Assignee)

Updated

2 years ago
Attachment #8666907 - Attachment is obsolete: true
(Assignee)

Updated

2 years ago
Attachment #8667177 - Flags: review?(etienne)
Comment on attachment 8667177 [details] [review]
[gaia] durwasa-chakraborty:bug-hit-state > mozilla-b2g:master

I made some comments on github, let me know if anything's unclear.
Attachment #8667177 - Flags: review?(etienne)
(Assignee)

Updated

2 years ago
Attachment #8667177 - Flags: review?(etienne)
Comment on attachment 8667177 [details] [review]
[gaia] durwasa-chakraborty:bug-hit-state > mozilla-b2g:master

Commented on github, I think there was a little misunderstanding :)
Attachment #8667177 - Flags: review?(etienne)
(Assignee)

Updated

2 years ago
Attachment #8667177 - Flags: review?(etienne)
Comment on attachment 8667177 [details] [review]
[gaia] durwasa-chakraborty:bug-hit-state > mozilla-b2g:master

Looks like we'll need one (hopefully)last round.
Comments on github. Think about is as practice for your git skills :)
Attachment #8667177 - Flags: review?(etienne)
(Assignee)

Updated

2 years ago
Attachment #8667177 - Flags: review?(etienne)
Comment on attachment 8667177 [details] [review]
[gaia] durwasa-chakraborty:bug-hit-state > mozilla-b2g:master

Detailed comments on github :)
Attachment #8667177 - Flags: review?(etienne)
(Assignee)

Updated

2 years ago
Attachment #8667177 - Flags: review?(etienne)
Comment on attachment 8667177 [details] [review]
[gaia] durwasa-chakraborty:bug-hit-state > mozilla-b2g:master

Clearing while waiting for the PR to be updated :)
Attachment #8667177 - Flags: review?(etienne)
(Assignee)

Updated

2 years ago
Attachment #8667177 - Flags: review?(etienne)
Comment on attachment 8667177 [details] [review]
[gaia] durwasa-chakraborty:bug-hit-state > mozilla-b2g:master

Here we go :)
Ready for the next bug!
Attachment #8667177 - Flags: review?(etienne) → review+
https://github.com/mozilla-b2g/gaia/commit/cc7e572ec93dd8d6afd403687e13e3874ada0223
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
(Assignee)

Comment 23

2 years ago
(In reply to Etienne Segonzac (:etienne) from comment #21)
> Comment on attachment 8667177 [details] [review]
> [gaia] durwasa-chakraborty:bug-hit-state > mozilla-b2g:master
> 
> Here we go :)
> Ready for the next bug!

Yes sir absolutely ready :) :) Hoping that it won't be a nightmare for you ... :) :) My deepest apologies again
Created attachment 8692288 [details] [review]
[gaia] durwasa-chakraborty:master > mozilla-b2g:master
You need to log in before you can comment on or make changes to this bug.