From 501e88d3ebb628774d30eaccff6a93327853a033 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Mon, 20 Jan 2014 16:36:10 +0100
Subject: [PATCH] [IMP] replace select2 by grid for icons selection

bzr revid: xmo@openerp.com-20140120153610-xktkxjfbpl59xnpz
---
 addons/website/static/src/css/editor.css      | 13 +++++++
 addons/website/static/src/css/editor.sass     | 13 +++++++
 .../website/static/src/js/website.editor.js   | 38 +++++++------------
 .../website/static/src/xml/website.editor.xml |  9 ++++-
 4 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 386fead7ad3..0bb901c3676 100644
--- a/addons/website/static/src/css/editor.css
+++ b/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;
 }
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 923bd63e7dd..8e29015fac0 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/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
 
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index e687dbb6a31..35a8fad5707 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/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' : ''
             ];
         },
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 12fd0774f39..fa408ef796b 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/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>