[Kimchi-devel] [PATCH] Add hover description to template type icons

[Aline Manera]

On 08/08/2014 10:31 AM, Crístian Viana wrote:
> The small icons on each template indicate whether they are local or
> remote but that may not be obvious to everyone.
>
> Show a description when the user hovers the mouse over the template icons
> indicating what they mean: local or remote template. Also, the same
> descriptive text will be shown in the icon's place if the browser is not
> able to load images.

I don't think a mouse hover with local/remote ISO will be useful.
Instead of that I thought in displaying the ISO path which can be more 
informative.
But when talking to Yu Xin, we identified this information (ISO path) 
should be always displayed as it is the main template information 
involved in the user's decision.
So we fall back to a big change in the templates tab view. The idea is 
display the templates in a list view (the same we did for networks and 
storage pools).
That way we can show more information to the user without the need to 
check the "Edit" dialog for it.
It is our first idea. But more suggestions are welcome.

>
> Signed-off-by: Crístian Viana <vianac at linux.vnet.ibm.com>
> ---
>   ui/js/src/kimchi.template_main.js | 2 ++
>   ui/pages/i18n.json.tmpl           | 2 ++
>   ui/pages/tabs/templates.html.tmpl | 2 +-
>   3 files changed, 5 insertions(+), 1 deletion(-)
>
> diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js
> index 3c8421d..ae3f290 100644
> --- a/ui/js/src/kimchi.template_main.js
> +++ b/ui/js/src/kimchi.template_main.js
> @@ -25,8 +25,10 @@ kimchi.doListTemplates = function() {
>                   var isLocal = /^\//.test(value['cdrom']);
>                   if(isLocal){
>                       value.location = "images/theme-default/icon-local.png";
> +                    value.iconDescription = i18n['KCHTMPL6004M'];
>                   }else{
>                       value.location = "images/theme-default/icon-remote.png";
> +                    value.iconDescription = i18n['KCHTMPL6005M'];
>                   }
>                   listHtml += kimchi.substitute(templateHtml, value);
>               });
> diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
> index f1478a7..8e6fcd6 100644
> --- a/ui/pages/i18n.json.tmpl
> +++ b/ui/pages/i18n.json.tmpl
> @@ -61,6 +61,8 @@
>   
>       "KCHTMPL6002M": "$_("It will take long time. Do you want to continue?")",
>       "KCHTMPL6003M": "$_("This will permanently delete the template. Would you like to continue?")",
> +    "KCHTMPL6004M": "$_("Local template")",
> +    "KCHTMPL6005M": "$_("Remote template")",
>   
>       "KCHHOST6001E": "$_("Unable to shut down system as there are some virtual machines running!")",
>   
> diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl
> index 7cf7fcd..4fe1d73 100644
> --- a/ui/pages/tabs/templates.html.tmpl
> +++ b/ui/pages/tabs/templates.html.tmpl
> @@ -50,7 +50,7 @@
>   
>               <div class="template-icon template-icon-position">
>                   <img alt="" src="{icon}">
> -                <img alt="" src="{location}" class="template-type-icon-position">
> +                <img alt="{iconDescription}" title="{iconDescription}" src="{location}" class="template-type-icon-position">
>               </div>
>               <div class="template-general template-title template-title-position">
>                   <h2 class="title" title="{name}">{name}</h2>