odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[IMP] change CSS classes for m2m tags and get them out of the oe_form namespace 

this way, we can consistently display m2m tags anywhere without dummy CSS copy/paste (example: projet issues, projet tasks)
oe_form_field_many2manytags became oe_field_many2many_tags (container)
oe_form_field_many2manytags_box became oe_field_many2many_tag (item)
Qweb templates names have been changed accordingly

bzr revid: abo@openerp.com-20120712125637-hji6e9chch1h01f0
This commit is contained in:
Antonin Bourguignon 2012-07-12 14:56:37 +02:00
parent 30c3919316
commit b83fff287a
4 changed files with 93 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
addons/web/static/src/css/base.css
View File

@ -34,7 +34,7 @@
background: white; background: white;
/* http://www.quirksmode.org/dom/inputfile.html /* http://www.quirksmode.org/dom/inputfile.html
* http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image * http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
*/ */ */
} }
.openerp a { .openerp a {
text-decoration: none; text-decoration: none;
@ -450,6 +450,32 @@
.openerp .oe_webclient .oe_star_on { .openerp .oe_webclient .oe_star_on {
color: gold; color: gold;
} }
.openerp .oe_field_many2many_tags .text-wrap {
width: 100% !important;
}
.openerp .oe_field_many2many_tags .text-wrap textarea {
width: 100% !important;
}
.openerp .oe_field_many2many_tags .oe_field_many2many_tag {
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
position: relative;
float: left;
border: 1px solid #9daccc;
background: #e2e6f0;
color: black;
padding: 0px 3px 0px 3px;
margin: 0 2px 2px 0;
height: 16px;
font: 11px "lucida grande", tahoma, verdana, arial, sans-serif;
}
.openerp .oe_field_many2many_tags .text-core .text-wrap .text-dropdown .text-list .text-suggestion em {
font-style: italic;
text-decoration: none;
}
.openerp.oe_tooltip { .openerp.oe_tooltip {
font-size: 12px; font-size: 12px;
} }
@ -2017,32 +2043,6 @@
padding-top: 4px; padding-top: 4px;
width: auto; width: auto;
} }
.openerp .oe_form .oe_form_field_many2manytags .text-wrap {
width: 100% !important;
}
.openerp .oe_form .oe_form_field_many2manytags .text-wrap textarea {
width: 100% !important;
}
.openerp .oe_form .oe_form_field_many2manytags .oe_form_field_many2manytags_box {
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
position: relative;
float: left;
border: 1px solid #9daccc;
background: #e2e6f0;
color: black;
padding: 0px 3px 0px 3px;
margin: 0 2px 2px 0;
height: 16px;
font: 11px "lucida grande", tahoma, verdana, arial, sans-serif;
}
.openerp .oe_form .oe_form_field_many2manytags .text-core .text-wrap .text-dropdown .text-list .text-suggestion em {
font-style: italic;
text-decoration: none;
}
.openerp .oe_form .oe_datepicker_container { .openerp .oe_form .oe_datepicker_container {
display: none; display: none;
} }

64
addons/web/static/src/css/base.sass
View File

@ -362,8 +362,28 @@ $sheet-max-width: 860px
text-decoration: none text-decoration: none
.oe_star_on .oe_star_on
color: gold color: gold
// }}}
//.oe_edit_only  // Many2many tags {{{
.oe_field_many2many_tags
.text-wrap
width: 100% !important
textarea
width: 100% !important
.oe_field_many2many_tag
border-radius: 2px
@include box-sizing(border)
position: relative
float: left
border: 1px solid #9DACCC
background: #E2E6F0
color: black
padding: 0px 3px 0px 3px
margin: 0 2px 2px 0
height: 16px
font: 11px "lucida grande", tahoma, verdana, arial, sans-serif
.text-core .text-wrap .text-dropdown .text-list .text-suggestion em
font-style: italic
text-decoration: none
// }}} // }}}
// Tooltips {{{ // Tooltips {{{
&.oe_tooltip &.oe_tooltip
@ -823,7 +843,7 @@ $sheet-max-width: 860px
text-shadow: 0 1px 1px rgba(0,0,0,0.2) text-shadow: 0 1px 1px rgba(0,0,0,0.2)
@include radius(4px) @include radius(4px)
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2)) @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
.oe_menu_counter .oe_menu_counter
float: right float: right
background: #8a89ba background: #8a89ba
color: #eee color: #eee
@ -846,7 +866,7 @@ $sheet-max-width: 860px
color: $colour4 color: $colour4
text-shadow: 0 1px 1px white text-shadow: 0 1px 1px white
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2)) @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2))
.oe_menu_counter .oe_menu_counter
background: #eee background: #eee
color: #8a89ba color: #8a89ba
.oe_menu_toggler:before .oe_menu_toggler:before
@ -1312,7 +1332,7 @@ $sheet-max-width: 860px
margin: 0 0 0 4px margin: 0 0 0 4px
padding: 0 padding: 0
// }}} // }}}
// Views Common {{{ // Views Common {{{
.oe_view_nocontent .oe_view_nocontent
@ -1356,7 +1376,7 @@ $sheet-max-width: 860px
display: none !important display: none !important
.oe_form .oe_form_field_date .oe_form .oe_form_field_date
width: auto width: auto
.oe_form_nosheet .oe_form_nosheet
margin-left: 10px margin-left: 10px
margin-right: 10px margin-right: 10px
.oe_form_nosheet > header .oe_form_nosheet > header
@ -1364,13 +1384,13 @@ $sheet-max-width: 860px
margin-right: -10px margin-right: -10px
// }}} // }}}
// FormView.custom tags and classes {{{ // FormView.custom tags and classes {{{
.oe_form .oe_form
header header
position: relative position: relative
border-bottom: 1px solid #cacaca border-bottom: 1px solid #cacaca
@include vertical-gradient(#fcfcfc, #dedede) @include vertical-gradient(#fcfcfc, #dedede)
padding: 0 8px padding: 0 8px
line-height: 30px line-height: 30px
ul ul
display: inline-block display: inline-block
float: right float: right
@ -1387,12 +1407,12 @@ $sheet-max-width: 860px
vertical-align: top vertical-align: top
margin-left: 8px margin-left: 8px
li li
border-right: none border-right: none
padding: 0 padding: 0
margin: 0 margin: 0
float: left float: left
vertical-align: top vertical-align: top
height: 30px height: 30px
padding: 0 0 0 12px padding: 0 0 0 12px
&:first-child &:first-child
border-left: 1px solid #cacaca border-left: 1px solid #cacaca
@ -1428,7 +1448,7 @@ $sheet-max-width: 860px
.oe_form_sheetbg .oe_form_sheetbg
background: url(/web/static/src/img/form_sheetbg.png) background: url(/web/static/src/img/form_sheetbg.png)
padding: 8px 0 padding: 8px 0
border-bottom: 1px solid #ddd border-bottom: 1px solid #ddd
.oe_form_sheet_width .oe_form_sheet_width
min-width: 650px min-width: 650px
max-width: $sheet-max-width max-width: $sheet-max-width
@ -1572,26 +1592,6 @@ $sheet-max-width: 860px
.oe_form_field_boolean .oe_form_field_boolean
padding-top: 4px padding-top: 4px
width: auto width: auto
.oe_form_field_many2manytags
.text-wrap
width: 100% !important
textarea
width: 100% !important
.oe_form_field_many2manytags_box
border-radius: 2px
@include box-sizing(border)
position: relative
float: left
border: 1px solid #9DACCC
background: #E2E6F0
color: black
padding: 0px 3px 0px 3px
margin: 0 2px 2px 0
height: 16px
font: 11px "lucida grande", tahoma, verdana, arial, sans-serif
.text-core .text-wrap .text-dropdown .text-list .text-suggestion em
font-style: italic
text-decoration: none
.oe_datepicker_container .oe_datepicker_container
display: none display: none
.oe_datepicker_root .oe_datepicker_root

58
addons/web/static/src/js/view_form.js
View File

@ -9,7 +9,7 @@ instance.web.form = {};
/** /**
* Interface implemented by the form view or any other object * Interface implemented by the form view or any other object
* able to provide the features necessary for the fields to work. * able to provide the features necessary for the fields to work.
* *
* Properties: * Properties:
* - display_invalid_fields : if true, all fields where is_valid() return true should * - display_invalid_fields : if true, all fields where is_valid() return true should
* be displayed as invalid. * be displayed as invalid.
@ -953,7 +953,7 @@ instance.web.form.FormRenderingEngineInterface = instance.web.Class.extend({
/** /**
* Default rendering engine for the form view. * Default rendering engine for the form view.
* *
* It is necessary to set the view using set_view() before usage. * It is necessary to set the view using set_view() before usage.
*/ */
instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInterface.extend({ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInterface.extend({
@ -1276,7 +1276,7 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
page_attrs.__page = $new_page; page_attrs.__page = $new_page;
page_attrs.__ic = ic; page_attrs.__ic = ic;
pages.push(page_attrs); pages.push(page_attrs);
$new_page.children().each(function() { $new_page.children().each(function() {
self.process($(this)); self.process($(this));
}); });
@ -1302,7 +1302,7 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
} }
}); });
}); });
this.handle_common_properties($new_notebook, $notebook); this.handle_common_properties($new_notebook, $notebook);
return $new_notebook; return $new_notebook;
}, },
@ -1603,7 +1603,7 @@ instance.web.form.FormWidget = instance.web.Widget.extend(instance.web.form.Invi
if (! v_context) { if (! v_context) {
v_context = (this.field || {}).context || {}; v_context = (this.field || {}).context || {};
} }
if (v_context.__ref || true) { //TODO: remove true if (v_context.__ref || true) { //TODO: remove true
var fields_values = this._build_eval_context(blacklist); var fields_values = this._build_eval_context(blacklist);
v_context = new instance.web.CompoundContext(v_context).set_eval_context(fields_values); v_context = new instance.web.CompoundContext(v_context).set_eval_context(fields_values);
@ -1711,14 +1711,14 @@ instance.web.form.WidgetButton = instance.web.form.FormWidget.extend({
/** /**
* Interface to be implemented by fields. * Interface to be implemented by fields.
* *
* Properties: * Properties:
* - readonly: boolean. If set to true the field should appear in readonly mode. * - readonly: boolean. If set to true the field should appear in readonly mode.
* - force_readonly: boolean, When it is true, the field should always appear * - force_readonly: boolean, When it is true, the field should always appear
* in read only mode, no matter what the value of the "readonly" property can be. * in read only mode, no matter what the value of the "readonly" property can be.
* Events: * Events:
* - changed_value: triggered to inform the view to check on_changes * - changed_value: triggered to inform the view to check on_changes
* *
*/ */
instance.web.form.FieldInterface = { instance.web.form.FieldInterface = {
/** /**
@ -1729,14 +1729,14 @@ instance.web.form.FieldInterface = {
init: function(field_manager, node) {}, init: function(field_manager, node) {},
/** /**
* Called by the form view to indicate the value of the field. * Called by the form view to indicate the value of the field.
* *
* set_value() may return an object that can be passed to $.when() that represents the moment when * set_value() may return an object that can be passed to $.when() that represents the moment when
* the field has finished all operations necessary before the user can effectively use the widget. * the field has finished all operations necessary before the user can effectively use the widget.
* *
* Multiple calls to set_value() can occur at any time and must be handled correctly by the implementation, * Multiple calls to set_value() can occur at any time and must be handled correctly by the implementation,
* regardless of any asynchronous operation currently running and the status of any promise that a * regardless of any asynchronous operation currently running and the status of any promise that a
* previous call to set_value() could have returned. * previous call to set_value() could have returned.
* *
* set_value() must be able, at any moment, to handle the syntax returned by the "read" method of the * set_value() must be able, at any moment, to handle the syntax returned by the "read" method of the
* osv class in the OpenERP server as well as the syntax used by the set_value() (see below). It must * osv class in the OpenERP server as well as the syntax used by the set_value() (see below). It must
* also be able to handle any other format commonly used in the _defaults key on the models in the addons * also be able to handle any other format commonly used in the _defaults key on the models in the addons
@ -1746,16 +1746,16 @@ instance.web.form.FieldInterface = {
set_value: function(value_) {}, set_value: function(value_) {},
/** /**
* Get the current value of the widget. * Get the current value of the widget.
* *
* Must always return a syntaxically correct value to be passed to the "write" method of the osv class in * Must always return a syntaxically correct value to be passed to the "write" method of the osv class in
* the OpenERP server, although it is not assumed to respect the constraints applied to the field. * the OpenERP server, although it is not assumed to respect the constraints applied to the field.
* For example if the field is marqued as "required", a call to get_value() can return false. * For example if the field is marqued as "required", a call to get_value() can return false.
* *
* get_value() can also be called *before* a call to set_value() and, in that case, is supposed to * get_value() can also be called *before* a call to set_value() and, in that case, is supposed to
* return a defaut value according to the type of field. * return a defaut value according to the type of field.
* *
* This method is always assumed to perform synchronously, it can not return a promise. * This method is always assumed to perform synchronously, it can not return a promise.
* *
* If there was no user interaction to modify the value of the field, it is always assumed that * If there was no user interaction to modify the value of the field, it is always assumed that
* get_value() return the same semantic value than the one passed in the last call to set_value(), * get_value() return the same semantic value than the one passed in the last call to set_value(),
* altough the syntax can be different. This can be the case for type of fields that have a different * altough the syntax can be different. This can be the case for type of fields that have a different
@ -1785,14 +1785,14 @@ instance.web.form.FieldInterface = {
/** /**
* Abstract class for classes implementing FieldInterface. * Abstract class for classes implementing FieldInterface.
* *
* Properties: * Properties:
* - effective_readonly: when it is true, the widget is displayed as readonly. Vary depending * - effective_readonly: when it is true, the widget is displayed as readonly. Vary depending
* the values of the "readonly" property and the "force_readonly" property on the field manager. * the values of the "readonly" property and the "force_readonly" property on the field manager.
* - value: useful property to hold the value of the field. By default, set_value() and get_value() * - value: useful property to hold the value of the field. By default, set_value() and get_value()
* set and retrieve the value property. Changing the value property also triggers automatically * set and retrieve the value property. Changing the value property also triggers automatically
* a 'changed_value' event that inform the view to trigger on_changes. * a 'changed_value' event that inform the view to trigger on_changes.
* *
*/ */
instance.web.form.AbstractField = instance.web.form.FormWidget.extend(instance.web.form.FieldInterface, { instance.web.form.AbstractField = instance.web.form.FormWidget.extend(instance.web.form.FieldInterface, {
/** /**
@ -1811,7 +1811,7 @@ instance.web.form.AbstractField = instance.web.form.FormWidget.extend(instance.w
this.string = this.node.attrs.string || this.field.string || this.name; this.string = this.node.attrs.string || this.field.string || this.name;
this.set({'value': false}); this.set({'value': false});
this.set({required: this.modifiers['required'] === true}); this.set({required: this.modifiers['required'] === true});
// some events to make the property "effective_readonly" sync automatically with "readonly" and // some events to make the property "effective_readonly" sync automatically with "readonly" and
// "force_readonly" // "force_readonly"
this.set({"readonly": this.modifiers['readonly'] === true}); this.set({"readonly": this.modifiers['readonly'] === true});
@ -1821,7 +1821,7 @@ instance.web.form.AbstractField = instance.web.form.FormWidget.extend(instance.w
this.on("change:readonly", this, test_effective_readonly); this.on("change:readonly", this, test_effective_readonly);
this.on("change:force_readonly", this, test_effective_readonly); this.on("change:force_readonly", this, test_effective_readonly);
_.bind(test_effective_readonly, this)(); _.bind(test_effective_readonly, this)();
this.on("change:value", this, function() { this.on("change:value", this, function() {
if (! this._inhibit_on_change) if (! this._inhibit_on_change)
this.trigger('changed_value'); this.trigger('changed_value');
@ -2003,7 +2003,7 @@ instance.web.form.FieldChar = instance.web.form.AbstractField.extend(instance.we
}); });
instance.web.form.FieldID = instance.web.form.FieldChar.extend({ instance.web.form.FieldID = instance.web.form.FieldChar.extend({
}); });
instance.web.form.FieldEmail = instance.web.form.FieldChar.extend({ instance.web.form.FieldEmail = instance.web.form.FieldChar.extend({
@ -2396,7 +2396,7 @@ instance.web.form.FieldSelection = instance.web.form.AbstractField.extend(instan
} else { } else {
var self = this; var self = this;
var option = _(this.values) var option = _(this.values)
.detect(function (record) { return record[0] === self.get('value'); }); .detect(function (record) { return record[0] === self.get('value'); });
this.$element.text(option ? option[1] : this.values[0][1]); this.$element.text(option ? option[1] : this.values[0][1]);
} }
}, },
@ -2575,7 +2575,7 @@ instance.web.form.FieldMany2One = instance.web.form.AbstractField.extend(instanc
render_editable: function() { render_editable: function() {
var self = this; var self = this;
this.$input = this.$element.find("input"); this.$input = this.$element.find("input");
self.$input.tipsy({ self.$input.tipsy({
title: function() { title: function() {
return "No element was selected, you should create or select one from the dropdown list."; return "No element was selected, you should create or select one from the dropdown list.";
@ -2583,10 +2583,10 @@ instance.web.form.FieldMany2One = instance.web.form.AbstractField.extend(instanc
trigger:'manual', trigger:'manual',
fade: true, fade: true,
}); });
this.$drop_down = this.$element.find(".oe_m2o_drop_down_button"); this.$drop_down = this.$element.find(".oe_m2o_drop_down_button");
this.$follow_button = $(".oe_m2o_cm_button", this.$element); this.$follow_button = $(".oe_m2o_cm_button", this.$element);
this.$follow_button.click(function() { this.$follow_button.click(function() {
if (!self.get('value')) { if (!self.get('value')) {
self.focus(); self.focus();
@ -2880,7 +2880,7 @@ instance.web.form.FieldOne2Many = instance.web.form.AbstractField.extend({
}, },
load_views: function() { load_views: function() {
var self = this; var self = this;
var modes = this.node.attrs.mode; var modes = this.node.attrs.mode;
modes = !!modes ? modes.split(",") : ["tree"]; modes = !!modes ? modes.split(",") : ["tree"];
var views = []; var views = [];
@ -3462,7 +3462,7 @@ instance.web.form.FieldMany2ManyTags = instance.web.form.AbstractField.extend(in
$("textarea", self.$element).css("padding-left", "3px"); $("textarea", self.$element).css("padding-left", "3px");
self.tags.addTags(_.map(data, function(el) {return {name: el[1], id:el[0]};})); self.tags.addTags(_.map(data, function(el) {return {name: el[1], id:el[0]};}));
} else { } else {
self.$element.html(QWeb.render("FieldMany2ManyTags.box", {elements: data})); self.$element.html(QWeb.render("FieldMany2ManyTag", {elements: data}));
} }
}; };
if (! self.get('values') || self.get('values').length > 0) { if (! self.get('values') || self.get('values').length > 0) {
@ -3634,7 +3634,7 @@ instance.web.form.FieldMany2ManyKanban = instance.web.form.AbstractField.extend(
this.dataset.on_unlink.add_last(function(ids) { this.dataset.on_unlink.add_last(function(ids) {
self.dataset_changed(); self.dataset_changed();
}); });
this.is_setted.then(function() { this.is_setted.then(function() {
self.load_view(); self.load_view();
}); });
@ -3750,7 +3750,7 @@ instance.web.form.Many2ManyKanbanView = instance.web_kanban.KanbanView.extend({
}); });
instance.web.form.Many2ManyQuickCreate = instance.web.Widget.extend({ instance.web.form.Many2ManyQuickCreate = instance.web.Widget.extend({
template: 'Many2ManyKanban.quick_create', template: 'Many2ManyKanban.quick_create',
/** /**
* close_btn: If true, the widget will display a "Close" button able to trigger * close_btn: If true, the widget will display a "Close" button able to trigger
* a "close" event. * a "close" event.
@ -4443,7 +4443,7 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
this.selection = []; this.selection = [];
// get fold information from widget // get fold information from widget
var fold = ((this.node.attrs || {}).statusbar_fold || true); var fold = ((this.node.attrs || {}).statusbar_fold || true);
// build final domain: if fold option required, add the // build final domain: if fold option required, add the
if (fold == true) { if (fold == true) {
var domain = new instance.web.CompoundDomain(['|'], ['&'], self.build_domain(), [['fold', '=', false]], [['id', '=', self.selected_value]]); var domain = new instance.web.CompoundDomain(['|'], ['&'], self.build_domain(), [['fold', '=', false]], [['id', '=', self.selected_value]]);
} else { } else {
@ -4475,7 +4475,7 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
var shown = _.map(((this.node.attrs || {}).statusbar_visible || "").split(","), var shown = _.map(((this.node.attrs || {}).statusbar_visible || "").split(","),
function(x) { return _.str.trim(x); }); function(x) { return _.str.trim(x); });
shown = _.select(shown, function(x) { return x.length > 0; }); shown = _.select(shown, function(x) { return x.length > 0; });
if (shown.length == 0) { if (shown.length == 0) {
this.to_show = this.selection; this.to_show = this.selection;
} else { } else {

8
addons/web/static/src/xml/base.xml
View File

@ -961,18 +961,20 @@
</t> </t>
</span> </span>
</t> </t>
<!-- Collection of m2m tags -->
<t t-name="FieldMany2ManyTags"> <t t-name="FieldMany2ManyTags">
<div class="oe_form_field oe_form_field_many2manytags" t-att-style="widget.node.attrs.style"> <div class="oe_form_field oe_field_many2many_tags" t-att-style="widget.node.attrs.style">
<t t-if="! widget.get('effective_readonly')"> <t t-if="! widget.get('effective_readonly')">
<textarea rows="1" style="width: 100%" <textarea rows="1" style="width: 100%"
t-att-placeholder="widget.node.attrs.placeholder"></textarea> t-att-placeholder="widget.node.attrs.placeholder"></textarea>
</t> </t>
</div> </div>
</t> </t>
<t t-name="FieldMany2ManyTags.box"> <!-- Individual m2m tag element -->
<t t-name="FieldMany2ManyTag">
<t t-set="i" t-value="0"/> <t t-set="i" t-value="0"/>
<t t-foreach="elements" t-as="el"> <t t-foreach="elements" t-as="el">
<span class="oe_form_field_many2manytags_box" t-att-data-index="i"> <span class="oe_field_many2many_tag" t-att-data-index="i">
<t t-esc="el[1]"/> <t t-esc="el[1]"/>
</span> </span>
<t t-set="i" t-value="i + 1"/> <t t-set="i" t-value="i + 1"/>