From 48fa9b06cb58e37b49b60cf16f9942a9daf7af13 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@openerp.com>
Date: Mon, 14 May 2012 16:24:49 +0200
Subject: [PATCH] [IMP] redo faceted search styles from scratch

bzr revid: xmo@openerp.com-20120514142449-m2us3n83iqp2jskb
---
 addons/web/static/src/css/base.css  | 84 ++++++++++++++--------------
 addons/web/static/src/css/base.sass | 86 ++++++++++++++---------------
 addons/web/static/src/xml/base.xml  | 18 +++---
 3 files changed, 92 insertions(+), 96 deletions(-)

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 11095d7baf1..5b032ebed4c 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1091,9 +1091,6 @@
 .openerp .oe_searchview .oe_searchview_unfold_drawer:before {
   content: "▾";
 }
-.openerp .oe_searchview .oe_searchview_facets {
-  display: inline-block;
-}
 .openerp .oe_searchview .oe_searchview_facets:before {
   color: #cccccc;
   font-family: "mnmliconsRegular";
@@ -1102,64 +1099,63 @@
   padding: 0 1px 0 3px;
   display: inline;
 }
-.openerp .oe_searchview .oe_searchview_input {
-  height: 2em;
-  padding: 0 3px;
+.openerp .oe_searchview .oe_searchview_facets * {
+  vertical-align: top;
   display: inline-block;
+  line-height: 26px;
 }
-.openerp .oe_searchview .oe_searchview_input:focus {
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_input, .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet {
+  height: 26px;
+}
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_input:focus, .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet:focus {
   outline: none;
 }
-.openerp .oe_searchview .oe_searchview_facet {
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_input {
+  padding: 0 3px;
+}
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet {
   position: relative;
   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;
   border-radius: 3px;
-  background: #f0f0fa;
-  height: 18px;
-  line-height: 18px;
-  -webkit-font-smoothing: auto;
-}
-.openerp .oe_searchview .oe_searchview_facet span {
-  display: inline-block;
-  height: 18px;
-}
-.openerp .oe_searchview .oe_searchview_facet span span {
-  border-left: 1px solid #afafb6;
-  padding: 0 4px;
-}
-.openerp .oe_searchview .oe_searchview_facet .oe_facet_remove {
-  position: absolute;
-  top: 0;
-  left: 2px;
-  color: white;
-}
-.openerp .oe_searchview .oe_searchview_facet .oe_facet_remove:hover {
-  color: #cccccc;
-}
-.openerp .oe_searchview .oe_searchview_facet .oe_facet_category {
-  padding: 0 4px 0 14px;
-  color: white;
   background: #8786b7;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+  -webkit-font-smoothing: auto;
+  padding-left: 1.1em;
+  margin: 1px 0;
 }
-.openerp .oe_searchview .oe_searchview_facet:focus {
+.openerp .oe_searchview .oe_searchview_facets .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:focus .oe_facet_category {
-  margin-left: 0;
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_values {
+  background: #f0f0fa;
+  -moz-border-radius: 0 3px 3px 0;
+  -webkit-border-radius: 0 3px 3px 0;
+  border-radius: 0 3px 3px 0;
+}
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_category, .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_value {
+  height: 24px;
+  padding: 1px 0.1em;
+}
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_category {
+  color: white;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+}
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_value {
+  border-left: 1px solid #afafb6;
+}
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_remove {
+  position: absolute;
+  top: 0;
+  left: 2px;
+  color: white;
+}
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_remove:hover {
+  color: #cccccc;
 }
 .openerp .oe_searchview.oe_searchview_open_drawer .oe_searchview_drawer {
   display: block;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index c1824427f58..1c868f107cb 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -857,7 +857,6 @@ $colour4: #8a89ba
                 content: "▾"
 
         .oe_searchview_facets
-            display: inline-block
             &:before
                 color: #ccc
                 font-family: "mnmliconsRegular"
@@ -866,56 +865,57 @@ $colour4: #8a89ba
                 padding: 0 1px 0 3px
                 display: inline
 
-        .oe_searchview_input
-            height: 2em
-            padding: 0 3px
-            display: inline-block
-            &:focus
-                outline: none
-
-        .oe_searchview_facet
-            position: relative
-            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
+            *
+                vertical-align: top
                 display: inline-block
-                height: 18px
-                span
-                    border-left: 1px solid $facets-border
-                    padding: 0 4px
+                line-height: 26px
 
-            .oe_facet_remove
-                position: absolute
-                top: 0
-                left: 2px
-                color: white
+            .oe_searchview_input, .oe_searchview_facet
+                height: 26px
+                &:focus
+                    outline: none
 
-                &:hover
-                    color: #ccc
+            .oe_searchview_input
+                padding: 0 3px
 
-            .oe_facet_category
-                padding: 0 4px 0 14px
-                color: white
+            .oe_searchview_facet
+                position: relative
+                cursor: pointer
+                border: 1px solid $facets-border
+                @include radius(3px)
                 background: #8786b7
-                text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
+                -webkit-font-smoothing: auto
+                padding-left: 1.1em
+                // spacing for opera, FF
+                margin: 1px 0
 
-            &:focus
-                border-color: $facets-border-selected
-                @include box-shadow(0 0 3px 1px $facets-border-selected)
+                &:focus
+                    border-color: $facets-border-selected
+                    @include box-shadow(0 0 3px 1px $facets-border-selected)
+
+                .oe_facet_values
+                    background: #f0f0fa
+                    @include radius(0 3px 3px 0)
+
+                .oe_facet_category, .oe_facet_value
+                    height: 24px
+                    padding: 1px 0.1em
 
                 .oe_facet_category
-                    margin-left: 0
+                    color: white
+                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
+
+                .oe_facet_value
+                    border-left: 1px solid $facets-border
+
+                .oe_facet_remove
+                    position: absolute
+                    top: 0
+                    left: 2px
+                    color: white
+
+                    &:hover
+                        color: #ccc
 
         &.oe_searchview_open_drawer
             .oe_searchview_drawer
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 1e4fe45e287..8f40db182f4 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1299,19 +1299,19 @@
 <div t-name="SearchView.InputView"
      class="oe_searchview_input"
      contenteditable="true"/>
-<button t-name="SearchView.FacetView"
-     type="button"
-     class="oe_searchview_facet">
-    <span class="oe_facet_remove">✖</span>
-
-    <span class="oe_facet_category oe_i" t-if="widget.model.has('icon')">
+<!-- tabindex: makes div focusable -->
+<div t-name="SearchView.FacetView"
+     class="oe_searchview_facet"
+     tabindex="0"
+    ><span class="oe_facet_remove">✖</span
+    ><span class="oe_facet_category oe_i" t-if="widget.model.has('icon')">
         <t t-esc="widget.model.get('icon')"/>
     </span
     ><span class="oe_facet_category" t-if="!widget.model.has('icon')">
         <t t-esc="widget.model.get('category')"/>
-    </span ><span/>
-</button>
-<span t-name="SearchView.FacetView.Value">
+    </span ><span class="oe_facet_values"
+/></div>
+<span t-name="SearchView.FacetView.Value" class="oe_facet_value">
     <t t-esc="widget.model.get('label')"/>
 </span>