[REF] mail: discuss_sidebar_category scss refactoring

Current SCSS is replaced with global Bootstrap classes, in
order to reduce code lines and to increase performance.

Task-2825261

Part-of: odoo/odoo#88925
This commit is contained in:
Carlos Valverde
2022-05-24 17:08:43 +02:00
parent 2e3e1ab71d
commit 9ee2f5472a
2 changed files with 10 additions and 96 deletions
@@ -1,95 +1,8 @@
// ------------------------------------------------------------------
// Layout
// ------------------------------------------------------------------
.o_DiscussSidebarCategory_addingItemInput {
margin-left: $o-mail-discuss-sidebar-category-item-avatar-left-margin;
margin-right: $o-mail-discuss-sidebar-scrollbar-width;
}
.o_DiscussSidebarCategory_command {
margin-left: $o-mail-discuss-sidebar-category-item-margin;
margin-right:$o-mail-discuss-sidebar-category-item-margin;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
.o_DiscussSidebarCategory_commands {
display: flex;
}
.o_DiscussSidebarCategory_header {
display: flex;
align-items: center;
margin: 5px 0;
}
.o_DiscussSidebarCategory_headerItem {
margin-left: $o-mail-discuss-sidebar-category-item-margin;
margin-right: $o-mail-discuss-sidebar-category-item-margin;
&:last-child {
margin-right: $o-mail-discuss-sidebar-scrollbar-width;
}
}
.o_DiscussSidebarCategory_title {
display: flex;
align-items: baseline;
}
.o_DiscussSidebarCategory_titleIcon {
width: $o-mail-discuss-sidebar-category-title-icon-size;
height: $o-mail-discuss-sidebar-category-title-icon-size;
}
// ------------------------------------------------------------------
// style
// ------------------------------------------------------------------
.o_DiscussSidebarCategory_addingItemInput {
outline: none;
}
.o_DiscussSidebarCategory_command {
cursor: pointer;
&:not(:hover) {
color: gray('600');
}
}
.o_DiscussSidebarCategory_counter {
background-color: $o-brand-primary;
color: gray('300');
}
.o_DiscussSidebarCategory_headerItem {
user-select: none;
}
.o_DiscussSidebarCategory_title {
cursor: pointer;
&:not(:hover)
{
color: gray('600');
}
}
.o_DiscussSidebarCategory_titleIcon {
font-size: 0.75em;
}
.o_DiscussSidebarCategory_titleText {
font-size: $font-size-sm;
text-transform: uppercase;
font-weight: bolder;
}
@@ -3,23 +3,24 @@
<templates xml:space="preserve">
<t t-name="mail.DiscussSidebarCategory" owl="1">
<t t-if="category">
<t t-set="o_DiscussSidebarCategory_hoverItem" t-value="'btn p-0 text-left text-700 opacity-100-hover opacity-75'"/>
<div class="o_DiscussSidebarCategory" t-attf-class="{{ className }}" t-att-data-category-local-id="category.localId" t-ref="root">
<div class="o_DiscussSidebarCategory_header">
<div class="o_DiscussSidebarCategory_title o_DiscussSidebarCategory_headerItem" t-on-click="category.onClick">
<i class="o_DiscussSidebarCategory_titleIcon" t-att-class="category.isOpen ? 'fa fa-chevron-down' : 'fa fa-chevron-right'"/>
<span class="o_DiscussSidebarCategory_titleText"><t t-esc="category.name"/></span>
<div class="o_DiscussSidebarCategory_header d-flex align-items-center my-1">
<div t-attf-class="o_DiscussSidebarCategory_title o_DiscussSidebarCategory_headerItem d-flex align-items-baseline mx-1 {{ o_DiscussSidebarCategory_hoverItem }}" t-on-click="category.onClick">
<i class="o_DiscussSidebarCategory_titleIcon small" t-att-class="category.isOpen ? 'fa fa-chevron-down' : 'fa fa-chevron-right'"/>
<span class="o_DiscussSidebarCategory_titleText btn-sm p-0 text-uppercase font-weight-bolder"><t t-esc="category.name"/></span>
</div>
<div class="o-autogrow o_DiscussSidebarCategory_headerItem"/>
<div class="o_DiscussSidebarCategory_commands o_DiscussSidebarCategory_headerItem">
<div class="o_DiscussSidebarCategory_commands o_DiscussSidebarCategory_headerItem d-flex mr-3">
<t t-if="category.hasViewCommand">
<i class="o_DiscussSidebarCategory_command o_DiscussSidebarCategory_commandView fa fa-cog" title="View or join channels" t-on-click="category.onClickCommandView" role="img"/>
<i t-attf-class="o_DiscussSidebarCategory_command o_DiscussSidebarCategory_commandView fa fa-cog {{ o_DiscussSidebarCategory_hoverItem }}" title="View or join channels" t-on-click="category.onClickCommandView" role="img"/>
</t>
<t t-if="category.hasAddCommand and category.isOpen">
<i class="o_DiscussSidebarCategory_command o_DiscussSidebarCategory_commandAdd fa fa-plus" t-on-click="category.onClickCommandAdd" t-att-title="category.commandAddTitleText" role="img"/>
<i t-attf-class="o_DiscussSidebarCategory_command o_DiscussSidebarCategory_commandAdd fa fa-plus {{ o_DiscussSidebarCategory_hoverItem }} ml-1" t-on-click="category.onClickCommandAdd" t-att-title="category.commandAddTitleText" role="img"/>
</t>
</div>
<t t-if="!category.isOpen and category.counter > 0">
<div class="o_DiscussSidebarCategory_counter o_DiscussSidebarCategory_headerItem badge badge-pill">
<div class="o_DiscussSidebarCategory_counter o_DiscussSidebarCategory_headerItem badge badge-pill badge-primary me-3">
<t t-esc="category.counter"/>
</div>
</t>
@@ -29,7 +30,7 @@
<t t-if="category.addingItemAutocompleteInputView">
<div class="o_DiscussSidebarCategory_addingItem d-flex mb-2">
<AutocompleteInput
className="'o_DiscussSidebarCategory_addingItemInput flex-grow-1'"
className="'o_DiscussSidebarCategory_addingItemInput form-control mx-4 rounded'"
record="category.addingItemAutocompleteInputView"
select="category.onAddItemAutocompleteSelect"
source="category.onAddItemAutocompleteSource"