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

[Aaron Lauterer]

On 7/16/19 3:43 PM, Aaron Lauterer wrote:
> 
> 
> 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?
> 

One possible way would be to set a property in the `metaData` object 
that is passed to the `renderKey` function to trigger a return value 
without the icon.


diff --git a/www/manager6/qemu/HardwareView.js 
b/www/manager6/qemu/HardwareView.js
index 09d5d41f..8d58fd3d 100644
--- a/www/manager6/qemu/HardwareView.js
+++ b/www/manager6/qemu/HardwareView.js
@@ -33,6 +33,9 @@ Ext.define('PVE.qemu.HardwareView', {
             icon = "<i class='pve-grid-fa fa fa-fw fa-" + iconCls + 
"'></i>";
             metaData.tdCls += " pve-itype-fa";
         }
+       if (metaData.pveIcon === false) {
+           return txt;
+       }
         return icon + txt;
      },

@@ -438,7 +439,7 @@ Ext.define('PVE.qemu.HardwareView', {

                 var entry = rec.data.key;
                 var msg = Ext.String.format(warn, "'"
-                   + me.renderKey(entry, {}, rec) + "'");
+                   + me.renderKey(entry, {'pveIcon': false}, rec) + "'");

                 if (entry.match(/^unused\d+$/)) {
                     msg += " " + gettext('This will permanently erase 
all data.');


>>
>> [0]: https://fontawesome.com/v4.7.0/icon/volume-up
>>
> 
> _______________________________________________
> pve-devel mailing list
> pve-devel at pve.proxmox.com
> https://pve.proxmox.com/cgi-bin/mailman/listinfo/pve-devel