[IMP] icons selection dialog

remove fixed size checkbox
add fayt for icons (by name)

bzr revid: xmo@openerp.com-20140121100408-64e32iio9r77yx9m

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

@@ -219,6 +219,21 @@ ul.oe_menu_editor .disclose {
   text-align: center;
   cursor: pointer;
 }
+.modal .font-icons {
+  position: relative;
+  display: block;
+}
+.modal .font-icons:before {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+  opacity: 0.7;
+  position: absolute;
+  top: 2px;
+  left: 3px;
+  font-size: 2em;
+}
+.modal #icon-search {
+  padding-left: 2.5em;
+}
 .modal #fa-preview {
   text-align: center;
 }

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

@@ -186,6 +186,19 @@ ul.oe_menu_editor
             text-align: center
             cursor: pointer
 
+    .font-icons
+        position: relative
+        display: block
+
+        &:before
+            +opacity(0.7)
+            position: absolute
+            top: 2px
+            left: 3px
+            font-size: 2em
+    #icon-search
+        padding-left: 2.5em
+
     #fa-preview
         text-align: center
 

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

@@ -1469,7 +1469,21 @@
 
                 this.$('#fa-size').val(e.target.getAttribute('data-size'));
                 this.update_preview();
-            }
+            },
+            'input input#icon-search': function () {
+                var needle = this.$('#icon-search').val();
+                var icons = this.icons;
+                if (needle) {
+                    icons = _(icons).filter(function (icon) {
+                        return icon.id.substring(3).indexOf(needle) !== -1;
+                    });
+                }
+
+                this.$('div.font-icons-icons').html(
+                    openerp.qweb.render(
+                        'website.editor.dialog.font-icons.icons',
+                        {icons: icons}));
+            },
         }),
 
         // List of FontAwesome icons in 4.0.3, extracted from the cheatsheet.
@@ -1525,7 +1539,6 @@
                     this.$('#fa-rotation').val(cls);
                     continue;
                 case 'fa-fw':
-                    this.$('#fa-fw').prop('checked', true);
                     continue;
                 case 'fa-border':
                     this.$('#fa-border').prop('checked', true);
@@ -1547,7 +1560,6 @@
                 this.$('#fa-icon').val(),
                 this.$('#fa-size').val(),
                 this.$('#fa-rotation').val(),
-                this.$('#fa-fw').prop('checked') ? 'fa-fw' : '',
                 this.$('#fa-border').prop('checked') ? 'fa-border' : ''
             ];
         },

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

@@ -210,15 +210,14 @@
                 <div class="form-group" id="fa-preview">
 
                 </div>
-                <div class="form-group fa">
+                <div class="form-group 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">
-                        <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>
+                        <t t-call="website.editor.dialog.font-icons.icons">
+                            <t t-set="icons" t-value="widget.icons"/>
+                        </t>
                     </div>
                 </div>
                 <div class="form-group">
@@ -235,16 +234,18 @@
                 </div>
                 <div class="form-group">
                     <label>
-                        <input type="checkbox" id="fa-fixed"/> fixed width
-                    </label>
-                </div>
-                <div class="form-group">
-                    <label>
-                        <input type="checkbox" id="fa-border"/> bordered
+                        <input type="checkbox" id="fa-border"/> border
                     </label>
                 </div>
             </form>
         </t>
     </t>
+    <t t-name="website.editor.dialog.font-icons.icons">
+        <span t-foreach="icons" t-as="icon"
+              class="fa font-icons-icon"
+              t-att-data-id="icon.id">
+            <t t-esc="icon.text"/>
+        </span>
+    </t>
 
 </templates>