[IMP] replace select2 by grid for icons selection

bzr revid: xmo@openerp.com-20140120153610-xktkxjfbpl59xnpz

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

@@ -207,6 +207,19 @@ ul.oe_menu_editor .disclose {
   visibility: visible !important;
 }
 
+.modal .font-icons-icons {
+  font-size: 2em;
+  max-height: 6em;
+  overflow: auto;
+}
+.modal .font-icons-icons .font-icons-icon {
+  display: inline-block;
+  width: 2em;
+  padding: 0.25em;
+  text-align: center;
+  cursor: pointer;
+}
+
 .existing-attachments .pager .disabled {
   display: none;
 }

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

@@ -172,6 +172,19 @@ ul.oe_menu_editor
         display: inline-block !important
         visibility: visible !important
 
+// fontawesome modal
+.modal .font-icons-icons
+    font-size: 2em
+    max-height: 6em
+    overflow: auto
+
+    .font-icons-icon
+        display: inline-block
+        width: 2em
+        padding: 0.25em
+        text-align: center
+        cursor: pointer
+
 .existing-attachments .pager .disabled
     display: none
 

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

@@ -1456,6 +1456,13 @@
         template: 'website.editor.dialog.font-icons',
         events : _.extend({}, website.editor.Dialog.prototype.events, {
             change: 'update_preview',
+            'click .font-icons-icon': function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                this.$('#fa-icon').val(e.target.getAttribute('data-id'));
+                this.update_preview();
+            },
         }),
 
         // List of FontAwesome icons in 4.0.3, extracted from the cheatsheet.
@@ -1474,26 +1481,7 @@
          * isn't customizable (?) and the fontawesome glyphs fail to appear.
          */
         start: function () {
-            var self = this;
-            var started = this._super();
-            this.$('#fa-icon').select2({
-                data: this.icons,
-                initSelection: function (element, callback) {
-                    var id = element.val(), match;
-                    if (id) {
-                        match = _.find(self.icons, function (item) {
-                            return item.id === id;
-                        }) || void 0;
-                    }
-
-                    callback(match);
-                },
-                formatSelection: function (object) {
-                    return $('<span class="fa fa-fw">').text(object.text);
-                },
-                formatResultCssClass: function () { return 'fa'; },
-            });
-            return started.then(this.proxy('load_data'));
+            return this._super().then(this.proxy('load_data'));
         },
         /**
          * Removes existing FontAwesome classes on the bound element, and sets
@@ -1529,15 +1517,15 @@
                 case 'fa-flip-horizontal':case 'fa-rotate-vertical':
                     this.$('#fa-rotation').val(cls);
                     continue;
-                case 'fa-fixed':
-                    this.$('#fa-fixed').prop('checked', true);
+                case 'fa-fw':
+                    this.$('#fa-fw').prop('checked', true);
                     continue;
                 case 'fa-border':
                     this.$('#fa-border').prop('checked', true);
                     continue;
                 default:
                     if (!/^fa-/.test(cls)) { continue; }
-                    this.$('#fa-icon').select2('val', cls);
+                    this.$('#fa-icon').val(cls);
                 }
             }
             this.update_preview();
@@ -1549,10 +1537,10 @@
         get_fa_classes: function () {
             return [
                 'fa',
-                this.$('#fa-icon').select2('val'),
+                this.$('#fa-icon').val(),
                 this.$('#fa-size').val(),
                 this.$('#fa-rotation').val(),
-                this.$('#fa-fixed').prop('checked') ? 'fa-fixed' : '',
+                this.$('#fa-fw').prop('checked') ? 'fa-fw' : '',
                 this.$('#fa-border').prop('checked') ? 'fa-border' : ''
             ];
         },

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

@@ -210,9 +210,16 @@
                 <div class="form-group">
                     Preview: <span id="fa-preview"/>
                 </div>
-                <div class="form-group">
+                <div class="form-group fa">
                     <label for="fa-icon">icon</label>
                     <input type="hidden" id="fa-icon" class="form-control"/>
+                    <div class="font-icons-icons">
+                        <span t-foreach="widget.icons" t-as="icon"
+                              class="fa font-icons-icon"
+                              t-att-data-id="icon.id">
+                            <t t-esc="icon.text"/>
+                        </span>
+                    </div>
                 </div>
                 <div class="form-group">
                     <label for="fa-size">size</label>