[ADD] selection/deselection of facets

bzr revid: xmo@openerp.com-20120430155912-c6tbyaqul6jc329u

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

@@ -1097,9 +1097,12 @@
 }
 .openerp .oe_searchview .oe_searchview_input {
   height: 2em;
-  min-width: 5px;
+  padding: 0 3px;
   display: inline-block;
 }
+.openerp .oe_searchview .oe_searchview_input:focus {
+  outline: none;
+}
 .openerp .oe_searchview .oe_searchview_facet {
   position: relative;
   cursor: pointer;
@@ -1136,13 +1139,13 @@
   background: #8786b7;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
 }
-.openerp .oe_searchview .oe_searchview_facet.oe_is_selected {
+.openerp .oe_searchview .oe_searchview_facet.oe_selected {
   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_is_selected .oe_facet_category {
+.openerp .oe_searchview .oe_searchview_facet.oe_selected .oe_facet_category {
   margin-left: 0;
 }
 .openerp .oe_searchview.oe_searchview_open_drawer .oe_searchview_drawer {

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

@@ -864,8 +864,10 @@ $colour4: #8a89ba
 
         .oe_searchview_input
             height: 2em
-            min-width: 5px
+            padding: 0 3px
             display: inline-block
+            &:focus
+                outline: none
 
         .oe_searchview_facet
             position: relative
@@ -900,7 +902,7 @@ $colour4: #8a89ba
                 background: #8786b7
                 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
 
-            &.oe_is_selected
+            &.oe_selected
                 border-color: $facets-border-selected
                 @include box-shadow(0 0 3px 1px $facets-border-selected)
 

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

@@ -118,7 +118,15 @@ my.SearchQuery = B.Collection.extend({
 });
 
 my.InputView = instance.web.Widget.extend({
-    template: 'SearchView.InputView'
+    template: 'SearchView.InputView',
+    start: function () {
+        var self = this;
+        var p = this._super.apply(this, arguments);
+        this.$element.on('focus', function () {
+            self.$element.siblings().trigger('deselect');
+        });
+        return p;
+    }
 });
 my.FacetView = instance.web.Widget.extend({
     template: 'SearchView.FacetView',
@@ -133,6 +141,16 @@ 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.siblings().trigger('deselect');
+            self.$element.addClass('oe_selected');
+        });
         var $e = self.$element.find('> span:last-child');
         var q = $.when(this._super());
         return q.pipe(function () {
@@ -237,7 +255,8 @@ instance.web.SearchView = instance.web.Widget.extend(/** @lends instance.web.Sea
         this.$element.on('click', '.oe_searchview_unfold_drawer', function () {
             self.$element.toggleClass('oe_searchview_open_drawer');
         });
-        this.$element.on('click', '.oe_facet_remove', function () {
+        this.$element.on('click', '.oe_facet_remove', function (e) {
+            e.stopImmediatePropagation();
             // get index of clicked facet: number of preceding facet siblings
             var index = $(this).closest('.oe_searchview_facet')
                    .prevAll('.oe_searchview_facet')