[pve-devel] [PATCH manager 4/5] Add icon for audio device

[Aaron Lauterer]

On 7/16/19 1:48 PM, Thomas Lamprecht wrote:
> On 7/15/19 3:34 PM, Aaron Lauterer wrote:
>> Signed-off-by: Aaron Lauterer <a.lauterer at proxmox.com>
>> ---
>>   www/images/Makefile       | 7 ++++---
>>   www/images/icon-audio.svg | 2 ++
>>   2 files changed, 6 insertions(+), 3 deletions(-)
>>   create mode 100644 www/images/icon-audio.svg
>>
>> diff --git a/www/images/Makefile b/www/images/Makefile
>> index b7e001f4..ac5ba7a4 100644
>> --- a/www/images/Makefile
>> +++ b/www/images/Makefile
>> @@ -16,8 +16,8 @@ all:
>>   
>>   # icon-ram, icon-cpu, icon-cd, icon-pci
>>   # are self made (sources as .xcf)
>> -# icon-swap, icon-display, icon-harddisk, icon-keyboard, icon-network, icon-usb, icon-cloud
>> -# come from fontawesome (respective fa-refresh, fa-desktop, fa-hdd-o, fa-keyboard-o, fa-exchange, fa-usb, fa-ellipsis-h, fa-cloud)
>> +# icon-swap, icon-display, icon-harddisk, icon-keyboard, icon-network, icon-usb, icon-cloud, icon-audio
>> +# come from fontawesome (respective fa-refresh, fa-desktop, fa-hdd-o, fa-keyboard-o, fa-exchange, fa-usb, fa-ellipsis-h, fa-cloud, fa-volume-up)
>>   
>>   # icon-serial is a modified version of
>>   # https://commons.wikimedia.org/wiki/File:DE9_Diagram.svg
>> @@ -78,7 +78,8 @@ IMAGES = ${GNOME_IMAGES}	\
>>   	icon-serial.svg		\
>>   	icon-cloud.svg		\
>>   	icon-pci.png		\
>> -	icon-usb.png
>> +	icon-usb.png		\
>> +	icon-audio.svg
>>   
>>   .PHONY: install
>>   install: ${IMAGES}
>> diff --git a/www/images/icon-audio.svg b/www/images/icon-audio.svg
>> new file mode 100644
>> index 00000000..999322f1
>> --- /dev/null
>> +++ b/www/images/icon-audio.svg
>> @@ -0,0 +1,2 @@
>> +<?xml version="1.0" encoding="UTF-8"?>
>> +<svg width="1664" height="1472" viewBox="0 0 1664 1472" xmlns="http://www.w3.org/2000/svg"><path d="M768 192v1088q0 26-19 45t-45 19-45-19L326 992H64q-26 0-45-19T0 928V544q0-26 19-45t45-19h262l333-333q19-19 45-19t45 19 19 45zm384 544q0 76-42.5 141.5T997 971q-10 5-25 5-26 0-45-18.5T908 912q0-21 12-35.5t29-25 34-23 29-36 12-56.5-12-56.5-29-36-34-23-29-25-12-35.5q0-27 19-45.5t45-18.5q15 0 25 5 70 27 112.5 93t42.5 142zm256 0q0 153-85 282.5T1098 1207q-13 5-25 5-27 0-46-19t-19-45q0-39 39-59 56-29 76-44 74-54 115.5-135.5T1280 736t-41.5-173.5T1123 427q-20-15-76-44-39-20-39-59 0-26 19-45t45-19q13 0 26 5 140 59 225 188.5t85 282.5zm256 0q0 230-127 422.5T1199 1442q-13 5-26 5-26 0-45-19t-19-45q0-36 39-59 7-4 22.5-10.5t22.5-10.5q46-25 82-51 123-91 192-227t69-289-69-289-192-227q-36-26-82-51-7-4-22.5-10.5T1148 148q-39-23-39-59 0-26 19-45t45-19q13 0 26 5 211 91 338 283.5T1664 736z"/></svg>
>>
> 
> couldn't we just use existing font awesome icons, for example, "fa-volume-up"[0]
> or eventual candidates could also, be "fa-headphones", "fa-music".

This would indeed be a sensible thing to do. I looked into it and if I 
change the row configuration in `HardwareView.js` from
"tdCls: 'pve-itype-icon-audio'," to "iconCls: 'volume-up'," it does show 
the icon using font-awesome nicely.

The only downside is that the remove dialog shows the icon in the text:
 > Are you sure you want to remove entry '<icon> Audio Device'

This is because the remove dialog is calling the same `renderKey` 
function. My guess is that this has not been noticed yet as the 
`iconCls` property is used only by items that cannot be removed like 
BIOS or Memory. All the other hardware items use separate icons that are 
then handled with the `tdCls` property.

How should I proceed as we most likely do not want to have the icon in 
the middle of the remove dialog?

> 
> [0]: https://fontawesome.com/v4.7.0/icon/volume-up
>