933206 - [Status Bar] Update Battery Icons

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::System, defect)

Description

[Eric Pang [:epang] UX]

Update to new styling of battery icons.  Specs to follow..

Comment 1

[Amy Lee [:amylee] UX]

Hi Pavel, 

I'll be sending you updated battery icons to replace the current ones. I just have a few questions:

1. The new battery icons are wider than the current ones by 4px (21px to 25px). Will this be an issue? 

2. Because of the wider size, the battery icons needed to be moved over to fit within the sprite sheet evenly. Is this okay? The slicing will need to be adjusted for the battery icons only.  

3. Can you please send me the latest version of the status bar sprite that is in the build? Ideally if it's a transparent png we don't have to replace the background colour. 

Once you send over the latest status bar sprite, I can replace the battery icons in it to ensure that none of the other icons are affected.

Thanks for your help!

Comment 2

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Hey Amy,

Sure,
I think this will be not a problem
The sprites are here:
https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/statusbar/images/icons.png
https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/statusbar/images/icons%401.5x.png
https://github.com/mozilla-b2g/gaia/blob/master/apps/system/style/statusbar/images/icons%402x.png

ping me if you need some help :)

Comment 3

[Amy Lee [:amylee] UX]

Attachment: Statusbar_Sprite.zip

Hi Pavel, 

Attached is the updated status bar sprite sheet for @1 and @1.5 scale. We aren't supporting @2 scale. Let me know if you need anything else. 

Thanks!

Comment 4

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: small pixels problem

Hey Amy,
I think that we have some small pixels problems here ... see the the lightning icons.

Comment 5

[Amy Lee [:amylee] UX]

Attachment: REVISED_statusbar_icons_sprite_1.2.png

Hi Pavel, 

I've attached a revised png file of the icons. The lightening bolt should be aligned now. I checked the @1.5 version and it looked okay. Let me know if you need anything else.

Comment 6

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: patch for Gaia/master

Comment 7

[Fabien Cazenave [:kaze]]

Comment on attachment 829723 [details] [review]
patch for Gaia/master

Looks good to me but I’m not sure I’m qualified to land patches in the System app. Tim, can you have a quick look please?

Comment 8

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Comment on attachment 829723 [details] [review]
patch for Gaia/master

It's fine if you have looked it.

Comment 9

[Tim Guan-tin Chien [:timdream] (please needinfo)]

master: https://github.com/mozilla-b2g/gaia/commit/5066947b583d0a6700b521c21c23f8f00b5c05ab

Comment 10

[Eric Pang [:epang] UX]

thanks everyone for getting this done so quickly!

Comment 11

[Ahmed Nefzaoui [:Nefzaoui]]

Attachment: Battery Icon

Um..  Isn't that kind of.. not okay ? :s

Comment 12

[Tim Guan-tin Chien [:timdream] (please needinfo)]

(In reply to Ahmed Nefzaoui [:Nefzaoui] from comment #11)
> Created attachment 831122 [details]
> Battery Icon
> 
> Um..  Isn't that kind of.. not okay ? :s

Yeah I saw that too on dppx=1.5 phones.

revert master: 0700708f972836dc5bce24470da716a124fa003b

Peter, could you fix the @1.5 file?

Comment 13

[Eric Pang [:epang] UX]

(In reply to Tim Guan-tin Chien [:timdream] (MoCo-TPE) (please ni?) from comment #12)
> (In reply to Ahmed Nefzaoui [:Nefzaoui] from comment #11)
> > Created attachment 831122 [details]
> > Battery Icon
> > 
> > Um..  Isn't that kind of.. not okay ? :s
> 
> Yeah I saw that too on dppx=1.5 phones.
> 
> revert master: 0700708f972836dc5bce24470da716a124fa003b
> 
> Peter, could you fix the @1.5 file?

Redirecting to Amy/Pavel, can you please take a look at this? Looks like the icons on the sprite aren't positioned correctly. Thanks!

Comment 14

[Amy Lee [:amylee] UX]

Attachment: statusbar_icons_sprite@1.5_guide.png

Hey guys, 

Since the battery icon was scaled to 1.5x, the width of the battery became 37.5px and we can't have half pixels so I needed to either round up or down by .5 pixels. I had rounded the pixel up and so all the icons are wider by .5 pixel. The coordinates will need to be adjusted on Pavel's end for the @1.5 version. I've attached a guide for reference. The width should be 38px. Let me know if you have any questions.

Cheers,
Amy

Comment 15

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: patch for Gaia/master

Hey Ahmed,
can you check this patch? I don't have HD device right now

Thanks in advance :)

Comment 16

[Ahmed Nefzaoui [:Nefzaoui]]

Attachment: battery1dot5.png

Regardless the fact that [e-mail] is in Gallery in this PR ( no worries :-) )
This is what I'm getting..

Comment 17

[Ahmed Nefzaoui [:Nefzaoui]]

I think it's because of the extra ~0.06 added to the icon's size every time we advance to the next sprite; because it's not an absolute 2.6rem.. So reaching the data-level="90" means we added about half of the icon next to it.. :-)

Comment 18

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

huh ... mistake ... I updated the PR :) can you check it again pls :)

Comment 19

[Ahmed Nefzaoui [:Nefzaoui]]

I'm confused.. Should I just try the updated width (2.5rem) and the image containing new icons.. Or the updated width and the classic 1.5 one as it appears now in the PR..
?

Comment 20

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Try the last one ... should work :)

Comment 21

[Ahmed Nefzaoui [:Nefzaoui]]

Tested it last night but still.. Sent you an email about that

Comment 22

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Comment on attachment 831596 [details] [review]
patch for Gaia/master

Hey Ahmed,
I just have a chance to test the patch on SD and HD device and it looks good. Can you confirm?

Comment 23

[Ahmed Nefzaoui [:Nefzaoui]]

Confirmed.
Working like a charm :)

Comment 24

[Ahmed Nefzaoui [:Nefzaoui]]

Attachment: Screenshot after patch

Comment 25

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Comment on attachment 831596 [details] [review]
patch for Gaia/master

Hey Kaze,
I fixed the problem and now works as expected :)

Comment 26

[Amy Lee [:amylee] UX]

Attachment: StatusBar_Icons.zip

Hi Pavel, 

Here are the updated sprites (with the new icons). Thanks!

Comment 27

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Thanks Amy,
but I will use them on Bug 939272 when we land this one :) Thanks for the fast replay :)

Comment 28

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Thanks :)

Landed on master:
https://github.com/mozilla-b2g/gaia/commit/3b6e3abf60b5156df2704c50f5f6bae37d92975a

Comment 29

[Ahmed Nefzaoui [:Nefzaoui]]

Comment on attachment 831596 [details] [review]
patch for Gaia/master

Clearing an old feedback request.