[Settings] - Need assets for the wifi icons

RESOLVED FIXED

Status

Firefox OS
Gaia::Settings
P2
normal
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: vicky, Assigned: fcampo)

Tracking

({polish})

unspecified
x86
Mac OS X
polish
Dependency tree / graph
Bug Flags:
in-moztrap +

Firefox Tracking Flags

(blocking-b2g:-, b2g18+ fixed)

Details

(Whiteboard: visual design, hanzo, visual-tracking, UX-P2, [TEF_REQ], uxbranch, landed in uxbranch)

Attachments

(5 attachments, 1 obsolete attachment)

(Reporter)

Description

5 years ago
Need 4 sprites for this wifi icons as we differenciate between connected and not connected status:

1. Wifi open. Grey version all signal strenght (for not connected)
2. Wifi open. Blue version all signal strenght (for connected networks)
3. Wifi locked. Grey version all signal strenght (for not connected networks)
4. Wifi locked. Blue version all signal strenght (for connected networks)

Check this explanation of how the indicators behave:
https://www.dropbox.com/s/khon63wk2pud6oc/WiFi_Connection_UseCase.psd

The original secured wifi network lives here:
https://www.dropbox.com/sh/qxwvi1drr768gsf/XOZQiYccvO
(Reporter)

Updated

5 years ago
Assignee: nobody → epang
Keywords: polish
Priority: -- → P2
Whiteboard: Visual Design
Created attachment 686704 [details]
Wifi assets

Hi Victoria, I've attached the Wifi assets for all the wifi icon scenarios.

Updated

5 years ago
Assignee: epang → vpg
(Reporter)

Comment 2

5 years ago
Hi Eric, thanks! But wouldn't it be better to have 4 sprites?
Created attachment 687092 [details]
Wifi Sprites

Hi Vicky,  I've attached 4 new sprites for the wifi icons.  Thanks for letting me know about the formatting :).
Attachment #686704 - Attachment is obsolete: true
Pavel can you make sure Eric's wifi icons get integrated. Thanks!
Assignee: vpg → pivanov
Whiteboard: Visual Design → visual design UX-P2
Whiteboard: visual design UX-P2 → visual design szabla UX-P2
Created attachment 705029 [details]
patch for UX branch

Sure, here they are :)
Attachment #705029 - Flags: review?(sjochimek)
Attachment #705029 - Flags: feedback?(kaze)
nominating because this is necessary imho.
blocking-b2g: --- → shira?
tracking-b2g18: --- → ?
Blocks: 815588
Something like this we wouldn't take in shira. Shira should be only critical partner issues. leo would allow this.
blocking-b2g: shira? → leo?
(Reporter)

Updated

5 years ago
Whiteboard: visual design szabla UX-P2 → visual design szabla UX-P2, [TEF_REQ]
blocking-b2g: leo? → leo+

Comment 8

5 years ago
Comment on attachment 705029 [details]
patch for UX branch

Comment on github (https://github.com/gordonbrander/gaia/pull/103) 
about the .active class ?

Comment 9

5 years ago
Landed in uxbranch: https://github.com/gordonbrander/gaia/commit/a52b4b1eaf510e884bfdc066706b6acd19de5fa1
Whiteboard: visual design szabla UX-P2, [TEF_REQ] → visual design szabla UX-P2, [TEF_REQ], uxbranch, landed in uxbranch

Updated

5 years ago
Attachment #705029 - Flags: review?(sjochimek)

Updated

5 years ago
tracking-b2g18: ? → ---

Updated

5 years ago
Attachment #705029 - Flags: review+

Updated

5 years ago
Whiteboard: visual design szabla UX-P2, [TEF_REQ], uxbranch, landed in uxbranch → visual design yedo UX-P2, [TEF_REQ], uxbranch, landed in uxbranch
Mass edit to set tracking-b2g18+ for these UX bugs that were called out for v1.1
tracking-b2g18: --- → +
Created attachment 727920 [details]
Wifi in Settings missing icons

Hi Pavel,
The implementation looks great within the first time start up screen.  But I just noticed that in the wifi settings the icons don't seem to be implemented correctly.  Only locks are showing without the wifi icons behind them.  Should the same icons be showing up? 

Eric
Flags: needinfo?(pivanov)
This icons are implemented only on Settings App. We need to create another bug for FTU App.
About the "Manage Network" screen we need extra functionality to show the status of "Known Networks" (we can create new bug for this too)
Flags: needinfo?(pivanov)

Comment 13

5 years ago
Comment on attachment 705029 [details]
patch for UX branch

Kaze, are you OK with all of this? Let me know. UX is just trying to get a handle on what may or may not be ready for 1.1. Thanks!
This hasn't landed yet anywhere; for consistancy, we should fix it in FTU as well.  (see comment 12)
Component: Gaia → Gaia::Settings
Summary: [Icons - Assets] Need assets for all the wifi icon scenarios. → [Settings] - Need assets for the wifi icons
Depends on: 859102
(Assignee)

Comment 15

5 years ago
I already commented it on the FTU followup (bug 859102), but copying it here just in case.

New wifi sprites landed in FTU a month ago, so this shouldn't be a blocker for this bug. Only concern is if we want to sync the code also, apart from the visuals. In that case, that would need further investigation and agreements, as in FTU we have separated sprites for every situation, and we also use animations during the connecting process.

But if code sync is not an issue, we can say that FTU already have the sprites updated, so definitely shouldn't be a blocker (and probably should be marked as dup)
(Reporter)

Comment 16

5 years ago
Hi, 
We, with Fernando Campo, worked on the wifi connection some months ago for FTU. The behaviour and icons sprite should be the same. The icons as I designed myself are 4:
 
the wifi icon alone, disconnected (grey)
the wifi icon alone, connected (blue)
the wifi icon with lock icon integrated in the shape, disconnected (grey)
the wifi icon with lock icon integrated in the shape, connected (blue)

And a set of animations to indicate the "connecting" state.

That same FTU wifi set should be implemented as it is the correct one and do not leave the animation out.

Thanks!
(In reply to Victoria Gerchinhoren from comment #16)
> Hi, 
> We, with Fernando Campo, worked on the wifi connection some months ago for
> FTU. The behaviour and icons sprite should be the same. The icons as I
> designed myself are 4:
>  
> the wifi icon alone, disconnected (grey)
> the wifi icon alone, connected (blue)
> the wifi icon with lock icon integrated in the shape, disconnected (grey)
> the wifi icon with lock icon integrated in the shape, connected (blue)
> 
> And a set of animations to indicate the "connecting" state.
> 
> That same FTU wifi set should be implemented as it is the correct one and do
> not leave the animation out.
> 
> Thanks!

Pavel, was the same set of wifi icons Victoria mentioned used for wifi in settings?  If they were then everything should be good to go.  But according to Naoki's comment (comment 14) this has not landed yet, can you take a look? thx!
Flags: needinfo?(pivanov)
Yep the icons are the same.
Flags: needinfo?(pivanov)
(In reply to Pavel Ivanov [:ivanovpavel] from comment #18)
> Yep the icons are the same.

Pavel, can you check that this landed in master (Naoki commented that it has not landed anywhere yet)? Thanks!
Flags: needinfo?(pivanov)
maybe Sam can give us a better look on this ... Sam?
Flags: needinfo?(pivanov) → needinfo?(sjochimek)
Attachment #705029 - Flags: feedback?(kaze) → feedback+

Comment 21

5 years ago
Pavel: Can you check the conflict with that commit https://github.com/mozilla-b2g/gaia/commit/0f3a6c729085e322502c05b5dc932bf27ea0139c ?
Flags: needinfo?(sjochimek) → needinfo?(pivanov)
(In reply to Sam Joch [:samjoch] from comment #21)
> Pavel: Can you check the conflict with that commit
> https://github.com/mozilla-b2g/gaia/commit/
> 0f3a6c729085e322502c05b5dc932bf27ea0139c ?

Hi Pavel, have you had a chance to look into the conflict in the commit? Let me know, Thanks!
The icons in Settings app are the same as FTU app ... so I will mark this one as resolve
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Flags: needinfo?(pivanov)
Resolution: --- → WORKSFORME
The icons in Settings app are the same as FTU app ... so I will mark this one as resolved
(In reply to Pavel Ivanov [:ivanovpavel] from comment #24)
> The icons in Settings app are the same as FTU app ... so I will mark this
> one as resolved

is this ready for verification?
(Assignee)

Comment 26

5 years ago
Sorry to jump in here and reopen the bug, but I've been revising master branch and I don't see any of the changes from the pull request landed in there. 
I still can see an unique sprite for wifi instead of four, and a different icon for the lock.

[master] Settings: 
- https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/style/images/wifi_sprite.png
- https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/style/images/wifi_lock.png

[master] FTU: 
- https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/ftu/css/images/wifi_connected_locked_sprite.png
- https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/ftu/css/images/wifi_connected_sprite.png
- https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/ftu/css/images/wifi_disconnected_locked_sprite.png
- https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/ftu/css/images/wifi_disconnected_sprite.png

Do we have a commit hash for the merged changes? Has the changes have been reverted at some point?
Status: RESOLVED → REOPENED
status-b2g18: --- → affected
Flags: needinfo?(sjochimek)
Flags: needinfo?(pivanov)
Resolution: WORKSFORME → ---

Comment 27

5 years ago
We don't need four sprite. This has been resolved in settings by using the wifi_lock.png over the wifi_sprite.png (see: https://github.com/mozilla-b2g/gaia/commit/0f3a6c729085e322502c05b5dc932bf27ea0139c#L4R157)

Actually i don't think this has been resolved in FTU. Pavel can you confirm ?
Flags: needinfo?(sjochimek)

Updated

5 years ago
Whiteboard: visual design yedo UX-P2, [TEF_REQ], uxbranch, landed in uxbranch → visual design, hanzo, visual-tracking, UX-P2, [TEF_REQ], uxbranch, landed in uxbranch
I confirm ... Eric, can you give us the latest version of the icons(and if possible to sync the version with Sergi or Steve?) so that we can put them if needed in FTU and Settings apps with one sprite?
Flags: needinfo?(pivanov) → needinfo?(epang)
Flags: needinfo?(vpg)
(Assignee)

Comment 29

5 years ago
Pavel if you prefer I can take care of updating FTE, as we have animations on the code. If you agree please assign the bug to me
Flags: needinfo?(pivanov)
(Reporter)

Comment 30

5 years ago
Hi all. I¡ll try to explain the reason for the 4 sprites as it seems that to be a misunderstanding here. 

The sprites that Fernando is linking to are the icons proposal from the Visual Team TEF and MOZ for the wifi icons. The reason why we have 4 different sprites is that the lock icon is integrated to the wifi one so it looks and feels like as unified icon to sit well in the overall OS iconography, the single object and the default icon bounding box of 30 by 30px.

For more reference, this is the official iconography sheet for settings: https://www.dropbox.com/s/cextvg7xl8t5m0j/IconsSettings_20130513.psd

If you have further questions please "needinfo" me.

Thanks!
Flags: needinfo?(vpg)
Assignee: pivanov → fernando.campo
(Assignee)

Comment 31

5 years ago
After comment 30 and comment 27, my understanding is that we should be using 4 sprites, or use 2 but with a better display of the lock, as the current situation in settings shows it with a white border, which I don't think it's acceptable for UX.

- Going for 2 sprites will mean changes both in settings (new lock image) and FTU (remove 2 of the sprites and a new lock image)
- Going for 4 sprites implies changes on settings

I can do any of the changes, but I'd rather to have some confirmation from all parties involved before starting, to avoid future reopenings.
Flags: needinfo?(sjochimek)

Comment 32

5 years ago
:fcampo, you can use the 4-sprites approach to settings. Let me know if you need help.
Flags: needinfo?(sjochimek)
Flags: needinfo?(pivanov)
Flags: needinfo?(epang)
(Assignee)

Comment 33

5 years ago
Created attachment 753249 [details] [review]
Link to PR https://github.com/mozilla-b2g/gaia/pull/9960

I used :kaze cause AFAIK he was in charge of settings, and Pavel cause he was taking care of the wifi UX before.

Please proxy the reviews if you are not the correct person.
Attachment #753249 - Flags: review?(pivanov)
Attachment #753249 - Flags: review?(kaze)
We'll accept a low risk fix over the next few days, but this shouldn't be leo+ (doesn't block a partner).
blocking-b2g: leo+ → -
Comment on attachment 753249 [details] [review]
Link to PR https://github.com/mozilla-b2g/gaia/pull/9960

Niiiiice. :)
Attachment #753249 - Flags: review?(kaze) → review+
Comment on attachment 753249 [details] [review]
Link to PR https://github.com/mozilla-b2g/gaia/pull/9960

very nice :) thank you :)
Attachment #753249 - Flags: review?(pivanov) → review+
Merged on master: https://github.com/mozilla-b2g/gaia/commit/6d8ee303fbafa200c87546ac1470214dd2334697
Status: REOPENED → RESOLVED
Last Resolved: 5 years ago5 years ago
Resolution: --- → FIXED
Blocks: 877999
(Assignee)

Comment 38

5 years ago
Created attachment 756557 [details]
Uplift to v1-train

NOTE: Please see https://wiki.mozilla.org/Release_Management/B2G_Landing to better understand the B2G approval process and landings.

[Approval Request Comment]
Bug caused by (feature/regressing bug #): 
User impact if declined: user will see an important lack of sync between wifi experience on FTU and settings
Testing completed: 
Risk to taking this patch (and alternatives if risky): only visual stuff, so quite safe
String or UUID changes made by this patch:
Attachment #756557 - Flags: approval-gaia-v1?

Updated

5 years ago
Attachment #756557 - Flags: approval-gaia-v1? → approval-gaia-v1+
Warning: merge bug 877999 along with this patch.
(Assignee)

Comment 40

5 years ago
Uplifted to v1-train 85ad5b38c7a484ed6ea308fe454db7f8980043e3

(together with Bug 877999, 240c1d2f87b86f6f6dd21d8549081e26b542f0cc, thanks Kaze for the tip!)
status-b2g18: affected → fixed

Updated

5 years ago
Flags: in-moztrap?

Updated

4 years ago
Flags: in-moztrap? → in-moztrap?(dwatson)

Comment 41

4 years ago
Created a test case to make sure each icon is displaying.

https://moztrap.mozilla.org/manage/cases/?filter-id=9356
https://moztrap.mozilla.org/manage/cases/?filter-id=9357
https://moztrap.mozilla.org/manage/cases/?filter-id=9358
https://moztrap.mozilla.org/manage/cases/?filter-id=9359
Flags: in-moztrap?(dwatson) → in-moztrap+
Attachment mime type: text/plain → text/x-github-pull-request
You need to log in before you can comment on or make changes to this bug.