[MERGE] [IMP] 'Stage Bar Manu' Task. This task improves the statusbar widget. Folded columns are

not hidden anymore, but available in a side menu accessible after other stages. The 
purpose is to be able to have access to all stages using this widget. This way we will be 
able to remove some action buttons in form views in a future task.

This web branch updates the statusbar widget (JS and CSS).

bzr revid: tde@openerp.com-20130517090626-n1g1k1o4r8wk9l4v

2 files changed, 96 insertions, 43 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 9cd567c21ef..5d586bc41d3 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -2185,6 +2185,7 @@
 }
 .openerp .oe_form header {
   position: relative;
+  z-index: 1;
   border-bottom: 1px solid #cacaca;
   padding-left: 2px;
   background-color: #ededed;
@@ -2659,20 +2660,20 @@
   background-image: -o-linear-gradient(top, #fcfcfc, #dedede);
   background-image: linear-gradient(to bottom, #fcfcfc, #dedede);
 }
-.openerp ul.oe_form_status li:first-child .label, .openerp ul.oe_form_status_clickable li:first-child .label {
+.openerp ul.oe_form_status li:first-child > .label, .openerp ul.oe_form_status_clickable li:first-child > .label {
   border-left: 1px solid #cacaca;
   padding-left: 14px;
 }
 .openerp ul.oe_form_status li:last-child, .openerp ul.oe_form_status_clickable li:last-child {
   border-right: 1px solid #cacaca;
 }
-.openerp ul.oe_form_status li:last-child .label, .openerp ul.oe_form_status_clickable li:last-child .label {
+.openerp ul.oe_form_status li:last-child > .label, .openerp ul.oe_form_status_clickable li:last-child > .label {
   padding-right: 14px;
 }
-.openerp ul.oe_form_status li:last-child .arrow, .openerp ul.oe_form_status_clickable li:last-child .arrow {
+.openerp ul.oe_form_status li:last-child > .arrow, .openerp ul.oe_form_status_clickable li:last-child > .arrow {
   display: none;
 }
-.openerp ul.oe_form_status li .label, .openerp ul.oe_form_status_clickable li .label {
+.openerp ul.oe_form_status li > .label, .openerp ul.oe_form_status_clickable li > .label {
   color: #4c4c4c;
   text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede;
   padding: 7px;
@@ -2681,14 +2682,14 @@
   margin: 0;
   position: relative;
 }
-.openerp ul.oe_form_status li .arrow, .openerp ul.oe_form_status_clickable li .arrow {
+.openerp ul.oe_form_status li > .arrow, .openerp ul.oe_form_status_clickable li > .arrow {
   width: 17px;
   display: inline-block;
   vertical-align: top;
   overflow: hidden;
   margin-left: -5px;
 }
-.openerp ul.oe_form_status li .arrow span, .openerp ul.oe_form_status_clickable li .arrow span {
+.openerp ul.oe_form_status li > .arrow span, .openerp ul.oe_form_status_clickable li > .arrow span {
   position: relative;
   width: 24px;
   height: 24px;
@@ -2710,6 +2711,32 @@
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
 }
+.openerp ul.oe_form_status .oe_folded .label, .openerp ul.oe_form_status_clickable .oe_folded .label {
+  padding-bottom: 8px;
+}
+.openerp ul.oe_form_status .oe_folded ul, .openerp ul.oe_form_status_clickable .oe_folded ul {
+  position: absolute;
+  border-top: 1px solid #cacaca;
+  float: none;
+  top: 30px;
+  right: 0;
+  display: none;
+}
+.openerp ul.oe_form_status .oe_folded ul li, .openerp ul.oe_form_status_clickable .oe_folded ul li {
+  margin: 0;
+  border-left: 1px solid #cacaca;
+  display: block;
+}
+.openerp ul.oe_form_status .oe_folded ul li.label, .openerp ul.oe_form_status_clickable .oe_folded ul li.label {
+  border: 0;
+  padding-left: 24px;
+}
+.openerp ul.oe_form_status .oe_folded ul li:last-child, .openerp ul.oe_form_status_clickable .oe_folded ul li:last-child {
+  border-bottom: 1px solid #cacaca;
+}
+.openerp ul.oe_form_status .oe_folded:hover ul, .openerp ul.oe_form_status_clickable .oe_folded:hover ul {
+  display: block;
+}
 .openerp ul.oe_form_status li.oe_active, .openerp ul.oe_form_status_clickable li.oe_active {
   background-color: #5382b9;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
@@ -2719,14 +2746,14 @@
   background-image: -o-linear-gradient(top, #729fcf, #3465a4);
   background-image: linear-gradient(to bottom, #729fcf, #3465a4);
 }
-.openerp ul.oe_form_status li.oe_active .arrow span, .openerp ul.oe_form_status_clickable li.oe_active .arrow span {
+.openerp ul.oe_form_status li.oe_active > .arrow span, .openerp ul.oe_form_status_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));
   background: -ms-linear-gradient(top, #729fcf, #3465a4);
 }
-.openerp ul.oe_form_status li.oe_active .label, .openerp ul.oe_form_status_clickable li.oe_active .label {
+.openerp ul.oe_form_status li.oe_active > .label, .openerp ul.oe_form_status_clickable li.oe_active > .label {
   color: white;
   text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
 }
@@ -2742,10 +2769,10 @@
   background-image: -o-linear-gradient(top, #e8e8e8, #cacaca);
   background-image: linear-gradient(to bottom, #e8e8e8, #cacaca);
 }
-.openerp ul.oe_form_status_clickable li:hover .label {
+.openerp ul.oe_form_status_clickable li:hover > .label {
   text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede;
 }
-.openerp ul.oe_form_status_clickable li:hover .arrow span {
+.openerp ul.oe_form_status_clickable li:hover > .arrow span {
   background-color: #d9d9d9;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#cacaca));
   background-image: -webkit-linear-gradient(top, #e8e8e8, #cacaca);
@@ -2754,7 +2781,7 @@
   background-image: -o-linear-gradient(top, #e8e8e8, #cacaca);
   background-image: linear-gradient(to bottom, #e8e8e8, #cacaca);
 }
-.openerp ul.oe_form_status_clickable li .label {
+.openerp ul.oe_form_status_clickable li > .label {
   color: #7c7bad;
 }
 .openerp ul.oe_form_status_clickable li.oe_active:hover {
@@ -2766,10 +2793,10 @@
   background-image: -o-linear-gradient(top, #4c85c2, #284d7d);
   background-image: linear-gradient(to bottom, #4c85c2, #284d7d);
 }
-.openerp ul.oe_form_status_clickable li.oe_active:hover .label {
+.openerp ul.oe_form_status_clickable li.oe_active:hover > .label {
   text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;
 }
-.openerp ul.oe_form_status_clickable li.oe_active:hover .arrow span {
+.openerp ul.oe_form_status_clickable li.oe_active:hover > .arrow span {
   background-color: #284d7d;
   background: -moz-linear-gradient(135deg, #284d7d, #4c85c2);
   background: -o-linear-gradient(135deg, #4c85c2, #284d7d);
@@ -3348,11 +3375,11 @@ div.ui-widget-overlay {
   overflow: hidden;
   border-right: 1px solid #cacaca;
 }
-.openerp_ie ul.oe_form_status li:last-child .label, .openerp_ie ul.oe_form_status_clickable li:last-child .label {
+.openerp_ie ul.oe_form_status li:last-child > .label, .openerp_ie ul.oe_form_status_clickable li:last-child > .label {
   padding-right: 14px;
   border-right: none;
 }
-.openerp_ie ul.oe_form_status li:last-child .arrow, .openerp_ie ul.oe_form_status_clickable li:last-child .arrow {
+.openerp_ie ul.oe_form_status li:last-child > .arrow, .openerp_ie ul.oe_form_status_clickable li:last-child > .arrow {
   display: inline-block;
   opacity: 0;
   filter: alpha(opacity=0);
@@ -3360,17 +3387,17 @@ div.ui-widget-overlay {
   width: 0;
   border-right: none;
 }
-.openerp_ie ul.oe_form_status .label, .openerp_ie ul.oe_form_status_clickable .label {
+.openerp_ie ul.oe_form_status li > .label, .openerp_ie ul.oe_form_status_clickable li > .label {
   border-bottom: 1px solid #cacaca;
   background: transparent;
 }
-.openerp_ie ul.oe_form_status .arrow span, .openerp_ie ul.oe_form_status_clickable .arrow span {
+.openerp_ie ul.oe_form_status li > .arrow span, .openerp_ie ul.oe_form_status_clickable li > .arrow span {
   background-color: #fefefe !important;
 }
-.openerp_ie ul.oe_form_status li.oe_active .label, .openerp_ie ul.oe_form_status_clickable li.oe_active .label {
+.openerp_ie ul.oe_form_status li.oe_active > .label, .openerp_ie ul.oe_form_status_clickable li.oe_active > .label {
   border-bottom: 1px solid #729fcf;
 }
-.openerp_ie ul.oe_form_status li.oe_active .arrow span, .openerp_ie ul.oe_form_status_clickable li.oe_active .arrow span {
+.openerp_ie ul.oe_form_status li.oe_active > .arrow span, .openerp_ie ul.oe_form_status_clickable li.oe_active > .arrow span {
   background-color: #729fcf !important;
 }
 .openerp_ie .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button {
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 072fda44357..86664a86414 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -123,6 +123,7 @@ $sheet-padding: 16px
     font-size: 1px
     letter-spacing: -1px
     color: transparent
+    text-shadow: none
     font-weight: normal
     &:before
         font: 21px "mnmliconsRegular"
@@ -133,6 +134,7 @@ $sheet-padding: 16px
     font-size: 1px
     letter-spacing: -1px
     color: transparent
+    text-shadow: none
     font-weight: normal
     &:before
         font: $size "entypoRegular"
@@ -1731,6 +1733,7 @@ $sheet-padding: 16px
     // FormView.header {{{
     .oe_form header
         position: relative
+        z-index: 1
         border-bottom: 1px solid #cacaca
         padding-left: 2px
         @include vertical-gradient(#fcfcfc, #dedede)
@@ -1979,9 +1982,9 @@ $sheet-padding: 16px
             .oe_form_field_float input
                 width: 7em
             .oe_form_field_date input
-                width: 7.5em
+                width: 100px
             .oe_form_field_datetime input
-                width: 11.5em
+                width: 150px
     // }}}
     // FormView.fields_binary {{{
     /* http://www.quirksmode.org/dom/inputfile.html
@@ -2118,16 +2121,16 @@ $sheet-padding: 16px
             margin: 0 -18px 0 0
             padding: 0
             @include vertical-gradient(#fcfcfc, #dedede)
-            &:first-child .label
+            &:first-child > .label
                 border-left: 1px solid #cacaca
                 padding-left: 14px
             &:last-child
                 border-right: 1px solid #cacaca
-                .label
+                > .label
                     padding-right: 14px
-                .arrow
+                > .arrow
                     display: none
-            .label
+            > .label
                 color: #4c4c4c
                 text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede
                 padding: 7px
@@ -2135,7 +2138,7 @@ $sheet-padding: 16px
                 padding-left: 24px
                 margin: 0
                 position: relative
-            .arrow
+            > .arrow
                 width: 17px
                 display: inline-block
                 vertical-align: top
@@ -2152,11 +2155,32 @@ $sheet-padding: 16px
                     @include skew-gradient(#fcfcfc, #dedede)
                     @include radius(3px)
                     @include transform(rotate(45deg))
+        .oe_folded
+            .label
+                padding-bottom: 8px
+            ul
+                position: absolute
+                border-top: 1px solid #cacaca
+                float: none
+                top: 30px
+                right: 0
+                display: none
+                li
+                    margin: 0
+                    border-left: 1px solid #cacaca
+                    display: block
+                li.label
+                    border: 0
+                    padding-left: 24px
+                li:last-child
+                    border-bottom: 1px solid #cacaca
+            &:hover ul
+                display: block
         li.oe_active
             @include vertical-gradient(#729fcf, #3465a4)
-            .arrow span
+            > .arrow span
                 @include skew-gradient(#729fcf, #3465a4)
-            .label
+            > .label
                 color: white
                 text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4
     ul.oe_form_status_clickable
@@ -2164,18 +2188,18 @@ $sheet-padding: 16px
             cursor: pointer
             &:hover
                 @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
-                .label
+                > .label
                     text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede
-                .arrow span
+                > .arrow span
                     @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
-            .label
+            > .label
                 color: $link-color
         li.oe_active
             &:hover
                 @include vertical-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
-                .label
+                > .label
                     text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4
-                .arrow span
+                > .arrow span
                     @include skew-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
     // }}}
     // FormView.one2many {{{
@@ -2558,6 +2582,8 @@ div.ui-widget-overlay
     .placeholder
         color: $tag-border !important
         font-style: italic !important
+    .oe_form_binary_file
+        width: 80px
     .oe_form_field_boolean input
         background: #fff
     .db_option_table .oe_form_field_selection
@@ -2638,26 +2664,26 @@ div.ui-widget-overlay
             &:last-child
                 overflow: hidden
                 border-right: 1px solid #cacaca
-                .label
+                > .label
                     padding-right: 14px
                     border-right: none
-                .arrow
+                > .arrow
                     display: inline-block
                     opacity: 0
                     filter: alpha(opacity = 0)
                     border: none
                     width: 0
                     border-right: none 
-        .label
-            border-bottom: 1px solid #cacaca
-            background: transparent
-        .arrow
-            span
-                background-color: #fefefe !important
+            > .label
+                border-bottom: 1px solid #cacaca
+                background: transparent
+            > .arrow
+                span
+                    background-color: #fefefe !important
         li.oe_active
-            .label
+            > .label
                 border-bottom: 1px solid #729fcf
-            .arrow span
+            > .arrow span
                 background-color: #729fcf !important
 
     // jquery ui for ie