[ADD] correct focus of facets in input sequence, ability to remove facet via backspace/delete

bzr revid: xmo@openerp.com-20120502153439-0374v3dqz5fbe1ju

addons/web/static/src/css/base.css

@@ -1115,6 +1115,11 @@
   cursor: pointer;
   display: inline-block;
   margin: 1px 0;
+  padding: 0;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  -box-shadow: none;
+  text-align: left;
   border: 1px solid #afafb6;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
@@ -1122,6 +1127,7 @@
   background: #f0f0fa;
   height: 18px;
   line-height: 18px;
+  -webkit-font-smoothing: auto;
 }
 .openerp .oe_searchview .oe_searchview_facet span {
   display: inline-block;
@@ -1146,13 +1152,13 @@
   background: #8786b7;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
 }
-.openerp .oe_searchview .oe_searchview_facet.oe_selected {
+.openerp .oe_searchview .oe_searchview_facet:focus {
   border-color: #a6a6fe;
   -moz-box-shadow: 0 0 3px 1px #a6a6fe;
   -webkit-box-shadow: 0 0 3px 1px #a6a6fe;
   -box-shadow: 0 0 3px 1px #a6a6fe;
 }
-.openerp .oe_searchview .oe_searchview_facet.oe_selected .oe_facet_category {
+.openerp .oe_searchview .oe_searchview_facet:focus .oe_facet_category {
   margin-left: 0;
 }
 .openerp .oe_searchview.oe_searchview_open_drawer .oe_searchview_drawer {

addons/web/static/src/css/base.sass

@@ -878,11 +878,15 @@ $colour4: #8a89ba
             cursor: pointer
             display: inline-block
             margin: 1px 0
+            padding: 0
+            @include box-shadow(none)
+            text-align: left
             border: 1px solid $facets-border
             @include radius(3px)
             background: #f0f0fa
             height: 18px
             line-height: 18px
+            -webkit-font-smoothing: auto
 
             span
                 display: inline-block
@@ -906,7 +910,7 @@ $colour4: #8a89ba
                 background: #8786b7
                 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
 
-            &.oe_selected
+            &:focus
                 border-color: $facets-border-selected
                 @include box-shadow(0 0 3px 1px $facets-border-selected)
 

addons/web/static/src/js/search.js

@@ -127,7 +127,6 @@ my.InputView = instance.web.Widget.extend({
         return p;
     },
     onFocus: function () {
-        this.$element.siblings().trigger('deselect');
         this.getParent().$element.trigger('focus');
     },
     onBlur: function () {
@@ -148,16 +147,22 @@ my.FacetView = instance.web.Widget.extend({
     },
     start: function () {
         var self = this;
-        this.$element.on('deselect', function () {
-            self.$element.removeClass('oe_selected');
-        });
         this.$element.on('click', function (e) {
             if ($(e.target).is('.oe_facet_remove')) {
                 return;
             }
+            self.$element.focus();
             e.stopPropagation();
-            self.$element.siblings().trigger('deselect');
-            self.$element.addClass('oe_selected');
+        });
+        this.$element.on('keydown', function (e) {
+            var keys = $.ui.keyCode;
+            switch (e.which) {
+            case keys.BACKSPACE:
+            case keys.DELETE:
+                self.getParent().query.remove(
+                    self.model, {trigger_search: true});
+                return false;
+            }
         });
         var $e = self.$element.find('> span:last-child');
         var q = $.when(this._super());

addons/web/static/src/xml/base.xml

@@ -1299,13 +1299,14 @@
 <div t-name="SearchView.InputView"
      class="oe_searchview_input"
      contenteditable="true"/>
-<div t-name="SearchView.FacetView"
+<button t-name="SearchView.FacetView"
+     type="button"
      class="oe_searchview_facet">
     <span class="oe_facet_remove">✖</span>
     <span class="oe_facet_category">
         <t t-esc="widget.model.get('category')"/>
     </span ><span/>
-</div>
+</button>
 <span t-name="SearchView.FacetView.Value">
     <t t-esc="widget.model.get('label')"/>
 </span>