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');
    });
};