[ADD] reintroduce image style selector

bzr revid: xmo@openerp.com-20130913152308-j250t5ns7iaz6w2n

addons/website/static/src/css/editor.css

@@ -119,6 +119,10 @@ table.editorbar-panel td.selected {
   left: 0;
 }
 
+.modal .image-preview {
+  margin-bottom: 0.5em;
+}
+
 /* ---- SNIPPET EDITOR ---- */
 #oe_snippets {
   position: fixed;

addons/website/static/src/css/editor.sass

@@ -111,6 +111,8 @@ table.editorbar-panel
         top: 0
         left: 0
 
+.modal .image-preview
+    margin-bottom: 0.5em
 
 /* ---- SNIPPET EDITOR ---- */
 

addons/website/static/src/js/website.editor.js

@@ -592,13 +592,25 @@
             'change input[type=file]': 'file_selection',
             'change input.url': 'preview_image',
             'click a[href=#existing]': 'browse_existing',
+            'change select.image-style': 'preview_image',
         }),
         start: function () {
             var selection = this.editor.getSelection();
             var el = selection && selection.getSelectedElement();
             this.element = null;
+
+            var $select = this.$('.image-style');
+            var $options = $select.children();
+            this.image_styles = $options.map(function () { return this.value; }).get();
+
             if (el && el.is('img')) {
                 this.element = el;
+                _(this.image_styles).each(function (style) {
+                    if (el.hasClass(style)) {
+                        $select.val(style);
+                    }
+                });
+                // set_image must follow setup of image style
                 this.set_image(el.getAttribute('src'));
             }
 
@@ -606,6 +618,7 @@
         },
         save: function () {
             var url = this.$('input.url').val();
+            var style = this.$('.image-style').val();
             var element, editor = this.editor;
             if (!(element = this.element)) {
                 element = editor.document.createElement('img');
@@ -619,7 +632,10 @@
                 }, 0);
             }
             element.setAttribute('src', url);
-            this._super();
+            $(element.$).removeClass(this.image_styles.join(' '));
+            if (style) { element.addClass(style); }
+
+            return this._super();
         },
 
         /**
@@ -657,7 +673,10 @@
             var image = this.$('input.url').val();
             if (!image) { return; }
 
-            this.$('img.image-preview').attr('src', image);
+            this.$('img.image-preview')
+                .attr('src', image)
+                .removeClass(this.image_styles.join(' '))
+                .addClass(this.$('select.image-style').val());
         },
 
         browse_existing: function (e) {

addons/website/static/src/xml/website.editor.xml

@@ -110,10 +110,16 @@
                     </div>
                     <input type="hidden" name="func"/>
                 </form>
-                <div class="col-sm-4">
+                <div class="col-sm-4 image-preview-container">
                     <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D"
                          class="pull-right img-rounded image-preview"
                          width="100%"/>
+                    <select class="form-control image-style">
+                        <option value="">No styling</option>
+                        <option value="img-rounded">Rounded corners</option>
+                        <option value="img-thumbnail">Box</option>
+                        <option value="img-circle">Circle</option>
+                    </select>
                 </div>
             </div>
             <iframe src="about:blank" name="fileframe" class="hidden"/>