Make themed icons for each of the dashboards

NEW
Assigned to

Status

()

bugzilla.mozilla.org
Bugzilla Anthropology Metrics
3 years ago
2 years ago

People

(Reporter: ekyle, Assigned: Orieka Ojougboh, Mentored)

Tracking

Production
x86_64
Windows 7

Details

(Whiteboard: [good first bug] [lang=HTML])

(Reporter)

Description

3 years ago
Dear new contributor:

Working on charts.mozilla.org has the benefit of being highly visible to Mozilla.  When you contribute here, you are helping the FxOS team build a high quality product.  FxOS is part of Mozilla's strategy to keep the web open and promote the Mozilla Mission (https://www.mozilla.org/en-US/mission/).  

For this bug, we need distinctive images for each of the dashboards (Nominations, Blockers and Regressions at a minimum)  Even though the images are distinctive, they must share a common theme; hopefully something that conforms to the FxOS branding (see below).  If you are someone that knows the tools required to make these images, we need your help.


Production:
> http://charts.mozilla.org/
Code:
> https://github.com/mozilla/charts
Docs:
> https://wiki.mozilla.org/Auto-tools/Projects/Charts
Branding:
> https://www.mozilla.org/en-US/styleguide/identity/firefox/branding/
More on Good First Bugs:
> https://developer.mozilla.org/en/docs/Introduction


You can contact me on irc at ekyle@mozilla.org; and you can find me in the #ateam channel with the rest of my team.



See bug 1030913.
(Reporter)

Updated

3 years ago
Whiteboard: [good first bug] [lang=HTML]
Kyle, is this bug still needed?  I want to ensure that with the latest codebase you haven't fixed this or removed the need for it.  Also this bug needs a mentor set :)
Flags: needinfo?(klahnakoski)
(Reporter)

Comment 2

3 years ago
This bug is still relevant.  With multiple tabs open, the icons are the only distinguishing feature:  Without them it is very annoying to click on each to see which is which.
Mentor: klahnakoski@mozilla.com
Flags: needinfo?(klahnakoski)
Hey, 
I want to fix the bug. Can you please tell me what I need to do ?
Flags: needinfo?(klahnakoski)
(Reporter)

Comment 4

2 years ago
Certainly!  

I assume you have some artistry in you, because most of the work here is drawing the required icons.  There is also learning Git and the Github process.

Use your Github account to fork the charts repo (https://github.com/mozilla/charts.git)
Clone your fork locally, and checkout the `dev` branch:
> git clone https://github.com/yourusername/charts.git
> git checkout dev

Change the icon for the *.html pages in charts/fxos, the most important are:

> charts/fxos/blockers.html
> charts/fxos/nominations.html
> charts/fxos/regressions.html
> charts/fxos/team.html
> charts/fxos/overall.html

You simply need to add a line like
> <link rel="shortcut icon" href="./images/test.png" type="image/x-icon" />

to the header section of each page.  Your completed images should be located in 
> charts/fxos/images

When you are ready, you can make a `pull request`.

If you have any questions about these steps, please ask.  I will be hard to get a hold of the rest of today, so forgive me my next response takes longer.
Flags: needinfo?(klahnakoski)

Comment 5

2 years ago
Hi Kyle!
From @Atique Ahmed Ziad, I just came to know that this bug is about designing. So far i understood that charts.mozilla.org has some categories like Nomination, Blockers etc which need individual icons. If I'm right then i can create icons for those categories.
(Reporter)

Comment 6

2 years ago
(In reply to salmanrahmandesh from comment #5)
> If I'm right then i can create icons for those categories.

Yes, you are correct.  The most important part of this bug is the icon design, which must match the theme of the pages they are representing, or match the Mozilla theme in general [1].  Yet, still be mutually distinctive.  If you have some artistic talent in you, I would appreciate your help.

[1] https://www.mozilla.org/en-US/styleguide/identity/firefox/branding/

Comment 7

2 years ago
Yeap I got your point. But need some more info for designing icons like which type of icons are required? Icons can be in flat icon, one color flat icon, versatile color icon. And also need some short description for each category to brainstorm icon moke-up and then implement it with perfect design and color. You can provide me a boilerplate contains all categories short descriptions. Thank you. Regards.
(Reporter)

Comment 8

2 years ago
First, the canonical page, blockers [1].  I hope you are able to view this; use Firefox, or Chrome (with experimental Javascript enabled).  You should see many colored tiles with numbers in each.  For the Blockers, the big number indicates the number of bugs that must be resolved before the given version can be released.  Clicking on a tile will open Bugzilla and list those blockers.

Regressions [2] are also bugs. They point to features that formerly worked, but no longer.  In a way, they measure the project moving backwards.  These bugs are usually given higher priority because it is bad to move backwards.

Nominations are bugs that are awaiting triage.  The triage process involves looking at the bug a determining if it is a blocker, or if it can be given a lower priority and worked on later.   

[1] http://charts.mozilla.org/fxos/blockers.html
[2] http://charts.mozilla.org/fxos/regressions.html
[3] More on Triage: https://wiki.mozilla.org/B2G/Triage
[4] More on Triage: https://wiki.mozilla.org/Firefox_OS/Performance/Triage
(Assignee)

Comment 9

2 years ago
Hey Kyle,
I want to fix the bug. Can you please explain what I need to do?
(Reporter)

Comment 10

2 years ago
Orieka,

Thanks for offering!  There are two main parts to this bug.  The first is the icons, and the second is learning the Github patch submission process:

* Make your own branch of the `charts` repo
* Clone your branch to your local machine
* make some icons
* Commit your changes locally
* Push changes to `charts` repo

Bugzilla shows my email of you hover over my name, and you can find me as "ekyle" on irc.mozilla,org (in #ateam channel).
(Assignee)

Comment 11

2 years ago
what application should i use to design the icons?
(Reporter)

Comment 12

2 years ago
I am agnostic about the what you use to design the icons.  If you are looking for Free; then the Gimp may be good enough: It is for photo editing, but it does have some very primitive drawing tools.   The icons are 32pixels by 32pixels, so even Microsoft Paint may be suitable.

I will assign you to the bug so no one else takes it.


thanks!
(Reporter)

Updated

2 years ago
Assignee: nobody → oriekaojougboh
(Assignee)

Comment 13

2 years ago
thanks Kyle,
Can i change the platform to Mac OS X, or does it have to be Windows 7?
Hey Orieka, 

No need to change it. It's not a problem :) it's the platform where the bug has been found & tested by bug reporter.
(Assignee)

Comment 15

2 years ago
thanks Atique
(Assignee)

Comment 16

2 years ago
Hi, kyle
I've created the icons but im having problems adding them to the charts/fxos/images folder
Hi Orieka, 

Great! Can you tell more specifically where have you stuck & what wrong is happening ?  

You can follow comment 4 for further instruction for adding them in the folder. 
Let's know where you get stuck :)
(Reporter)

Comment 18

2 years ago
I assume you have the images in the correct directory on your local machine:

Did you fork the repo (rather than clone it?)
Did you add the mozilla/charts repo as an `upstream` repo?
You can not push to mozilla/charts, but you should be bale to see "create a pull request" on your github page.

You may email me directly so we resolve configuration and setup outside this bug.
(Assignee)

Comment 19

2 years ago
Hi kyle,
Ive solved the problem. Ive created a pull request.
You need to log in before you can comment on or make changes to this bug.