[ADD] selection of image style in dialog

bzr revid: xmo@openerp.com-20130912112905-6skmq1umsyzcvthz

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

@@ -1,4 +1,3 @@
-@charset "utf-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
@@ -95,7 +94,7 @@ table.editorbar-panel td.selected {
   background-color: #b1c9d9;
 }
 
-.modal .image-preview {
+.modal .image-preview-container, .modal .image-preview {
   margin-bottom: 0.5em;
 }
 

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

@@ -83,7 +83,7 @@ table.editorbar-panel
     td.selected
         background-color: #b1c9d9
 
-.modal .image-preview
+.modal .image-preview-container, .modal .image-preview
     margin-bottom: 0.5em
 
 /* ---- RTE ---- */

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

@@ -552,14 +552,26 @@
             },
             'change input[type=file]': 'file_selection',
             'change input.url': 'preview_image',
+            'change select.image-style': 'preview_image',
             'click .existing-attachments a': 'select_existing',
         }),
         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 should follow setup of image style
                 this.set_image(el.getAttribute('src'));
             }
 
@@ -569,6 +581,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');
@@ -582,7 +595,10 @@
                 }, 0);
             }
             element.setAttribute('src', url);
-            this._super();
+            $(element.$).removeClass(this.image_styles.join(' '));
+            if (style) { element.addClass(style); }
+
+            return this._super();
         },
 
         /**
@@ -620,7 +636,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());
         },
 
         fetch_existing: function () {

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

@@ -76,10 +76,16 @@
         <t t-call="website.editor.dialog">
             <t t-set="title">Image:</t>
             <div>
-                <div>
+                <div class="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>
                 <form method="POST" action="/website/attach"
                       enctype="multipart/form-data"