UI Design of "Properly display about template type (local or, remote) using icon or text information"

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

Yu Xin Huo

tags

participants (1)