[IMP] style search view/query

bzr revid: xmo@openerp.com-20120430143907-xqqyvtgazos70knw

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 1a5136f..ee6009f 100644 (file)
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1049,45 +1049,61 @@
   position: relative;
   float: right;
   padding-right: 20px;
-  background: white;
-}
-.openerp .oe_searchview .VS-search .VS-search-box {
-  min-height: 0;
-  border-width: 1px;
-  padding: 0;
   width: 410px;
+  border: 1px solid #ababab;
+  background: white;
+  -moz-border-radius: 1em;
+  -webkit-border-radius: 1em;
+  border-radius: 1em;
+  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
+  -box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
+}
+.openerp .oe_searchview:before {
+  color: #cccccc;
+  font-family: "mnmliconsRegular";
+  content: "r";
+  font-size: 150%;
+  padding: 0 1px 0 3px;
+  display: inline;
 }
-.openerp .oe_searchview .VS-search .VS-icon {
-  top: 5px;
-}
-.openerp .oe_searchview .VS-search .VS-icon-search {
-  left: 5px;
+.openerp .oe_searchview .oe_searchview_clear {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 22px;
+  width: 15px;
+  height: 100%;
+  background: url(../img/attachments-close.png) center center no-repeat;
 }
-.openerp .oe_searchview .VS-search .VS-search-inner {
-  margin: 0 40px 0 17px;
-  font-size: 13px;
+.openerp .oe_searchview .oe_searchview_unfold_drawer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  line-height: 2em;
+  padding: 0 7px 0 4px;
+  color: #cccccc;
+  cursor: pointer;
 }
-.openerp .oe_searchview .VS-search .VS-search-inner input {
-  font-size: inherit;
-  line-height: inherit;
-  height: auto;
-  padding: 0;
+.openerp .oe_searchview .oe_searchview_unfold_drawer:hover {
+  color: #999999;
 }
-.openerp .oe_searchview .VS-search .VS-search-inner .VS-input-width-tester {
-  font-size: inherit;
-  padding: 0;
+.openerp .oe_searchview .oe_searchview_unfold_drawer:before {
+  content: "▾";
 }
-.openerp .oe_searchview .VS-search .VS-search-inner .search_input {
-  margin-left: 0;
-  height: 22px;
+.openerp .oe_searchview .oe_searchview_facets {
+  display: inline-block;
 }
-.openerp .oe_searchview .VS-search .VS-search-inner .search_input input, .openerp .oe_searchview .VS-search .VS-search-inner .search_input .VS-input-width-tester {
-  padding: 0 2px;
-  height: inherit;
-  margin: 0;
+.openerp .oe_searchview .oe_searchview_input {
+  height: 2em;
+  min-width: 5px;
+  display: inline-block;
 }
-.openerp .oe_searchview .VS-search .VS-search-inner .search_facet {
-  padding: 0;
+.openerp .oe_searchview .oe_searchview_facet {
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
   margin: 1px 0;
   border: 1px solid #afafb6;
   -moz-border-radius: 3px;
@@ -1095,58 +1111,39 @@
   border-radius: 3px;
   background: #f0f0fa;
   height: 18px;
+  line-height: 18px;
 }
-.openerp .oe_searchview .VS-search .VS-search-inner .search_facet.is_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 .VS-search .VS-search-inner .search_facet.is_selected .category {
-  margin-left: 0;
-}
-.openerp .oe_searchview .VS-search .VS-search-inner .search_facet.is_selected .VS-icon-cancel {
-  filter: alpha(opacity=100);
-  opacity: 1;
-  background-position: center 0;
-}
-.openerp .oe_searchview .VS-search .VS-search-inner .search_facet .category {
-  padding: 0 4px 0 14px;
-  color: white;
-  background: #8786b7;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
-  font-weight: normal;
-  text-transform: none;
+.openerp .oe_searchview .oe_searchview_facet span {
+  display: inline-block;
   height: 18px;
-  line-height: 18px;
-  font-size: inherit;
 }
-.openerp .oe_searchview .VS-search .VS-search-inner .search_facet .search_facet_input_container {
+.openerp .oe_searchview .oe_searchview_facet span span {
   border-left: 1px solid #afafb6;
-  height: 18px;
-  line-height: 18px;
   padding: 0 4px;
-  cursor: pointer;
-}
-.openerp .oe_searchview .VS-search .VS-search-inner .search_facet .search_facet_remove {
-  left: 1px;
-  top: 3px;
 }
-.openerp .oe_searchview .VS-search .VS-icon-cancel {
-  right: 24px;
-}
-.openerp .oe_searchview .oe_searchview_unfold_drawer {
+.openerp .oe_searchview .oe_searchview_facet .oe_facet_remove {
   position: absolute;
   top: 0;
-  right: 0;
-  height: 100%;
-  line-height: 23px;
-  padding: 0 7px 0 4px;
+  left: 2px;
+  color: white;
+}
+.openerp .oe_searchview .oe_searchview_facet .oe_facet_remove:hover {
   color: #cccccc;
-  cursor: pointer;
 }
-.openerp .oe_searchview .oe_searchview_unfold_drawer:before {
-  content: "▾";
+.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);
+}
+.openerp .oe_searchview .oe_searchview_facet.oe_is_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 {
+  margin-left: 0;
 }
 .openerp .oe_searchview.oe_searchview_open_drawer .oe_searchview_drawer {
   display: block;
@@ -1200,7 +1197,7 @@
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced h4:before {
   content: "▸ ";
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced div {
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced form {
   display: none;
 }
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced button.oe_add_condition:before {
@@ -1220,7 +1217,7 @@
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced.oe_opened h4:before {
   content: "▾ ";
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced.oe_opened div {
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced.oe_opened form {
   display: block;
 }
 .openerp .oe_view_topbar {

diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index ee38da2..8aa40b6 100644 (file)
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -822,106 +822,91 @@ $colour4: #8a89ba
         position: relative
         float: right
         padding-right: 20px
+        width: 410px
+        border: 1px solid #ababab
         background: white
-        .VS-search
-            .VS-search-box
-                min-height: 0
-                border-width: 1px
-                padding: 0
-                width: 410px
-                //border: 1px solid #ababab
-                //margin-top: 0
-                //margin-bottom: 0
-                //padding: 4px 19px
-                //font-size: 13px
-                //background: url('../img/search.png') no-repeat 5px
-                //background-color: white
-                //@include radius(13px)
-                //@include box-shadow(0 1px 2px rgba(0,0,0,0.2) inset)
-            .VS-icon
-                top: 5px
-
-            .VS-icon-search
-                left: 5px
-
-            .VS-search-inner
-                margin: 0 40px 0 17px
-                font-size: 13px
-
-                input
-                    font-size: inherit
-                    line-height: inherit
-                    height: auto
-                    padding: 0
-
-                .VS-input-width-tester
-                    font-size: inherit
-                    padding: 0
-
-                .search_input
-                    margin-left: 0
-                    height: 22px
-                    input, .VS-input-width-tester
-                        padding: 0 2px
-                        height: inherit
-                        margin: 0
-
-                .search_facet
-                    padding: 0
-                    margin: 1px 0
-                    border: 1px solid $facets-border
-                    @include radius(3px)
-                    background: #f0f0fa
-                    height: 18px
-
-                    &.is_selected
-                        border-color: $facets-border-selected
-                        @include box-shadow(0 0 3px 1px $facets-border-selected)
-
-                        .category
-                            margin-left: 0
-                        .VS-icon-cancel
-                            // don't change the icon on selection
-                            @include opacity(1.0)
-                            background-position: center 0
-
-                    .category
-                        padding: 0 4px 0 14px
-                        color: white
-                        background: #8786b7
-                        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
-                        font-weight: normal
-                        text-transform: none
-                        height: 18px
-                        line-height: 18px
-                        font-size: inherit
-
-                    .search_facet_input_container
-                        border-left: 1px solid $facets-border
-                        height: 18px
-                        line-height: 18px
-                        padding: 0 4px
-                        cursor: pointer
+        @include radius(1em)
+        @include box-shadow(0 1px 2px rgba(0,0,0,0.2) inset)
 
-                    .search_facet_remove
-                        left: 1px
-                        top: 3px
+        &:before
+            color: #ccc
+            font-family: "mnmliconsRegular"
+            content: "r"
+            font-size: 150%
+            padding: 0 1px 0 3px
+            display: inline
 
-            .VS-icon-cancel
-                right: 24px
+        .oe_searchview_clear
+            cursor: pointer
+            position: absolute
+            top: 0
+            right: 22px
+            width: 15px
+            height: 100%
+            background: url(../img/attachments-close.png) center center no-repeat
 
         .oe_searchview_unfold_drawer
             position: absolute
             top: 0
             right: 0
             height: 100%
-            line-height: 23px
+            line-height: 2em
             padding: 0 7px 0 4px
             color: #ccc
             cursor: pointer
+            &:hover
+                color: #999
             &:before
                 content: "▾"
 
+        .oe_searchview_facets
+            display: inline-block
+
+        .oe_searchview_input
+            height: 2em
+            min-width: 5px
+            display: inline-block
+
+        .oe_searchview_facet
+            position: relative
+            cursor: pointer
+            display: inline-block
+            margin: 1px 0
+            border: 1px solid $facets-border
+            @include radius(3px)
+            background: #f0f0fa
+            height: 18px
+            line-height: 18px
+
+            span
+                display: inline-block
+                height: 18px
+                span
+                    border-left: 1px solid $facets-border
+                    padding: 0 4px
+
+            .oe_facet_remove
+                position: absolute
+                top: 0
+                left: 2px
+                color: white
+
+                &:hover
+                    color: #ccc
+
+            .oe_facet_category
+                padding: 0 4px 0 14px
+                color: white
+                background: #8786b7
+                text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
+
+            &.oe_is_selected
+                border-color: $facets-border-selected
+                @include box-shadow(0 0 3px 1px $facets-border-selected)
+
+                .oe_facet_category
+                    margin-left: 0
+
         &.oe_searchview_open_drawer
             .oe_searchview_drawer
                 display: block
@@ -974,7 +959,7 @@ $colour4: #8a89ba
                 h4:before
                     content: "▸ "
 
-                div
+                form
                     display: none
 
                 button.oe_add_condition:before
@@ -992,7 +977,7 @@ $colour4: #8a89ba
                 &.oe_opened
                     h4:before
                         content: "▾ "
-                    div
+                    form
                         display: block
     // }}}
     // View.topbar {{{

diff --git a/addons/web/static/src/js/search.js b/addons/web/static/src/js/search.js
index 24d3212..e4ba54c 100644 (file)
--- a/addons/web/static/src/js/search.js
+++ b/addons/web/static/src/js/search.js
@@ -133,7 +133,7 @@ my.FacetView = instance.web.Widget.extend({
     },
     start: function () {
         var self = this;
-        var $e = self.$element.find('span');
+        var $e = self.$element.find('> span:last-child');
         var q = $.when(this._super());
         return q.pipe(function () {
             var values = self.model.values.map(function (value) {

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index c275903..66502ea 100644 (file)
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1291,18 +1291,21 @@
 
 <div t-name="SearchView" class="oe_searchview">
     <div class="oe_searchview_facets"/>
+    <div class="oe_searchview_clear"/>
     <div class="oe_searchview_unfold_drawer"/>
     <div class="oe_searchview_drawer"/>
 </div>
 
 <div t-name="SearchView.InputView"
      class="oe_searchview_input"
-     style="height: 2em; min-width: 1em; display: inline-block;"
      contenteditable="true"/>
 <div t-name="SearchView.FacetView"
-     class="oe_searchview_facet"
-     style="outline: 1px solid black; min-width: 40px; height: 2em; display: inline-block">
-    <t t-esc="widget.model.get('category')"/>: <span/>
+     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>
 <span t-name="SearchView.FacetView.Value">
     <t t-esc="widget.model.get('label')"/>