844575 - [BB][headers] - skin-organic and skin-dark have visual discrepancies

Status: RESOLVED FIXED

(Firefox OS Graveyard :: General, defect)

Description

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

Attachment: Visual discrepancies

Comment 1

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

Hey Eric,
can you provide me psd for the [BB]Headers with all skins? (Dropbox will be ok). Thanks :)

Comment 2

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #1)
> Hey Eric,
> can you provide me psd for the [BB]Headers with all skins? (Dropbox will be
> ok). Thanks :)

Hey Pavel, you'll find them in this psd:
https://www.dropbox.com/s/l87lz5hejd4llkf/CommonControls_20130212.psd

let me know if there's anything else I can help with :)

Comment 3

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

Thanks Eric, but I think this is obsolete because there I can't find "skin-dark" for the [BB][Headers]

Comment 4

[Lukas Blakk [:lsblakk] use ?needinfo]

Mass edit to set tracking-b2g18+ for these UX bugs that were called out for v1.1

Comment 5

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #3)
> Thanks Eric, but I think this is obsolete because there I can't find
> "skin-dark" for the [BB][Headers]

Hi Pavel, if this discrepancy is between media screens and settings I see them in the Common Controls psd:
https://www.dropbox.com/s/58jzbhl8a329u83/CommonControls_20130305.psd

Media: 'Default [Media]
Settings: 'Default [Settings]

Using the same header 'Default - Settings'. Let me know if i'm misunderstadning :).

Comment 6

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

You mean ... to replace skin-dark with skin-organic? because we have 3 skins for the header ... normal(orange), organic and black ... and here: https://www.dropbox.com/s/58jzbhl8a329u83/CommonControls_20130305.psd we don't have dark variant

Comment 7

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #6)
> You mean ... to replace skin-dark with skin-organic? because we have 3 skins
> for the header ... normal(orange), organic and black ... and here:
> https://www.dropbox.com/s/58jzbhl8a329u83/CommonControls_20130305.psd we
> don't have dark variant

Hi Sergi, maybe you can help us out?  Should media apps have the same header as settings (looking at the common controls they look the same)?  I was told you are the person to ask for more detail :)  Thanks!

Comment 8

[Sergi]

> Hi Sergi, maybe you can help us out?  Should media apps have the same header
> as settings (looking at the common controls they look the same)?  I was told
> you are the person to ask for more detail :)  Thanks!

Hi Eric. At the moment we only have the default header (orange) and the organic one (dark gray). As you point out the header for both settings and Media is organic. What changes is the background color (light gray for settings and dark for media). You can find the last version for Common Controls in Dropbox (https://www.dropbox.com/s/hcwkssntvahqq49/CommonControls_20130305.psd).

Hope it helps.

Comment 9

[Eric Pang [:epang] UX]

(In reply to Sergi from comment #8)
> > Hi Sergi, maybe you can help us out?  Should media apps have the same header
> > as settings (looking at the common controls they look the same)?  I was told
> > you are the person to ask for more detail :)  Thanks!
> 
> Hi Eric. At the moment we only have the default header (orange) and the
> organic one (dark gray). As you point out the header for both settings and
> Media is organic. What changes is the background color (light gray for
> settings and dark for media). You can find the last version for Common
> Controls in Dropbox
> (https://www.dropbox.com/s/hcwkssntvahqq49/CommonControls_20130305.psd).
> 
> Hope it helps.

Thanks Sergi! Yes, this really helps.  The confusion was because we thought there were three headers.  Pavel, Sergi's comment should answer the questions you had :).

Comment 10

[Eric Pang [:epang] UX]

Hi Pavel, Let me know if anything is still unclear for this bug.  I think you should be good to implement from Sergi's comment.  Thanks!

Comment 11

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

I will ... hopefully soon

Comment 12

[Eric Pang [:epang] UX]

Pavel/Sergi, we need to look into this bug.  The media and setting headers should not be the same.  Sergi I've sent you an update about this  -- we need to make sure this is updated.  Will this need to be be updated in the building blocks?

Comment 13

[Sergi]

(In reply to Eric Pang [:epang] from comment #12)
> Pavel/Sergi, we need to look into this bug.  The media and setting headers
> should not be the same.  Sergi I've sent you an update about this  -- we
> need to make sure this is updated.  Will this need to be be updated in the
> building blocks?

You're right, there're 3 different styles for headers: Default (orange), Dark (usually used in media apps), and organic (usually used in settings). I think the discrepancy comes from here (i made a mistake in my last post, sorry for that).

You can find these 3 different styles as Building Blocks under "Headers": http://buildingfirefoxos.com/building-blocks/headers/

Comment 14

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

Attachment: patch for Gaia repo

Hey Arnau,
can you give me some feedback on this one ... I try to use this patch for few dayse and I don't see any problems with gradients :) but still I need to transform images for the sub headers to gradients

Comment 15

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Pavel,
Good work, this is something we need to do, but I would not change all images to css gradients right now, I would prefer just solving that bug: using the right skin on each screen, following UX visual.

Sergi, could you please update Common Controls? I don't see dark skin here:
https://wiki.mozilla.org/images/b/b7/CommonControls_20130305.jpg
So Pavel has the correct background values, maybe colors in headers BB are outdated, as in headers default skin (orange):
https://bugzilla.mozilla.org/show_bug.cgi?id=875241

Thanks

Comment 16

[Sergi]

I've updated the CC File. You can find the latest version here (both a jpg and a PSD): https://wiki.mozilla.org/Gaia/Design/BuildingBlocks

Main change regarding headers is that i've added the three styles we're using: default (orange), dark (media), organic (status).

Comment 17

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

Hey Sergi,
thanks for the update ... can we extract the black/white pattern of noise for the headers? I work on this bug and I try to use only css gradients. If we can use only images for the icons and pattern it will be great ... I made some tests and the gradients work very nice on first look. Thanks in advance

Comment 18

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

(In reply to arnau from comment #15)
Hey Arnau,
sure I will do this with images for now ... and just tried to finish this when I have more time. 10x :)

Comment 19

[Sergi]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #17)
> Hey Sergi,
> thanks for the update ... can we extract the black/white pattern of noise
> for the headers? I work on this bug and I try to use only css gradients. If
> we can use only images for the icons and pattern it will be great ... I made
> some tests and the gradients work very nice on first look. Thanks in advance

Done. I've removed that from the CC file and updated it in the wiki. Let me know if it's that what you needed.

Comment 20

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

Attachment: noise pattern

(In reply to Sergi from comment #19)
Hey Sergi :) thanks for update ... I just crate the pattern can you check it and see if this one is ok? I will attach also the result with this pattern

Comment 21

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

Attachment: the result with pattern and background image with gradient

Comment 22

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Attachment: diff to Pavel's patch

Pavel, I've been checking with Sergi common controls document and for dark skin subheader was not defined. I have added a diff file so it's easier to tell you what should change.
I have also added font-weight for H1, as it seems it was removed with the font-family change.
Thanks!

Comment 23

[Sergi]

Pavel, take a look to the update from Arnau. I think the minor updates he's proposing will let us close this bug.

Thanks!

Comment 24

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

Hey Arnau, 
thanks for the feedback :) I applied the changes it's ready for r+ again.

Comment 26

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Pavel, looks great! just one last thing I've noticed in music app, there are no images "separator.png" for "skin-dark" and "skin-organic", so the right buttons in both skins show the orange image. As soon as you have that will be ready for r+. Thanks!

Comment 27

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

Hey, Arnau :) 10x for the feedback ... I think now the patch is ready ... I also add separator for dark and organic headers.

Comment 28

[Arnau March [:arnau] ( not working in Firefox OS anymore :( )]

Comment on attachment 754264 [details]
patch for Gaia repo

Pavel, that looks great! Please merge your patch.
Arnau

Comment 29

[Eric Pang [:epang] UX]

This is ready for review Naoki, thanks!

Comment 30

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

Landed in master: 
https://github.com/mozilla-b2g/gaia/commit/adca6e9420481bef464094395f58464fe3ac5788

Comment 31

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

the new accounts when the email app first launches and the side bar for calendar seem to show the discrepancy still.

Should I file 2 separate bugs as follow up to this bug?

Comment 32

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

Hey Naiki,
I think this is another bug (new bug will be great) but if you could share a screenshot will be best :) because I can reproduce it.
Thanks :)

Comment 33

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

Not too sure if I see the eMail first launch being different.  I still see the Calendar side bar being different.

Filed Bug 885925 as follow up.