| mwilliams | |
| Aug 7 2020, 5:20 PM |
| F32378067: image.png | |
| Oct 8 2020, 9:23 AM |
| F32193869: volumeLow.svg | |
| Aug 24 2020, 6:08 PM |
| F32193843: volume_icons.png | |
| Aug 24 2020, 6:08 PM |
| F32193868: volumeOff.svg | |
| Aug 24 2020, 6:08 PM |
| F32191006: image.png | |
| Aug 21 2020, 12:14 PM |
| F32051505: volumeUp-ltr.svg | |
| Aug 11 2020, 2:06 PM |
| F32051506: volumeUp-rtl.svg | |
| Aug 11 2020, 2:06 PM |
| F31985304: video_example.jpg | |
| Aug 7 2020, 10:05 PM |
The structured data team is looking to add an icon to help distinguish audio files in the new media search. We currently don't have anything in the icon library that quite meets our needs and would like to suggest an addition.
Example of the icon in use (the complete layout is not finalized but we expect to use the audio icon in this way):
Example of the icon in our icon template layout:
*Updated SVGs (LTR&RTL and SVGO optimized)*
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | AnneT | T258298 [S] Adding audio and video icons to search result design | |||
| Resolved | Volker_E | T259906 Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in Design Style Guide & OOUI |
Good point @Esanders, we were planning on using the "play" button for now but maybe there is something better. Happy to think on that.
Wow! Yes, please :) I need it for VideoJS player. All native icons need to be replaced T258584: Align VideoJS player to Wikimedia UI design. It is possible to create an icon in three versions: full volume, half volume, muted?
@mwilliams If we add additional icons (later) for it in place of volume buttons, this would be the equivalent of audioUp/volumeUp? Asking for naming agreeement.
Note https://material.io/resources/icons/?style=baseline
@Volker_E Following that naming scheme makes sense to me as it seems like we will probably be adding additional related icons in the future for the player. Between audio and volume, I think volume is probably a more accurate descriptor even if it's a bit odd and unrelated in my use case.
From a quick checkin with @Ladsgroup we're gonna mirror the icon in RTL languages. Compare for example
https://fa.wikipedia.org/wiki/%D8%A7%D9%84%DA%AF%D9%88:%D8%AA%D9%84%D9%81%D8%B8
@mwilliams I was a bit confused when I've opened the document and it was 20x16px document boundaries. Although you've shared the icon on the icon template correctly.
The canvas is always unchanged 20x20px to make the icon positioning in implementation more predictable.
Change 619473 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] icons: Add 'volumeUp'
Change 621711 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.40.2
It seems odd to have a "volumeUp" icon without a "volumeDown" one. Without other icons nearby, "volumeUp" just looks like "volume on". For volumeUp/Down icons that are less ambiguous you could use this style which I have on my keyboard:
Also the only use case so far for "volumeUp" is not "volume up" which makes the choice of name seem strange.
It seems odd to have a "volumeUp" icon without a "volumeDown" one. Without other icons nearby, "volumeUp" just looks like "volume on". For volumeUp/Down icons that are less ambiguous you could use this style which I have on my keyboard:
My preference is for the curved sound wave lines to indicate up and down since they can be also be used to denote maximum and minimum values, like when used on opposite ends of a volume slider control.
And actually, the volumeUp when used on its own in certain contexts serves to indicate volume/audio. So, naming conventions aside, it is comparatively more versatile (than volume +), and pretty widely used.
Change 621989 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[oojs/ui@master] Fix the removing of windows being broken by this scoping issue
Change 621989 merged by jenkins-bot:
[oojs/ui@master] Follow-up I669cfeeb: Fix the removing of windows being broken by this scoping issue
OOUI v0.40.2 got reverted due to an unrelated breakage. We'll plan to do a v0.40.3 release tomorrow which will then be the release containing 'volumeUp' icon.
Spent some time on what volumeDown and volumeOff could look like...
Contemplated having separate icons for off and mute like Material Design does, but couldn't come up with a use case for that. Off and mute should mean the same thing, correct? I don't feel like I have all the context on the new player design to be 100% though.
@Volker_E Still having some weird artboard sizing issues and some general svg confusion. Attaching the two new svg's in their current state here, maybe you can help me out here. Feel free to message me if these are way off and we can work through it together.
Change 623824 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.40.3
Change 621711 abandoned by Reedy:
[mediawiki/core@master] Update OOUI to v0.40.2
Reason:
Replaced by https://gerrit.wikimedia.org/r/c/mediawiki/core/ /623824
Change 632770 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] icons: Add 'volumeDown*' and 'volumeOff*' and optimize 'volumeUp' further
Change 632770 merged by jenkins-bot:
[oojs/ui@master] icons: Add 'volumeDown*' and 'volumeOff*' and optimize 'volumeUp' further
Change 632805 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.40.4
Can people upload it in commons? I tried uploading it but it's not working due to the libsvg bug (T193352#5984544)
Sorry, just saw T193352#5984600 so actually a libsvg bug. Not sure if investing in workarounds is worth the effort.
@mwilliams Last bit missing is to update the Design Style Guide's Illustrator collection with those files (correctly named and preferably source files).
@mwilliams added the icons to AI file in https://github.com/wikimedia/WikimediaUI-Style-Guide/pull/413
