Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Form buttons should always get a (correct) btn style class #24443

Closed
wants to merge 2 commits into from
Closed

Form buttons should always get a (correct) btn style class #24443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
28f6041
[REF] web: make cleaner code for the `renderButton` helper
qsm-odoo Apr 26, 2018
5b3279b
[FIX] web: form buttons should always get a btn style class
qsm-odoo Apr 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
41 changes: 28 additions & 13 deletions addons/web/static/src/js/core/dom.js
View file
Open in desktop
Expand Up @@ -207,27 +207,41 @@ return {
*
* @param {Object} options
* @param {Object} [options.attrs] - Attributes to put on the button element
* @param {string} [options.attrs.type="button"]
* @param {string} [options.attrs.class="btn-default"]
* Note: automatically completed with "btn btn-X" (@see options.size
* for the value of X)
* @param {string} [options.size=sm] - @see options.attrs.class
* @param {string} [options.attrs.type='button']
* @param {string} [options.attrs.class='btn-default']
* Note: automatically completed with "btn btn-X"
* (@see options.size for the value of X)
* @param {string} [options.size='sm'] - @see options.attrs.class
* Note: use 'md' for no sizing class
* @param {string} [options.icon]
* The specific fa icon class (for example "fa-home") or an URL for
* an image to use as icon.
* @param {string} [options.text] - the button's text
* @returns {jQuery}
*/
renderButton: function (options) {
var params = options.attrs || {};
params.type = params.type || 'button';
var classes = 'btn-default';
if (params.class) {
classes = params.class.replace(/\boe_highlight\b/g, 'btn-primary')
.replace(/\boe_link\b/g, 'btn-link');
var jQueryParams = _.extend({
type: 'button',
}, options.attrs || {});

var extraClasses = jQueryParams.class;
if (extraClasses) {
// If we got extra classes, check if old oe_highlight/oe_link
// classes are given and switch them to the right classes (those
// classes have no style associated to them anymore).
// TODO ideally this should be dropped at some point.
extraClasses = extraClasses.replace(/\boe_highlight\b/g, 'btn-primary')
.replace(/\boe_link\b/g, 'btn-link');
}

jQueryParams.class = 'btn';
if (options.size !== 'md') {
jQueryParams.class += (' btn-' + (options.size || 'sm'));
}
params.class = 'btn btn-' + (options.size || 'sm') + ' ' + classes;
var $button = $('<button/>', params);
jQueryParams.class += (' ' + (extraClasses || 'btn-default'));

var $button = $('<button/>', jQueryParams);

if (options.icon) {
if (options.icon.substr(0, 3) === 'fa-') {
$button.append($('<i/>', {
Expand All @@ -244,6 +258,7 @@ return {
text: options.text,
}));
}

return $button;
},
/**
Expand Down
10 changes: 10 additions & 0 deletions addons/web/static/src/js/views/form/form_renderer.js
View file
Open in desktop
Expand Up @@ -395,6 +395,16 @@ var FormRenderer = BasicRenderer.extend({
_renderHeaderButton: function (node) {
var $button = this._renderButtonFromNode(node);

// Current API of odoo for rendering buttons is "if classes are given
// use those on top of the 'btn' and 'btn-{size}' classes, otherwise act
// as if 'btn-default' class was given". The problem is that, for header
// buttons only, we allowed users to only indicate their custom classes
// without having to explicitely ask for the 'btn-default' class to be
// added. We force it so here when no bootstrap btn type class is found.
if ($button.not('.btn-primary, .btn-default, .btn-link, .btn-success, .btn-info, .btn-warning, .btn-danger').length) {
$button.addClass('btn-default');
}

this._addOnClickAction($button, node);
this._handleAttributes($button, node);
this._registerModifiers(node, this.state, $button);
Expand Down
69 changes: 69 additions & 0 deletions addons/web/static/tests/views/form_tests.js
View file
Open in desktop
Expand Up @@ -1045,6 +1045,75 @@ QUnit.module('Views', {
form.destroy();
});

QUnit.test('buttons classes in form view', function (assert) {
assert.expect(16);

var form = createView({
View: FormView,
model: 'partner',
data: this.data,
arch:
'<form string="Partners">' +
'<header>' +
'<button name="0"/>' +
'<button name="1" class="btn-primary"/>' +
'<button name="2" class="oe_highlight"/>' +
'<button name="3" class="btn-default"/>' +
'<button name="4" class="btn-link"/>' +
'<button name="5" class="oe_link"/>' +
'<button name="6" class="btn-success"/>' +
'<button name="7" class="o_this_is_a_button"/>' +
'</header>' +
'<sheet>' +
'<button name="8"/>' +
'<button name="9" class="btn-primary"/>' +
'<button name="10" class="oe_highlight"/>' +
'<button name="11" class="btn-default"/>' +
'<button name="12" class="btn-link"/>' +
'<button name="13" class="oe_link"/>' +
'<button name="14" class="btn-success"/>' +
'<button name="15" class="o_this_is_a_button"/>' +
'</sheet>' +
'</form>',
res_id: 2,
});

assert.strictEqual(form.$('button[name="0"]').attr('class'), 'btn btn-sm btn-default',
"header buttons without any class should receive the correct classes");
assert.strictEqual(form.$('button[name="1"]').attr('class'), 'btn btn-sm btn-primary',
"header buttons with bootstrap primary class should receive the correct classes");
assert.strictEqual(form.$('button[name="2"]').attr('class'), 'btn btn-sm btn-primary',
"header buttons with oe_highlight class should receive the correct classes");
assert.strictEqual(form.$('button[name="3"]').attr('class'), 'btn btn-sm btn-default',
"header buttons with bootstrap default class should receive the correct classes");
assert.strictEqual(form.$('button[name="4"]').attr('class'), 'btn btn-sm btn-link',
"header buttons with bootstrap link class should receive the correct classes");
assert.strictEqual(form.$('button[name="5"]').attr('class'), 'btn btn-sm btn-link',
"header buttons with oe_link class should receive the correct classes");
assert.strictEqual(form.$('button[name="6"]').attr('class'), 'btn btn-sm btn-success',
"header buttons with bootstrap state class should receive the correct classes");
assert.strictEqual(form.$('button[name="7"]').attr('class'), 'btn btn-sm o_this_is_a_button btn-default',
"header buttons with custom classes should receive the correct classes");
assert.strictEqual(form.$('button[name="8"]').attr('class'), 'btn btn-sm btn-default',
"sheet header buttons without any class should receive the correct classes");
assert.strictEqual(form.$('button[name="9"]').attr('class'), 'btn btn-sm btn-primary',
"sheet buttons with bootstrap primary class should receive the correct classes");
assert.strictEqual(form.$('button[name="10"]').attr('class'), 'btn btn-sm btn-primary',
"sheet buttons with oe_highlight class should receive the correct classes");
assert.strictEqual(form.$('button[name="11"]').attr('class'), 'btn btn-sm btn-default',
"sheet buttons with bootstrap default class should receive the correct classes");
assert.strictEqual(form.$('button[name="12"]').attr('class'), 'btn btn-sm btn-link',
"sheet buttons with bootstrap link class should receive the correct classes");
assert.strictEqual(form.$('button[name="13"]').attr('class'), 'btn btn-sm btn-link',
"sheet buttons with oe_link class should receive the correct classes");
assert.strictEqual(form.$('button[name="14"]').attr('class'), 'btn btn-sm btn-success',
"sheet buttons with bootstrap state class should receive the correct classes");
assert.strictEqual(form.$('button[name="15"]').attr('class'), 'btn btn-sm o_this_is_a_button',
"sheet buttons with custom classes should receive the correct classes");

form.destroy();
});

QUnit.test('buttons in form view, new record', function (assert) {
// this simulates a situation similar to the settings forms.
assert.expect(7);
Expand Down