Closed
Bug 1041916
Opened 10 years ago
Closed 10 years ago
Investigate status bar icon color changes for themes
Categories
(Firefox OS Graveyard :: Gaia::System, defect)
Tracking
(feature-b2g:2.1)
People
(Reporter: mikehenrty, Assigned: aus)
References
Details
(Keywords: uiwanted, Whiteboard: [systemsfe][tako])
Attachments
(2 files, 2 obsolete files)
In bug 1041625, we need to customize apps with different status bar colors. The problem is that icons are currently white, and these will be hard to see with certain status bar colors. We need to either: 1.) Use Icon Fonts 2.) Use SVG 3.) Have two different icon sets, one dark one light that we can transition between depending on the current status bar color
Reporter | ||
Comment 1•10 years ago
|
||
Aus, can do some sleuthing work for options 1 and 2 above? Ideally we would use Icon Fonts, so is there anything stopping us?
Flags: needinfo?(aus)
Updated•10 years ago
|
feature-b2g: --- → 2.1
Whiteboard: [systemsfe] → [systemsfe][tako]
Assignee | ||
Updated•10 years ago
|
Assignee: mhenretty → aus
Status: NEW → ASSIGNED
Assignee | ||
Comment 3•10 years ago
|
||
From the Icon Fonts in FxOS Thread: " We are using icon-fonts in some of the new web-component based building-blocks examples. I have created a gaia-icons repo so that our components can explicitly depend on these icons. Inside this repo we have all the source SVGs inside `images/`. A grunt task called grunt-webfont converts all these SVGs into a single icon-font. To add new icons, you simple have to drop new SVGs into the `images/` directory. Icon fonts are perfect for our themeability requirements as they can easily by styled with CSS. AFAIK SVGs cannot be colored/styled with CSS alone (but I don't know that much about SVG). We've been using icon-fonts in Camera for a while now and so far it's been great. I plan to move Camera to pull its icon-font from gaia-icons so that we can begin to move to toward a central icons store. IMO SVG and icon-fonts will always serve slightly difference use cases. But for simple icons, icon-fonts have always got the job done; allowing me to focus on the more important stuff :p W. " -- Repo is here: https://github.com/gaia-components/gaia-icons
Assignee | ||
Comment 4•10 years ago
|
||
Here's a list of what we have and don't have in the icon font: 'time' - No. Need AM/PM. 'battery' - Yes, but only 3 levels. We probably need more. 'wifi' - Yes, with all levels of signal. 'flight-mode' - Yes. 'connections' - No. Need 4G LTE(?), 3.5G, 3G, H, E, 1x. - this is a grouping of the SIM info. this includes the signal bar, the sim number, and the data connection type (3G, H, E, ect). 'headphones' - No. Need Headphones, Headset. 'bluetooth-headphones'- No. Need Headphones, Headset. 'bluetooth-transfering' - No. - indicates bluetooth transfer in progress 'tethering' - Yes. 'alarm' - Yes. 'bluetooth' - Yes. - indicates if bluetooth is on at all 'mute' - Yes. Speakerphone, Handset and Speaker. 'recording' - Yes. 'sms' - Yes. - not sure what is the purpose of this, right now it appears to be unused 'geolocation' - Yes. - indicates some app is currently using geolocation api 'usb' - Yes. 'call-forwadings' - No. - one for each sim, indicates call fowarding is setup for that sim 'playing' - Yes. - media is playing 'nfc' - Yes. - indicates nfc is turned on 'system-downloads' - Yes. Need a few different states to animate properly. - animation indicating we are downloading 'network-activity' - Yes. Need a few different states to animate properly. 'label' - No? - carrier and date label, not sure when this is used currently 'emergency-cb-notification' - No? - when you make an emergency call, you go into emergency callback mode so the network operator can call you or locate your device. this is the status icon for that 'notification' - Yes. 'signal-strength' - Yes. But need more states. Currently only have 100%. Need 75, 50, 25 and 0.
Assignee | ||
Comment 5•10 years ago
|
||
Who would be able to help creating the rest of the icons for the font? :swilkes, can you point me to the right person? :)
Flags: needinfo?(swilkes)
Keywords: uiwanted
Assignee | ||
Comment 6•10 years ago
|
||
The current iteration of the icons we use can be found here: https://github.com/mozilla-b2g/gaia/tree/master/apps/system/style/statusbar/images
Comment 7•10 years ago
|
||
Flagging Patryk on fonts to see if he knows who can help.
Flags: needinfo?(swilkes) → needinfo?(padamczyk)
Comment 8•10 years ago
|
||
Eric Pang owns that status bar. Eric, if you need help please work with Hung.
Flags: needinfo?(padamczyk) → needinfo?(epang)
Comment 9•10 years ago
|
||
Hung's going to help out with the icons. Aus, what format, size, etc do you need the assets in? Can you work with Hung so he knows what to provide? Thanks!
Flags: needinfo?(hnguyen)
Flags: needinfo?(epang)
Flags: needinfo?(aus)
Assignee | ||
Comment 10•10 years ago
|
||
Good question! Based on this file they should be 30x30: https://github.com/gaia-components/gaia-icons/blob/master/images/accessibility.svg And, we need to have all the icons, as present here: https://github.com/mozilla-b2g/gaia/tree/master/apps/system/style/statusbar/images (including what's in the sprite sheets). I don't think we need the on/off states though, we can set the opacity on the font (which is what we seem to be doing with the current icons in use in the font). Let me know if there's anything else I can help with, I'm auswerk on #gaia :)
Flags: needinfo?(aus)
Assignee | ||
Comment 11•10 years ago
|
||
Quick status update here, the icons are in the works and I've gotten some more pro tips from Wilson on usage and best practices. We do have some low risk performance issues associated with initial loading of the font but there are some known ways to work around them and there are patches in the works to permanently fix the issues. Once I have the new icons I'll be able to update the font and we'll be able to say this task is done. :)
Comment 12•10 years ago
|
||
Hi Aus Attached you'll find the following: 1. All status bar notification icons converted to SVG at 30x30 PX. 2. A guide explaining color usage, building special icons and opacity settings. Please let me know once you have something implemented and let me know if you have any questions! Thanks Hung
Flags: needinfo?(hnguyen)
Assignee | ||
Comment 13•10 years ago
|
||
Awesome! Thanks! Looks like we should be able to land the new icons for the icon-font this week then! I'll let you know if anything comes up but the source files look correct so it should be trivial. :)
Target Milestone: 2.1 S1 (1aug) → 2.1 S2 (15aug)
Assignee | ||
Comment 14•10 years ago
|
||
Hung, it looks like the roaming icon should probably just be the triangle instead of also having the full signal bars present, can you update just that icon and attach it to this bug? The others look visually correct to me.
Flags: needinfo?(hnguyen)
Comment 15•10 years ago
|
||
Thanks Aus - I've updated the roaming icon in the latest set. Can you please send me a screen cap of the implemented icon fonts once you're done? I have a small concern with the sharpness of them after scaling. Cheers!
Attachment #8466521 -
Attachment is obsolete: true
Flags: needinfo?(hnguyen) → needinfo?(aus)
Assignee | ||
Comment 16•10 years ago
|
||
Hung, I would've imagined the roaming icon to already be positioned like the no signal icon is in it's canvas. Right now we'd have to render the roaming icon at a different font size and try and position it on top of the signal strength. Whereas adding the no signal icon is just rendering the two icons exactly on top of each other. Does this make sense? Work to start using these icons will be in a different bug which I'll make sure you're CC'd on. :)
Flags: needinfo?(aus) → needinfo?(hnguyen)
Comment 17•10 years ago
|
||
My apologies Aus, for some reason, I thought you meant the roaming icon was to be replaced with just the triangle. I've updated the assets with the triangle in the correct location so it can just be dropped onto of the signal bar. Let me know if you need anything else. Cheers!
Attachment #8467788 -
Attachment is obsolete: true
Flags: needinfo?(hnguyen)
Assignee | ||
Comment 18•10 years ago
|
||
It's my first time trying to update an icon font, I hope it's not too terrible. :)
Attachment #8469703 -
Flags: review?(wilsonpage)
Comment 19•10 years ago
|
||
Comment on attachment 8469703 [details]
Pull Request - Update gaia-icons font with new icons required for status bar
Nice, we're almost there! Need to address:
- Duplicate 'airplane' and 'airplane-mode'. Please remove 'airplane-mode'.
- Duplicate 'alarm' and 'alarm-full'. Please choose favourite.
- `battery-00.svg` looks broken. Seems there is a stray rectangle stretching the canvas too big.
- Please remove previous `battery-` icons in favour of your more complete set.
- Duplicate 'notification' and 'notifications'. Please choose the most appropriate one.
- 'recording' icon appears to be a simple circle. If this can be achieved with CSS, is it required?
- 'signal-0' appears to be the same icon as 'close', is it required?
- 'sms' icon is duplicate of 'messaging' icon. Remove old 'sms.svg' if not required.
- Are we happy for the change to 'usb.svg' to replace all the old 'usb.svg' everywhere?
- 'mute.svg' icon changed from microphone to speaker. We cool with this?
- Rename 'emergency-call' to 'call-emergency'
- The following svg files were changed but appear visually the same. This is dangerous as some apps will already depend on existing icon size and canvas position:, is there good reason for this?
- play.svg
- vibrate.svg
- tethering.svg
- nfc.svg
- bluetooth.svg
Pleased you were able to build :)
Attachment #8469703 -
Flags: review?(wilsonpage)
Assignee | ||
Comment 20•10 years ago
|
||
Hung, could you answer these questions? - Are we happy for the change to 'usb.svg' to replace all the old 'usb.svg' everywhere? - 'mute.svg' icon changed from microphone to speaker. We cool with this? Also, it looks like the export for battery-000 is a little funky? - `battery-00.svg` looks broken. Seems there is a stray rectangle stretching the canvas too big. Thanks!
Flags: needinfo?(hnguyen)
Assignee | ||
Comment 21•10 years ago
|
||
(In reply to Wilson Page [:wilsonpage] from comment #19) > Comment on attachment 8469703 [details] > Pull Request - Update gaia-icons font with new icons required for status bar > > Nice, we're almost there! Need to address: > > - Duplicate 'airplane' and 'airplane-mode'. Please remove 'airplane-mode'. Done. > - Duplicate 'alarm' and 'alarm-full'. Please choose favourite. Done, kept alarm.svg. > - `battery-00.svg` looks broken. Seems there is a stray rectangle stretching > the canvas too big. Hopefully Hung can give me an svg source for which this doesn't happen. Stay tuned... > - Please remove previous `battery-` icons in favour of your more complete > set. Done. > - Duplicate 'notification' and 'notifications'. Please choose the most > appropriate one. Done. > - 'recording' icon appears to be a simple circle. If this can be achieved > with CSS, is it required? Indeed, seems like we don't need this. I will remove it for now. > - 'signal-0' appears to be the same icon as 'close', is it required? We will require signal-0 to overlay on top of signal-5 (it's already positioned for this). > - 'sms' icon is duplicate of 'messaging' icon. Remove old 'sms.svg' if not > required. Removed sms.svg. > - Are we happy for the change to 'usb.svg' to replace all the old 'usb.svg' > everywhere? Asked Hung to provide an answer there. > - 'mute.svg' icon changed from microphone to speaker. We cool with this? Ditto. > - Rename 'emergency-call' to 'call-emergency' Done. I also renamed emergency-callback to callback-emergency so that all call related things end-up grouped together. > - The following svg files were changed but appear visually the same. This is > dangerous as some apps will already depend on existing icon size and canvas > position:, is there good reason for this? > - play.svg > - vibrate.svg > - tethering.svg > - nfc.svg > - bluetooth.svg There's no good reason for this. :) I reverted back to the original versions. When I get answers from Hung I'll make one more update to the PR.
Assignee | ||
Comment 22•10 years ago
|
||
(In reply to Ghislain Aus Lacroix [:aus] from comment #20) > Also, it looks like the export for battery-000 is a little funky? > - `battery-00.svg` looks broken. Seems there is a stray rectangle stretching > the canvas too big. I was able to fix this by editing the svg source file and remove the extra rects and removing one level of nested <g> (since we had <g><g><path> instead of <g><path>).
Assignee | ||
Comment 23•10 years ago
|
||
Comment on attachment 8469703 [details]
Pull Request - Update gaia-icons font with new icons required for status bar
Looking great! Now waiting on answers from Hung only.
Attachment #8469703 -
Flags: review?(wilsonpage)
Comment 24•10 years ago
|
||
(In reply to Ghislain Aus Lacroix [:aus] from comment #22) > I was able to fix this by editing the svg source file and remove the extra > rects and removing one level of nested <g> (since we had <g><g><path> > instead of <g><path>). Have you tried https://github.com/svg/svgo? It does a great job in reducing the size of SVG (using techniques like merging paths...) while maintaining the same appearance. I'm not familiar with icon fonts, but I guess that can have an impact on the generated font size too.
Comment 25•10 years ago
|
||
(In reply to gmarty from comment #24) > Have you tried https://github.com/svg/svgo? It does a great job in reducing > the size of SVG (using techniques like merging paths...) while maintaining > the same appearance. > I'm not familiar with icon fonts, but I guess that can have an impact on the > generated font size too. This looks great! I'll see if we can use it to simplify our SVGs. We are already using Grunt to create the font, so we could add this as a Grunt task.
Comment 26•10 years ago
|
||
Comment on attachment 8469703 [details]
Pull Request - Update gaia-icons font with new icons required for status bar
Looks good now, I'll give this a conditional r+:
- 'wifi-5' now looks redundant, shall we remove?
- Curious to know why 'battery-charging' is designed to be overlaid but 'battery-uknown' is an entire icon. Should we be consistent here?
- Full log of what was Added, Removed and Changed to add to Github Release changelog
Attachment #8469703 -
Flags: review?(wilsonpage) → review+
Comment 27•10 years ago
|
||
(In reply to Ghislain Aus Lacroix [:aus] from comment #20) > Hung, could you answer these questions? > > - Are we happy for the change to 'usb.svg' to replace all the old 'usb.svg' > everywhere? > - 'mute.svg' icon changed from microphone to speaker. We cool with this? > > Also, it looks like the export for battery-000 is a little funky? > - `battery-00.svg` looks broken. Seems there is a stray rectangle stretching > the canvas too big. > > Thanks! Sorry for delay. Regarding the mute and USB icons, they were updated by Eric P. so I believe its the direction moving forward. I believe Aus has fixed the battery issue.
Flags: needinfo?(hnguyen)
Comment 28•10 years ago
|
||
> - Curious to know why 'battery-charging' is designed to be overlaid but
> 'battery-uknown' is an entire icon. Should we be consistent here?
Hey Wilson,
I'll try to answer this but due to the nature of the charging state (it has a transparent underlay plus the charging icon is a different color), I thought it would be best to reuse and combine elements. You can see what I mean by looking at the guide in the zip file.
The unknown state on the other hand is a single element with no opacity or color changes.
Comment 29•10 years ago
|
||
Cool that makes sense Hung. I'm happy to merge this as soon as we have the other changes in comment 26 done :)
Assignee | ||
Comment 30•10 years ago
|
||
(In reply to Wilson Page [:wilsonpage] from comment #26) > Comment on attachment 8469703 [details] > Pull Request - Update gaia-icons font with new icons required for status bar > > Looks good now, I'll give this a conditional r+: > > - 'wifi-5' now looks redundant, shall we remove? It sure does, off with it's head! > - Curious to know why 'battery-charging' is designed to be overlaid but > 'battery-uknown' is an entire icon. Should we be consistent here? We're all in agreement here. :) Thanks for the reply Hung. > - Full log of what was Added, Removed and Changed to add to Github Release > changelog Yep, I can make one of those. Do you have a template or format or something you like to follow? I've updated the PR with the last set of requested changes. We're ready to merge I think.
Comment 31•10 years ago
|
||
Comment on attachment 8469703 [details] Pull Request - Update gaia-icons font with new icons required for status bar Landed and 'v0.5.0' version stamped: https://github.com/gaia-components/gaia-icons/releases/tag/v0.5.0
Comment 32•10 years ago
|
||
New icons can be viewed in live demo [1]. [1] http://gaia-components.github.io/gaia-icons/
Comment 33•10 years ago
|
||
We'll need an issue to update gaia/shared/elements/gaia-icons when we're ready.
Assignee | ||
Comment 34•10 years ago
|
||
Changelog --------- Added ----- 2g, 3g, 4g - connectivity indicators edge, gsm, hspa, hspa-plus - data connectivity indicators battery-00..battery-10 - battery charge levels battery-charging - battery charging overlay battery-unknown - battery state unknown bluetooth-a2dp - bluetooth audio bluetooth-transfer - bluetooth file transfer call-emergency - emergency call call-forwarding - call forwarding state callback-emergency - emergency callback gps - gps state headphones - headphones connected state no-sim - no sim card present signal-1..signal-5 - signal strength levels signal-roaming - roaming state Updated ------- alarm - new design mute - new design notifications - new design usb - new design wifi-1..wifi-4 - new design Removed ------- alarm-full - in favor of updated alarm icon battery-low, battery-very-low, battery - in favor of new battery icons sms - removed in favor of messages icon wifi-5 - redundant because of new wifi icons Font files updates and example page.
Assignee | ||
Comment 35•10 years ago
|
||
I filed a follow-up to land these icons into shared elements when we're ready to do that. For now, we can install the font locally into the system app instead -- "bower install gaia-components/gaia-icons". Marking this as resolved! We have the new fonts in the main gaia-icons repo, new font files, the works!
Comment 36•10 years ago
|
||
I was able to verify the icons on Comment 34, EXCEPT the following due to limitations: 2g, 3g, 4g - connectivity indicators edge, gsm, hspa, hspa-plus - data connectivity indicators battery-unknown - battery state unknown bluetooth-transfer - bluetooth file transfer >> Unable to verify on 2.2 due to bug 1065999. Cannot transfer files via bluetooth. call-emergency - emergency call callback-emergency - emergency callback ---------------------------------------------- Also verified the status bar icon color changes according to themes on Flame 2.1 and Flame 2.2: Flame 2.2 KitKat Base (319mb)(Full Flash) Environmental Variables: Device: Flame 2.2 Master BuildID: 20141007040205 Gaia: 83de447d9ae9a59459d7a445f9348a254c661850 Gecko: 9ee9e193fc48 Gonk: 2c909e821d107d414f851e267dedcd7aae2cebf Version: 35.0a1 (2.2 Master) Firmware: V180 User Agent: Mozilla/5.0 (Mobile; rv:35.0) Gecko/35.0 Firefox/35.0 Flame 2.1 KitKat Base (319mb)(Full Flash) Environmental Variables: Device: Flame 2.1 BuildID: 20141007000203 Gaia: 7f738edf66b9298bceef8a4981d05d04fd04e540 Gecko: b9d04c58580a Gonk: 2c909e821d107d414f851e267dedcd7aae2cebf Version: 34.0a2 (2.1) Firmware: V180 User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0
QA Whiteboard: [QAnalyst-Triage?][failed-verification]
Flags: needinfo?(ktucker)
Comment 37•10 years ago
|
||
We're unable to verify the icons listed above, and would need someone else to verify.
QA Whiteboard: [QAnalyst-Triage?][failed-verification] → [QAnalyst-Triage?][QAnalyst-verify-]
Updated•10 years ago
|
QA Whiteboard: [QAnalyst-Triage?][QAnalyst-verify-] → [QAnalyst-Triage+][QAnalyst-verify-]
Flags: needinfo?(ktucker)
Comment 38•10 years ago
|
||
(In reply to Yeojin Chung [:YeojinC] from comment #36) > I was able to verify the icons on Comment 34, EXCEPT the following due to > limitations: > > 2g, 3g, 4g - connectivity indicators > edge, gsm, hspa, hspa-plus - data connectivity indicators > battery-unknown - battery state unknown > bluetooth-transfer - bluetooth file transfer >> Unable to verify on 2.2 due > to bug 1065999. Cannot transfer files via bluetooth. > call-emergency - emergency call > callback-emergency - emergency callback > Yeojin, can you try again? bug 1065999 landed a day ago. Also, some of these should appear for your SIM like edge, hspa+. you might need a different SIM card.
Flags: needinfo?(ychung)
Comment 39•10 years ago
|
||
> Yeojin, can you try again? bug 1065999 landed a day ago. Also, some of
> these should appear for your SIM like edge, hspa+. you might need a
> different SIM card.
I was able to verify bluetooth-transfer(2.2), edge, and hspa. So here's the updated list that needs to be checked outside of Q Analysts:
2g, 3g, 4g - connectivity indicators
gsm, hspa-plus - data connectivity indicators
battery-unknown - battery state unknown
call-emergency - emergency call
callback-emergency - emergency callback
QA Whiteboard: [QAnalyst-Triage+][QAnalyst-verify-] → [QAnalyst-Triage?][QAnalyst-verify-]
Flags: needinfo?(ychung) → needinfo?(ktucker)
Comment 40•10 years ago
|
||
Also verified 3G icon. Here's the updated list: 2g, 4g - connectivity indicators gsm, hspa-plus - data connectivity indicators battery-unknown - battery state unknown call-emergency - emergency call callback-emergency - emergency callback
Updated•10 years ago
|
QA Whiteboard: [QAnalyst-Triage?][QAnalyst-verify-] → [QAnalyst-Triage+][QAnalyst-verify-]
Flags: needinfo?(ktucker)
You need to log in
before you can comment on or make changes to this bug.
Description
•