I have a bunch of icons in MobileFrontend that are in png format. I want to move them all to use SVGs as part of the icon standardisation work Trevor has been leading.
1) Firstly are all of the icons I list below covered by the WikiFont ? 2) Secondly, how can I extract them (looks at Monte :-))
Icons inventory: [all black/grey unless stated] talk icon watch icon watched icon edit icon edit icon when locked home icon (a white house) random icon (a white dice) watchlist icon (a white star) uploads icon (a white cloud with an up arrow) nearby icon (white pin) cog icon (in white) logout icon (standby switch in white) profile icon (a face with a smile - but maybe this should be a person to be inline with desktop?) cancel icon ( a X button that is found in overlays) upload icon (a picture with a + icon) upload icon when locked (same as above but locked) clear icon (a small x which is used in search - should this be different from the close icon as it currently is the same) down arrow (used for a collapsed section) up arrow ( used for open collapsed section) back icon ( a left arrow) previous icon ( a left arrow used in photo upload overlay tutorial and other screens where you slide between them) next icon (a right arrow used in photo upload overlay tutorial and other screens where you slide between them) bytes added icon (a green box with an arrow pointed upwards) bytes removed icon (a red box with an arrow pointed downwards) bytes neutral icon ( grey box with right arrow ) anon icon (a white anonymous icon that appears when logged out when visiting the menu on mobile) camera icon ( a white camera)
(And RTL versions for a lot of them.) בתאריך 16 באוק 2014 23:09, "Jon Robson" jrobson@wikimedia.org כתב:
I have a bunch of icons in MobileFrontend that are in png format. I want to move them all to use SVGs as part of the icon standardisation work Trevor has been leading.
- Firstly are all of the icons I list below covered by the WikiFont ?
- Secondly, how can I extract them (looks at Monte :-))
Icons inventory: [all black/grey unless stated] talk icon watch icon watched icon edit icon edit icon when locked home icon (a white house) random icon (a white dice) watchlist icon (a white star) uploads icon (a white cloud with an up arrow) nearby icon (white pin) cog icon (in white) logout icon (standby switch in white) profile icon (a face with a smile - but maybe this should be a person to be inline with desktop?) cancel icon ( a X button that is found in overlays) upload icon (a picture with a + icon) upload icon when locked (same as above but locked) clear icon (a small x which is used in search - should this be different from the close icon as it currently is the same) down arrow (used for a collapsed section) up arrow ( used for open collapsed section) back icon ( a left arrow) previous icon ( a left arrow used in photo upload overlay tutorial and other screens where you slide between them) next icon (a right arrow used in photo upload overlay tutorial and other screens where you slide between them) bytes added icon (a green box with an arrow pointed upwards) bytes removed icon (a red box with an arrow pointed downwards) bytes neutral icon ( grey box with right arrow ) anon icon (a white anonymous icon that appears when logged out when visiting the menu on mobile) camera icon ( a white camera)
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Maybe it would help if you could provide a screenshot or illustration of the current icons as well?
- Trevor
On Thu, Oct 16, 2014 at 1:16 PM, Amir E. Aharoni < amir.aharoni@mail.huji.ac.il> wrote:
(And RTL versions for a lot of them.) בתאריך 16 באוק 2014 23:09, "Jon Robson" jrobson@wikimedia.org כתב:
I have a bunch of icons in MobileFrontend that are in png format. I
want to move them all to use SVGs as part of the icon standardisation work Trevor has been leading.
- Firstly are all of the icons I list below covered by the WikiFont ?
- Secondly, how can I extract them (looks at Monte :-))
Icons inventory: [all black/grey unless stated] talk icon watch icon watched icon edit icon edit icon when locked home icon (a white house) random icon (a white dice) watchlist icon (a white star) uploads icon (a white cloud with an up arrow) nearby icon (white pin) cog icon (in white) logout icon (standby switch in white) profile icon (a face with a smile - but maybe this should be a person to be inline with desktop?) cancel icon ( a X button that is found in overlays) upload icon (a picture with a + icon) upload icon when locked (same as above but locked) clear icon (a small x which is used in search - should this be different from the close icon as it currently is the same) down arrow (used for a collapsed section) up arrow ( used for open collapsed section) back icon ( a left arrow) previous icon ( a left arrow used in photo upload overlay tutorial and other screens where you slide between them) next icon (a right arrow used in photo upload overlay tutorial and other screens where you slide between them) bytes added icon (a green box with an arrow pointed upwards) bytes removed icon (a red box with an arrow pointed downwards) bytes neutral icon ( grey box with right arrow ) anon icon (a white anonymous icon that appears when logged out when visiting the menu on mobile) camera icon ( a white camera)
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On Thu, Oct 16, 2014 at 1:16 PM, Amir E. Aharoni amir.aharoni@mail.huji.ac.il wrote:
(And RTL versions for a lot of them.)
+ 1000 :)
בתאריך 16 באוק 2014 23:09, "Jon Robson" jrobson@wikimedia.org כתב:
I have a bunch of icons in MobileFrontend that are in png format. I want to move them all to use SVGs as part of the icon standardisation work Trevor has been leading.
- Firstly are all of the icons I list below covered by the WikiFont ?
- Secondly, how can I extract them (looks at Monte :-))
Icons inventory: [all black/grey unless stated] talk icon watch icon watched icon edit icon edit icon when locked home icon (a white house) random icon (a white dice) watchlist icon (a white star) uploads icon (a white cloud with an up arrow) nearby icon (white pin) cog icon (in white) logout icon (standby switch in white) profile icon (a face with a smile - but maybe this should be a person to be inline with desktop?) cancel icon ( a X button that is found in overlays) upload icon (a picture with a + icon) upload icon when locked (same as above but locked) clear icon (a small x which is used in search - should this be different from the close icon as it currently is the same) down arrow (used for a collapsed section) up arrow ( used for open collapsed section) back icon ( a left arrow) previous icon ( a left arrow used in photo upload overlay tutorial and other screens where you slide between them) next icon (a right arrow used in photo upload overlay tutorial and other screens where you slide between them) bytes added icon (a green box with an arrow pointed upwards) bytes removed icon (a red box with an arrow pointed downwards) bytes neutral icon ( grey box with right arrow ) anon icon (a white anonymous icon that appears when logged out when visiting the menu on mobile) camera icon ( a white camera)
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On Thu, Oct 16, 2014 at 1:16 PM, Amir E. Aharoni < amir.aharoni@mail.huji.ac.il> wrote:
(And RTL versions for a lot of them.)
This reminds me -- in a lot of cases automatic flipping should be fine, is that something we want to integrate into the icon handling code?
(In some cases it may be necessary to specify separate ones, or specify that something should/should not be flipped, as well...)
-- brion
בתאריך 16 באוק 2014 23:09, "Jon Robson" jrobson@wikimedia.org כתב:
I have a bunch of icons in MobileFrontend that are in png format. I
want to move them all to use SVGs as part of the icon standardisation work Trevor has been leading.
We could TOTALLY add flipping. What a great idea.
- Trevor
On Thu, Oct 16, 2014 at 2:02 PM, Brion Vibber bvibber@wikimedia.org wrote:
On Thu, Oct 16, 2014 at 1:16 PM, Amir E. Aharoni < amir.aharoni@mail.huji.ac.il> wrote:
(And RTL versions for a lot of them.)
This reminds me -- in a lot of cases automatic flipping should be fine, is that something we want to integrate into the icon handling code?
(In some cases it may be necessary to specify separate ones, or specify that something should/should not be flipped, as well...)
-- brion
בתאריך 16 באוק 2014 23:09, "Jon Robson" jrobson@wikimedia.org כתב:
I have a bunch of icons in MobileFrontend that are in png format. I
want to move them all to use SVGs as part of the icon standardisation work Trevor has been leading.
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Here's a screenshot of all the icons available on Wikifont https://github.com/munmay/WikiFont/blob/master/Screenshot-current.png.
Looks like what's missing are the bytes removed, added, neutral icons.
On Thu, Oct 16, 2014 at 2:02 PM, Brion Vibber bvibber@wikimedia.org wrote:
On Thu, Oct 16, 2014 at 1:16 PM, Amir E. Aharoni < amir.aharoni@mail.huji.ac.il> wrote:
(And RTL versions for a lot of them.)
This reminds me -- in a lot of cases automatic flipping should be fine, is that something we want to integrate into the icon handling code?
(In some cases it may be necessary to specify separate ones, or specify that something should/should not be flipped, as well...)
-- brion
בתאריך 16 באוק 2014 23:09, "Jon Robson" jrobson@wikimedia.org כתב:
I have a bunch of icons in MobileFrontend that are in png format. I
want to move them all to use SVGs as part of the icon standardisation work Trevor has been leading.
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Of these, some close/perfect replicas are already available in the central set use in OOUI's MediaWiki theme (see https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/index.html#icons-mediawiki-v... for the icons); a quick match-up below:
On 16 October 2014 13:09, Jon Robson jrobson@wikimedia.org wrote:
I have a bunch of icons in MobileFrontend that are in png format. I want to move them all to use SVGs as part of the icon standardisation work Trevor has been leading.
- Firstly are all of the icons I list below covered by the WikiFont ?
- Secondly, how can I extract them (looks at Monte :-))
Icons inventory: [all black/grey unless stated] talk icon
"comment" maybe?
watch icon watched icon edit icon edit icon when locked home icon (a white house) random icon (a white dice) watchlist icon (a white star) uploads icon (a white cloud with an up arrow) nearby icon (white pin) cog icon (in white)
"advanced" (will need to be cast to 'invert')
logout icon (standby switch in white) profile icon (a face with a smile - but maybe this should be a person to be inline with desktop?) cancel icon ( a X button that is found in overlays)
"close"
upload icon (a picture with a + icon) upload icon when locked (same as above but locked) clear icon (a small x which is used in search - should this be different from the close icon as it currently is the same)
"close" again, maybe a different size if needed?
down arrow (used for a collapsed section)
"expand" or "down" (same icon)
up arrow ( used for open collapsed section)
"collapse" or "up" (same icon)
back icon ( a left arrow)
"previous"
previous icon ( a left arrow used in photo upload overlay tutorial and other screens where you slide between them)
"previous" too?
next icon (a right arrow used in photo upload overlay tutorial and other screens where you slide between them)
"next"
bytes added icon (a green box with an arrow pointed upwards) bytes removed icon (a red box with an arrow pointed downwards) bytes neutral icon ( grey box with right arrow ) anon icon (a white anonymous icon that appears when logged out when visiting the menu on mobile) camera icon ( a white camera)
J.
On Thu, Oct 16, 2014 at 1:09 PM, Jon Robson jrobson@wikimedia.org wrote:
I have a bunch of icons in MobileFrontend that are in png format. I want to move them all to use SVGs as part of the icon standardisation work Trevor has been leading.
- Firstly are all of the icons I list below covered by the WikiFont ?
- Secondly, how can I extract them (looks at Monte :-))
Yes, where are the canonical SVGs? * The gallery at the top of https://www.mediawiki.org/wiki/Design/WikiFont includes 51 File:Foo_icon.svgs
* https://commons.wikimedia.org/wiki/Category:Wikicons has 55 icons
* May's repo https://github.com/munmay/WikiFont shows 98 icons, adding the unlock icon, key icon, rocket icon, etc. and changes to icons e.g. the Contributions jigsaw icon is rotated 45 degrees. https://raw.githubusercontent.com/munmay/WikiFont/master/WikiFont-Glyphs.svg has a set of outlines for Unicode characters, but I think it's a derivative "created by FontPrep". So is the canonical representation the ttf file, or was that created from SVGs? README.md doesn't say.
Whatever the answer is, it belongs in https://www.mediawiki.org/wiki/Design/WikiFont
Jon's visual and semantic description is great, that together with CSS and Unicode value in a table somewhere would be very helpful.
James Forrester wrote
Of these, some close/perfect replicas are already available in the central set use in OOUI's MediaWiki theme (see https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/index.html#icons-mediawiki-v... for the icons); a quick match-up below:
Those (nifty) icons are different. Strokes don't have the one rounded corner, different trashcan, thinner settings gear, etc. There are several icons that aren't in WikIFont, like the caution triangle and help icons.
-- =S Page Features engineer
On Thu, Oct 16, 2014 at 1:09 PM, Jon Robson jrobson@wikimedia.org wrote:
I have a bunch of icons in MobileFrontend that are in png format. I want to move them all to use SVGs as part of the icon standardisation work Trevor has been leading.
- Firstly are all of the icons I list below covered by the WikiFont ?
- Secondly, how can I extract them (looks at Monte :-))
Icons inventory: [all black/grey unless stated] talk icon watch icon watched icon edit icon edit icon when locked home icon (a white house) random icon (a white dice) watchlist icon (a white star) uploads icon (a white cloud with an up arrow) nearby icon (white pin) cog icon (in white) logout icon (standby switch in white) profile icon (a face with a smile - but maybe this should be a person to be inline with desktop?) cancel icon ( a X button that is found in overlays) upload icon (a picture with a + icon) upload icon when locked (same as above but locked) clear icon (a small x which is used in search - should this be different from the close icon as it currently is the same) down arrow (used for a collapsed section) up arrow ( used for open collapsed section) back icon ( a left arrow) previous icon ( a left arrow used in photo upload overlay tutorial and other screens where you slide between them) next icon (a right arrow used in photo upload overlay tutorial and other screens where you slide between them) bytes added icon (a green box with an arrow pointed upwards) bytes removed icon (a red box with an arrow pointed downwards) bytes neutral icon ( grey box with right arrow ) anon icon (a white anonymous icon that appears when logged out when visiting the menu on mobile) camera icon ( a white camera)
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Yes, where are the canonical SVGs?
I would also like to know this. I think we need a single repository with all the icons in it. On the long term I expect we can just use OOJS but in the meantime I would recommend we should be working from the same place and using a git submodule to pull these icons in.
I will ask Trevor this tomorrow in the Frontend standards meeting.
It seems that we will have to put up with this pain until the MediaWiki ResourceLoader image module [1] has been built. Trevor estimates this is about a weeks worth of work away.
[1] https://gerrit.wikimedia.org/r/165922
On Wed, Oct 22, 2014 at 3:12 PM, Jon Robson jrobson@wikimedia.org wrote:
Yes, where are the canonical SVGs?
I would also like to know this. I think we need a single repository with all the icons in it. On the long term I expect we can just use OOJS but in the meantime I would recommend we should be working from the same place and using a git submodule to pull these icons in.
I will ask Trevor this tomorrow in the Frontend standards meeting.
Yes, where are the canonical SVGs?
From the card https://trello.com/c/rClBTMWE/26-wikifont-tracking ,
the 98 icons used by WikiFont and many more are for now on Dropbox, in https://www.dropbox.com/sh/s7w4aapo9gc6e1l/AAD6YWcBFjMt-vlouUNuY3xha
(Thanks May)
Jon wrote
using a git submodule to pull these icons in.
That's a great idea. The github project to build WikiFont (which I assume we'll still need for mobile apps), could reference the same submodule.
I updated https://www.mediawiki.org/wiki/Design/WikiFont with these plans and links.
-- =S Page Features engineer
On Thu, 2014-10-16 at 13:09 -0700, Jon Robson wrote:
I have a bunch of icons in MobileFrontend that are in png format. I want to move them all to use SVGs as part of the icon standardisation work Trevor has been leading.
That sounds like a good candidate to become a Google Code-in task?
We already have a stub for creating SVG files from last year at https://www.mediawiki.org/wiki/Google_Code-in_2014#User_Interface:_SVG_Graph... where you could define skill requirements to avoid bad results.
Anybody willing to mentor and spend 10min to quickly add a "generic" task until Sunday (we can polish later until December 1st!) under https://www.mediawiki.org/wiki/Google_Code-in_2014#Proposed_tasks linking to the appropriate resources and PNG files that a student can choose from?
andre