[ADD] Added auto layout

bzr revid: fme@openerp.com-20120409214348-gfo3tgca17nnzt86
This commit is contained in:
Fabien Meghazi 2012-04-09 23:43:48 +02:00
parent b40479a59e
commit b2b53816e5
4 changed files with 290 additions and 162 deletions

View File

@ -1261,13 +1261,6 @@
-box-shadow: none;
font-weight: bold;
}
.openerp2 .oe_form_group_cell {
line-height: 18px;
}
.openerp2 .oe_form_group_cell .oe_form_button {
width: 100%;
white-space: nowrap;
}
.openerp2 .oe_form_topbar {
border-bottom: 1px solid #cacaca;
background-color: #fcfcfc;
@ -1356,12 +1349,155 @@
-webkit-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_autolayout .oe_button {
height: 22px;
}
.openerp2 .oe_form_autolayout .oe_form_group_cell {
line-height: 18px;
padding: 2px;
height: 25px;
}
.openerp2 .oe_form_autolayout .oe_form_group_cell .oe_form_button {
width: 100%;
white-space: nowrap;
}
.openerp2 .oe_form_autolayout .oe_form_group_cell > .oe_form_field_many2one,
.openerp2 .oe_form_autolayout .oe_form_group_cell > .oe_form_field_many2one input,
.openerp2 .oe_form_autolayout .oe_form_group_cell > .oe_form_field_char input,
.openerp2 .oe_form_autolayout .oe_form_group_cell > .oe_form_field_text textarea,
.openerp2 .oe_form_autolayout .oe_form_group_cell > .oe_form_field_email,
.openerp2 .oe_form_autolayout .oe_form_group_cell > .oe_form_field_email input,
.openerp2 .oe_form_autolayout .oe_form_group_cell > .oe_form_field_url,
.openerp2 .oe_form_autolayout .oe_form_group_cell > .oe_form_field_url input,
.openerp2 .oe_form_autolayout .oe_form_group_cell > .oe_form_field_date input,
.openerp2 .oe_form_autolayout .oe_form_group_cell > .oe_form_field_float input,
.openerp2 .oe_form_autolayout .oe_form_group_cell > .oe_form_field_selection select,
.openerp2 .oe_form_autolayout .oe_form_group_cell > .oe_datepicker_root {
width: 100%;
}
.openerp2 .oe_form_autolayout .oe_form_button.oe_button {
color: #4c4c4c;
white-space: nowrap;
min-width: 100%;
width: 100%;
height: 22px;
}
.openerp2 .oe_form_autolayout .oe_form_button.oe_button span {
position: relative;
vertical-align: top;
}
.openerp2 .oe_form_autolayout .oe_form_group_cell.oe_form_group_nested {
padding: 0;
}
.openerp2 .oe_form label {
font-weight: bold;
}
.openerp2 .oe_form_label_help[for], .openerp2 .oe_form_label[for] {
white-space: nowrap;
}
.openerp2 .oe_form textarea {
resize: vertical;
}
.openerp2 .oe_form input[type="text"],
.openerp2 .oe_form input[type="password"],
.openerp2 .oe_form input[type="file"],
.openerp2 .oe_form select {
height: 22px;
padding-top: 2px;
}
.openerp2 .oe_form input[type="text"],
.openerp2 .oe_form input[type="password"],
.openerp2 .oe_form input[type="file"],
.openerp2 .oe_form select,
.openerp2 .oe_form textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 0 2px;
margin: 0 2px;
border: 1px solid #999999;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: white;
min-width: 90px;
color: #1f1f1f;
}
.openerp2 .oe_form input[readonly],
.openerp2 .oe_form select[readonly],
.openerp2 .oe_form textarea[readonly],
.openerp2 .oe_form input[disabled],
.openerp2 .oe_form select[disabled],
.openerp2 .oe_form textarea[disabled] {
background: #e5e5e5 !important;
color: #666666;
}
.openerp2 .oe_form .oe_form_field_many2one input,
.openerp2 .oe_form .oe_form_field_binary input,
.openerp2 .oe_form .oe_form_field_binary input,
.openerp2 .oe_form .oe_form_field_email input,
.openerp2 .oe_form .oe_form_field_url input {
border-right: none;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.openerp2 .oe_form .oe_form_field_email button img,
.openerp2 .oe_form .oe_form_field_url button img {
vertical-align: top;
}
.openerp2 .oe_form .oe_form_field_translatable,
.openerp2 .oe_form .oe_form_field_many2one,
.openerp2 .oe_form .oe_form_field_date,
.openerp2 .oe_form .oe_form_field_datetime {
white-space: nowrap;
}
.openerp2 .oe_form .oe_form_field_boolean {
padding-top: 4px;
}
.openerp2 .oe_form .oe_form_field_datetime input {
min-width: 11em;
}
.openerp2 .oe_form .oe_datepicker_container {
display: none;
}
.openerp2 .oe_form .oe_datepicker_root {
display: inline-block;
}
.openerp2 .oe_form .oe_form_required input, .openerp2 .oe_form .oe_form_required select, .openerp2 .oe_form .oe_form_required textarea {
background-color: #d2d2ff !important;
}
.openerp2 .oe_form .oe_form_invalid input, .openerp2 .oe_form .oe_form_invalid select, .openerp2 .oe_form .oe_form_invalid textarea {
background-color: #ff6666 !important;
border: 1px solid #dd0000 !important;
}
.openerp2 .oe_form .oe_button.oe_field_button {
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
margin-right: -1px;
height: 22px;
}
.openerp2 .oe_form .oe_input_icon {
cursor: pointer;
margin: 3px 0 0 -21px;
vertical-align: top;
}
.openerp2 .oe_form .oe_input_icon_disabled {
position: absolute;
cursor: default;
opacity: 0.5;
filter: alpha(opacity=50);
right: 5px;
top: 3px;
}
.openerp2 .oe_form .oe-binary-file-set {
overflow: hidden;
position: relative;
@ -1591,6 +1727,9 @@
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.openerp2 .oe_trad_field.touched {
border: 1px solid green !important;
}
.openerp2 .oe_layout_debugging .oe_form_group {
border: 2px dashed red;
}

View File

@ -67,7 +67,7 @@ $colour4: #8a89ba
// }}}
.openerp2
// {{{ Group
// Group {{{
// }}}
// Global style {{{
padding: 0
@ -198,7 +198,7 @@ $colour4: #8a89ba
@include vertical-gradient(#dc5f59, #b33630)
// }}}
// {{{ Loading
// Loading {{{
.oe_loading
display: none
z-index: 100
@ -216,7 +216,7 @@ $colour4: #8a89ba
border-bottom-right-radius: 8px
border-bottom-left-radius: 8px
// }}}
// {{{ Notification
// Notification {{{
.oe_notification
z-index: 1050
// }}}
@ -323,7 +323,7 @@ $colour4: #8a89ba
.oe_login_error_message
display: inline-block
// }}}
// {{{ DatabaseManager
// DatabaseManager {{{
.oe_database_manager
background: #fff
color: #000
@ -1029,11 +1029,6 @@ $colour4: #8a89ba
-webkit-box-shadow: none
-box-shadow: none
font-weight: bold
.oe_form_group_cell
line-height: 18px
.oe_form_button
width: 100%
white-space: nowrap
.oe_form_topbar
border-bottom: 1px solid #cacaca
@include vertical-gradient(#fcfcfc, #dedede)
@ -1116,6 +1111,42 @@ $colour4: #8a89ba
// padding: 2px
// line-height: 18px
// }}}
// FormView.autolayout {{{
.oe_form_autolayout
.oe_button
height: 22px
.oe_form_group_cell
line-height: 18px
padding: 2px
height: 25px
.oe_form_button
width: 100%
white-space: nowrap
.oe_form_group_cell > .oe_form_field_many2one,
.oe_form_group_cell > .oe_form_field_many2one input,
.oe_form_group_cell > .oe_form_field_char input,
.oe_form_group_cell > .oe_form_field_text textarea,
.oe_form_group_cell > .oe_form_field_email,
.oe_form_group_cell > .oe_form_field_email input,
.oe_form_group_cell > .oe_form_field_url,
.oe_form_group_cell > .oe_form_field_url input,
.oe_form_group_cell > .oe_form_field_date input,
.oe_form_group_cell > .oe_form_field_float input,
.oe_form_group_cell > .oe_form_field_selection select,
.oe_form_group_cell > .oe_datepicker_root
width: 100%
.oe_form_button.oe_button
color: #4c4c4c
white-space: nowrap
min-width: 100%
width: 100%
height: 22px
span
position: relative
vertical-align: top
.oe_form_group_cell.oe_form_group_nested
padding: 0
// }}}
// FormView.label {{{
.oe_form
label
@ -1123,6 +1154,101 @@ $colour4: #8a89ba
.oe_form_label_help[for], .oe_form_label[for]
white-space: nowrap
// }}}
// FormView.fields {{{
.oe_form
textarea
resize: vertical
input[type="text"],
input[type="password"],
input[type="file"],
select
height: 22px
padding-top: 2px
input[type="text"],
input[type="password"],
input[type="file"],
select,
textarea
-moz-box-sizing: border-box
-webkit-box-sizing: border-box
-ms-box-sizing: border-box
box-sizing: border-box
padding: 0 2px
margin: 0 2px
border: 1px solid #999
-moz-border-radius: 3px
-webkit-border-radius: 3px
border-radius: 3px
background: white
min-width: 90px
color: #1f1f1f
input[readonly],
select[readonly],
textarea[readonly],
input[disabled],
select[disabled],
textarea[disabled]
background: #E5E5E5 !important
color: #666
.oe_form_field_many2one input,
.oe_form_field_binary input,
.oe_form_field_binary input,
.oe_form_field_email input,
.oe_form_field_url input
border-right: none
-webkit-border-top-right-radius: 0px
-webkit-border-bottom-right-radius: 0px
-moz-border-radius-topright: 0px
-moz-border-radius-bottomright: 0px
border-top-right-radius: 0px
border-bottom-right-radius: 0px
.oe_form_field_email button img,
.oe_form_field_url button img
vertical-align: top
.oe_form_field_translatable,
.oe_form_field_many2one,
.oe_form_field_date,
.oe_form_field_datetime
white-space: nowrap
.oe_form_field_boolean
padding-top: 4px
.oe_form_field_datetime input
min-width: 11em
.oe_datepicker_container
display: none
.oe_datepicker_root
display: inline-block
.oe_form_required
input, select, textarea
background-color: #D2D2FF !important
.oe_form_invalid
input, select, textarea
background-color: #F66 !important
border: 1px solid #D00 !important
// }}}
// FormView.buttons {{{
.oe_form
.oe_button.oe_field_button
-webkit-border-top-left-radius: 0px
-webkit-border-bottom-left-radius: 0px
-moz-border-radius-topleft: 0px
-moz-border-radius-bottomleft: 0px
border-top-left-radius: 0px
border-bottom-left-radius: 0px
margin-right: -1px
height: 22px
.oe_input_icon
cursor: pointer
margin: 3px 0 0 -21px
vertical-align: top
.oe_input_icon_disabled
position: absolute
cursor: default
opacity: 0.5
filter: alpha(opacity=50)
right: 5px
top: 3px
// }}}
// FormView.binaryfile {{{
/* http://www.quirksmode.org/dom/inputfile.html
* http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
@ -1315,6 +1441,10 @@ $colour4: #8a89ba
@include radius(3px)
@include box-shadow(0 1px 2px rgba(0,0,0,0.2))
// }}}
// Translation {{{
.oe_trad_field.touched
border: 1px solid green !important
// }}}
// Debugging stuff {{{
.oe_layout_debugging

View File

@ -415,20 +415,6 @@ label.error {
border-bottom-right-radius: 4px;
}
/* Unedit Form */
.openerp .oe_form_group_cell > .oe_form_field_many2one,
.openerp .oe_form_group_cell > .oe_form_field_many2one input,
.openerp .oe_form_group_cell > .oe_form_field_char input,
.openerp .oe_form_group_cell > .oe_form_field_email,
.openerp .oe_form_group_cell > .oe_form_field_email input,
.openerp .oe_form_group_cell > .oe_form_field_url,
.openerp .oe_form_group_cell > .oe_form_field_url input,
.openerp .oe_form_group_cell > .oe_form_field_date input,
.openerp .oe_form_group_cell > .oe_form_field_float input,
.openerp .oe_form_group_cell > .oe_form_field_selection select {
width: 100%;
}
/* Form */
.openerp .oe_form_group_cell input[type="checkbox"] {
margin-top: 3px;
@ -455,18 +441,6 @@ label.error {
.openerp fieldset.oe_group_box legend {
font-weight: bold;
}
.openerp .oe_form_field_translatable,
.openerp .oe_form_field_many2one,
.openerp .oe_form_field_date,
.openerp .oe_form_field_datetime {
white-space: nowrap;
}
.openerp .oe_form_field_boolean {
padding-top: 4px;
}
.openerp td.oe_form_group_cell.oe_form_group_nested {
padding: 0;
}
.openerp .required.error {
border: 1px solid #900;
}
@ -584,91 +558,12 @@ label.error {
min-height:100px;
}
/* Inputs */
.openerp .oe_form input[type="text"],
.openerp .oe_form input[type="password"],
.openerp .oe_form input[type="file"],
.openerp .oe_form select,
.openerp .oe_form textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 0 2px;
margin: 0 2px;
border: 1px solid #999;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: white;
min-width: 90px;
color: #1f1f1f;
}
.openerp .oe_form .oe_form_field_many2one input,
.openerp .oe_form .oe_form_field_binary input,
.openerp .oe_form .oe_form_field_binary input,
.openerp .oe_form .oe_form_field_email input,
.openerp .oe_form .oe_form_field_url input {
border-right: none;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.openerp .oe_button.oe_field_button {
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
margin-right:-1px;
height: 22px;
}
.openerp .oe_form_field_email button img,
.openerp .oe_form_field_url button img {
vertical-align: top;
}
/* vertically recentering filter management select tag */
.openerp select.oe_search-view-filters-management {
margin-top:2px;
}
.openerp .oe_form select{
padding-top: 2px;
}
.openerp .oe_form input[readonly],
.openerp .oe_form select[readonly],
.openerp .oe_form textarea[readonly],
.openerp .oe_form input[disabled],
.openerp .oe_form select[disabled],
.openerp .oe_form textarea[disabled]{
background: #E5E5E5 !important;
color: #666;
}
.openerp .oe_form textarea {
resize:vertical;
}
.openerp .oe_form input[type="text"],
.openerp .oe_form input[type="password"],
.openerp .oe_form input[type="file"],
.openerp .oe_form select,
.openerp .oe_form .oe_button {
height: 22px;
}
.openerp .oe_form input.oe_form_field_datetime {
min-width: 11em;
}
.openerp .oe_form .oe_form_button .oe_button {
color: #4c4c4c;
white-space: nowrap;
min-width: 100%;
width: 100%;
}
@-moz-document url-prefix() {
/* Strange firefox behaviour on width: 100% + white-space: nowrap */
.openerp .oe_form .oe_form_button .oe_button {
@ -681,47 +576,7 @@ label.error {
.openerp .oe_form .oe_form_button .oe_button {
min-width: auto\9;
}
.openerp .oe_form .button {
height: 22px;
}
.openerp .oe_form .oe_button span {
position: relative;
vertical-align: top;
}
.openerp .oe_input_icon {
cursor: pointer;
margin: 3px 0 0 -21px;
vertical-align: top;
}
.openerp .oe_datepicker_container {
display: none;
}
.openerp .oe_datepicker_root {
display: inline-block;
}
.openerp .oe_form_group_cell .oe_datepicker_root {
width: 100%;
}
.openerp .oe_input_icon_disabled {
position: absolute;
cursor: default;
opacity: 0.5;
filter:alpha(opacity=50);
right: 5px;
top: 3px;
}
.openerp .oe_trad_field.touched {
border: 1px solid green !important;
}
/* Widgets */
.openerp .oe_form_required input, .openerp .oe_form_required select, .openerp .oe_form_required textarea {
background-color: #D2D2FF !important;
}
.openerp .oe_form_invalid input, .openerp .oe_form_invalid select, .openerp .oe_form_invalid textarea {
background-color: #F66 !important;
border: 1px solid #D00 !important;
}
/* jQuery UI override */
.openerp .ui-widget {

View File

@ -809,6 +809,9 @@ openerp.web.FormRenderingEngine = openerp.web.Class.extend({
// but one day, we will have to get rid of xml2json
var xml = openerp.web.json_node_to_xml(this.fvg.arch);
this.$form = $('<div class="oe_form">' + xml + '</div>');
if (this.fvg.arch.attrs && this.fvg.arch.attrs['layout'] !== 'manual') {
this.$form.addClass('oe_form_autolayout');
}
this.to_init = [];
this.labels = {};
@ -856,7 +859,8 @@ openerp.web.FormRenderingEngine = openerp.web.Class.extend({
dict.legacy_mode = this.legacy_mode;
return $(QWeb.render(template, dict));
},
alter_field: function(field) {},
alter_field: function(field) {
},
toggle_layout_debugging: function() {
if (!this.$element.has('.oe_layout_debug_cell:first').length) {
this.$element.find('.oe_form_group_cell').each(function() {