[REF] *: get rid of introduced @​extend

During first scss convertion, classes called as mixins were changed to
an @​extend instruction which was the best approximation given the fact
there is no equivalent in sass to do that. The problem is that the
instruction is slowing the scss computation a lot and might also break
the style in unexpected ways because of the complex unwanted selectors
the instruction induces.

This commit removes the need of extends. This is done case per case.
Sometimes this involves adding classes in xml, sometimes to change the
style a little, ... The button rendering refactoring which was made
at the start of the LESS to SASS merge was also done in prevision of
this.

After this commit, sass computation is like 5-6 times faster than less
computation while it was like 10 times *slower* before this commit.
This commit is contained in:
qsm-odoo
2018-04-18 15:59:18 +02:00
parent 97aa0a8dec
commit fbfd011904
27 changed files with 40 additions and 74 deletions
@@ -29,7 +29,7 @@
</t>
</div>
<t t-if="journal_type == 'bank' || journal_type == 'cash' || journal_type == 'sale' || journal_type == 'purchase'" t-call="JournalBodyGraph"/>
</div><div class="container o_kanban_card_manage_pane">
</div><div class="container o_kanban_card_manage_pane dropdown-menu">
<t t-call="JournalManage"/>
</div>
</div>
@@ -281,7 +281,7 @@ var DataImport = AbstractAction.extend(ControlPanelMixin, {
// TODO: test that write // succeeded?
this.$el.removeClass('oe_import_preview_error oe_import_error');
this.$el.toggleClass(
'oe_import_noheaders',
'oe_import_noheaders text-muted',
!this.$('input.oe_import_has_header').prop('checked'));
this._rpc({
model: 'base_import.import',
-16
View File
@@ -84,10 +84,6 @@
display: block;
}
.oe_import_noheaders {
@extend .text-muted; // FIXME was a mixin before scss convertion
}
/* ------------- ERRORS AND WARNINGS REPORT ------------ */
.oe_import_error_report {
> ul {
@@ -99,18 +95,6 @@
list-style: none;
border-radius: $border-radius-base;
}
.oe_import_report_error {
@extend .bg-danger; // FIXME was a mixin before scss convertion
@extend .text-danger; // FIXME was a mixin before scss convertion
}
.oe_import_report_warning {
@extend .bg-warning; // FIXME was a mixin before scss convertion
@extend .text-warning; // FIXME was a mixin before scss convertion
}
.oe_import_report_info {
@extend .bg-info; // FIXME was a mixin before scss convertion
@extend .text-info; // FIXME was a mixin before scss convertion
}
}
/* ------------- THE CSV TABLE ------------ */
@@ -68,7 +68,7 @@
Track history during import
</label>
</div>
<div title="If the model uses parent/child relations, computing the
<div title="If the model uses parent/child relations, computing the
parent / child relation occurs on every line, and lead to a slower import.
Defering it can speed up import."
class="oe_import_deferparentstore">
@@ -84,7 +84,7 @@
<input type="checkbox" class="oe_import_advanced_mode" checked="checked"
id="oe_import_advanced_mode"/>
<label for="oe_import_advanced_mode">Show fields of relation fields (advanced)</label>
<p class="oe_import_noheaders">If the file contains
<p class="oe_import_noheaders text-muted">If the file contains
the column names, Odoo can try auto-detecting the
field corresponding to the column. This makes imports
simpler especially when the file has many columns.</p>
@@ -124,7 +124,7 @@
</tbody>
</t>
<t t-name="ImportView.preview.error">
<div class="oe_import_report oe_import_report_error">
<div class="oe_import_report bg-danger text-danger">
<p>Import preview failed due to: <t t-esc="error"/>.</p>
<p>For CSV files, the issue could be an incorrect encoding.</p>
<p t-if="preview">Here is the start of the file we could not import:</p>
@@ -133,7 +133,7 @@
</t>
<ul t-name="ImportView.error">
<li t-foreach="errors" t-as="error"
t-attf-class="oe_import_report oe_import_report_#{error_value[0].type}">
t-attf-class="oe_import_report bg-#{error_value[0].type} text-#{error_value[0].type}">
<t t-call="ImportView.error.each">
<t t-set="error" t-value="error_value[0]"/>
</t>
+1 -1
View File
@@ -554,7 +554,7 @@
<div class="col-xs-6 o_kanban_primary_right">
</div>
</div>
</div><div class="container o_kanban_card_manage_pane">
</div><div class="container o_kanban_card_manage_pane dropdown-menu">
<div class="row">
<div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_to_do">
<div class="o_kanban_card_manage_title">
+1 -1
View File
@@ -68,7 +68,7 @@
</div>
</div>
</t>
</div><div class="container o_kanban_card_manage_pane">
</div><div class="container o_kanban_card_manage_pane dropdown-menu">
<div t-if="widget.editable" class="o_kanban_card_manage_settings row">
<div class="col-xs-8">
<ul class="oe_kanban_colorpicker" data-field="color"/>
-2
View File
@@ -45,7 +45,6 @@
border-bottom: 1px solid $gray-lighter-darker;
box-shadow: 0 0 2px $gray-lighter-darker;
.o_filter_button, .o_new_message {
@extend .btn-link; // FIXME was a mixin before scss convertion
padding: 5px;
}
.o_filter_button {
@@ -87,7 +86,6 @@
}
}
.o_activity_filter_button {
@extend .btn-link; // FIXME was a mixin before scss convertion
padding: 2px;
}
.o_no_activity {
-4
View File
@@ -144,10 +144,6 @@
.o_mail_info {
margin-bottom: 2px;
@extend .text-muted; // FIXME was a mixin before scss convertion
.o_mail_mailto, .o_mail_mailto:hover {
@extend .text-muted; // FIXME was a mixin before scss convertion
}
strong {
color: $headings-color;
+1 -1
View File
@@ -23,7 +23,7 @@
</div>
</div>
<div class="o_thread_message_core">
<div class="o_mail_info">
<div class="o_mail_info text-muted">
<strong><span t-attf-class="o_activity_date o_activity_color_#{activity.state}"><t t-esc="activity.label_delay" /></span></strong>:
<strong t-if="activity.summary"> &#8220;<t t-esc="activity.summary"/>&#8221;</strong>
<strong t-if="!activity.summary"> <t t-esc="activity.activity_type_id[1]" /></strong>
+4 -5
View File
@@ -14,11 +14,11 @@
</li>
<li t-if="!widget.isMobile" class="o_mail_navbar_dropdown_top">
<div>
<button type="button" class="btn btn-sm o_filter_button active"> All </button>
<button type="button" class="btn btn-sm o_filter_button" data-filter='chat'> Chat </button>
<button type="button" class="btn btn-sm o_filter_button" data-filter='channels'> Channels </button>
<button type="button" class="btn btn-sm btn-link o_filter_button active"> All </button>
<button type="button" class="btn btn-sm btn-link o_filter_button" data-filter='chat'> Chat </button>
<button type="button" class="btn btn-sm btn-link o_filter_button" data-filter='channels'> Channels </button>
</div>
<button type="button" class="btn btn-sm o_new_message"> New message </button>
<button type="button" class="btn btn-sm btn-link o_new_message"> New message </button>
</li>
<li class="o_mail_navbar_dropdown_channels"/>
<li t-if="widget.isMobile">
@@ -93,4 +93,3 @@
</li>
</t>
</templates>
+3 -3
View File
@@ -142,14 +142,14 @@
t-att-class="'fa o_thread_message_star o_thread_icon ' + (message.is_starred ? 'fa-star' : 'fa-star-o')"
t-att-data-message-id="message.id" title="Mark as Todo"/>
</div>
<div class='o_thread_message_core'>
<p t-if="message.display_author" class="o_mail_info">
<div class="o_thread_message_core">
<p t-if="message.display_author" class="o_mail_info text-muted">
<t t-if="message.is_note">
Note by
</t>
<strong t-if="message.mailto">
<a class="o_mail_mailto" t-attf-href="mailto:#{message.mailto}?subject=Re: #{message.subject}">
<a class="text-muted" t-attf-href="mailto:#{message.mailto}?subject=Re: #{message.subject}">
<t t-esc="message.mailto"/>
</a>
</strong>
@@ -18,7 +18,7 @@
<field name="active_domain" invisible="1"/>
<!-- Various warnings -->
<div colspan="2" class="oe_form_box_info oe_text_center"
<div colspan="2" class="oe_form_box_info bg-info oe_text_center"
attrs="{'invisible': [('active_domain', '=', False)]}">
<p attrs="{'invisible': [('use_active_domain', '=', False)]}">
<strong>
@@ -872,7 +872,7 @@
</div>
</div>
</div>
</div><div class="container o_kanban_card_manage_pane">
</div><div class="container o_kanban_card_manage_pane dropdown-menu">
<div class="row">
<div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_view">
<div class="o_kanban_card_manage_title">
@@ -51,7 +51,7 @@
<field name="model">mail.mail.statistics</field>
<field name="arch" type="xml">
<form string="Mail Statistics" create="0">
<div class="oe_form_box_info oe_text_center alert-info" attrs="{'invisible': [('exception', '=', False)]}">
<div class="oe_form_box_info bg-info oe_text_center alert-info" attrs="{'invisible': [('exception', '=', False)]}">
<p><strong>This email could not be sent.</strong></p>
</div>
<sheet>
@@ -419,7 +419,7 @@
<field name="state" readonly="1" widget="statusbar"/>
</header>
<div class="oe_form_box_info oe_text_center" attrs="{'invisible': [('scheduled', '=', 0)]}">
<div class="oe_form_box_info bg-info oe_text_center" attrs="{'invisible': [('scheduled', '=', 0)]}">
<p>
<button class="btn-link"
name="%(action_view_mail_mail_statistics_mailing_list)d"
@@ -432,7 +432,7 @@
</button>
</p>
</div>
<div class="oe_form_box_info oe_text_center alert-info" attrs="{'invisible': ['|', ('state', '!=', 'done'), ('failed', '=', 0)]}">
<div class="oe_form_box_info bg-info oe_text_center alert-info" attrs="{'invisible': ['|', ('state', '!=', 'done'), ('failed', '=', 0)]}">
<p>
<button class="btn-link"
name="%(action_view_mail_mail_statistics_mailing_list)d"
@@ -445,7 +445,7 @@
</button>
</p>
</div>
<div class="oe_form_box_info oe_text_center" attrs="{'invisible': [('state', '!=', 'in_queue')]}">
<div class="oe_form_box_info bg-info oe_text_center" attrs="{'invisible': [('state', '!=', 'in_queue')]}">
<p><strong>
This mailing is scheduled for
<field name="next_departure" class="oe_inline"/>.
+1 -1
View File
@@ -242,7 +242,7 @@
attrs="{'invisible': [('working_state','in',('normal','blocked'))]}"/>
</div>
</div>
</div><div class="container o_kanban_card_manage_pane">
</div><div class="container o_kanban_card_manage_pane dropdown-menu">
<div class="row">
<div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_view">
<div class="o_kanban_card_manage_title">
+1 -1
View File
@@ -55,7 +55,7 @@
</div>
</div>
</div>
</div><div class="container o_kanban_card_manage_pane">
</div><div class="container o_kanban_card_manage_pane dropdown-menu">
<div class="row">
<div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_view" name="picking_left_manage_pane">
<div class="o_kanban_card_manage_title">
@@ -118,7 +118,7 @@
</div>
</div>
</div>
</div><div class="container o_kanban_card_manage_pane">
</div><div class="container o_kanban_card_manage_pane dropdown-menu">
<div class="row">
<div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_view">
<div class="o_kanban_card_manage_title">
+1 -1
View File
@@ -326,7 +326,7 @@
</div>
</div>
</div>
<div class="o_kanban_card_manage_pane" groups="project.group_project_manager">
<div class="o_kanban_card_manage_pane dropdown-menu" groups="project.group_project_manager">
<div class="o_kanban_card_manage_section o_kanban_manage_reports">
<div>
<a type="edit">Edit</a>
@@ -41,7 +41,7 @@
<div class="col-xs-12 o_kanban_primary_bottom bottom_block">
</div>
</div>
</div><div class="container o_kanban_card_manage_pane">
</div><div class="container o_kanban_card_manage_pane dropdown-menu">
<div class="row">
<div class="col-xs-4 o_kanban_card_manage_section o_kanban_manage_view">
<div class="o_kanban_card_manage_title">
+1 -1
View File
@@ -688,7 +688,7 @@
</div>
</div>
</div>
</div><div class="container o_kanban_card_manage_pane">
</div><div class="container o_kanban_card_manage_pane dropdown-menu">
<div class="row">
<div class="col-xs-6 o_kanban_card_manage_section o_kanban_manage_view">
<div class="o_kanban_card_manage_title">
@@ -56,8 +56,3 @@ $tag-border: #afafb6;
}
}
}
// Buttons used as dropdown toggler
.o_dropdown_toggler_btn {
@extend .btn-default; // FIXME was a mixin before scss convertion
}
+3 -4
View File
@@ -3,7 +3,6 @@
// Utility classes
.oe_form_box_info {
@extend .bg-info; // FIXME was a mixin before scss convertion
@include o-webclient-padding($top: 5px, $bottom: 5px);
> p {
margin: auto;
@@ -24,11 +23,11 @@
}
}
.oe_left {
@extend .oe_inline; // FIXME was a mixin before scss convertion
@extend .oe_inline;
float: left!important;
}
.oe_right {
@extend .oe_inline; // FIXME was a mixin before scss convertion
@extend .oe_inline;
float: right!important;
}
@@ -443,7 +442,7 @@
// Specific style classes
.o_group.o_inner_group.oe_subtotal_footer {
@extend .oe_right; // FIXME was a mixin after scss convertion
@extend .oe_right;
> tbody > tr > td {
padding: 0;
@@ -209,7 +209,6 @@ $o-kanban-dashboard-dropdown-complex-gap: 5px;
}
.o_kanban_card_manage_pane {
@extend .dropdown-menu; // FIXME was a mixin before scss convertion
@include o-kanban-dropdown-menu;
// Arbitrary value to place the dropdown-menu exactly below the
@@ -252,8 +251,11 @@ $o-kanban-dashboard-dropdown-complex-gap: 5px;
padding-right: $o-kanban-dashboard-dropdown-complex-gap;
> .o_kanban_card_manage_title {
@extend .h5; // FIXME was a mixin before scss convertion
margin: ($line-height-computed / 2) 0;
color: $headings-color;
font-size: $font-size-h5;
font-weight: 500;
line-height: $headings-line-height;
}
> div:not(.o_kanban_card_manage_title) {
@include o-kanban-dashboard-dropdown-link($link-padding-gap: $o-kanban-dashboard-dropdown-complex-gap);
@@ -34,10 +34,3 @@
}
}
}
// Search options: inputs and selects style
.o_search_options {
input[type="text"], select {
@extend .form-control; // FIXME was a mixin before scss convertion
}
}
+4 -4
View File
@@ -318,7 +318,7 @@
<t t-name="Sidebar">
<t t-foreach="widget.sections" t-as="section">
<div class="btn-group o_dropdown">
<button t-if="section.name != 'buttons'" class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<button t-if="section.name != 'buttons'" class="o_dropdown_toggler_btn btn btn-sm btn-link btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<t t-if="section.name == 'files'" t-raw="widget.items[section.name].length || ''"/>
<t t-esc="section.label"/> <span class="caret"/>
</button>
@@ -1026,7 +1026,7 @@
<ul class="dropdown-menu o_searchview_autocomplete" role="menu"></ul>
</t>
<div t-name="SearchView.FilterMenu" class="btn-group o_dropdown">
<button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
<button class="o_dropdown_toggler_btn btn btn-sm btn-link btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
<span class="fa fa-filter"/> Filters <span class="caret"/>
</button>
<ul class="dropdown-menu o_filters_menu" role="menu">
@@ -1138,7 +1138,7 @@
</select>
</t>
<div t-name="SearchView.GroupByMenu" class="btn-group hidden-xs o_dropdown">
<button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
<button class="o_dropdown_toggler_btn btn btn-sm btn-link btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
<span class="fa fa-bars"/> Group By <span class="caret"/>
</button>
<ul class="dropdown-menu o_group_by_menu" role="menu">
@@ -1159,7 +1159,7 @@
</li>
</t>
<div t-name="SearchView.FavoriteMenu" class="btn-group o_dropdown">
<button class="o_dropdown_toggler_btn btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
<button class="o_dropdown_toggler_btn btn btn-sm btn-link btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="-1">
<span class="fa fa-star"/> Favorites <span class="caret"/>
</button>
<ul class="dropdown-menu o_favorites_menu" role="menu">
+1 -1
View File
@@ -124,7 +124,7 @@
<form string="Users">
<sheet>
<field name="id" invisible="1"/>
<div class="oe_form_box_info oe_text_center" style="margin-bottom: 10px" attrs="{'invisible': [('id', '>', 0)]}">
<div class="oe_form_box_info bg-info oe_text_center" style="margin-bottom: 10px" attrs="{'invisible': [('id', '>', 0)]}">
You are inviting a new user.
</div>
<field name="image" widget='image' class="oe_avatar" options='{"preview_image": "image_medium"}'/>