[MERGE] lp:openerp-web

bzr revid: jam@tinyerp.com-20120821044208-4n0fk3r8taj3gkfp

4 files changed, 318 insertions, 395 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index a39838070cb..2276bb2445e 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -64,6 +64,11 @@
   }
 }
 
+@media print {
+  .oe_topbar, .oe_leftbar, .oe_loading {
+    display: none !important;
+  }
+}
 .openerp.openerp_webclient_container {
   height: 100%;
   position: relative;
@@ -76,6 +81,7 @@
   color: #4c4c4c;
   font-size: 13px;
   background: white;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
   /* http://www.quirksmode.org/dom/inputfile.html
    * http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
    */
@@ -159,7 +165,7 @@
 .openerp a.button:link, .openerp a.button:visited, .openerp button, .openerp input[type='submit'], .openerp .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button {
   display: inline-block;
   border: 1px solid #ababab;
-  color: #404040;
+  color: #4c4c4c;
   margin: 0;
   padding: 3px 12px;
   font-size: 13px;
@@ -233,7 +239,7 @@
   font-size: 13px;
 }
 .openerp .ui-widget-content a {
-  color: #8a89ba;
+  color: #7c7bad;
 }
 .openerp .ui-menu .ui-menu-item {
   margin: 0 8px 0 0;
@@ -335,7 +341,7 @@
   border-radius: 0 0 2px 2px;
 }
 .openerp.ui-dialog .oe_about a {
-  color: #8a89ba;
+  color: #7c7bad;
 }
 .openerp.ui-dialog .oe_about a:hover {
   text-decoration: underline;
@@ -546,7 +552,7 @@
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
-  color: #8a89ba;
+  color: #7c7bad;
   font-weight: bold;
 }
 .openerp .oe_button.oe_link span:hover {
@@ -577,7 +583,7 @@
   color: #4c4c4c;
 }
 .openerp .oe_tag_dark {
-  background: #8786b7;
+  background: #7c7bad;
   color: #eeeeee;
 }
 .openerp .oe_tags.oe_inline {
@@ -1006,7 +1012,7 @@
 .openerp .oe_topbar {
   width: 100%;
   height: 31px;
-  border-top: solid 1px #d3d3d3;
+  border-top: solid 1px lightgrey;
   background-color: #646060;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626));
   background-image: -webkit-linear-gradient(top, #646060, #262626);
@@ -1179,7 +1185,7 @@
 .openerp .oe_secondary_menu_section {
   font-weight: bold;
   margin-left: 8px;
-  color: #8a89ba;
+  color: #7c7bad;
 }
 .openerp .oe_secondary_submenu {
   padding: 2px 0 8px 0;
@@ -1201,11 +1207,11 @@
   top: 1px;
   right: 1px;
   font-size: 10px;
-  background: #8a89ba;
+  background: #7c7bad;
   color: white;
   padding: 2px 4px;
   margin: 1px 6px 0 0;
-  border: 1px solid lightGray;
+  border: 1px solid lightgrey;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
@@ -1221,9 +1227,9 @@
   padding: 1px 4px;
 }
 .openerp .oe_secondary_submenu .oe_active {
-  background: #8a89ba;
-  border-top: 1px solid lightGray;
-  border-bottom: 1px solid lightGray;
+  background: #7c7bad;
+  border-top: 1px solid lightgrey;
+  border-bottom: 1px solid lightgrey;
   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);
@@ -1234,7 +1240,7 @@
 }
 .openerp .oe_secondary_submenu .oe_active .oe_menu_label {
   background: #eeeeee;
-  color: #8a89ba;
+  color: #7c7bad;
   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);
@@ -1242,7 +1248,7 @@
 }
 .openerp .oe_secondary_submenu .oe_active .oe_menu_counter {
   background: #eeeeee;
-  color: #8a89ba;
+  color: #7c7bad;
 }
 .openerp .oe_secondary_submenu .oe_menu_toggler:before {
   width: 0;
@@ -1272,7 +1278,7 @@
   width: 100%;
 }
 .openerp .oe_application a {
-  color: #8a89ba;
+  color: #7c7bad;
 }
 .openerp .oe_application a:hover {
   text-decoration: underline;
@@ -1297,6 +1303,9 @@
 .openerp .oe_view_manager table.oe_view_manager_header .oe_header_row:last-child td {
   padding-top: 0;
 }
+.openerp .oe_view_manager table.oe_view_manager_header .oe_header_row:first-child td {
+  padding-top: 8px;
+}
 .openerp .oe_view_manager table.oe_view_manager_header .oe_view_manager_sidebar {
   margin: 0px auto;
   text-align: center;
@@ -1310,7 +1319,7 @@
   float: left;
 }
 .openerp .oe_view_manager table.oe_view_manager_header h2 a {
-  color: #8a89ba;
+  color: #7c7bad;
 }
 .openerp .oe_view_manager table.oe_view_manager_header .oe_button_group {
   display: inline-block;
@@ -1669,7 +1678,7 @@
 }
 .openerp .oe_searchview .oe_searchview_drawer h3 {
   margin: 8px 4px 4px 12px;
-  color: #8786b7;
+  color: #7c7bad;
   font-size: 13px;
 }
 .openerp .oe_searchview .oe_searchview_drawer h4, .openerp .oe_searchview .oe_searchview_drawer h4 * {
@@ -1923,12 +1932,11 @@
   width: auto;
 }
 .openerp .oe_form_nosheet {
-  margin: 8px;
+  margin: 16px;
 }
 .openerp .oe_form_nosheet > header {
-  margin-top: -8px;
-  margin-left: -8px;
-  margin-right: -8px;
+  margin: -16px -16px 0 -16px;
+  padding: 8px;
 }
 .openerp .oe_form header {
   position: relative;
@@ -1940,8 +1948,6 @@
   background-image: -ms-linear-gradient(top, #fcfcfc, #dedede);
   background-image: -o-linear-gradient(top, #fcfcfc, #dedede);
   background-image: linear-gradient(to bottom, #fcfcfc, #dedede);
-  padding: 0 8px;
-  line-height: 30px;
 }
 .openerp .oe_form header ul {
   display: inline-block;
@@ -1951,6 +1957,7 @@
   min-width: 650px;
   max-width: 860px;
   margin: 0 auto;
+  padding: 16px 0 48px;
 }
 .openerp .oe_form div.oe_form_configuration div.oe_horizontal_separator {
   margin: 25px 0 10px 0;
@@ -1962,141 +1969,135 @@
 .openerp .oe_form div.oe_form_configuration label {
   min-width: 150px;
 }
-.openerp ul.oe_form_steps {
-  height: 30px;
-  padding: 0;
-  margin: 0;
-  text-shadow: 0 1px 1px white;
-}
-.openerp ul.oe_form_steps img {
-  vertical-align: top;
-  margin-left: 8px;
+.openerp ul.oe_form_steps, .openerp ul.oe_form_steps_clickable {
+  display: inline-block;
+  padding-right: 18px;
 }
-.openerp ul.oe_form_steps li {
-  border-right: none;
-  padding: 0;
-  margin: 0;
-  float: left;
-  vertical-align: top;
-  height: 30px;
-  padding: 0 0 0 12px;
+.openerp ul.oe_form_steps li, .openerp ul.oe_form_steps_clickable li {
+  display: inline-block;
+  margin-right: -20px;
+  background-color: #fcfcfc;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#dedede));
+  background-image: -webkit-linear-gradient(top, #fcfcfc, #dedede);
+  background-image: -moz-linear-gradient(top, #fcfcfc, #dedede);
+  background-image: -ms-linear-gradient(top, #fcfcfc, #dedede);
+  background-image: -o-linear-gradient(top, #fcfcfc, #dedede);
+  background-image: linear-gradient(to bottom, #fcfcfc, #dedede);
 }
-.openerp ul.oe_form_steps li:first-child {
+.openerp ul.oe_form_steps li:first-child .label, .openerp ul.oe_form_steps_clickable li:first-child .label {
   border-left: 1px solid #cacaca;
+  padding-left: 14px;
 }
-.openerp ul.oe_form_steps li:last-child {
-  margin-right: 12px;
-  padding-right: 12px;
+.openerp ul.oe_form_steps li:last-child, .openerp ul.oe_form_steps_clickable li:last-child {
   border-right: 1px solid #cacaca;
 }
-.openerp ul.oe_form_steps li a {
-  color: #4c4c4c;
-}
-.openerp ul.oe_form_steps li a:hover {
-  color: black;
+.openerp ul.oe_form_steps li:last-child .label, .openerp ul.oe_form_steps_clickable li:last-child .label {
+  padding-right: 14px;
 }
-.openerp ul.oe_form_steps .oe_form_steps_active {
-  font-weight: bold;
-  color: #b33630;
+.openerp ul.oe_form_steps li:last-child .arrow, .openerp ul.oe_form_steps_clickable li:last-child .arrow {
+  display: none;
 }
-.openerp ul.oe_form_steps_clickable {
-  height: 30px;
+.openerp ul.oe_form_steps li .label, .openerp ul.oe_form_steps_clickable li .label {
+  color: #4c4c4c;
+  text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede;
+  padding: 7px;
+  display: inline-block;
+  padding-left: 24px;
   margin: 0;
-  padding: 0;
-  text-shadow: 0 1px 1px #cacaca;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-}
-.openerp ul.oe_form_steps_clickable li {
-  border-right: none;
-  padding: 0 0 0 12px;
   position: relative;
-  float: left;
-  vertical-align: top;
-  height: 30px;
-  color: white;
-}
-.openerp ul.oe_form_steps_clickable li:after {
-  content: " ";
-  width: 0;
-  height: 0;
-  border-top: 21px solid transparent;
-  border-bottom: 21px solid transparent;
-  border-left: 5px solid #807fb4;
-  position: absolute;
-  top: 50%;
-  margin-top: -21px;
-  left: 100%;
-  z-index: 2;
+  z-index: 10;
 }
-.openerp ul.oe_form_steps_clickable li:hover:after {
-  border-left: 5px solid #807fb4;
-}
-.openerp ul.oe_form_steps_clickable li:before {
-  content: " ";
-  width: 0;
-  height: 0;
-  border-top: 21px solid transparent;
-  border-bottom: 21px solid transparent;
-  border-left: 5px solid white;
-  position: absolute;
-  top: 50%;
-  margin-top: -21px;
-  margin-left: 2px;
-  left: 100%;
-  z-index: 2;
+.openerp ul.oe_form_steps li .arrow, .openerp ul.oe_form_steps_clickable li .arrow {
+  width: 17px;
+  display: inline-block;
+  vertical-align: top;
+  overflow: hidden;
+  margin-left: -5px;
 }
-.openerp ul.oe_form_steps_clickable li.oe_form_steps_active {
-  font-weight: bold;
-  text-shadow: 0 1px 1px #999999;
-  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25);
-  background-color: #dc5f59;
-  background: -webkit-linear-gradient(top, #dc5f59, #b33630);
+.openerp ul.oe_form_steps li .arrow span, .openerp ul.oe_form_steps_clickable li .arrow span {
+  position: relative;
+  z-index: 11;
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  margin-left: -12px;
+  margin-top: 3px;
+  box-shadow: -1px 1px 2px rgba(255, 255, 255, 0.2), inset -1px 1px 1px rgba(0, 0, 0, 0.2);
+  background-color: #dedede;
+  background: -moz-linear-gradient(135deg, #dedede, #fcfcfc);
+  background: -o-linear-gradient(135deg, #fcfcfc, #dedede);
+  background: -webkit-gradient(linear, left top, right bottom, from(#fcfcfc), to(#dedede));
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+}
+.openerp ul.oe_form_steps li.oe_active, .openerp ul.oe_form_steps_clickable li.oe_active {
+  background-color: #729fcf;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
+  background-image: -webkit-linear-gradient(top, #729fcf, #3465a4);
+  background-image: -moz-linear-gradient(top, #729fcf, #3465a4);
+  background-image: -ms-linear-gradient(top, #729fcf, #3465a4);
+  background-image: -o-linear-gradient(top, #729fcf, #3465a4);
+  background-image: linear-gradient(to bottom, #729fcf, #3465a4);
+}
+.openerp ul.oe_form_steps li.oe_active .arrow span, .openerp ul.oe_form_steps_clickable li.oe_active .arrow span {
+  background-color: #3465a4;
+  background: -moz-linear-gradient(135deg, #3465a4, #729fcf);
+  background: -o-linear-gradient(135deg, #729fcf, #3465a4);
+  background: -webkit-gradient(linear, left top, right bottom, from(#729fcf), to(#3465a4));
+}
+.openerp ul.oe_form_steps li.oe_active .label, .openerp ul.oe_form_steps_clickable li.oe_active .label {
   color: white;
+  text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
 }
-.openerp ul.oe_form_steps_clickable li.oe_form_steps_inactive {
+.openerp ul.oe_form_steps_clickable li {
   cursor: pointer;
-  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25);
-  background-color: #adadcf;
-  background: -webkit-linear-gradient(top, #adadcf, #7c7ba7);
-}
-.openerp ul.oe_form_steps_clickable li.oe_form_steps_inactive div {
-  padding: 0 30px 0 0;
-}
-.openerp ul.oe_form_steps_clickable li.oe_form_steps_inactive:hover {
-  background: -webkit-linear-gradient(top, #7c7ba7, #adadcf);
-}
-.openerp ul.oe_form_steps_clickable li div {
-  padding: 0 30px 0 0;
 }
-.openerp ul.oe_form_steps_clickable li.oe_form_steps_active:after {
-  content: " ";
-  display: block;
-  width: 0;
-  height: 0;
-  border-top: 21px solid transparent;
-  border-bottom: 21px solid transparent;
-  border-left: 5px solid #b33630;
-  position: absolute;
-  top: 50%;
-  margin-top: -21px;
-  left: 100%;
-  z-index: 2;
-}
-.openerp ul.oe_form_steps_clickable li.oe_form_steps_active:before {
-  content: " ";
-  display: block;
-  width: 0;
-  height: 0;
-  border-top: 21px solid transparent;
-  border-bottom: 21px solid transparent;
-  border-left: 5px solid white;
-  position: absolute;
-  top: 50%;
-  margin-top: -21px;
-  margin-left: 2px;
-  left: 100%;
-  z-index: 2;
+.openerp ul.oe_form_steps_clickable li:hover {
+  background-color: #e8e8e8;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#cacaca));
+  background-image: -webkit-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: -moz-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: -ms-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: -o-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: linear-gradient(to bottom, #e8e8e8, #cacaca);
+}
+.openerp ul.oe_form_steps_clickable li:hover .label {
+  text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede;
+}
+.openerp ul.oe_form_steps_clickable li:hover .arrow span {
+  background-color: #e8e8e8;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#cacaca));
+  background-image: -webkit-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: -moz-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: -ms-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: -o-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: linear-gradient(to bottom, #e8e8e8, #cacaca);
+}
+.openerp ul.oe_form_steps_clickable li .label {
+  color: #7c7bad;
+}
+.openerp ul.oe_form_steps_clickable li.oe_active:hover {
+  background-color: #4c85c2;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#4c85c2), to(#284d7d));
+  background-image: -webkit-linear-gradient(top, #4c85c2, #284d7d);
+  background-image: -moz-linear-gradient(top, #4c85c2, #284d7d);
+  background-image: -ms-linear-gradient(top, #4c85c2, #284d7d);
+  background-image: -o-linear-gradient(top, #4c85c2, #284d7d);
+  background-image: linear-gradient(to bottom, #4c85c2, #284d7d);
+}
+.openerp ul.oe_form_steps_clickable li.oe_active:hover .label {
+  text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;
+}
+.openerp ul.oe_form_steps_clickable li.oe_active:hover .arrow span {
+  background-color: #284d7d;
+  background: -moz-linear-gradient(135deg, #284d7d, #4c85c2);
+  background: -o-linear-gradient(135deg, #4c85c2, #284d7d);
+  background: -webkit-gradient(linear, left top, right bottom, from(#4c85c2), to(#284d7d));
 }
 .openerp .oe_form .oe_subtotal_footer {
   width: 1% !important;
@@ -2178,7 +2179,7 @@
 }
 .openerp .oe_form .oe_form_label_help[for] span, .openerp .oe_form .oe_form_label[for] span {
   font-size: 80%;
-  color: darkGreen;
+  color: darkgreen;
   vertical-align: top;
   position: relative;
   top: -4px;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index f1d1f2e9f1f..653adad7813 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -2,13 +2,13 @@
 
 // Variables {{{
 $facets-border: #afafb6
-$section-title-color: #8786b7
+$section-title-color: #7C7BAD
 $tag-bg-light: #f0f0fa
-$tag-bg-dark: #8786b7
+$tag-bg-dark: #7C7BAD
 $tag-border: #afafb6
 $tag-border-selected: #a6a6fe
 $hover-background: #f0f0fa
-$link-color: #8a89ba
+$link-color: #7C7BAD
 $sheet-max-width: 860px
 // }}}
 // Mixins {{{
@@ -88,6 +88,18 @@ $sheet-max-width: 860px
     -ms-box-sizing: #{$type}-box
     box-sizing: #{$type}-box
 
+@mixin skew-gradient($startColor: #555, $endColor: #333)
+    background-color: $endColor
+    background: -moz-linear-gradient(135deg, $endColor, $startColor)
+    background: -o-linear-gradient(135deg, $startColor, $endColor)
+    background: -webkit-gradient(linear, left top, right bottom, from($startColor), to($endColor))
+
+@mixin transform($transform)
+    -moz-transform: $transform
+    -webkit-transform: $transform
+    -o-transform: $transform
+    -ms-transform: $transform
+
 // Transforms the (readable) text of an inline element into an mmlicons icon,
 // allows for actual readable text in-code (and in readers?) with iconic looks
 @mixin text-to-icon($icon-name, $color: #404040)
@@ -130,6 +142,10 @@ $sheet-max-width: 860px
         opacity: 1
 // }}}
 
+@media print
+    .oe_topbar, .oe_leftbar, .oe_loading
+        display: none !important
+
 .openerp.openerp_webclient_container
     height: 100%
     position: relative
@@ -142,13 +158,14 @@ $sheet-max-width: 860px
     color: #4c4c4c
     font-size: 13px
     background: white
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5)
     // }}}
     //Placeholder style{{{
     \:-moz-placeholder
-        color: $facets-border !important
+        color: $tag-border !important
         font-style: italic !important
     \::-webkit-input-placeholder
-        color: $facets-border !important
+        color: $tag-border !important
         font-style: italic !important
     //}}}
     // Tag reset {{{
@@ -161,7 +178,7 @@ $sheet-max-width: 860px
         font-weight: bold
         background-color: #f0f0f0
         th
-            border-right: 1px dotted $facets-border
+            border-right: 1px dotted $tag-border
             &:last-child
                 border-right: none
     th, td
@@ -196,7 +213,7 @@ $sheet-max-width: 860px
     a.button:link, a.button:visited, button, input[type='submit'], .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button
         display: inline-block
         border: 1px solid #ababab
-        color: #404040
+        color: #4c4c4c
         margin: 0
         padding: 3px 12px
         font-size: 13px
@@ -557,7 +574,7 @@ $sheet-max-width: 860px
         top: 26px
         left: 0
         z-index: 1
-        border: 1px solid $facets-border
+        border: 1px solid $tag-border
         background: white
         padding: 4px 0
         min-width: 140px
@@ -837,7 +854,7 @@ $sheet-max-width: 860px
         display: none
         width: 220px
         background: #f0eeee
-        border-right: 1px solid $facets-border
+        border-right: 1px solid $tag-border
         text-shadow: 0 1px 1px white
         padding-bottom: 16px
     a.oe_logo
@@ -1008,6 +1025,9 @@ $sheet-max-width: 860px
             .oe_header_row:last-child
                 td
                     padding-top: 0
+            .oe_header_row:first-child
+                td
+                    padding-top: 8px
             .oe_view_manager_sidebar
                 margin: 0px auto
                 text-align: center
@@ -1278,7 +1298,7 @@ $sheet-max-width: 860px
             background-color: white
             min-width: 100%
             display: none
-            border: 1px solid $facets-border
+            border: 1px solid $tag-border
             text-align: left
             @include radius(4px)
             @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
@@ -1485,11 +1505,10 @@ $sheet-max-width: 860px
         .oe_form .oe_form_field_date
             width: auto
     .oe_form_nosheet
-        margin: 8px
-    .oe_form_nosheet > header
-        margin-top: -8px
-        margin-left: -8px
-        margin-right: -8px
+        margin: 16px
+        > header
+            margin: -16px -16px 0 -16px
+            padding: 8px
     // }}}
     // FormView.custom tags and classes {{{
     .oe_form
@@ -1497,8 +1516,6 @@ $sheet-max-width: 860px
             position: relative
             border-bottom: 1px solid #cacaca
             @include vertical-gradient(#fcfcfc, #dedede)
-            padding: 0 8px
-            line-height: 30px
             ul
                 display: inline-block
                 float: right
@@ -1506,6 +1523,7 @@ $sheet-max-width: 860px
             min-width: 650px
             max-width: $sheet-max-width
             margin: 0 auto
+            padding: 16px 0 48px
         div.oe_form_configuration
             div.oe_horizontal_separator 
                 margin: 25px 0 10px 0
@@ -1514,122 +1532,78 @@ $sheet-max-width: 860px
                 max-width: 650px
             label
                 min-width: 150px
-    ul.oe_form_steps
-        height: 30px
-        padding: 0
-        margin: 0
-        text-shadow: 0 1px 1px white
-        img
-            vertical-align: top
-            margin-left: 8px
-        li
-            border-right: none
-            padding: 0
-            margin: 0
-            float: left
-            vertical-align: top
-            height: 30px
-            padding: 0 0 0 12px
-            &:first-child
+                
+
+    ul.oe_form_steps, ul.oe_form_steps_clickable
+        display: inline-block
+        padding-right: 18px
+        li 
+            display: inline-block
+            margin-right: -20px
+            @include vertical-gradient(#fcfcfc, #dedede)
+            &:first-child .label
                 border-left: 1px solid #cacaca
+                padding-left: 14px
             &:last-child
-                margin-right: 12px
-                padding-right: 12px
                 border-right: 1px solid #cacaca
-            a
+                .label
+                    padding-right: 14px
+                .arrow
+                    display: none
+            .label 
                 color: #4c4c4c
-                &:hover
-                    color: black
-        .oe_form_steps_active
-            font-weight: bold
-            color: #b33630
+                text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede
+                padding: 7px
+                display: inline-block
+                padding-left: 24px
+                margin: 0
+                position: relative
+                z-index: 10
+            .arrow
+                width: 17px
+                display: inline-block
+                vertical-align: top
+                overflow: hidden
+                margin-left: -5px
+                span 
+                    position: relative
+                    z-index: 11
+                    width: 24px
+                    height: 24px
+                    display: inline-block
+                    margin-left: -12px
+                    margin-top: 3px
+                    box-shadow: -1px 1px 2px rgba(255,255,255,0.2), inset -1px 1px 1px rgba(0,0,0,0.2)
+                    @include skew-gradient(#fcfcfc, #dedede)
+                    @include radius(3px)
+                    @include transform(rotate(45deg))
+        li.oe_active
+            @include vertical-gradient(#729fcf, #3465a4)
+            .arrow span 
+                @include skew-gradient(#729fcf, #3465a4)
+            .label
+                color: white
+                text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4
+
     ul.oe_form_steps_clickable
-        height: 30px
-        margin: 0
-        padding: 0
-        text-shadow: 0 1px 1px #cacaca
-        box-shadow: 0 0 1px rgba(0,0,0,0.5)
-        overflow: hidden
         li
-            border-right: none
-            padding: 0 0 0 12px
-            position: relative
-            float: left
-            vertical-align: top
-            height: 30px
-            color: white
-            &:after
-                content: " "
-                width: 0
-                height: 0
-                border-top: 21px solid transparent
-                border-bottom: 21px solid transparent
-                border-left: 5px solid #807fb4
-                position: absolute
-                top: 50%
-                margin-top: -21px
-                left: 100%
-                z-index: 2
-            &:hover:after
-                border-left: 5px solid #807fb4
-            &:before
-                content: " "
-                width: 0
-                height: 0
-                border-top: 21px solid transparent
-                border-bottom: 21px solid transparent
-                border-left: 5px solid white
-                position: absolute
-                top: 50%
-                margin-top: -21px
-                margin-left: 2px
-                left: 100%
-                z-index: 2
-            &.oe_form_steps_active
-                font-weight: bold
-                text-shadow: 0 1px 1px #999999
-                box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25)
-                background-color: #dc5f59
-                background: -webkit-linear-gradient(top, #dc5f59, #b33630)
-                color: white
-            &.oe_form_steps_inactive
-                cursor: pointer
-                box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25)
-                background-color: #adadcf
-                background: -webkit-linear-gradient(top, #adadcf, #7c7ba7)
-                div
-                    padding: 0 30px 0 0
-            &.oe_form_steps_inactive:hover
-                background: -webkit-linear-gradient(top, #7c7ba7, #adadcf)
-            div
-                padding: 0 30px 0 0            
-            &.oe_form_steps_active:after
-                content: " "
-                display: block
-                width: 0
-                height: 0
-                border-top: 21px solid transparent
-                border-bottom: 21px solid transparent
-                border-left: 5px solid #b33630
-                position: absolute
-                top: 50%
-                margin-top: -21px
-                left: 100%
-                z-index: 2
-            &.oe_form_steps_active:before
-                content: " "
-                display: block
-                width: 0
-                height: 0
-                border-top: 21px solid transparent
-                border-bottom: 21px solid transparent
-                border-left: 5px solid white
-                position: absolute
-                top: 50%
-                margin-top: -21px
-                margin-left: 2px
-                left: 100%
-                z-index: 2
+            cursor: pointer
+            &:hover 
+                @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
+                .label
+                    text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede
+                .arrow span 
+                    @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
+            .label
+                color: $link-color
+        li.oe_active
+            &:hover 
+                @include vertical-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
+                .label
+                    text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4
+                .arrow span 
+                    @include skew-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
+
     .oe_form .oe_subtotal_footer
         width: 1% !important
         td.oe_form_group_cell
@@ -1663,7 +1637,7 @@ $sheet-max-width: 860px
             background: white
             min-height: 330px
             padding: 16px
-            border: 1px solid $facets-border
+            border: 1px solid $tag-border
             @include box-shadow(0 0 10px rgba(0,0,0,0.3))
             .ui-tabs
                 margin: 0 -16px
@@ -2098,7 +2072,7 @@ $sheet-max-width: 860px
             border-bottom: 2px solid #cacaca
         .treeview-tr, .treeview-td
             cursor: pointer
-            border-right: 1px dotted $facets-border
+            border-right: 1px dotted $tag-border
             vertical-align: top
             text-align: left
             border-bottom: 1px solid #cfcccc
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index e253cc8da89..069c1840611 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -1916,6 +1916,7 @@ instance.web.form.AbstractField = instance.web.form.FormWidget.extend(instance.w
         this.field = this.field_manager.get_field(this.name);
         this.widget = this.node.attrs.widget;
         this.string = this.node.attrs.string || this.field.string || this.name;
+        this.options = JSON.parse(this.node.attrs.options || '{}');
         this.set({'value': false});
         this.set({required: this.modifiers['required'] === true});
 
@@ -2001,16 +2002,6 @@ instance.web.form.AbstractField = instance.web.form.FormWidget.extend(instance.w
     focus: function() {
         return false;
     },
-    /**
-     * Utility method to get the widget options defined in the field xml description.
-     */
-    get_definition_options: function() {
-        if (!this.definition_options) {
-            var str = this.node.attrs.options || '{}';
-            this.definition_options = JSON.parse(str);
-        }
-        return this.definition_options;
-    },
     set_input_id: function(id) {
         this.id_for_label = id;
     },
@@ -2675,7 +2666,7 @@ instance.web.form.CompletionFieldMixin = {
         var slow_create = function () {
             self._search_create_popup("form", undefined, {"default_name": name});
         };
-        if (self.get_definition_options().quick_create === undefined || self.get_definition_options().quick_create) {
+        if (self.options.quick_create === undefined || self.options.quick_create) {
             new instance.web.DataSet(this, this.field.relation, self.build_context())
                 .name_create(name, function(data) {
                     self.add_id(data[0]);
@@ -2932,7 +2923,7 @@ instance.web.form.FieldMany2One = instance.web.form.AbstractField.extend(instanc
             var lines = _.escape(str).split("\n");
             var link = "";
             var follow = "";
-            if (! this.get_definition_options().highlight_first_line) {
+            if (! this.options.highlight_first_line) {
                 link = lines.join("<br />");
             } else {
                 link = lines[0];
@@ -2943,7 +2934,7 @@ instance.web.form.FieldMany2One = instance.web.form.AbstractField.extend(instanc
             var $link = this.$element.find('.oe_form_uri')
                  .unbind('click')
                  .html(link);
-            if (! this.get_definition_options().no_open)
+            if (! this.options.no_open)
                 $link.click(function () {
                     self.do_action({
                         type: 'ir.actions.act_window',
@@ -2962,7 +2953,7 @@ instance.web.form.FieldMany2One = instance.web.form.AbstractField.extend(instanc
         var self = this;
         if (value_ instanceof Array) {
             this.display_value = {};
-            if (! this.get_definition_options().always_reload) {
+            if (! this.options.always_reload) {
                 this.display_value["" + value_[0]] = value_[1];
             }
             value_ = value_[0];
@@ -4683,18 +4674,23 @@ instance.web.form.FieldBinaryImage = instance.web.form.FieldBinary.extend({
 
 instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
     template: "FieldStatus",
-    clickable: false,
+    init: function(field_manager, node) {
+        this._super(field_manager, node);
+        this.options.clickable = this.options.clickable || (this.node.attrs || {}).clickable || false;
+        this.options.visible = this.options.visible || (this.node.attrs || {}).statusbar_visible || false;
+        this.selected_value = null;
+    },
     start: function() {
         this._super();
-        this.selected_value = null;
-        this.clickable = !!this.node.attrs.clickable;
+        // backward compatibility
+        this.loaded = new $.Deferred();
+        if (this.options.clickable) {
+            this.$element.on('click','li',this.on_click_stage);
+        }
+        // TODO move the following into css :after
         if (this.$element.parent().is('header')) {
             this.$element.after('<div class="oe_clear"/>');
         }
-        // preview in start only for selection fields, because of the dynamic behavior of many2one fields.
-        if (this.field.type in ['selection']) {
-            this.render_list();
-        }
     },
     set_value: function(value_) {
         var self = this;
@@ -4709,115 +4705,72 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
         }
         // trick to be sure all values are loaded in the form, therefore
         // enabling the evaluation of dynamic domains
+        self.selection = [];
         $.async_when().then(function() {
-            return self.render_list();
+            self.get_selection();
         });
+        return this.loaded;
     },
-
-    /** Get the status list and render them
-     *  to_show: [[identifier, value_to_display]] where
-     *   - identifier = key for a selection, id for a many2one
-     *   - display_val = label that will be displayed
-     *   - ex: [[0, "New"]] (many2one) or [["new", "In Progress"]] (selection)
-     */
-    render_list: function() {
-        var self = this;
-        // get selection values, filter them and render them
-        var selection_done = this.get_selection().pipe(self.proxy('filter_selection')).pipe(self.proxy('render_elements'));
-    },
-
-    /** Get the selection list to be displayed in the statusbar widget.
+    /** Get the selection and render it
+     *  selection: [[identifier, value_to_display], ...]
      *  For selection fields: this is directly given by this.field.selection
-     *  For many2one fields :
-     *  - perform a search on the relation of the many2one field (given by
-     *    field.relation )
-     *  - get the field domain for the search
-     *    - self.build_domain() gives the domain given by the view or by
-     *      the field
-     *    - if the optional statusbar_fold attribute is set to true, make
-     *      an AND with build_domain to hide all 'fold=true' columns
-     *    - make an OR with current value, to be sure it is displayed,
-     *      with the correct order, even if it is folded
+     *  For many2one fields:  perform a search on the relation of the many2one field
      */
     get_selection: function() {
         var self = this;
         if (this.field.type == "many2one") {
-            this.selection = [];
-            // get fold information from widget
-            var fold = ((this.node.attrs || {}).statusbar_fold || true);
-            // build final domain: if fold option required, add the
-            if (fold == true) {
-                var domain = new instance.web.CompoundDomain(['|'], ['&'], self.build_domain(), [['fold', '=', false]], [['id', '=', self.selected_value]]);
-            } else {
-                var domain = new instance.web.CompoundDomain(['|'], self.build_domain(), [['id', '=', self.selected_value]]);
-            }
-            // get a DataSetSearch on the current field relation (ex: crm.lead.stage_id -> crm.case.stage)
-            var model_ext = new instance.web.DataSetSearch(this, this.field.relation, self.build_context(), domain);
-            // fetch selection
-            var read_defer = model_ext.read_slice(['name'], {}).pipe( function (records) {
-                _(records).each(function (record) {
-                    self.selection.push([record.id, record.name]);
-                });
+            var domain = new instance.web.CompoundDomain(['|'], self.build_domain(), [['id', '=', self.selected_value]]);
+            var ds = new instance.web.DataSetSearch(this, this.field.relation, self.build_context(), domain);
+            ds.read_slice(['name'], {}).done( function (records) {
+                for(var i = 0; i < records.length; i++) {
+                    self.selection.push([records[i].id, records[i].name]);
+                }
+                self.render_elements();
+                self.loaded.resolve();
             });
         } else {
-            this.selection = this.field.selection;
-            var read_defer = new $.Deferred().resolve();
-        }
-        return read_defer;
-    },
-
-    /** Filters this.selection, according to values coming from the statusbar_visible
-     *  attribute of the field. For example: statusbar_visible="draft,open"
-     *  Currently, the key of (key, label) pairs has to be used in the
-     *  selection of visible items. This feature is not meant to be used
-     *  with many2one fields.
-     */
-    filter_selection: function() {
-        var self = this;
-        var shown = _.map(((this.node.attrs || {}).statusbar_visible || "").split(","),
-            function(x) { return _.str.trim(x); });
-        shown = _.select(shown, function(x) { return x.length > 0; });
-
-        if (shown.length == 0) {
-            this.to_show = this.selection;
-        } else {
-            this.to_show = _.select(this.selection, function(x) {
-                return _.indexOf(shown, x[0]) !== -1 || x[0] === self.selected_value;
-            });
+            this.loaded.resolve();
+            // For field type selection filter values according to
+            // statusbar_visible attribute of the field. For example:
+            // statusbar_visible="draft,open".
+            var selection = this.field.selection;
+            console.log(selection);
+            for(var i=0; i< selection.length; i++) {
+                var key = selection[i][0];
+                if(key == this.selected_value || !this.options.visible || this.options.visible.indexOf(key) != -1) {
+                    this.selection.push(selection[i]);
+                }
+            }
+            console.log(this.selection);
+            this.render_elements();
         }
     },
-
     /** Renders the widget. This function also checks for statusbar_colors='{"pending": "blue"}'
      *  attribute in the widget. This allows to set a given color to a given
      *  state (given by the key of (key, label)).
      */
     render_elements: function () {
         var self = this;
-        var content = instance.web.qweb.render("FieldStatus.content", {widget: this, _:_});
+        var content = instance.web.qweb.render("FieldStatus.content", {widget: this});
         this.$element.html(content);
-        if (this.clickable) {
-            this.$element.addClass("oe_form_steps_clickable");
-            $('.oe_form_steps_arrow').remove();
-            var elemts = this.$element.find('.oe_form_steps_button');
-            _.each(elemts, function(element){
-                $item = $(element);
-                if ($item.attr("data-id") != self.selected_value) {
-                    $item.click(function(event){
-                        var data_id = parseInt($(this).attr("data-id"))
-                        self.view.dataset.call('stage_set', [[self.view.datarecord.id],data_id]).then(function() {
-                            return self.view.reload();
-                        });
-                    });
-                }
-            });
-        } else {
-            this.$element.addClass("oe_form_steps");
-        }
         var colors = JSON.parse((this.node.attrs || {}).statusbar_colors || "{}");
         var color = colors[this.selected_value];
-        if (color) {            
-            var elem = this.$element.find("li.oe_form_steps_active span");
-            elem.css("color", color);            
+        if (color) {
+            this.$("oe_active").css("color", color);
+        }
+    },
+    on_click_stage: function (ev) {
+        var self = this;
+        var $li = $(ev.currentTarget);
+        var val = parseInt($li.data("id"));
+        if (val != self.selected_value) {
+            this.view.recursive_save().then(function() {
+                var change = {};
+                change[self.name] = val;
+                self.view.dataset.write(self.view.datarecord.id, change).then(function() {
+                    self.view.reload();
+                });
+            });
         }
     },
 });
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 61a1a834d0d..05d921bc679 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1021,12 +1021,12 @@
 <t t-name="FieldMany2One">
     <span class="oe_form_field oe_form_field_many2one oe_form_field_with_button" t-att-style="widget.node.attrs.style">
         <t t-if="widget.get('effective_readonly')">
-            <a t-if="! widget.get_definition_options().no_open" href="#" class="oe_form_uri"/>
-            <span t-if="widget.get_definition_options().no_open" href="#" class="oe_form_uri"/>
+            <a t-if="! widget.options.no_open" href="#" class="oe_form_uri"/>
+            <span t-if="widget.options.no_open" href="#" class="oe_form_uri"/>
             <span class="oe_form_m2o_follow"/>
         </t>
         <t t-if="!widget.get('effective_readonly')">
-            <a t-if="! widget.get_definition_options().no_open" href="#" tabindex="-1"
+            <a t-if="! widget.options.no_open" href="#" tabindex="-1"
                 class="oe_m2o_cm_button oe_e">/</a>
             <div>
                 <input type="text"
@@ -1087,19 +1087,14 @@
     </span>
 </t>
 <t t-name="FieldStatus">
-    <ul class="" t-att-style="widget.node.attrs.style"/>
+    <ul t-att-class="widget.options.clickable ? 'oe_form_steps_clickable' : 'oe_form_steps'" t-att-style="widget.node.attrs.style"/>
 </t>
 <t t-name="FieldStatus.content">
-    <t t-set="size" t-value="widget.to_show.length"/>
-    <t t-foreach="_.range(size)" t-as="i">
-        <li t-att-class="widget.to_show[i][0] === widget.selected_value ? 'oe_form_steps_active' : 'oe_form_steps_inactive'">
-            <div class="oe_form_steps_button" t-att-data-id="widget.to_show[i][0]">
-                <t t-esc="widget.to_show[i][1]"/>
-                <span class="oe_form_steps_arrow">
-                    <span></span>
-                </span>
-                <img t-att-src='_s + "/web/static/src/img/form_steps.png"' class="oe_form_steps_arrow" t-if="i &lt; size - 1"/>
-            </div>
+    <t t-foreach="widget.selection" t-as="i">
+        <li t-att-class="i[0] === widget.selected_value ? 'oe_active' : ''" t-att-data-id="i[0]">
+            <span class="label"><t t-esc="i[1]"/></span>
+            <!-- are you mit ? -->
+            <span class="arrow"><span></span></span>
         </li>
     </t>
 </t>