[FIX] web, *: float utility-classes
'pull-[left/right]' classes are discontinued since Bootstrap v3 [1]. The reason why we never noticed is that we were unknowingly relying on fontAwesome utility classes that are basically the same. Since v3 we were supposed to use 'float-[left/right]' classes [2], but these classes will be renamed again in v5 with 'float-[start/end]'[3]. This commit introduces "v5 ready" utility-classes and replaces v2 legacy occurrences across the UI. These classes definitions can be safely removed when v5 migration will be completed. Notes: - this commit will *not* adapt frontend occurrences since its CSS already relies on a "migration table" [4]. - this commit will *not* adapt the few v3 'float-[left/right]' occurrences since are supposed to be handled in the v5 migration task (task-2704984). This commit is part of v16 overall restyle (task-2704984). enterprise: https://github.com/odoo/enterprise/pull/23848 task-2745275 [1] https://getbootstrap.com/docs/4.3/migration/#utilities [2] https://getbootstrap.com/docs/4.3/utilities/float/#classes [3] https://getbootstrap.com/docs/5.1/utilities/float/#overview [4] https://github.com/odoo/odoo/blob/15.0/addons/website/static/src/scss/compatibility/bs3_for_12_0.scss#L49 Part-of: odoo/odoo#83501
This commit is contained in:
stefanorigano (SRI)
@@ -15,7 +15,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<a t-if="more_activities" class="pull-right see_all_activities" href="#">See all activities</a>
|
||||
<a t-if="more_activities" class="float-end see_all_activities" href="#">See all activities</a>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<button string="Cancel" class="btn-secondary" special="cancel" data-hotkey="z" />
|
||||
<button icon="fa-lg fa-save" type="object" name="save_as_template" string="Save as new template"
|
||||
attrs="{'invisible': ['|', ('composition_mode', '=', 'mass_mail'), ('is_email', '=', False)]}"
|
||||
class="pull-right btn-secondary" help="Save as a new template" data-hotkey="w" />
|
||||
class="float-end btn-secondary" help="Save as a new template" data-hotkey="w" />
|
||||
</footer>
|
||||
</form>
|
||||
</field>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
<t t-set="data" t-value="props.data"/>
|
||||
<t t-set="duration" t-value="props.requires_allocation ? data.virtual_remaining_leaves : data.virtual_leaves_taken" />
|
||||
|
||||
<span class="pull-right o_timeoff_card_mobile">
|
||||
<span class="float-end o_timeoff_card_mobile">
|
||||
<t t-if="props.requires_allocation" name="duration_type">
|
||||
<strong t-esc="duration" class="o_timeoff_green"/> / <span t-esc="data.max_leaves"/> <t t-if="data.request_unit == 'hour'">Hours</t><t t-else="">Days</t> <span class="o_timeoff_green">Available</span>
|
||||
</t>
|
||||
|
||||
@@ -326,7 +326,7 @@
|
||||
<div class="ribbon ribbon-top-right" attrs="{'invisible': [('date_closed', '=', False)]}">
|
||||
<span class="bg-success">Hired</span>
|
||||
</div>
|
||||
<span class="badge badge-pill badge-danger pull-right mr-4" attrs="{'invisible': [('active', '=', True)]}">Refused</span>
|
||||
<span class="badge badge-pill badge-danger float-end mr-4" attrs="{'invisible': [('active', '=', True)]}">Refused</span>
|
||||
<div class="o_dropdown_kanban dropdown">
|
||||
<a class="dropdown-toggle o-no-caret btn" role="button" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu" data-display="static">
|
||||
<span class="fa fa-ellipsis-v"/>
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<t t-name="group_add_item">
|
||||
<t t-set="empty" t-value="Object.keys(context).length == 2"/>
|
||||
|
||||
<div t-attf-class="o_field_x2many_list_row_add #{empty? 'd-block w-100' : 'd-inline pull-right'}">
|
||||
<div t-attf-class="o_field_x2many_list_row_add #{empty? 'd-block w-100' : 'd-inline float-end'}">
|
||||
<div t-if="empty" class="o_resume_empty_helper o_horizontal_separator text-muted my-0">
|
||||
<em>Resumé empty</em>
|
||||
</div>
|
||||
|
||||
@@ -234,7 +234,7 @@
|
||||
<i class="fa fa-calendar" role="img" aria-label="Date" title="Date"></i>
|
||||
<t t-esc="record.date.value"/>
|
||||
</span>
|
||||
<span class="pull-right" name="duration">
|
||||
<span class="float-end" name="duration">
|
||||
<strong>Duration: </strong><field name="unit_amount" widget="timesheet_uom" decoration-danger="unit_amount > 24"/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<div class="col-6">
|
||||
<strong><span><t t-esc="record.employee_id.value"/></span></strong>
|
||||
</div>
|
||||
<div class="col-6 pull-right text-right">
|
||||
<div class="col-6 float-end text-right">
|
||||
<strong><t t-esc="record.date.value"/></strong>
|
||||
</div>
|
||||
</div>
|
||||
@@ -70,7 +70,7 @@
|
||||
<span><t t-esc="record.name.value"/></span>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<span class="pull-right text-right">
|
||||
<span class="float-end text-right">
|
||||
<field name="unit_amount" widget="float_time"/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -171,7 +171,7 @@
|
||||
<div class="col-6">
|
||||
<strong><span><t t-esc="record.employee_id.value"/></span></strong>
|
||||
</div>
|
||||
<div class="col-6 pull-right text-right">
|
||||
<div class="col-6 float-end text-right">
|
||||
<strong><t t-esc="record.date.value"/></strong>
|
||||
</div>
|
||||
</div>
|
||||
@@ -180,7 +180,7 @@
|
||||
<span><t t-esc="record.name.value"/></span>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<span class="pull-right text-right">
|
||||
<span class="float-end text-right">
|
||||
<field name="unit_amount" widget="float_time"/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -194,7 +194,7 @@
|
||||
<div class="row">
|
||||
<div name="stamp" class="col-4 text-center"/>
|
||||
<div name="transferable-table" class="col-4"/>
|
||||
<div name="transferable-legend" class="col-4 pull-right"/>
|
||||
<div name="transferable-legend" class="col-4 float-end"/>
|
||||
</div>
|
||||
</xpath>
|
||||
|
||||
|
||||
@@ -751,7 +751,7 @@ var ActivityException = AbstractField.extend({
|
||||
if (this.value) {
|
||||
this.$el.attr({
|
||||
title: _t('This record has an exception activity.'),
|
||||
class: "pull-right mt-1 text-" + this.value + " fa " + this.recordData.activity_exception_icon
|
||||
class: "float-end mt-1 text-" + this.value + " fa " + this.recordData.activity_exception_icon
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
t-att-data-activity-type-id="type[0]" t-attf-width="{{100/props.activity_types.length}}%">
|
||||
<div>
|
||||
<span t-esc="type[1]"/>
|
||||
<span t-if="type[2].length > 0" class="dropdown pull-right">
|
||||
<span t-if="type[2].length > 0" class="dropdown float-end">
|
||||
<i class="fa fa-ellipsis-v fa-fw" data-toggle="dropdown"/>
|
||||
<div class="dropdown-menu">
|
||||
<t t-foreach="type[2]" t-as="template" t-key="template.id">
|
||||
|
||||
@@ -67,9 +67,9 @@
|
||||
|
||||
<div class="mb64 pt-3">
|
||||
<div t-if="show_blacklist_button">
|
||||
<div class="btn btn-secondary pull-right" id="button_add_blacklist" style="display:none">Blacklist Me</div>
|
||||
<div class="btn btn-secondary float-end" id="button_add_blacklist" style="display:none">Blacklist Me</div>
|
||||
</div>
|
||||
<div class="btn btn-secondary pull-right" id="button_remove_blacklist" style="display:none">Come Back</div>
|
||||
<div class="btn btn-secondary float-end" id="button_remove_blacklist" style="display:none">Come Back</div>
|
||||
<button type="submit" id="send_form" class="btn btn-primary">Update my subscriptions</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,8 +113,8 @@
|
||||
</div>
|
||||
|
||||
<div t-if="show_blacklist_button" class="mb64">
|
||||
<div class="btn btn-secondary pull-right" id="button_add_blacklist" style="display:none">Blacklist Me</div>
|
||||
<div class="btn btn-secondary pull-right" id="button_remove_blacklist" style="display:none">Come Back</div>
|
||||
<div class="btn btn-secondary float-end" id="button_add_blacklist" style="display:none">Blacklist Me</div>
|
||||
<div class="btn btn-secondary float-end" id="button_remove_blacklist" style="display:none">Come Back</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -159,11 +159,11 @@
|
||||
</body>
|
||||
<xpath expr="//footer" position="replace">
|
||||
<div class="container mt16 mb8">
|
||||
<div class="pull-right" t-ignore="true" t-if="not editable">
|
||||
<div class="float-end" t-ignore="true" t-if="not editable">
|
||||
Create a <a target="_blank" href="https://www.odoo.com/app/website">free website</a> with
|
||||
<a target="_blank" class="label label-danger" href="https://www.odoo.com/app/website">Odoo</a>
|
||||
</div>
|
||||
<div class="pull-left text-muted" itemscope="itemscope" itemtype="https://schema.org/Organization">
|
||||
<div class="float-start text-muted" itemscope="itemscope" itemtype="https://schema.org/Organization">
|
||||
<t t-call="web.debug_icon"/>
|
||||
Copyright &copy; <span t-field="res_company.name" itemprop="name">Company name</span>
|
||||
</div>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<li class="list-group-item">
|
||||
<h4 class="list-group-item-heading mb5">
|
||||
<t t-esc="tx['reference']"/>
|
||||
<span class="badge pull-right"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
|
||||
<span class="badge float-end"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
|
||||
</h4>
|
||||
<small class="list-group-item-text">
|
||||
An error occurred during the processing of this payment.<br/>
|
||||
@@ -30,7 +30,7 @@
|
||||
<a t-att-href="tx['landing_route']" class="list-group-item">
|
||||
<h4 class="list-group-item-heading mb5">
|
||||
<t t-esc="tx['reference']"/>
|
||||
<span class="badge pull-right"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
|
||||
<span class="badge float-end"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
|
||||
</h4>
|
||||
<small class="list-group-item-text">
|
||||
<t t-if="!tx['is_post_processed']">
|
||||
@@ -48,7 +48,7 @@
|
||||
<a t-att-href="tx['landing_route']" class="list-group-item">
|
||||
<h4 class="list-group-item-heading mb5">
|
||||
<t t-esc="tx['reference']"/>
|
||||
<span class="badge pull-right"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
|
||||
<span class="badge float-end"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
|
||||
</h4>
|
||||
<small class="list-group-item-text">
|
||||
<t t-if="tx['display_message']">
|
||||
@@ -69,7 +69,7 @@
|
||||
<li class="list-group-item">
|
||||
<h4 class="list-group-item-heading mb5">
|
||||
<t t-esc="tx['reference']"/>
|
||||
<span class="badge pull-right"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
|
||||
<span class="badge float-end"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
|
||||
</h4>
|
||||
<small class="list-group-item-text">
|
||||
<t t-if="tx['display_message']">
|
||||
@@ -94,7 +94,7 @@
|
||||
<li class="list-group-item">
|
||||
<h4 class="list-group-item-heading mb5">
|
||||
<t t-esc="tx['reference']"/>
|
||||
<span class="badge pull-right"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
|
||||
<span class="badge float-end"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
|
||||
</h4>
|
||||
<small class="list-group-item-text">
|
||||
<t t-if="tx['display_message']">
|
||||
@@ -118,7 +118,7 @@
|
||||
<li class="list-group-item">
|
||||
<h4 class="list-group-item-heading mb5">
|
||||
<t t-esc="tx['reference']"/>
|
||||
<span class="badge pull-right"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
|
||||
<span class="badge float-end"><t t-esc="tx['amount']"/> <t t-esc="tx['currency_code']"/></span>
|
||||
</h4>
|
||||
<small class="list-group-item-text">
|
||||
This transaction has been cancelled.<br/>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}" optional="hide"/>
|
||||
<field name="kanban_state" widget="state_selection" optional="hide"/>
|
||||
<field name="stage_id" optional="show"/>
|
||||
<button name="action_open_task" type="object" title="View Task" string="View Task" class="btn btn-link pull-right"
|
||||
<button name="action_open_task" type="object" title="View Task" string="View Task" class="btn btn-link float-end"
|
||||
context="{'form_view_ref': 'project.project_sharing_project_task_view_form'}"
|
||||
attrs="{'invisible': "[('display_project_id', '!=', False), ('display_project_id', '!=', active_id)]"}"/>
|
||||
</tree>
|
||||
|
||||
@@ -953,7 +953,7 @@
|
||||
<field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}" optional="hide"/>
|
||||
<field name="kanban_state" required="0" widget="state_selection" optional="show" options="{'hide_label': True}" nolabel="1" class="d-flex justify-content-center"/>
|
||||
<field name="stage_id" optional="show"/>
|
||||
<button name="action_open_task" type="object" title="View Task" string="View Task" class="btn btn-link pull-right"/>
|
||||
<button name="action_open_task" type="object" title="View Task" string="View Task" class="btn btn-link float-end"/>
|
||||
</tree>
|
||||
</field>
|
||||
</page>
|
||||
|
||||
@@ -341,7 +341,7 @@
|
||||
<field name="priority" widget="priority" nolabel="1" optional="hidden"/>
|
||||
<field name="product_id" attrs="{'readonly': [('id', '!=', False)]}" readonly="context.get('single_product', False)" force_save="1" options="{'no_create': True}"/>
|
||||
<field name="product_categ_id" optional="hide"/>
|
||||
<button name="action_warning_duplicated_sn" type="object" attrs="{'invisible': [('sn_duplicated', '=', False)]}" title="This lot/serial number is already in another location" class="btn btn-secondary text-warning pull-right" icon="fa-warning"/>
|
||||
<button name="action_warning_duplicated_sn" type="object" attrs="{'invisible': [('sn_duplicated', '=', False)]}" title="This lot/serial number is already in another location" class="btn btn-secondary text-warning float-end" icon="fa-warning"/>
|
||||
<field name="lot_id" groups="stock.group_production_lot"
|
||||
attrs="{'readonly': ['|', ('tracking', 'not in', ['serial', 'lot']), '&', ('id', '!=', False), '|', ('lot_id', '!=', False), ('quantity', '!=', 0)]}"
|
||||
invisible="context.get('hide_lot', False)"
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
this.ranges = {};
|
||||
|
||||
this.opens = 'right';
|
||||
if (this.element.hasClass('pull-right'))
|
||||
if (this.element.hasClass('float-end'))
|
||||
this.opens = 'left';
|
||||
|
||||
this.drops = 'down';
|
||||
|
||||
@@ -237,7 +237,7 @@ var FieldMany2One = AbstractField.extend({
|
||||
_addAutocompleteSource: function (method, params) {
|
||||
this._autocompleteSources.push({
|
||||
method: method,
|
||||
placeholder: (params.placeholder ? _t(params.placeholder) : _t('Loading...')) + '<i class="fa fa-spin fa-circle-o-notch pull-right"></i>' ,
|
||||
placeholder: (params.placeholder ? _t(params.placeholder) : _t('Loading...')) + '<i class="fa fa-spin fa-circle-o-notch float-end"></i>' ,
|
||||
validation: params.validation,
|
||||
loading: false,
|
||||
order: params.order || 999
|
||||
|
||||
@@ -144,7 +144,7 @@ var DataExport = Dialog.extend({
|
||||
$('<li>', {'class': 'o_export_field', 'data-field_id': fieldID}).append(
|
||||
$('<span>', {'class': "fa fa-sort o_short_field mx-1"}),
|
||||
label.trim(),
|
||||
$('<span>', {'class': 'fa fa-trash m-1 pull-right o_remove_field', 'title': _t("Remove field")})
|
||||
$('<span>', {'class': 'fa fa-trash m-1 float-end o_remove_field', 'title': _t("Remove field")})
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1439,7 +1439,7 @@
|
||||
<t t-if="debug and field.id">
|
||||
(<t t-esc="field.id"/>)
|
||||
</t>
|
||||
<span title="Select field" class="fa fa-plus pull-right m-1 o_add_field"/>
|
||||
<span title="Select field" class="fa fa-plus float-end m-1 o_add_field"/>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
@@ -131,6 +131,18 @@ $o-inline-spacers: map-merge($spacers, ('auto': auto));
|
||||
}
|
||||
}
|
||||
|
||||
// == Float Classes
|
||||
//------------------------------------------------------------------------------
|
||||
// "Bootstrap v5 ready" utility-classes to float elements to the left or right.
|
||||
// These classes definitions can be safely removed after migrating to BTS v5.
|
||||
|
||||
.float-start {
|
||||
float: left !important;
|
||||
}
|
||||
.float-end {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
//== Badges
|
||||
.badge {
|
||||
min-width: $o-badge-min-width;
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<field name="url"/>
|
||||
</xpath>
|
||||
<xpath expr="//div[hasclass('o_kanban_record_body')]/div" position="before">
|
||||
<div class="pull-left">
|
||||
<div class="float-start">
|
||||
<a role="button" t-att-href="record.url.value" title="share it" class="fa fa-share-alt"/>
|
||||
</div>
|
||||
</xpath>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<li class="breadcrumb-item active">Settings</li>
|
||||
</ol>
|
||||
<div class="o_setting_search">
|
||||
<input type="text" class="searchInput pull-right p-0 pb-1" placeholder="Search..."/>
|
||||
<input type="text" class="searchInput float-end p-0 pb-1" placeholder="Search..."/>
|
||||
<span class="searchIcon"><i class="fa fa-search" role="img" aria-label="Search" title="Search"/></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user