[FIX] Fixed styling of the stagesbar.

bzr revid: vta@openerp.com-20120808121654-79zztekljxzawpna

3 files changed, 123 insertions, 75 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 86f52d40cec..6eeb5e333c5 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1940,112 +1940,152 @@
 .openerp .oe_form div.oe_form_configuration label {
   min-width: 150px;
 }
-.openerp ul.oe_form_steps {
+
+.openerp ul.oe_form_steps_clickable {
   height: 30px;
-  padding: 0;
   margin: 0;
-  text-shadow: 0 1px 1px white;
-  /*background: #dfdfdf;*/
+  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 img {
-  vertical-align: top;
-  margin-left: 8px;
-}
-.openerp ul.oe_form_steps li {
-  border-right: none;
-  padding: 0px;
-  margin: 0;
-  float: left;
-  vertical-align: top;
-  height: 30px;
-  padding: 0 0 0 12px;
-}
-.openerp ul.oe_form_steps li:first-child {
-  padding-left: 12px;
-  border-left: 1px solid #cacaca;
-}
-.openerp ul.oe_form_steps li:last-child {
-  margin-right: 12px;
-  /*padding-right: 12px;*/
-  border-right: 1px solid #cacaca;
-}
-.openerp ul.oe_form_steps li {
-  color: #4c4c4c;
+.openerp ul.oe_form_steps_clickable li {
   text-decoration: none;
-  padding: 0 0 0 30px;  
+  padding: 0 0 0 30px;
   position: relative;
   display: block;
   float: left;
   height: 30px;
-  background-color: #8a89ba;
   color: white;
 }
-.openerp ul.oe_form_steps li span {
-  display:block;
-  margin-left: 10px;
+.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);
+  color: white;
 }
-.openerp ul.oe_form_steps li a:hover {
-  color: black;
+.openerp ul.oe_form_steps_clickable li.oe_form_steps_inactive {
+  display: block;
+  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 li:after {
+.openerp ul.oe_form_steps_clickable li div {
+  padding: 0 30px 0 0;
+}
+.openerp ul.oe_form_steps_clickable .oe_form_steps_inactive:hover {
+  background: -webkit-linear-gradient(top, #7c7ba7, #adadcf);
+}
+.openerp ul.oe_form_steps_clickable li:after {
   content: " ";
-  display: :block;
+  display: block;
   width: 0;
   height: 0;
-  border-top: 50px solid transparent;
-  border-bottom: 50px solid transparent;
-  border-left: 30px solid #8a89ba;
+  border-top: 21px solid transparent;
+  border-bottom: 21px solid transparent;
+  border-left: 5px solid #807fb4;
   position: absolute;
   top: 50%;
-  margin-top: -50px;
+  margin-top: -21px;
   left: 100%;
   z-index: 2;
 }
-.openerp ul.oe_form_steps li:before {
+.openerp ul.oe_form_steps_clickable li:hover:after {
+  border-left: 5px solid #8a89ba;
+}
+.openerp ul.oe_form_steps_clickable li:before {
   content: " ";
-  display: :block;
+  display: block;
   width: 0;
   height: 0;
-  border-top: 50px solid transparent;
-  border-bottom: 50px solid transparent;
-  border-left: 30px solid #eeeeee;
+  border-top: 21px solid transparent;
+  border-bottom: 21px solid transparent;
+  border-left: 5px solid white;
   position: absolute;
   top: 50%;
-  margin-top: -50px;
+  margin-top: -21px;
   margin-left: 2px;
   left: 100%;
-  z-index: 1;
-}
-.openerp ul.oe_form_steps li:hover {
-  background: #807fb4;
-}
-.openerp ul.oe_form_steps li:hover:after {
-  border-left-color: #807fb4;
+  z-index: 2;
 }
-.openerp ul.oe_form_steps li.oe_form_steps_active {
+.openerp ul.oe_form_steps_clickable li.oe_form_steps_active {
   font-weight: bold;
-  /*color: #b33630;*/
   text-shadow: 0 1px 1px #999999;
-  /*background-color: #dc5f59;*/
-  background-color: #b33630;
+  background: -webkit-linear-gradient(top, #dc5f59, #b33630);
   color: white;
 }
-.openerp ul.oe_form_steps li.oe_form_steps_active:after {
-  content: " ";
-  display: :block;
+.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: 50px solid transparent;
-  border-bottom: 50px solid transparent;
-  /*border-left: 30px solid #dc5f59;*/
-  border-left: 30px solid #b33630;  
+  border-top: 21px solid transparent;
+  border-bottom: 21px solid transparent;
+  border-left: 5px solid white;  
   position: absolute;
   top: 50%;
-  margin-top: -50px;
+  margin-top: -21px;
+  margin-left: 2px;
   left: 100%;
   z-index: 2;
 }
+
+.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 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:first-child {
+  border-left: 1px solid #cacaca;
+}
+.openerp ul.oe_form_steps li:last-child {
+  margin-right: 12px;
+  padding-right: 12px;
+  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 .oe_form_steps_active {
+  font-weight: bold;
+  color: #b33630;
+}
+
+
 .openerp .oe_form .oe_subtotal_footer {
   width: 1% !important;
 }
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 2f644d986a3..b82bbea767f 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -4590,9 +4590,11 @@ instance.web.form.FieldBinaryImage = instance.web.form.FieldBinary.extend({
 
 instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
     template: "FieldStatus",
+    clickable: false,
     start: function() {
         this._super();
         this.selected_value = null;
+        this.clickable = !!this.node.attrs.clickable;
         if (this.$element.parent().is('header')) {
             this.$element.after('<div class="oe_clear"/>');
         }
@@ -4700,22 +4702,23 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
         var self = this;
         var content = instance.web.qweb.render("FieldStatus.content", {widget: this, _:_});
         this.$element.html(content);
-        clickable = this.node.attrs.clickable;
-        if (clickable != undefined && (clickable.toLowerCase() === 'true' || clickable === "1")) {            
-            var elemts = this.$element.find('.oe_form_steps_item')
+        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.attr("style", "cursor: pointer;");
                     $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 {
                 }
             });
+        } else {
+            this.$element.addClass("oe_form_steps");
         }
         var colors = JSON.parse((this.node.attrs || {}).statusbar_colors || "{}");
         var color = colors[this.selected_value];
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index f210b46b91a..7c2982daa59 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1026,14 +1026,19 @@
     </span>
 </t>
 <t t-name="FieldStatus">
-    <ul class="oe_form_steps" t-att-style="widget.node.attrs.style"/>
+    <ul class="" 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' : ''">
-            <span class="oe_form_steps_item" t-att-data-id="widget.to_show[i][0]"><t t-esc="widget.to_show[i][1]"/></span>
-            <img t-att-src='_s + "/web/static/src/img/form_steps.png"' class="oe_form_steps_arrow" t-if="i &lt; size - 1"/>
+        <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>            
         </li>
     </t>
 </t>