[ADD] form <header, footer, h1, h2, ... > + editable/readonly hidden classes

bzr revid: fme@openerp.com-20120531150550-zpl67q0lcy0omlmf

3 files changed, 46 insertions, 21 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index ee32ea2159f..da4e056e411 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1465,7 +1465,7 @@
 .openerp .oe_form_button_save_dirty:hover {
   background: #ed6f6a;
 }
-.openerp .oe_form_topbar {
+.openerp header {
   position: relative;
   border-bottom: 1px solid #cacaca;
   background-color: #fcfcfc;
@@ -1478,7 +1478,7 @@
   padding: 0 8px;
   line-height: 30px;
 }
-.openerp .oe_form_topbar button {
+.openerp header button {
   font-size: 12px;
   height: 24px !important;
   line-height: 24px;
@@ -1486,11 +1486,11 @@
   padding: 0 10px;
   margin: 3px 4px 3px 0;
 }
-.openerp .oe_form_topbar button span.i {
+.openerp header button span.i {
   line-height: 20px;
   height: 24px;
 }
-.openerp .oe_form_topbar ul {
+.openerp header ul {
   height: 30px;
   padding: 0;
   margin: 0;
@@ -1498,7 +1498,7 @@
   border-left: 1px solid #cacaca;
   border-right: 1px solid #cacaca;
 }
-.openerp .oe_form_topbar ul li {
+.openerp header ul li {
   padding: 0;
   margin: 0;
   float: left;
@@ -1507,40 +1507,40 @@
   height: 30px;
   padding: 0 12px;
 }
-.openerp .oe_form_topbar ul li:first-child {
+.openerp header ul li:first-child {
   border-left: 1px solid #cacaca;
 }
-.openerp .oe_form_topbar ul li a {
+.openerp header ul li a {
   color: #4c4c4c;
 }
-.openerp .oe_form_topbar ul li a:hover {
+.openerp header ul li a:hover {
   color: black;
 }
-.openerp .oe_form_topbar .oe_form_steps {
+.openerp header .oe_form_steps {
   display: inline-block;
   position: absolute;
   right: 0;
 }
-.openerp .oe_form_topbar .oe_form_steps img {
+.openerp header .oe_form_steps img {
   margin: 0 8px;
   vertical-align: top;
 }
-.openerp .oe_form_topbar .oe_form_steps li {
+.openerp header .oe_form_steps li {
   border-right: none;
   padding: 0;
 }
-.openerp .oe_form_topbar .oe_form_steps li:first-child {
+.openerp header .oe_form_steps li:first-child {
   margin-left: 12px;
   border-left: none;
 }
-.openerp .oe_form_topbar .oe_form_steps li:last-child {
+.openerp header .oe_form_steps li:last-child {
   margin-right: 12px;
 }
-.openerp .oe_form_topbar .oe_form_steps_active {
+.openerp header .oe_form_steps_active {
   font-weight: bold;
   color: #b33630;
 }
-.openerp .oe_form_topbar.oe_form_topbar_hifirst button:first-child, .openerp button.oe_form_button_hi {
+.openerp header.oe_form_topbar_hifirst button:first-child, .openerp button.oe_form_button_hi {
   color: white;
   background: #dc5f59;
   background: -moz-linear-gradient(#dc5f59, #b33630);
@@ -1550,7 +1550,7 @@
   -webkit-box-shadow: none;
   -box-shadow: none;
 }
-.openerp .oe_form_topbar.oe_form_topbar_hifirst button:first-child:hover, .openerp button.oe_form_button_hi:hover {
+.openerp header.oe_form_topbar_hifirst button:first-child:hover, .openerp button.oe_form_button_hi:hover {
   background: #df6b66;
   background: -moz-linear-gradient(#df6b66, #bf3a33);
   background: -webkit-gradient(linear, left top, left bottom, from(#df6b66), to(#bf3a33));
@@ -1564,7 +1564,7 @@
   padding: 8px 0;
   border-bottom: 1px solid #dddddd;
 }
-.openerp .oe_application .oe_form_sheet_width, .openerp .oe_application .oe_form_bottom {
+.openerp .oe_application .oe_form_sheet_width, .openerp .oe_application footer {
   min-width: 650px;
   max-width: 980px;
   margin: 0 auto;
@@ -1578,6 +1578,12 @@
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   -box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
+.openerp .oe_form_editable .oe_form_editable_hidden {
+  display: none;
+}
+.openerp .oe_form_readonly .oe_form_readonly_hidden {
+  display: none;
+}
 .openerp .oe_form .oe_form_group_cell {
   line-height: 18px;
   padding: 2px;
@@ -1598,6 +1604,13 @@
 .openerp .oe_form .oe_form_group_cell > span > .oe_datepicker_root > input.oe_datepicker_master {
   width: 100%;
 }
+.openerp .oe_form h1, .openerp .oe_form h2, .openerp .oe_form h3, .openerp .oe_form h4, .openerp .oe_form h5, .openerp .oe_form h6 {
+  margin: 0 0 4px 0;
+}
+.openerp .oe_form h1 input, .openerp .oe_form h2 input, .openerp .oe_form h3 input, .openerp .oe_form h4 input, .openerp .oe_form h5 input, .openerp .oe_form h6 input {
+  height: inherit !important;
+  font-size: inherit;
+}
 .openerp .oe_form .oe_form_label_help[for], .openerp .oe_form .oe_form_label[for] {
   font-weight: bold;
   white-space: nowrap;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 81c6a6cd3c1..ae6d62a0e31 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1183,7 +1183,7 @@ $colour4: #8a89ba
             background: #ED6F6A
     // }}}
     // FormView.customdivs {{{
-    .oe_form_topbar
+    header
         position: relative
         border-bottom: 1px solid #cacaca
         @include vertical-gradient(#fcfcfc, #dedede)
@@ -1238,7 +1238,7 @@ $colour4: #8a89ba
         .oe_form_steps_active
             font-weight: bold 
             color: #b33630
-    .oe_form_topbar.oe_form_topbar_hifirst button:first-child, button.oe_form_button_hi
+    header.oe_form_topbar_hifirst button:first-child, button.oe_form_button_hi
         color: white
         background: #DC5F59
         background: -moz-linear-gradient(#DC5F59, #B33630)
@@ -1247,7 +1247,7 @@ $colour4: #8a89ba
         -moz-box-shadow: none
         -webkit-box-shadow: none
         -box-shadow: none
-    .oe_form_topbar.oe_form_topbar_hifirst button:first-child:hover, button.oe_form_button_hi:hover
+    header.oe_form_topbar_hifirst button:first-child:hover, button.oe_form_button_hi:hover
         background: #DF6B66
         background: -moz-linear-gradient( #DF6B66, #BF3A33)
         background: -webkit-gradient(linear, left top, left bottom, from( #DF6B66), to( #BF3A33))
@@ -1260,7 +1260,7 @@ $colour4: #8a89ba
             background: url(/web/static/src/img/form_sheetbg.png)
             padding: 8px 0
             border-bottom: 1px solid #ddd 
-        .oe_form_sheet_width, .oe_form_bottom
+        .oe_form_sheet_width, footer
             min-width: 650px
             max-width: 980px
             margin: 0 auto
@@ -1272,6 +1272,10 @@ $colour4: #8a89ba
             @include box-shadow(0 0 10px rgba(0,0,0,0.3))
     // }}}
     // FormView.layout {{{
+    .oe_form_editable .oe_form_editable_hidden
+        display: none
+    .oe_form_readonly .oe_form_readonly_hidden
+        display: none
     .oe_form
         .oe_form_group_cell
             line-height: 18px
@@ -1291,6 +1295,12 @@ $colour4: #8a89ba
         .oe_form_group_cell > span > .oe_datepicker_root,
         .oe_form_group_cell > span > .oe_datepicker_root > input.oe_datepicker_master
             width: 100%
+        h1, h2, h3, h4, h5, h6
+            margin: 0 0 4px 0
+            input
+                height: inherit !important
+                font-size: inherit
+
     // }}}
     // FormView.label {{{
     .oe_form
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 41251930675..dda4a24b79f 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -521,6 +521,7 @@ instance.web.FormView = instance.web.View.extend(_.extend({}, instance.web.form.
     switch_mode: function() {
         var self = this;
         if(this.get("mode") == "view") {
+            self.$element.removeClass('oe_form_editable').addClass('oe_form_readonly');
             self.$buttons.find('.oe_form_buttons_edit').hide();
             self.$buttons.find('.oe_form_buttons_view').show();
             self.$sidebar.show();
@@ -528,6 +529,7 @@ instance.web.FormView = instance.web.View.extend(_.extend({}, instance.web.form.
                 field.set({"force_readonly": true});
             });
         } else {
+            self.$element.removeClass('oe_form_readonly').addClass('oe_form_editable');
             self.$buttons.find('.oe_form_buttons_edit').show();
             self.$buttons.find('.oe_form_buttons_view').hide();
             self.$sidebar.hide();