[REF] *: BS5: Migrate Badge

From [1]:
> Dropped all .badge-* color classes for background utilities
> (e.g., use .bg-primary instead of .badge-primary).

We now have to manage constrast for some badge. It's why we
add 'text-dark' at some point.

Note:
Due to the backport of 'text-bg-#{theme}', we can use this to
avoid to use 'text-dark'.

Ref:
[1] https://getbootstrap.com/docs/5.1/migration/#badges

Task ID: 2766483

Part-of: odoo/odoo#95450
This commit is contained in:
Romeo Fragomeli
2022-07-07 13:30:18 +02:00
parent d8c131c894
commit ac584e171d
28 changed files with 43 additions and 63 deletions
@@ -10,7 +10,7 @@
<t t-if="widget.pending_users.length">
<p class="o_form_label pt-3">Pending Invitations:</p>
<span t-foreach="widget.pending_users" t-as="pending">
<a href="#" class="badge badge-pill o_web_settings_user" t-att-data-user-id="pending[0]"> <t t-esc="pending[1]"/> </a>
<a href="#" class="badge badge-pill text-primary o_web_settings_user" t-att-data-user-id="pending[0]"> <t t-esc="pending[1]"/> </a>
</span>
<t t-if="widget.pending_users.length &lt; widget.pending_count">
<br/>
@@ -217,7 +217,7 @@ const GoogleCalendarRenderer = CalendarRenderer.include({
_initGooglePillButton: function() {
// hide the pending button
this.$calendarSyncContainer.find('#google_sync_pending').hide();
const switchBadgeClass = elem => elem.toggleClass(['badge-primary', 'badge-danger']);
const switchBadgeClass = elem => elem.toggleClass(['bg-primary', 'bg-danger']);
this.$('#google_sync_configured').hover(() => {
switchBadgeClass(this.$calendarSyncContainer.find('#google_sync_configured'));
this.$calendarSyncContainer.find('#google_check').hide();
@@ -1,5 +1,5 @@
.o_calendar_sidebar {
.badge-primary {
.bg-primary {
background-color: $o-enterprise-primary-color;
}
.o_google_sync_button {
@@ -4,11 +4,5 @@
}
.o_project_kanban .oe_kanban_align.badge {
background: inherit;
color: inherit;
border: 1px solid var(--success);
}
.o_project_kanban .oe_kanban_align.badge-danger {
border-color: var(--danger);
}
+5 -5
View File
@@ -301,12 +301,12 @@
</div>
</xpath>
<xpath expr="//div[hasclass('o_project_kanban_boxes')]" position="after">
<t t-set="badge" t-value=""/>
<t t-set="badge" t-value="'badge-danger'" t-if="record.remaining_hours.raw_value &lt; 0"/>
<t t-set="badgeColor" t-value="'border-success'"/>
<t t-set="badgeColor" t-value="'border-danger'" t-if="record.remaining_hours.raw_value &lt; 0"/>
<t t-set="title" t-value="'Remaining days'" t-if="record.encode_uom_in_days.raw_value"/>
<t t-set="title" t-value="'Remaining hours'" t-else=""/>
<div t-if="record.allocated_hours.raw_value &gt; 0"
t-attf-class="oe_kanban_align badge {{ badge }}" t-att-title="title">
t-attf-class="oe_kanban_align badge {{ badgeColor }}" t-att-title="title">
<field name="remaining_hours" widget="timesheet_uom"/>
</div>
</xpath>
@@ -328,8 +328,8 @@
<div class="oe_kanban_bottom_left" position="inside">
<t name="planned_hours" t-if="record.planned_hours.raw_value &gt; 0 and record.allow_timesheets.raw_value">
<t t-set="badge" t-value=""/>
<t t-set="badge" t-value="'badge-warning'" t-if="record.progress.raw_value &gt;= 80 and record.progress.raw_value &lt;= 100"/>
<t t-set="badge" t-value="'badge-danger'" t-if="record.remaining_hours.raw_value &lt; 0"/>
<t t-set="badge" t-value="'border-warning'" t-if="record.progress.raw_value &gt;= 80 and record.progress.raw_value &lt;= 100"/>
<t t-set="badge" t-value="'border-danger'" t-if="record.remaining_hours.raw_value &lt; 0"/>
<t t-set="title" t-value="'Remaining days'" t-if="record.encode_uom_in_days.raw_value"/>
<t t-set="title" t-value="'Remaining hours'" t-else=""/>
<div t-attf-class="oe_kanban_align badge {{ badge }}" t-att-title="title">
@@ -39,7 +39,7 @@ const ActivityCell = KanbanActivity.extend({
this.$('a').html($date);
if (this.record.data.activity_ids.res_ids.length > 1) {
this.$('a').append($('<span>', {
class: 'badge badge-light badge-pill border-0 ' + this.record.data.activity_state,
class: 'badge bg-light rounded-pill border-0 ' + this.record.data.activity_state,
text: this.record.data.activity_ids.res_ids.length,
}));
}
@@ -36,7 +36,7 @@
<li role="menuitem" t-attf-class="o_activity_label list-group-item list-group-item list-group-item-light d-flex justify-content-between align-items-center o_activity_color_{{key}} {{!key_first ? 'mt-2' : ''}}">
<strong><t t-esc="selection[key]"/></strong>
<span t-attf-class="badge badge-pill badge-{{contextual_class}} border-0 mr-0"><t t-esc="logs.length"/></span>
<span t-attf-class="badge rounded-pill bg-{{contextual_class}} border-0 me-0"><t t-esc="logs.length"/></span>
</li>
<t t-foreach="logs" t-as="log">
<t t-set="edit_class" t-value="'o_edit_activity'"/>
@@ -216,7 +216,7 @@ const MicrosoftCalendarRenderer = CalendarRenderer.include({
_initMicrosoftPillButton: function() {
// hide the pending button
this.$calendarSyncContainer.find('#microsoft_sync_pending').hide();
const switchBadgeClass = elem => elem.toggleClass(['badge-primary', 'badge-danger']);
const switchBadgeClass = elem => elem.toggleClass(['bg-primary', 'bg-danger']);
this.$('#microsoft_sync_configured').hover(() => {
switchBadgeClass(this.$calendarSyncContainer.find('#microsoft_sync_configured'));
this.$calendarSyncContainer.find('#microsoft_check').hide();
@@ -1,5 +1,5 @@
.o_calendar_sidebar {
.badge-primary {
.bg-primary {
background-color: $o-enterprise-primary-color;
}
.o_microsoft_sync_button {
+1 -1
View File
@@ -440,7 +440,7 @@
<field nolabel="1" name="json_popover" widget="stock_rescheduling_popover" attrs="{'invisible': [('json_popover', '=', False)]}"/>
</div>
<div class="oe_kanban_bottom_right">
<span t-attf-class="badge #{['cancel'].indexOf(record.state.raw_value) > -1 ? 'badge-danger' : ['draft'].indexOf(record.state.raw_value) > -1 ? 'badge-muted' : ['progress'].indexOf(record.state.raw_value) > -1 ? 'badge-warning' : ['done', 'to_close'].indexOf(record.state.raw_value) > -1 ? 'badge-success' : 'badge-primary'}"><t t-esc="record.state.value"/></span>
<span t-attf-class="badge #{['cancel'].indexOf(record.state.raw_value) > -1 ? 'bg-danger' : ['draft'].indexOf(record.state.raw_value) > -1 ? 'bg-muted' : ['progress'].indexOf(record.state.raw_value) > -1 ? 'bg-warning text-dark' : ['done', 'to_close'].indexOf(record.state.raw_value) > -1 ? 'bg-success' : 'bg-primary'}"><t t-esc="record.state.value"/></span>
</div>
</div>
</div>
@@ -79,7 +79,7 @@
<div class="badge badge-info o_kanban_inline_block">Closing Control</div>
</t>
<t t-if="record.pos_session_state.raw_value == 'opened' and record.pos_session_duration.raw_value > 1">
<div t-attf-class="badge badge-#{record.pos_session_duration.raw_value > 3 and 'danger' or 'warning'} o_kanban_inline_block"
<div t-attf-class="badge bg-#{record.pos_session_duration.raw_value > 3 and 'danger' or 'warning'} o_kanban_inline_block"
title="The session has been opened for an unusually long period. Please consider closing.">
To Close
</div>
@@ -23,14 +23,6 @@
border: 1px solid var(--success);
}
.o_kanban_project_tasks .oe_kanban_align.badge-warning {
border-color: var(--warning);
}
.o_kanban_project_tasks .oe_kanban_align.badge-danger {
border-color: var(--danger);
}
.o_kanban_project_tasks .o_field_one2many_sub_task {
margin-top:2px;
margin-right: 6px;
@@ -2987,7 +2987,7 @@ var LabelSelection = AbstractField.extend({
_render: function () {
this.classes = this.nodeOptions && this.nodeOptions.classes || {};
var labelClass = this.classes[this.value] || 'primary';
this.$el.addClass('badge badge-' + labelClass).text(this._formatValue(this.value));
this.$el.addClass('badge text-bg-' + labelClass).text(this._formatValue(this.value));
},
});
@@ -94,7 +94,7 @@ var AbstractFieldUpgrade = {
this._super.apply(this, arguments);
this._insertEnterpriseLabel($("<span>", {
text: "Enterprise",
'class': "badge badge-primary oe_inline o_enterprise_label"
'class': "badge bg-primary oe_inline o_enterprise_label"
}));
},
/**
@@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-name="web.LabelSelectionField" owl="1">
<span t-attf-class="{{ 'badge badge-' + className}} " t-esc="string" t-att-raw-value="props.value"/>
<span t-attf-class="{{ 'badge text-bg-' + className}} " t-esc="string" t-att-raw-value="props.value"/>
</t>
</templates>
+4 -4
View File
@@ -19,20 +19,20 @@
<div class="col-md">
<h2>Badge</h2>
<t t-foreach="bs_theme_colors" t-as="color">
<span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span>
<span t-attf-class="badge mb-1 bg-#{color[0]}"><t t-esc="color[1]"/></span>
</t>
<h3 class="mt-2 h6">Pill</h3>
<t t-foreach="bs_theme_colors" t-as="color">
<span t-attf-class="badge mb-1 badge-pill badge-#{color[0]}"><t t-esc="color[1]"/></span>
<span t-attf-class="badge mb-1 rounded-pill bg-#{color[0]}"><t t-esc="color[1]"/></span>
</t>
<h3 class="mt-2 h6">Link</h3>
<t t-foreach="bs_theme_colors" t-as="color">
<a href="#" t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></a>
<a href="#" t-attf-class="badge mb-1 bg-#{color[0]}"><t t-esc="color[1]"/></a>
</t>
<h3 class="mt-2 h6">Autosizing</h3>
<div class="h3">
<t t-foreach="bs_theme_colors" t-as="color">
<span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span>
<span t-attf-class="badge mb-1 bg-#{color[0]}"><t t-esc="color[1]"/></span>
</t>
</div>
+1 -1
View File
@@ -13,7 +13,7 @@
<we-colorpicker string="Color" data-name="badge_colorpicker_opt"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="badge-"/>
data-color-prefix="bg-"/>
</div>
</xpath>
</template>
@@ -211,7 +211,7 @@ according to the enabled options.
<div t-if="len(blog_post.tag_ids)" class="o_wblog_post_short_tag_section d-flex align-items-center flex-wrap pt-2">
<t t-foreach="blog_post.tag_ids" t-as="one_tag">
<a t-attf-href="#{blog_url(tag=tags_list(active_tag_ids, one_tag.id))}"
t-attf-class="badge mb-2 mr-1 text-truncate #{one_tag.id in active_tag_ids and 'badge-primary' or 'border'} post_link"
t-attf-class="badge mb-2 mr-1 text-truncate #{one_tag.id in active_tag_ids and 'bg-primary text-light' or 'border text-primary'} post_link"
t-att-rel="len(active_tag_ids) and 'nofollow'"
t-esc="one_tag.name"/>
</t>
@@ -274,7 +274,7 @@ list of filtered posts (by date or tag).
<div t-if="len(blogs) > 1">in <a t-attf-href="#{blog_url(blog=blog_post.blog_id)}"><b t-field="blog.name"/></a></div>
<div t-if="len(blog_post.tag_ids) > 0">#
<t t-foreach="blog_post.tag_ids" t-as="one_tag">
<a class="badge border mr-1 post_link" t-attf-href="#{blog_url(tag=slug(one_tag), date_begin=False, date_end=False)}" t-esc="one_tag.name"/>
<a class="badge text-primary border mr-1 post_link" t-attf-href="#{blog_url(tag=slug(one_tag), date_begin=False, date_end=False)}" t-esc="one_tag.name"/>
</t>
</div>
</div>
@@ -135,7 +135,7 @@
<li class="nav-item"><a class="nav-link mr8" t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }">
<span class="fa fa-1x fa-tags"/> All </a></li>
<li t-foreach="tags" t-as="o_tag" class="nav-item">
<a t-attf-class="nav-link badge badge-#{o_tag.classname}" t-esc="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
<a t-attf-class="nav-link badge bg-#{o_tag.classname}" t-esc="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }?tag_id=#{slug(o_tag)}"/>
</li>
</ul>
@@ -75,12 +75,6 @@
max-height: 250px;
overflow-y: auto;
}
.dropdown-item {
&.active .badge { // Invert badge display when the item is active
background-color: color-contrast(theme-color('primary'));
color: theme-color('primary');
}
}
}
/*
@@ -102,7 +102,7 @@
<t t-if="date[3] or (date[0] in ('old','upcoming','all'))">
<a t-att-href="keep('/event', date=date[0])" t-attf-class="dropdown-item d-flex align-items-center justify-content-between #{searches.get('date') == date[0] and 'active'}">
<t t-out="date[1]"/>
<span t-if="date[3]" t-out="date[3]" class="badge badge-pill badge-primary ml-3"/>
<span t-if="date[3]" t-out="date[3]" t-attf-class="badge badge-pill #{searches.get('date') == date[0] and 'bg-light text-primary' or 'bg-primary'} ml-3"/>
</a>
</t>
</t>
@@ -209,7 +209,7 @@
<div class="mt8">
<t t-foreach="event.tag_ids.filtered(lambda tag: tag.category_id.is_published)" t-as="tag">
<span t-if="tag.color"
t-attf-class="badge mr4 #{'badge-primary' if tag in search_tags else 'badge-light'} #{'o_tag_color_%s' % tag.color if tag.color else ''}">
t-attf-class="badge mr4 #{'bg-primary' if tag in search_tags else ''} #{'o_tag_color_%s' % tag.color if tag.color else ''}">
<span t-out="tag.name"/>
</span>
</t>
@@ -82,7 +82,7 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
},
formatResult: function (term) {
if (term.isNew) {
return '<span class="badge badge-primary">New</span> ' + _.escape(term.text);
return '<span class="badge bg-primary">New</span> ' + _.escape(term.text);
} else {
return _.escape(term.text);
}
@@ -331,8 +331,8 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
elem.innerText = _t(' Flagged');
elem.prepend(child);
if (countFlaggedPosts) {
countFlaggedPosts.classList.remove('badge-light');
countFlaggedPosts.classList.add('badge-danger');
countFlaggedPosts.classList.remove('bg-light');
countFlaggedPosts.classList.add('bg-danger');
countFlaggedPosts.innerText = parseInt(countFlaggedPosts.innerText, 10) + 1;
}
$(elem).next('#flag_validator').removeClass('d-none');
@@ -530,7 +530,7 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
flaggedButton.innerText = _t(' Flag');
flaggedButton.prepend(child);
if (count === 0) {
countFlaggedPosts.classList.add("badge-light");
countFlaggedPosts.classList.add("bg-light");
}
countFlaggedPosts.innerText = count;
},
+3 -3
View File
@@ -14,11 +14,11 @@
<div t-if="options.get('badges')" style="display: inline-block">
<t t-esc="separator"/>
<b>|</b>
<span class="fa fa-trophy badge-gold ml-2" role="img" aria-label="Gold badge" title="Gold badge"/>
<span class="fa fa-trophy bg-gold ml-2" role="img" aria-label="Gold badge" title="Gold badge"/>
<t t-esc="object.gold_badge"/>
<span class="fa fa-trophy badge-silver ml-2" role="img" aria-label="Silver badge" title="Silver badge"/>
<span class="fa fa-trophy bg-silver ml-2" role="img" aria-label="Silver badge" title="Silver badge"/>
<t t-esc="object.silver_badge"/>
<span class="fa fa-trophy badge-bronze ml-2" role="img" aria-label="Bronze badge" title="Bronze badge"/>
<span class="fa fa-trophy bg-bronze ml-2" role="img" aria-label="Bronze badge" title="Bronze badge"/>
<t t-esc="object.bronze_badge"/>
</div>
<t t-out="0"/>
@@ -356,7 +356,7 @@ tour.register('shop_wishlist', {
},
{
content: "Added into the wishlist",
trigger: '.my_wish_quantity.badge-primary:contains(1)',
trigger: '.my_wish_quantity.text-bg-primary:contains(1)',
run: function () {},
},
{
@@ -17,11 +17,11 @@
},
}).then(function (isPreview) {
if (isPreview) {
$slideTarget.removeClass('badge-light badge-hide border');
$slideTarget.addClass('badge-success');
$slideTarget.removeClass('bg-light bg-hide border');
$slideTarget.addClass('bg-success');
} else {
$slideTarget.removeClass('badge-success');
$slideTarget.addClass('badge-light badge-hide border');
$slideTarget.removeClass('bg-success');
$slideTarget.addClass('bg-light bg-hide border');
}
});
},
@@ -64,7 +64,7 @@ tour.register('slides_tour', {
position: 'bottom',
width: 285,
}, {
trigger: 'span.badge-info:contains("New")',
trigger: 'span.bg-info:contains("New")',
content: Markup(_t("Congratulations! Your first lesson is available. Let's see the options available here. The tag \"<b>New</b>\" indicates that this lesson was created less than 7 days ago.")),
position: 'bottom',
}, {
@@ -66,7 +66,7 @@
</a>
</b>
<span class="my-0 h4">
<span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill badge-warning text-white font-weight-bold ml-3 px-2 py-1">
<span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill bg-warning text-white font-weight-bold ml-3 px-2 py-1">
+ <t t-esc="widget.quiz.quizKarmaGain"/> XP
</span>
</span>
@@ -83,7 +83,7 @@
</span>
</b>
<span class="my-0 h4">
<span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill badge-warning text-white font-weight-bold ml-3 px-2 py-1">
<span title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill bg-warning text-white font-weight-bold ml-3 px-2 py-1">
+ <t t-esc="widget.quiz.quizKarmaGain"/> XP
</span>
</span>
@@ -101,7 +101,7 @@
class="btn btn-primary text-uppercase font-weight-bold o_wslides_js_lesson_quiz_submit">Check your answers</button>
<b t-else="" class="my-0 h5">Done !</b>
<span class="my-0 h5" style="line-height: 1">
<span role="button" title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill badge-warning text-white font-weight-bold ml-3 px-2">
<span role="button" title="Succeed and gain karma" aria-label="Succeed and gain karma" class="badge badge-pill bg-warning text-white font-weight-bold ml-3 px-2">
+ <t t-if="!widget.slide.completed" t-esc="widget.quiz.quizKarmaGain"/><t t-else="" t-esc="widget.quiz.quizKarmaWon"/> XP
</span>
</span>