[MERGE] new searchview

fp orders

bzr revid: xmo@openerp.com-20120406120250-dlwt0kvt0y1e2snr

2 files changed, 369 insertions, 22 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 9d76817c0da..29735add56f 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -30,7 +30,7 @@
   border-radius: 3px;
   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-  -box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
   -webkit-font-smoothing: antialiased;
   outline: none;
@@ -56,7 +56,7 @@
   background-image: linear-gradient(to bottom, #f6f6f6, #e3e3e3);
   -moz-box-shadow: 0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, 0.8) inset;
   -webkit-box-shadow: 0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-  -box-shadow: 0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, 0.8) inset;
+  box-shadow: 0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, 0.8) inset;
 }
 .openerp2 a.button:active, .openerp2 a.button.active, .openerp2 button:active, .openerp2 button.active, .openerp2 input[type='submit']:active, .openerp2 input[type='submit'].active {
   background: #e3e3e3;
@@ -65,14 +65,14 @@
   background: linear-gradient(top, #e3e3e3, #f6f6f6) #1b468f;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
-  -box-shadow: none;
+  box-shadow: none;
 }
 .openerp2 a.button.disabled, .openerp2 button:disabled, .openerp2 input[type='submit']:disabled {
   background: #efefef !important;
   border: 1px solid #d1d1d1 !important;
   -moz-box-shadow: none !important;
   -webkit-box-shadow: none !important;
-  -box-shadow: none !important;
+  box-shadow: none !important;
   color: #aaaaaa !important;
   cursor: default;
   text-shadow: 0 1px 1px white !important;
@@ -88,7 +88,7 @@
   background-image: linear-gradient(to bottom, #dc5f59, #b33630);
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
-  -box-shadow: none;
+  box-shadow: none;
 }
 .openerp2 button.primary:hover {
   background-color: #df6b66;
@@ -100,7 +100,7 @@
   background-image: linear-gradient(to bottom, #df6b66, #bf3a33);
   -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
-  -box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
 }
 .openerp2 button.primary:active {
   background-color: #b33630;
@@ -112,7 +112,7 @@
   background-image: linear-gradient(to bottom, #b33630, #dc5f59);
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
-  -box-shadow: none;
+  box-shadow: none;
 }
 .openerp2 button.following {
   color: white;
@@ -254,7 +254,7 @@
   color: white;
   -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
   -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
 }
 .openerp2 .oe_topbar .oe_topbar_item .oe_active {
   background: #303030;
@@ -262,7 +262,7 @@
   color: white;
   -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
   -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
 }
 .openerp2 .oe_topbar .oe_topbar_avatar {
   width: 24px;
@@ -325,7 +325,7 @@
   border-radius: 0 0 6px 6px;
   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  -box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding-box;
   background-clip: padding-box;
@@ -353,7 +353,7 @@
   background-image: linear-gradient(to bottom, #292929, #191919);
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
-  -box-shadow: none;
+  box-shadow: none;
 }
 .openerp2 .oe_leftbar {
   width: 220px;
@@ -413,7 +413,7 @@
   color: white;
   -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
   -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
 }
 .openerp2 .oe_menu .oe_active {
   background: #303030;
@@ -421,7 +421,7 @@
   color: white;
   -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
   -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
 }
 .openerp2 .oe_menu_more_container {
   position: relative;
@@ -477,7 +477,7 @@
   border-radius: 4px;
   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-  -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 .openerp2 .oe_secondary_submenu .oe_active {
   background: #8a89ba;
@@ -486,7 +486,7 @@
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-  -box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 .openerp2 .oe_secondary_submenu .oe_active a {
   color: white;
@@ -497,7 +497,7 @@
   text-shadow: 0 1px 1px white;
   -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  -box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 .openerp2 .oe_secondary_submenu .oe_menu_toggler:before {
   width: 0;
@@ -626,7 +626,7 @@
   border: 1px solid #afafb6;
   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-  -box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
 .openerp2 .oe_form_header {
   padding: 4px 16px;
@@ -750,7 +750,7 @@
   border-radius: 3px;
   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  -box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
 .openerp2 .oe_dropdown_menu li {
   list-style-type: none;
@@ -778,7 +778,7 @@
   background-image: linear-gradient(to bottom, #f0f0fa, #eeeef6);
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
-  -box-shadow: none;
+  box-shadow: none;
 }
 .openerp2 .oe_kanban_group_title {
   margin: 1px 1px 4px;
@@ -814,7 +814,7 @@
 .openerp2 .oe_kanban_record:hover {
   -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
-  -box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
 }
 .openerp2 .oe_kanban_record .oe_kanban_title {
   font-weight: bold;
@@ -828,7 +828,7 @@
   border-radius: 3px;
   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  -box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 .openerp2 .oe_application a {
   color: #8a89ba;
@@ -836,6 +836,178 @@
 .openerp2 .oe_application a:hover {
   text-decoration: underline;
 }
+.openerp2 .oe_searchview {
+  position: relative;
+}
+.openerp2 .oe_searchview .VS-search .VS-search-box {
+  min-height: 0;
+  border-width: 1px;
+  padding: 0;
+}
+.openerp2 .oe_searchview .VS-search .VS-icon {
+  top: 5px;
+}
+.openerp2 .oe_searchview .VS-search .VS-icon-search {
+  left: 5px;
+}
+.openerp2 .oe_searchview .VS-search .VS-search-inner {
+  margin: 0 40px 0 17px;
+  font-size: 13px;
+}
+.openerp2 .oe_searchview .VS-search .VS-search-inner input {
+  font-size: inherit;
+  line-height: inherit;
+  height: auto;
+  padding: 0;
+}
+.openerp2 .oe_searchview .VS-search .VS-search-inner .VS-input-width-tester {
+  font-size: inherit;
+  padding: 0;
+}
+.openerp2 .oe_searchview .VS-search .VS-search-inner .search_input {
+  margin-left: 0;
+  height: 22px;
+}
+.openerp2 .oe_searchview .VS-search .VS-search-inner .search_input input, .openerp2 .oe_searchview .VS-search .VS-search-inner .search_input .VS-input-width-tester {
+  padding: 0 2px;
+  height: inherit;
+  margin: 0;
+}
+.openerp2 .oe_searchview .VS-search .VS-search-inner .search_facet {
+  padding: 0;
+  margin: 1px 0;
+  border: 1px solid #afafb6;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: #f0f0fa;
+  height: 18px;
+}
+.openerp2 .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;
+}
+.openerp2 .oe_searchview .VS-search .VS-search-inner .search_facet.is_selected .category {
+  margin-left: 0;
+}
+.openerp2 .oe_searchview .VS-search .VS-search-inner .search_facet.is_selected .VS-icon-cancel {
+  filter: alpha(opacity=100);
+  opacity: 1;
+  background-position: center 0;
+}
+.openerp2 .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;
+  height: 18px;
+  line-height: 18px;
+  font-size: inherit;
+}
+.openerp2 .oe_searchview .VS-search .VS-search-inner .search_facet .search_facet_input_container {
+  border-left: 1px solid #afafb6;
+  height: 18px;
+  line-height: 18px;
+  padding: 0 4px;
+  cursor: pointer;
+}
+.openerp2 .oe_searchview .VS-search .VS-search-inner .search_facet .search_facet_remove {
+  left: 1px;
+  top: 3px;
+}
+.openerp2 .oe_searchview .VS-search .VS-icon-cancel {
+  right: 24px;
+}
+.openerp2 .oe_searchview .VS-search .oe_vs_unfold_drawer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  line-height: 23px;
+  padding: 0 7px 0 4px;
+  color: #cccccc;
+  cursor: pointer;
+}
+.openerp2 .oe_searchview .VS-search .oe_vs_unfold_drawer:before {
+  content: "▾";
+}
+.openerp2 .oe_searchview.oe_searchview_open_drawer .oe_searchview_drawer {
+  display: block;
+}
+.openerp2 .oe_searchview .oe_searchview_drawer {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background-color: white;
+  width: 500px;
+  display: none;
+  border: 1px solid #cccccc;
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_filters {
+  display: table;
+  width: 100%;
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_filters > div {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: table-cell;
+  width: 50%;
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_filters h3 {
+  margin: 2px 4px 2px 8px;
+  color: #8786b7;
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_filters ul {
+  margin: 0 12px 3px;
+  padding: 0;
+  list-style: none;
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_filters li {
+  list-style: none;
+  padding: 3px 6px;
+  height: 14px;
+  color: inherit;
+  cursor: pointer;
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_filters li:hover {
+  background-color: #f0f0fa;
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_advanced h4 {
+  border-top: 1px solid #cccccc;
+  margin: 5px 0 3px;
+  cursor: pointer;
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_advanced h4:before {
+  content: "▸ ";
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_advanced div {
+  display: none;
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_advanced button.oe_add_condition:before {
+  content: "⊞ ";
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_advanced button.oe_apply:before {
+  content: "⚡ ";
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_advanced ul {
+  list-style: none;
+  padding: 0;
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_advanced li {
+  list-style: none;
+  margin: 0;
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_advanced.oe_opened h4:before {
+  content: "▾ ";
+}
+.openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_advanced.oe_opened div {
+  display: block;
+}
 
 .openerp .oe_form_field_many2one td:first-child {
   position: relative;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 49ce9b7466d..80410e395ed 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1,5 +1,8 @@
 
 // Variables {{{
+$section-title-color: #8786b7
+$facets-border: #afafb6
+$facets-border-selected: #a6a6fe
 $colour4: #8a89ba
 //$colour4: #d14836
 // }}}
@@ -29,7 +32,7 @@ $colour4: #8a89ba
 @mixin box-shadow($bsval: 0px 1px 4px #777)
     -moz-box-shadow: $bsval
     -webkit-box-shadow: $bsval
-    -box-shadow: $bsval
+    box-shadow: $bsval
 
 @mixin transition($transval: (border linear 0.2s, box-shadow linear 0.2s))
     -webkit-transition: $transval
@@ -46,6 +49,12 @@ $colour4: #8a89ba
     -webkit-background-clip: $clip
     -moz-background-clip: $clip
     background-clip: $clip
+
+@mixin unscrew-box
+    -moz-box-sizing: border-box
+    -webkit-box-sizing: border-box
+    box-sizing: border-box
+
 // }}}
 
 .openerp2
@@ -697,6 +706,172 @@ $colour4: #8a89ba
                 text-decoration: underline
     // }}}
 
+    // Search View {{{
+    .oe_searchview
+        position: relative
+
+        .VS-search
+            .VS-search-box
+                min-height: 0
+                border-width: 1px
+                padding: 0
+
+            .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
+
+                    .search_facet_remove
+                        left: 1px
+                        top: 3px
+
+            .VS-icon-cancel
+                right: 24px
+
+            .oe_vs_unfold_drawer
+                position: absolute
+                top: 0
+                right: 0
+                height: 100%
+                line-height: 23px
+                padding: 0 7px 0 4px
+                color: #ccc
+                cursor: pointer
+                &:before
+                    content: "▾"
+
+        &.oe_searchview_open_drawer
+            .oe_searchview_drawer
+                display: block
+
+        .oe_searchview_drawer
+            position: absolute
+            top: 100%
+            right: 0
+            background-color: white
+            width: 500px
+            display: none
+            border: 1px solid #ccc
+
+            .oe_searchview_filters
+                display: table
+                width: 100%
+
+                > div
+                    @include unscrew-box
+                    display: table-cell
+                    width: 50%
+
+                h3
+                    margin: 2px 4px 2px 8px
+                    color: $section-title-color
+
+                ul
+                    margin: 0 12px 3px
+                    padding: 0
+                    list-style: none
+
+                li
+                    list-style: none
+                    padding: 3px 6px
+                    height: 14px
+                    color: inherit
+                    cursor: pointer
+
+                    &:hover
+                        background-color: #f0f0fa
+
+            .oe_searchview_advanced
+                h4
+                    border-top: 1px solid #ccc
+                    margin: 5px 0 3px
+                    cursor: pointer
+
+                h4:before
+                    content: "▸ "
+
+                div
+                    display: none
+
+                button.oe_add_condition:before
+                    content: "⊞ "
+                button.oe_apply:before
+                    content: "⚡ "
+
+                ul
+                    list-style: none
+                    padding: 0
+                li
+                    list-style: none
+                    margin: 0
+
+                &.oe_opened
+                    h4:before
+                        content: "▾ "
+                    div
+                        display: block
+    // }}}
+
 // Transitional overrides for old styles {{{
 .openerp
     .oe_form_field_many2one