diff --git a/src/sao.less b/src/sao.less index ae29ad8077..52d4d4c206 100644 --- a/src/sao.less +++ b/src/sao.less @@ -164,6 +164,12 @@ button { margin-bottom: 5px; } } + & .form-image_ { + & img { + width: 4em; + height: 4em; + } + } & label { font-weight: normal; display: inline; diff --git a/src/view.js b/src/view.js index 4a66d6b380..1e4ce51ffc 100644 --- a/src/view.js +++ b/src/view.js @@ -1536,7 +1536,8 @@ var widget; switch (child.tagName) { case 'image': - // TODO + this._parse_image( + model, child, container, attributes); break; case 'separator': this._parse_separator( @@ -1621,6 +1622,11 @@ jQuery(node).children().each(_parse.bind(this)); return container; }, + _parse_image: function(model, node, container, attributes) { + var image = new Sao.View.Form.Image_(attributes); + this.state_widgets.push(image); + container.add(attributes, image); + }, _parse_separator: function(model, node, container, attributes) { var name = attributes.name; var text = attributes.string; @@ -2207,6 +2213,23 @@ } }); + Sao.View.Form.Image_ = Sao.class_(StateWidget, { + class_: 'form-image_', + init: function(attributes) { + Sao.View.Form.Image_._super.init.call(this, attributes); + this.el = jQuery('
', { + 'class_': this.class_ + }); + this.img = jQuery('', { + 'class': 'center-block' + }).appendTo(this.el); + Sao.common.ICONFACTORY.register_icon(attributes.name) + .done(function(url) { + this.img.attr('src', url); + }.bind(this)); + } + }); + Sao.View.form_widget_get = function(type) { switch (type) { case 'char':