[Kimchi-devel] UI Design of "Properly display about template type (local or remote) using icon or text information"
Yu Xin Huo
huoyuxin at linux.vnet.ibm.com
Tue Jun 3 10:17:48 UTC 2014
Use the original icon when creating template to indicate whether it is
remote or local.
As shao he is new about UI stuff, tips below for reference.
_%kimchi-home%/ui/pages/tabs/templates.html.tmpl_
put an img tag after VM icon, use css 'position', 'width', 'height' to
control the size and position of the image.
<div class="template-icon template-icon-position">
<img alt="" src="{icon}">
/<img alt="" src="{location}" style="width: 20px; height: 20px;
position: relative; top: -15px; left: 47px;">/
</div>
_%kimchi-home%/ui/js/src/kimchi.template_main.js_
differentiate template is local or remote.
kimchi.doListTemplates = function() {
kimchi.listTemplates(function(result) {
if (result && result.length) {
$('#noTemplates').hide();
var listHtml = '';
var templateHtml = $('#templateTmpl').html();
$.each(result, function(index, value) {
/ if(isLocal){ //seek for some way to differentiate
local or remote//
// value.location =
"images/theme-default/icon-local.png";//
// }else{//
// value.location =
"images/theme-default/icon-remote.png";//
// }/
listHtml += kimchi.template(templateHtml, value);
});
$('#templateList').html(listHtml);
kimchi.templateBindClick();
} else {
$('#templateList').html('');
$('#noTemplates').show();
}
$('html').removeClass('processing');
}, function(err) {
kimchi.message.error(err.responseJSON.reason);
$('html').removeClass('processing');
});
};
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140603/81ed4358/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: cgidacfj.png
Type: image/png
Size: 59108 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140603/81ed4358/attachment.png>
More information about the Kimchi-devel
mailing list