[IMP] website media editor: change template

bzr revid: chm@openerp.com-20140327160324-yb1cwpsgqymxsf83

4 files changed, 211 insertions, 218 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 1256af59369..1f4e0aecfdb 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -180,7 +180,7 @@ ul.oe_menu_editor .disclose {
   cursor: text !important;
 }
 
-.modal-dialog.select-image {
+.modal-dialog.select-media {
   width: 80%;
 }
 
@@ -271,6 +271,10 @@ ul.oe_menu_editor .disclose {
   -webkit-border-bottom-right-radius: 8px;
   border-bottom-right-radius: 8px;
 }
+.existing-attachments .existing-attachment-cell.media_selected > i, .existing-attachments .existing-attachment-cell.media_selected > img {
+  border-width: 5px;
+  border-color: #00f8f8;
+}
 
 .cke_widget_wrapper {
   position: static !important;
@@ -301,16 +305,19 @@ ul.oe_menu_editor .disclose {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 1001;
 }
 
 .preview-container {
+  text-align: center;
+  line-height: 100px;
   height: 100px;
 }
 .preview-container > * {
   max-height: 100px;
+  line-height: 100px;
   margin: 0 auto;
-  display: block;
+  display: inline-block;
 }
 
 .cke_editable .fa {
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 4543fce4500..50f9b3e815e 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -150,7 +150,7 @@ ul.oe_menu_editor
     +user-select(auto)
     cursor: text !important
 
-.modal-dialog.select-image
+.modal-dialog.select-media
     width: 80%
 
 .modal .existing-attachments
@@ -232,6 +232,10 @@ $attachment-border-color: #848490
             border-top: none
             border-left: none
             +border-bottom-right-radius(8px)
+        &.media_selected
+            > i, > img 
+                border-width: 5px
+                border-color: rgb(0, 248, 248)
 
 // wrapper positioned relatively for drag&drop widget which is disabled below.
 // Breaks completely horribly crazy products listing page, so take it out.
@@ -264,14 +268,17 @@ $attachment-border-color: #848490
     position: absolute
     top: 0
     left: 0
-    // This z-index is due to .navbar of bootstrap
-    z-index: 1000
+    // This z-index is due to .navbar of bootstrap & jQuery-transfo
+    z-index: 1001
 .preview-container
+    text-align: center
+    line-height: 100px
     height: 100px
     > *
         max-height: 100px
+        line-height: 100px
         margin: 0 auto
-        display: block
+        display: inline-block
 
 // fontawesome
 .cke_editable .fa
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 67653152d5c..87bce899025 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -400,7 +400,7 @@
 
                     init: function () {
                         this.on('edit', function () {
-                            new website.editor.FontIconsDialog(editor, this.element.$)
+                            new website.editor.MediaDialog(editor, this.element)
                                 .appendTo(document.body);
                         });
                     },
@@ -683,7 +683,7 @@
                 var sel = new CKEDITOR.dom.element(previous);
                 editor.getSelection().selectElement(sel);
                 if(sel.hasClass('fa')) {
-                    new website.editor.FontIconsDialog(editor, previous)
+                    new website.editor.MediaDialog(editor, previous)
                         .appendTo(document.body);
                 } else if (previous.tagName.toUpperCase() === 'A') {
                     link_dialog(editor);
@@ -746,7 +746,7 @@
                 previous = this;
                 var $selected = $(this);
                 var position = $selected.offset();
-                if ($selected.is('img')) {
+                if ($selected.is('img') || $selected.is('.fa')) {
                     $link_button.hide();
                     // center button on image
                     $image_button.show().offset({
@@ -1349,6 +1349,10 @@
             this.editor = editor;
             this.media = media;
         },
+        start: function () {
+            this.$preview = this.$('.preview-container').detach();
+            return this._super();
+        },
         save: function () {
         },
         cancel: function () {
@@ -1362,41 +1366,44 @@
         init: function (editor, media) {
             this.media = media;
             this.editor = editor;
+            this.page = 0;
             this._super(editor);
         },
         start: function (editor, media) {
             var self = this;
-            this.$preview = this.$(".preview-container");
-
             this.imageDialog = new website.editor.RTEImageDialog(this.editor, this.media);
             this.imageDialog.appendTo(this.$("#editor-media-image"));
             this.iconDialog = new website.editor.FontIconsDialog(this.editor, this.media);
             this.iconDialog.appendTo(this.$("#editor-media-icon"));
-            this.videoDialog = null;
+            this.videoDialog = {};
             //this.videoDialog.appendTo(this.$("#editor-media-video"));
 
-            this.preview(this.imageDialog);
+            this.active = this.imageDialog;
 
-            $('a[data-toggle="tab"]').on('show.bs.tab', function (event) {
-                self.active.$preview.detach();
-                if ($(event.relatedTarget).is('[href="#editor-media-image"]'))
-                if ($(event.target).is('[href="#editor-media-image"]'))
-                event.target // activated tab
-                event.relatedTarget // previous tab
-                console.log(event);
-                console.log($(event.target).is('[href="#editor-media-image"]'));
-            })
+            $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
+                if ($(event.target).is('[href="#editor-media-image"]')) {
+                    self.active = self.imageDialog;
+                } else if ($(event.target).is('[href="#editor-media-icon"]')) {
+                    self.active = self.iconDialog;
+                } else if ($(event.target).is('[href="#editor-media-video"]')) {
+                    self.active = self.videoDialog;
+                }
+            });
+
+            if (this.media.$.nodeName === "IMG") {
+                this.$('[href="#editor-media-image"]').tab('show');
+            } else if (this.media.$.nodeName === "IFRAME") {
+                this.$('[href="#editor-media-video"]').tab('show');
+            } else if (this.media.$.className.match(/(^|\s)fa($|\s)/)) {
+                this.$('[href="#editor-media-icon"]').tab('show');
+            }
 
             return this._super();
         },
-        preview: function (active) {
-            this.active = active;
-            this.$preview.after(active.$preview);
-        },
         save: function () {
-            this.imageDialog.save();
-            this.iconDialog.save();
-            // this.videoDialog.save();
+            if (this.active) {
+                this.active.save();
+            }
             return this._super();
         },
     });
@@ -1418,74 +1425,95 @@
      *                           selected by the users (or possibly the ones
      *                           originally passed in)
      */
+    var IMAGES_PER_ROW = 6;
+    var IMAGES_ROWS = 4;
     website.editor.ImageDialog = website.editor.Media.extend({
         template: 'website.editor.dialog.image',
         events: _.extend({}, website.editor.Dialog.prototype.events, {
-            'change .url-source': function (e) { this.changed($(e.target)); },
+            'change .url-source': function (e) {
+                this.changed($(e.target));
+            },
             'click button.filepicker': function () {
                 this.$('input[type=file]').click();
             },
             'change input[type=file]': 'file_selection',
-            'change input.url': 'preview_image',
-            'click a[href=#existing]': 'browse_existing',
-            'change select.image-style': 'preview_image',
+            'change input[type=text]': function () {
+                this.$('form').submit();
+            },
+            'submit form': 'form_submit',
+            //'change input.url': 'preview_image',
+            //'change select.image-style': 'preview_image',
+            'click .existing-attachments img': 'select_existing',
+            'click .pager > li': function (e) {
+                e.preventDefault();
+                var $target = $(e.currentTarget);
+                if ($target.hasClass('disabled')) {
+                    return;
+                }
+                this.page += $target.hasClass('previous') ? -1 : 1;
+                this.display_attachments();
+            },
+            'click .existing-attachment-remove': 'try_remove',
         }),
 
+        init: function (editor, media) {
+            this.page = 0;
+            this._super(editor, media);
+        },
         start: function () {
-            this.$preview = this.$('.preview-container').detach();
-
-            var $options = this.$('.image-style').children();
-            this.image_styles = $options.map(function () { return this.value; }).get();
+            var res = this._super();
 
-            var o = { url: null, style: null, };
+            var o = { url: null };
             // avoid typos, prevent addition of new properties to the object
             Object.preventExtensions(o);
             this.trigger('start', o);
 
-            if (o.url) {
-                if (o.style) {
-                    this.$('.image-style').val(o.style);
-                }
-                this.set_image(o.url);
-            }
+            this.set_image(o.url);
 
-            return this._super();
+            return res;
         },
         save: function () {
             this.trigger('save', {
-                url: this.$('input.url').val(),
-                style: this.$('.image-style').val(),
+                url: this.$('input.url').val()
             });
+            this.media.renameNode("img");
+            this.media.$.attributes.src = this.$('input.url').val();
             return this._super();
         },
         cancel: function () {
             this.trigger('cancel');
         },
 
-        /**
-         * Sets the provided image url as the dialog's value-to-save and
-         * refreshes the preview element to use it.
-         */
         set_image: function (url, error) {
-            this.$('input.url').val(
-                error ? '' : url);
-            this.$('input.url').val(url);
-            this.preview_image();
+            var self = this;
+            this.$('input.url').val(error ? null : url || '');
+            this.fetch_existing().then(function () {
+                self.selected_existing(url);
+            });
         },
 
-        file_selection: function () {
-            this.$el.addClass('nosave');
-            this.$('form').removeClass('has-error').find('.help-block').empty();
-            this.$('button.filepicker').removeClass('btn-danger btn-success');
-
+        form_submit: function (event) {
             var self = this;
+            var $form = this.$('form[action="/website/attach"]');
+            if (!$form.find('input[name="upload"]').val().length) {
+                var url = $form.find('input[name="url"]').val();
+                console.log(url);
+                if (this.selected_existing(url).size()) {
+                    event.preventDefault();
+                    return false;
+                }
+            }
             var callback = _.uniqueId('func_');
             this.$('input[name=func]').val(callback);
-
             window[callback] = function (url, error) {
                 delete window[callback];
                 self.file_selected(url, error);
             };
+        },
+        file_selection: function () {
+            this.$el.addClass('nosave');
+            this.$('form').removeClass('has-error').find('.help-block').empty();
+            this.$('button.filepicker').removeClass('btn-danger btn-success');
             this.$('form').submit();
         },
         file_selected: function(url, error) {
@@ -1500,111 +1528,6 @@
             }
             this.set_image(url, error);
         },
-        preview_image: function () {
-            var loaded = function () {
-                this.$el.removeClass('nosave');
-            }.bind(this);
-            var image = this.$('input.url').val();
-            if (!image) { loaded(); return; }
-
-            var $img = this.$preview.find('img.image-preview')
-                .attr('src', image)
-                .removeClass(this.image_styles.join(' '))
-                .addClass(this.$('select.image-style').val());
-
-            if ($img.prop('complete')) {
-                loaded();
-            } else {
-                $img.load(loaded)
-            }
-        },
-        browse_existing: function (e) {
-            e.preventDefault();
-            this.$('form').removeClass('has-error').find('.help-block').empty();
-            this.$('button.filepicker').removeClass('btn-danger btn-success');
-            new website.editor.ExistingImageDialog(this).appendTo(document.body);
-        },
-    });
-
-    website.editor.RTEImageDialog = website.editor.ImageDialog.extend({
-        init: function (editor, image) {
-            this._super(editor);
-
-            this.element = image;
-
-            this.on('start', this, this.proxy('started'));
-            this.on('save', this, this.proxy('saved'));
-        },
-        started: function (holder) {
-            if (!this.element) {
-                var selection = this.editor.getSelection();
-                this.element = selection && selection.getSelectedElement();
-            }
-
-            var el = this.element;
-            if (!el || !el.is('img')) {
-                return;
-            }
-            _(this.image_styles).each(function (style) {
-                if (el.hasClass(style)) {
-                    holder.style = style;
-                }
-            });
-            holder.url = el.getAttribute('src');
-        },
-        saved: function (data) {
-            var element, editor = this.editor;
-            if (!(element = this.element)) {
-                element = editor.document.createElement('img');
-                element.addClass('img');
-                element.addClass('img-responsive');
-                // focus event handler interactions between bootstrap (modal)
-                // and ckeditor (RTE) lead to blowing the stack in Safari and
-                // Chrome (but not FF) when this is done synchronously =>
-                // defer insertion so modal has been hidden & destroyed before
-                // it happens
-                setTimeout(function () {
-                    editor.insertElement(element);
-                }, 0);
-            }
-
-            var style = data.style;
-            element.setAttribute('src', data.url);
-            element.removeAttribute('data-cke-saved-src');
-            $(element.$).removeClass(this.image_styles.join(' '));
-            if (style) { element.addClass(style); }
-        },
-    });
-
-    var IMAGES_PER_ROW = 6;
-    var IMAGES_ROWS = 4;
-    website.editor.ExistingImageDialog = website.editor.Dialog.extend({
-        template: 'website.editor.dialog.image.existing',
-        events: _.extend({}, website.editor.Dialog.prototype.events, {
-            'click .existing-attachments img': 'select_existing',
-            'click .pager > li': function (e) {
-                e.preventDefault();
-                var $target = $(e.currentTarget);
-                if ($target.hasClass('disabled')) {
-                    return;
-                }
-                this.page += $target.hasClass('previous') ? -1 : 1;
-                this.display_attachments();
-            },
-            'click .existing-attachment-remove': 'try_remove',
-        }),
-        init: function (parent) {
-            this.image = null;
-            this.page = 0;
-            this.parent = parent;
-            this._super(parent.editor);
-        },
-
-        start: function () {
-            return $.when(
-                this._super(),
-                this.fetch_existing().then(this.proxy('fetched_existing')));
-        },
 
         fetch_existing: function () {
             return openerp.jsonRpc('/web/dataset/call_kw', 'call', {
@@ -1617,7 +1540,7 @@
                     order: 'id desc',
                     context: website.get_context(),
                 }
-            });
+            }).then(this.proxy('fetched_existing'));
         },
         fetched_existing: function (records) {
             this.records = records;
@@ -1647,10 +1570,16 @@
         },
         select_existing: function (e) {
             var link = $(e.currentTarget).attr('src');
-            if (link) {
-                this.parent.set_image(link);
-            }
-            this.close()
+            this.selected_existing(link);
+        },
+        selected_existing: function (link) {
+            this.$('input.url').val(link);
+            this.$('.existing-attachment-cell.media_selected').removeClass("media_selected");
+            var $select = this.$('.existing-attachment-cell img').filter(function () {
+                return $(this).attr("src") == link;
+            }).first();
+            $select.parent().addClass("media_selected");
+            return $select;
         },
 
         try_remove: function (e) {
@@ -1682,6 +1611,48 @@
         },
     });
 
+    website.editor.RTEImageDialog = website.editor.ImageDialog.extend({
+        init: function (editor, media) {
+            this._super(editor, media);
+
+            this.on('start', this, this.proxy('started'));
+            this.on('save', this, this.proxy('saved'));
+        },
+        started: function (holder) {
+            if (!this.media) {
+                var selection = this.editor.getSelection();
+                this.media = selection && selection.getSelectedElement();
+            }
+
+            var el = this.media;
+            if (!el || !el.is('img')) {
+                return;
+            }
+            holder.url = el.getAttribute('src');
+        },
+        saved: function (data) {
+            var element, editor = this.editor;
+            if (!(element = this.media)) {
+                element = editor.document.createElement('img');
+                element.addClass('img');
+                element.addClass('img-responsive');
+                // focus event handler interactions between bootstrap (modal)
+                // and ckeditor (RTE) lead to blowing the stack in Safari and
+                // Chrome (but not FF) when this is done synchronously =>
+                // defer insertion so modal has been hidden & destroyed before
+                // it happens
+                setTimeout(function () {
+                    editor.insertElement(element);
+                }, 0);
+            }
+
+            var style = data.style;
+            element.setAttribute('src', data.url);
+            element.removeAttribute('data-cke-saved-src');
+            if (style) { element.addClass(style); }
+        },
+    });
+
     function get_selected_link(editor) {
         var sel = editor.getSelection(),
             el = sel.getSelectedElement();
@@ -1742,10 +1713,6 @@
         // where we still need to implement ``initSelection``)
         // TODO: add id/name to the text in order to allow FAYT selection of icons?
         icons: [{"text": "\uf000", "id": "fa-glass"}, {"text": "\uf001", "id": "fa-music"}, {"text": "\uf002", "id": "fa-search"}, {"text": "\uf003", "id": "fa-envelope-o"}, {"text": "\uf004", "id": "fa-heart"}, {"text": "\uf005", "id": "fa-star"}, {"text": "\uf006", "id": "fa-star-o"}, {"text": "\uf007", "id": "fa-user"}, {"text": "\uf008", "id": "fa-film"}, {"text": "\uf009", "id": "fa-th-large"}, {"text": "\uf00a", "id": "fa-th"}, {"text": "\uf00b", "id": "fa-th-list"}, {"text": "\uf00c", "id": "fa-check"}, {"text": "\uf00d", "id": "fa-times"}, {"text": "\uf00e", "id": "fa-search-plus"}, {"text": "\uf010", "id": "fa-search-minus"}, {"text": "\uf011", "id": "fa-power-off"}, {"text": "\uf012", "id": "fa-signal"}, {"text": "\uf013", "id": "fa-cog"}, {"text": "\uf014", "id": "fa-trash-o"}, {"text": "\uf015", "id": "fa-home"}, {"text": "\uf016", "id": "fa-file-o"}, {"text": "\uf017", "id": "fa-clock-o"}, {"text": "\uf018", "id": "fa-road"}, {"text": "\uf019", "id": "fa-download"}, {"text": "\uf01a", "id": "fa-arrow-circle-o-down"}, {"text": "\uf01b", "id": "fa-arrow-circle-o-up"}, {"text": "\uf01c", "id": "fa-inbox"}, {"text": "\uf01d", "id": "fa-play-circle-o"}, {"text": "\uf01e", "id": "fa-repeat"}, {"text": "\uf021", "id": "fa-refresh"}, {"text": "\uf022", "id": "fa-list-alt"}, {"text": "\uf023", "id": "fa-lock"}, {"text": "\uf024", "id": "fa-flag"}, {"text": "\uf025", "id": "fa-headphones"}, {"text": "\uf026", "id": "fa-volume-off"}, {"text": "\uf027", "id": "fa-volume-down"}, {"text": "\uf028", "id": "fa-volume-up"}, {"text": "\uf029", "id": "fa-qrcode"}, {"text": "\uf02a", "id": "fa-barcode"}, {"text": "\uf02b", "id": "fa-tag"}, {"text": "\uf02c", "id": "fa-tags"}, {"text": "\uf02d", "id": "fa-book"}, {"text": "\uf02e", "id": "fa-bookmark"}, {"text": "\uf02f", "id": "fa-print"}, {"text": "\uf030", "id": "fa-camera"}, {"text": "\uf031", "id": "fa-font"}, {"text": "\uf032", "id": "fa-bold"}, {"text": "\uf033", "id": "fa-italic"}, {"text": "\uf034", "id": "fa-text-height"}, {"text": "\uf035", "id": "fa-text-width"}, {"text": "\uf036", "id": "fa-align-left"}, {"text": "\uf037", "id": "fa-align-center"}, {"text": "\uf038", "id": "fa-align-right"}, {"text": "\uf039", "id": "fa-align-justify"}, {"text": "\uf03a", "id": "fa-list"}, {"text": "\uf03b", "id": "fa-outdent"}, {"text": "\uf03c", "id": "fa-indent"}, {"text": "\uf03d", "id": "fa-video-camera"}, {"text": "\uf03e", "id": "fa-picture-o"}, {"text": "\uf040", "id": "fa-pencil"}, {"text": "\uf041", "id": "fa-map-marker"}, {"text": "\uf042", "id": "fa-adjust"}, {"text": "\uf043", "id": "fa-tint"}, {"text": "\uf044", "id": "fa-pencil-square-o"}, {"text": "\uf045", "id": "fa-share-square-o"}, {"text": "\uf046", "id": "fa-check-square-o"}, {"text": "\uf047", "id": "fa-arrows"}, {"text": "\uf048", "id": "fa-step-backward"}, {"text": "\uf049", "id": "fa-fast-backward"}, {"text": "\uf04a", "id": "fa-backward"}, {"text": "\uf04b", "id": "fa-play"}, {"text": "\uf04c", "id": "fa-pause"}, {"text": "\uf04d", "id": "fa-stop"}, {"text": "\uf04e", "id": "fa-forward"}, {"text": "\uf050", "id": "fa-fast-forward"}, {"text": "\uf051", "id": "fa-step-forward"}, {"text": "\uf052", "id": "fa-eject"}, {"text": "\uf053", "id": "fa-chevron-left"}, {"text": "\uf054", "id": "fa-chevron-right"}, {"text": "\uf055", "id": "fa-plus-circle"}, {"text": "\uf056", "id": "fa-minus-circle"}, {"text": "\uf057", "id": "fa-times-circle"}, {"text": "\uf058", "id": "fa-check-circle"}, {"text": "\uf059", "id": "fa-question-circle"}, {"text": "\uf05a", "id": "fa-info-circle"}, {"text": "\uf05b", "id": "fa-crosshairs"}, {"text": "\uf05c", "id": "fa-times-circle-o"}, {"text": "\uf05d", "id": "fa-check-circle-o"}, {"text": "\uf05e", "id": "fa-ban"}, {"text": "\uf060", "id": "fa-arrow-left"}, {"text": "\uf061", "id": "fa-arrow-right"}, {"text": "\uf062", "id": "fa-arrow-up"}, {"text": "\uf063", "id": "fa-arrow-down"}, {"text": "\uf064", "id": "fa-share"}, {"text": "\uf065", "id": "fa-expand"}, {"text": "\uf066", "id": "fa-compress"}, {"text": "\uf067", "id": "fa-plus"}, {"text": "\uf068", "id": "fa-minus"}, {"text": "\uf069", "id": "fa-asterisk"}, {"text": "\uf06a", "id": "fa-exclamation-circle"}, {"text": "\uf06b", "id": "fa-gift"}, {"text": "\uf06c", "id": "fa-leaf"}, {"text": "\uf06d", "id": "fa-fire"}, {"text": "\uf06e", "id": "fa-eye"}, {"text": "\uf070", "id": "fa-eye-slash"}, {"text": "\uf071", "id": "fa-exclamation-triangle"}, {"text": "\uf072", "id": "fa-plane"}, {"text": "\uf073", "id": "fa-calendar"}, {"text": "\uf074", "id": "fa-random"}, {"text": "\uf075", "id": "fa-comment"}, {"text": "\uf076", "id": "fa-magnet"}, {"text": "\uf077", "id": "fa-chevron-up"}, {"text": "\uf078", "id": "fa-chevron-down"}, {"text": "\uf079", "id": "fa-retweet"}, {"text": "\uf07a", "id": "fa-shopping-cart"}, {"text": "\uf07b", "id": "fa-folder"}, {"text": "\uf07c", "id": "fa-folder-open"}, {"text": "\uf07d", "id": "fa-arrows-v"}, {"text": "\uf07e", "id": "fa-arrows-h"}, {"text": "\uf080", "id": "fa-bar-chart-o"}, {"text": "\uf081", "id": "fa-twitter-square"}, {"text": "\uf082", "id": "fa-facebook-square"}, {"text": "\uf083", "id": "fa-camera-retro"}, {"text": "\uf084", "id": "fa-key"}, {"text": "\uf085", "id": "fa-cogs"}, {"text": "\uf086", "id": "fa-comments"}, {"text": "\uf087", "id": "fa-thumbs-o-up"}, {"text": "\uf088", "id": "fa-thumbs-o-down"}, {"text": "\uf089", "id": "fa-star-half"}, {"text": "\uf08a", "id": "fa-heart-o"}, {"text": "\uf08b", "id": "fa-sign-out"}, {"text": "\uf08c", "id": "fa-linkedin-square"}, {"text": "\uf08d", "id": "fa-thumb-tack"}, {"text": "\uf08e", "id": "fa-external-link"}, {"text": "\uf090", "id": "fa-sign-in"}, {"text": "\uf091", "id": "fa-trophy"}, {"text": "\uf092", "id": "fa-github-square"}, {"text": "\uf093", "id": "fa-upload"}, {"text": "\uf094", "id": "fa-lemon-o"}, {"text": "\uf095", "id": "fa-phone"}, {"text": "\uf096", "id": "fa-square-o"}, {"text": "\uf097", "id": "fa-bookmark-o"}, {"text": "\uf098", "id": "fa-phone-square"}, {"text": "\uf099", "id": "fa-twitter"}, {"text": "\uf09a", "id": "fa-facebook"}, {"text": "\uf09b", "id": "fa-github"}, {"text": "\uf09c", "id": "fa-unlock"}, {"text": "\uf09d", "id": "fa-credit-card"}, {"text": "\uf09e", "id": "fa-rss"}, {"text": "\uf0a0", "id": "fa-hdd-o"}, {"text": "\uf0a1", "id": "fa-bullhorn"}, {"text": "\uf0f3", "id": "fa-bell"}, {"text": "\uf0a3", "id": "fa-certificate"}, {"text": "\uf0a4", "id": "fa-hand-o-right"}, {"text": "\uf0a5", "id": "fa-hand-o-left"}, {"text": "\uf0a6", "id": "fa-hand-o-up"}, {"text": "\uf0a7", "id": "fa-hand-o-down"}, {"text": "\uf0a8", "id": "fa-arrow-circle-left"}, {"text": "\uf0a9", "id": "fa-arrow-circle-right"}, {"text": "\uf0aa", "id": "fa-arrow-circle-up"}, {"text": "\uf0ab", "id": "fa-arrow-circle-down"}, {"text": "\uf0ac", "id": "fa-globe"}, {"text": "\uf0ad", "id": "fa-wrench"}, {"text": "\uf0ae", "id": "fa-tasks"}, {"text": "\uf0b0", "id": "fa-filter"}, {"text": "\uf0b1", "id": "fa-briefcase"}, {"text": "\uf0b2", "id": "fa-arrows-alt"}, {"text": "\uf0c0", "id": "fa-users"}, {"text": "\uf0c1", "id": "fa-link"}, {"text": "\uf0c2", "id": "fa-cloud"}, {"text": "\uf0c3", "id": "fa-flask"}, {"text": "\uf0c4", "id": "fa-scissors"}, {"text": "\uf0c5", "id": "fa-files-o"}, {"text": "\uf0c6", "id": "fa-paperclip"}, {"text": "\uf0c7", "id": "fa-floppy-o"}, {"text": "\uf0c8", "id": "fa-square"}, {"text": "\uf0c9", "id": "fa-bars"}, {"text": "\uf0ca", "id": "fa-list-ul"}, {"text": "\uf0cb", "id": "fa-list-ol"}, {"text": "\uf0cc", "id": "fa-strikethrough"}, {"text": "\uf0cd", "id": "fa-underline"}, {"text": "\uf0ce", "id": "fa-table"}, {"text": "\uf0d0", "id": "fa-magic"}, {"text": "\uf0d1", "id": "fa-truck"}, {"text": "\uf0d2", "id": "fa-pinterest"}, {"text": "\uf0d3", "id": "fa-pinterest-square"}, {"text": "\uf0d4", "id": "fa-google-plus-square"}, {"text": "\uf0d5", "id": "fa-google-plus"}, {"text": "\uf0d6", "id": "fa-money"}, {"text": "\uf0d7", "id": "fa-caret-down"}, {"text": "\uf0d8", "id": "fa-caret-up"}, {"text": "\uf0d9", "id": "fa-caret-left"}, {"text": "\uf0da", "id": "fa-caret-right"}, {"text": "\uf0db", "id": "fa-columns"}, {"text": "\uf0dc", "id": "fa-sort"}, {"text": "\uf0dd", "id": "fa-sort-asc"}, {"text": "\uf0de", "id": "fa-sort-desc"}, {"text": "\uf0e0", "id": "fa-envelope"}, {"text": "\uf0e1", "id": "fa-linkedin"}, {"text": "\uf0e2", "id": "fa-undo"}, {"text": "\uf0e3", "id": "fa-gavel"}, {"text": "\uf0e4", "id": "fa-tachometer"}, {"text": "\uf0e5", "id": "fa-comment-o"}, {"text": "\uf0e6", "id": "fa-comments-o"}, {"text": "\uf0e7", "id": "fa-bolt"}, {"text": "\uf0e8", "id": "fa-sitemap"}, {"text": "\uf0e9", "id": "fa-umbrella"}, {"text": "\uf0ea", "id": "fa-clipboard"}, {"text": "\uf0eb", "id": "fa-lightbulb-o"}, {"text": "\uf0ec", "id": "fa-exchange"}, {"text": "\uf0ed", "id": "fa-cloud-download"}, {"text": "\uf0ee", "id": "fa-cloud-upload"}, {"text": "\uf0f0", "id": "fa-user-md"}, {"text": "\uf0f1", "id": "fa-stethoscope"}, {"text": "\uf0f2", "id": "fa-suitcase"}, {"text": "\uf0a2", "id": "fa-bell-o"}, {"text": "\uf0f4", "id": "fa-coffee"}, {"text": "\uf0f5", "id": "fa-cutlery"}, {"text": "\uf0f6", "id": "fa-file-text-o"}, {"text": "\uf0f7", "id": "fa-building-o"}, {"text": "\uf0f8", "id": "fa-hospital-o"}, {"text": "\uf0f9", "id": "fa-ambulance"}, {"text": "\uf0fa", "id": "fa-medkit"}, {"text": "\uf0fb", "id": "fa-fighter-jet"}, {"text": "\uf0fc", "id": "fa-beer"}, {"text": "\uf0fd", "id": "fa-h-square"}, {"text": "\uf0fe", "id": "fa-plus-square"}, {"text": "\uf100", "id": "fa-angle-double-left"}, {"text": "\uf101", "id": "fa-angle-double-right"}, {"text": "\uf102", "id": "fa-angle-double-up"}, {"text": "\uf103", "id": "fa-angle-double-down"}, {"text": "\uf104", "id": "fa-angle-left"}, {"text": "\uf105", "id": "fa-angle-right"}, {"text": "\uf106", "id": "fa-angle-up"}, {"text": "\uf107", "id": "fa-angle-down"}, {"text": "\uf108", "id": "fa-desktop"}, {"text": "\uf109", "id": "fa-laptop"}, {"text": "\uf10a", "id": "fa-tablet"}, {"text": "\uf10b", "id": "fa-mobile"}, {"text": "\uf10c", "id": "fa-circle-o"}, {"text": "\uf10d", "id": "fa-quote-left"}, {"text": "\uf10e", "id": "fa-quote-right"}, {"text": "\uf110", "id": "fa-spinner"}, {"text": "\uf111", "id": "fa-circle"}, {"text": "\uf112", "id": "fa-reply"}, {"text": "\uf113", "id": "fa-github-alt"}, {"text": "\uf114", "id": "fa-folder-o"}, {"text": "\uf115", "id": "fa-folder-open-o"}, {"text": "\uf118", "id": "fa-smile-o"}, {"text": "\uf119", "id": "fa-frown-o"}, {"text": "\uf11a", "id": "fa-meh-o"}, {"text": "\uf11b", "id": "fa-gamepad"}, {"text": "\uf11c", "id": "fa-keyboard-o"}, {"text": "\uf11d", "id": "fa-flag-o"}, {"text": "\uf11e", "id": "fa-flag-checkered"}, {"text": "\uf120", "id": "fa-terminal"}, {"text": "\uf121", "id": "fa-code"}, {"text": "\uf122", "id": "fa-reply-all"}, {"text": "\uf122", "id": "fa-mail-reply-all"}, {"text": "\uf123", "id": "fa-star-half-o"}, {"text": "\uf124", "id": "fa-location-arrow"}, {"text": "\uf125", "id": "fa-crop"}, {"text": "\uf126", "id": "fa-code-fork"}, {"text": "\uf127", "id": "fa-chain-broken"}, {"text": "\uf128", "id": "fa-question"}, {"text": "\uf129", "id": "fa-info"}, {"text": "\uf12a", "id": "fa-exclamation"}, {"text": "\uf12b", "id": "fa-superscript"}, {"text": "\uf12c", "id": "fa-subscript"}, {"text": "\uf12d", "id": "fa-eraser"}, {"text": "\uf12e", "id": "fa-puzzle-piece"}, {"text": "\uf130", "id": "fa-microphone"}, {"text": "\uf131", "id": "fa-microphone-slash"}, {"text": "\uf132", "id": "fa-shield"}, {"text": "\uf133", "id": "fa-calendar-o"}, {"text": "\uf134", "id": "fa-fire-extinguisher"}, {"text": "\uf135", "id": "fa-rocket"}, {"text": "\uf136", "id": "fa-maxcdn"}, {"text": "\uf137", "id": "fa-chevron-circle-left"}, {"text": "\uf138", "id": "fa-chevron-circle-right"}, {"text": "\uf139", "id": "fa-chevron-circle-up"}, {"text": "\uf13a", "id": "fa-chevron-circle-down"}, {"text": "\uf13b", "id": "fa-html5"}, {"text": "\uf13c", "id": "fa-css3"}, {"text": "\uf13d", "id": "fa-anchor"}, {"text": "\uf13e", "id": "fa-unlock-alt"}, {"text": "\uf140", "id": "fa-bullseye"}, {"text": "\uf141", "id": "fa-ellipsis-h"}, {"text": "\uf142", "id": "fa-ellipsis-v"}, {"text": "\uf143", "id": "fa-rss-square"}, {"text": "\uf144", "id": "fa-play-circle"}, {"text": "\uf145", "id": "fa-ticket"}, {"text": "\uf146", "id": "fa-minus-square"}, {"text": "\uf147", "id": "fa-minus-square-o"}, {"text": "\uf148", "id": "fa-level-up"}, {"text": "\uf149", "id": "fa-level-down"}, {"text": "\uf14a", "id": "fa-check-square"}, {"text": "\uf14b", "id": "fa-pencil-square"}, {"text": "\uf14c", "id": "fa-external-link-square"}, {"text": "\uf14d", "id": "fa-share-square"}, {"text": "\uf14e", "id": "fa-compass"}, {"text": "\uf150", "id": "fa-caret-square-o-down"}, {"text": "\uf151", "id": "fa-caret-square-o-up"}, {"text": "\uf152", "id": "fa-caret-square-o-right"}, {"text": "\uf153", "id": "fa-eur"}, {"text": "\uf154", "id": "fa-gbp"}, {"text": "\uf155", "id": "fa-usd"}, {"text": "\uf156", "id": "fa-inr"}, {"text": "\uf157", "id": "fa-jpy"}, {"text": "\uf158", "id": "fa-rub"}, {"text": "\uf159", "id": "fa-krw"}, {"text": "\uf15a", "id": "fa-btc"}, {"text": "\uf15b", "id": "fa-file"}, {"text": "\uf15c", "id": "fa-file-text"}, {"text": "\uf15d", "id": "fa-sort-alpha-asc"}, {"text": "\uf15e", "id": "fa-sort-alpha-desc"}, {"text": "\uf160", "id": "fa-sort-amount-asc"}, {"text": "\uf161", "id": "fa-sort-amount-desc"}, {"text": "\uf162", "id": "fa-sort-numeric-asc"}, {"text": "\uf163", "id": "fa-sort-numeric-desc"}, {"text": "\uf164", "id": "fa-thumbs-up"}, {"text": "\uf165", "id": "fa-thumbs-down"}, {"text": "\uf166", "id": "fa-youtube-square"}, {"text": "\uf167", "id": "fa-youtube"}, {"text": "\uf168", "id": "fa-xing"}, {"text": "\uf169", "id": "fa-xing-square"}, {"text": "\uf16a", "id": "fa-youtube-play"}, {"text": "\uf16b", "id": "fa-dropbox"}, {"text": "\uf16c", "id": "fa-stack-overflow"}, {"text": "\uf16d", "id": "fa-instagram"}, {"text": "\uf16e", "id": "fa-flickr"}, {"text": "\uf170", "id": "fa-adn"}, {"text": "\uf171", "id": "fa-bitbucket"}, {"text": "\uf172", "id": "fa-bitbucket-square"}, {"text": "\uf173", "id": "fa-tumblr"}, {"text": "\uf174", "id": "fa-tumblr-square"}, {"text": "\uf175", "id": "fa-long-arrow-down"}, {"text": "\uf176", "id": "fa-long-arrow-up"}, {"text": "\uf177", "id": "fa-long-arrow-left"}, {"text": "\uf178", "id": "fa-long-arrow-right"}, {"text": "\uf179", "id": "fa-apple"}, {"text": "\uf17a", "id": "fa-windows"}, {"text": "\uf17b", "id": "fa-android"}, {"text": "\uf17c", "id": "fa-linux"}, {"text": "\uf17d", "id": "fa-dribbble"}, {"text": "\uf17e", "id": "fa-skype"}, {"text": "\uf180", "id": "fa-foursquare"}, {"text": "\uf181", "id": "fa-trello"}, {"text": "\uf182", "id": "fa-female"}, {"text": "\uf183", "id": "fa-male"}, {"text": "\uf184", "id": "fa-gittip"}, {"text": "\uf185", "id": "fa-sun-o"}, {"text": "\uf186", "id": "fa-moon-o"}, {"text": "\uf187", "id": "fa-archive"}, {"text": "\uf188", "id": "fa-bug"}, {"text": "\uf189", "id": "fa-vk"}, {"text": "\uf18a", "id": "fa-weibo"}, {"text": "\uf18b", "id": "fa-renren"}, {"text": "\uf18c", "id": "fa-pagelines"}, {"text": "\uf18d", "id": "fa-stack-exchange"}, {"text": "\uf18e", "id": "fa-arrow-circle-o-right"}, {"text": "\uf190", "id": "fa-arrow-circle-o-left"}, {"text": "\uf191", "id": "fa-caret-square-o-left"}, {"text": "\uf192", "id": "fa-dot-circle-o"}, {"text": "\uf193", "id": "fa-wheelchair"}, {"text": "\uf194", "id": "fa-vimeo-square"}, {"text": "\uf195", "id": "fa-try"}, {"text": "\uf196", "id": "fa-plus-square-o"}],
-        init: function (editor, element) {
-            this._super(editor);
-            this.element = element;
-        },
         /**
          * Initializes select2: in Chrome and Safari, <select> font apparently
          * isn't customizable (?) and the fontawesome glyphs fail to appear.
@@ -1758,12 +1725,13 @@
          * all the new ones if necessary.
          */
         save: function () {
-            var classes = (this.element.className||"").split(/\s+/);
+            var classes = (this.media.$.className||"").split(/\s+/);
             var non_fa_classes = _.reject(classes, function (cls) {
                 return cls === 'fa' || /^fa-/.test(cls);
             });
             var final_classes = non_fa_classes.concat(this.get_fa_classes());
-            this.element.className = final_classes.join(' ');
+            this.media.$.className = final_classes.join(' ');
+            this.media.renameNode("span");
             this._super();
         },
         /**
@@ -1774,7 +1742,7 @@
          * which may not match the visual look of the element.
          */
         load_data: function () {
-            var classes = (this.element.className||"").split(/\s+/);
+            var classes = (this.media.$.className||"").split(/\s+/);
             for (var i = 0; i < classes.length; i++) {
                 var cls = classes[i];
                 switch(cls) {
@@ -1797,6 +1765,9 @@
                     this.$('#fa-icon').val(cls);
                 }
             }
+            if (this.$('#fa-icon').val() === "") {
+                this.$('#fa-icon').val("fa-glass");
+            }
             this.update_preview();
         },
         /**
@@ -1813,7 +1784,9 @@
             ];
         },
         update_preview: function () {
+            this.$preview.empty();
             var $preview = this.$('#fa-preview').empty();
+
             var sizes = ['', 'fa-2x', 'fa-3x', 'fa-4x', 'fa-5x'];
             var classes = this.get_fa_classes();
             var no_sizes = _.difference(classes, sizes).join(' ');
@@ -1826,6 +1799,7 @@
                         .addClass(size)
                         .addClass(no_sizes);
                 if ((size && _.contains(classes, size)) || (!size && !selected)) {
+                    this.$preview.append($p.clone());
                     $p.addClass('font-icons-selected');
                     selected = true;
                 }
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 2f6977c990f..f6fe37c5bd4 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -90,19 +90,34 @@
     </t>
     <t t-name="website.editor.dialog.media">
         <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
-            <div class="modal-dialog">
+            <div class="modal-dialog select-media">
                 <div class="modal-content">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                        <div class="preview-container hidden"></div>
-                        <!-- Nav tabs -->
+                        <h3 class="modal-title">Select a Media</h3>
+                    </div>
+                    <div class="modal-body">
                         <ul class="nav nav-tabs">
                             <li class="active"><a href="#editor-media-image" data-toggle="tab">Image</a></li>
                             <li><a href="#editor-media-icon" data-toggle="tab">Pictogram</a></li>
                             <li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
+                            <li style="float: right;">
+                                <ul class="pager mb0 mt0">
+                                    <li class="previous disabled"><a href="#">← Previous</a></li>
+                                    <li class="next disabled"><a href="#">Next →</a></li>
+                                </ul>
+                            </li>
+                            <li style="float: right;">
+                                <form>
+                                    <div class="form-group font-icons fa fa-search mb0">
+                                        <input type="hidden" id="fa-icon" class="form-control"/>
+                                        <input type="hidden" id="fa-size" class="form-control"/>
+                                        <input type="search" class="form-control" id="icon-search"/>
+                                    </div>
+                                </form>
+                            </li>
                         </ul>
-                    </div>
-                    <div class="modal-body">
+
                         <!-- Tab panes -->
                         <div class="tab-content">
                             <div class="tab-pane fade in active" id="editor-media-image">
@@ -128,37 +143,27 @@
     </t>
     <t t-name="website.editor.dialog.image">
         <div>
-            <form method="POST" action="/website/attach"
+            <form method="POST"
+                  action="/website/attach"
                   enctype="multipart/form-data"
-                  target="fileframe">
-                <div class="text-center">
-                    <input type="file" name="upload" accept="image/*" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
-                    <button type="button" class="btn btn-primary btn-lg filepicker">
-                        Upload an image from your computer
-                    </button>
-                    <button type="button" class="btn btn-lg hidden wait" disabled="disabled">Uploading...</button>
-                    <p class="text-muted mt16">— or —</p>
-                </div>
+                  target="fileframe"
+                  class="form-inline">
                 <div class="well">
-                    <a href="#existing" class="pull-right">Browse existing images</a>
-                    <h3 class="list-group-item-heading">Image URL</h3>
-                    <input type="text" class="form-control url"
-                           placeholder="http://openerp.com"/>
+                    <div class="form-group">
+                        <input type="file" name="upload" accept="image/*" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/>
+                        <button type="button" class="btn btn-primary filepicker">Upload an image from your computer</button>
+                        <button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button>
+                    </div>
+                    <span class="text-muted">— or —</span>
+                    <div class="form-group">
+                        <label for="iamgeurl">Image URL</label>
+                        <input type="text" name="url" class="form-control url" style="width: 300px;" id="iamgeurl" placeholder="http://openerp.com"/>
+                    </div>
                 </div>
                 <input type="hidden" name="func"/>
+                <div class="existing-attachments"/>
                 <div class="help-block"/>
             </form>
-            <div class="preview-container">
-                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII%3D" class="image-preview"/>
-                <img src="/web/static/src/img/throbber-large.gif" class="wait hidden"/>
-                <!--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>
-                    <option value="shadow">Shadow</option>
-                </select-->
-            </div>
         </div>
         <iframe src="about:blank" name="fileframe" class="hidden"/>
     </t>
@@ -263,18 +268,18 @@
 
     <t t-name="website.editor.dialog.font-icons">
         <form>
-            <div class="form-group" id="fa-preview">
-
-            </div>
-            <div class="form-group font-icons fa fa-search">
+            <div class="form-group hidden font-icons fa fa-search">
                 <input type="hidden" id="fa-icon" class="form-control"/>
                 <input type="hidden" id="fa-size" class="form-control"/>
                 <input type="search" class="form-control" id="icon-search"/>
-                <div class="font-icons-icons">
-                    <t t-call="website.editor.dialog.font-icons.icons">
-                        <t t-set="icons" t-value="widget.icons"/>
-                    </t>
-                </div>
+            </div>
+            <div class="font-icons-icons">
+                <t t-call="website.editor.dialog.font-icons.icons">
+                    <t t-set="icons" t-value="widget.icons"/>
+                </t>
+            </div>
+            <div class="form-group mt32" id="fa-preview">
+
             </div>
             <div class="form-group">
                 <label for="fa-rotation">Rotation</label>