[Design] Icon SVGs needed

[Jon Robson]

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)

[Amir E. Aharoni]

(And RTL versions for a lot of them.)

Post by Jon Robson
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)
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20141016/19fe4bc6/attachment.html>

[Trevor Parscal]

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 <

Post by Amir E. Aharoni
(And RTL versions for a lot of them.)
I have a bunch of icons in MobileFrontend that are in png format. I

Post by Jon Robson
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)
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20141016/18ad13df/attachment.html>

[Jon Robson]

On Thu, Oct 16, 2014 at 1:16 PM, Amir E. Aharoni

Post by Amir E. Aharoni
(And RTL versions for a lot of them.)

+ 1000 :)

Post by Amir E. Aharoni

Post by Jon Robson
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)
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

[Brion Vibber]

On Thu, Oct 16, 2014 at 1:16 PM, Amir E. Aharoni <

Post by Amir E. Aharoni
(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

Post by Amir E. Aharoni
I have a bunch of icons in MobileFrontend that are in png format. I

Post by Jon Robson
want to move them all to use SVGs as part of the icon standardisation
work Trevor has been leading.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20141016/58d29bd5/attachment.html>

[Trevor Parscal]

We could TOTALLY add flipping. What a great idea.

- Trevor

Post by Trevor Parscal
On Thu, Oct 16, 2014 at 1:16 PM, Amir E. Aharoni <

Post by Amir E. Aharoni
(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

Post by Amir E. Aharoni
I have a bunch of icons in MobileFrontend that are in png format. I

Post by Jon Robson
want to move them all to use SVGs as part of the icon standardisation
work Trevor has been leading.

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20141016/73395d86/attachment.html>

[May Tee-Galloway]

Here's a screenshot of all the icons available on Wikifont
<Loading Image...>.

Looks like what's missing are the bytes removed, added, neutral icons.

Post by Trevor Parscal
On Thu, Oct 16, 2014 at 1:16 PM, Amir E. Aharoni <

Post by Amir E. Aharoni
(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

Post by Amir E. Aharoni
I have a bunch of icons in MobileFrontend that are in png format. I

Post by Jon Robson
want to move them all to use SVGs as part of the icon standardisation
work Trevor has been leading.

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20141016/b8265a0b/attachment.html>

[James Forrester]

​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-vector-ltr
for the icons); a quick match-up below:​

Post by Jon Robson
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

​"comment" maybe?​

Post by Jon Robson
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')

Post by Jon Robson
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"​

Post by Jon Robson
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?

Post by Jon Robson
down arrow (used for a collapsed section)

​"expand" or "down" (same icon)​

Post by Jon Robson
up arrow ( used for open collapsed section)

"collapse" or ​"up"​ (same icon)

Post by Jon Robson
back icon ( a left arrow)

​"previous"​

Post by Jon Robson
previous icon ( a left arrow used in photo upload overlay tutorial
and other screens where you slide between them)

​"previous" too?​

Post by Jon Robson
next icon (a right arrow used in photo upload overlay tutorial and
other screens where you slide between them)

​"next"​

Post by Jon Robson
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.

[S Page]

Post by Jon Robson
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 :-))

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.

Post by Jon Robson
​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-vector-ltr
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

Post by Jon Robson
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)
_______________________________________________
Design mailing list
https://lists.wikimedia.org/mailman/listinfo/design

[Jon Robson]

Post by S Page
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.

[Jon Robson]

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

Post by Jon Robson

Post by S Page
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.

[S Page]

Post by S Page
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)

Post by S Page
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

[Andre Klapper]

Post by Jon Robson
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_Graphics
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

[Andre Klapper]

I see. Thanks.

I have added one task to the "UI/Design" section at
https://www.mediawiki.org/w/index.php?title=Google_Code-in_2014&diff=1254557&oldid=1254446
that Jared was kind enough to mentor.

Still we really need 3 more UI/design related task until Sunday (we can
still polish descriptions and expectations/skill requirements until
December 1st when the contest starts).

There are 13 tasks marked with "design" & "easy" keywords in Bugzilla:
https://bugzilla.wikimedia.org/buglist.cgi?bug_status=UNCONFIRMED&bug_status=NEW&bug_status=REOPENED&keywords=design,easy&keywords_type=allwords&query_format=advanced

Could anybody please take a quick look at that list and tell me
candidates and potential mentors? (Obviously mentoring in a team
decreases the workload for everybody.)

Or could some of the open dependency tickets of
https://bugzilla.wikimedia.org/show_bug.cgi?id=32101
("High-density display issues") be good tasks? A generic "pick one
ticket from that list & fix it" task which could be added several times?

I'm happy to copy suitable tasks to the planning wiki page for you!

Thank you for your help to reach out to some new contributors!

andre

Not really.. it's actually more messy than it seems and I think it
would be more effort to help someone understand the requirements. :-/

Post by Andre Klapper

Post by Jon Robson
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_Graphics
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
--
Andre Klapper | Wikimedia Bugwrangler
http://blogs.gnome.org/aklapper/