pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] mail: discuss_sidebar_category_item scss refactoring

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

Task-2833744

closes odoo/odoo#88925

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Carlos Valverde
2022-05-24 17:08:44 +02:00
parent 9b7ac5980b
commit a5cd14ec3a
2 changed files with 32 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.scss
+16 -101
View File
@@ -1,114 +1,29 @@
// ------------------------------------------------------------------
// Layout
// ------------------------------------------------------------------
.o_DiscussSidebarCategoryItem {
cursor: pointer;
display: flex;
align-items: center;
padding: map-get($spacers, 2) 0;
&:hover .o_DiscussSidebarCategoryItem_commands {
display: flex;
}
}
.o_DiscussSidebarCategoryItem_callIndicator {
margin-right: $o-mail-discuss-sidebar-scrollbar-width;
&.o-isCalling {
color: red;
}
}
.o_DiscussSidebarCategoryItem_command {
margin-left: $o-mail-discuss-sidebar-category-item-margin;
margin-right: $o-mail-discuss-sidebar-category-item-margin;
&:first-child {
margin-left: 0px;
&:hover {
.o_DiscussSidebarCategoryItem_commands {
display: flex;
}
}
&:last-child {
margin-right: 0px;
.o_DiscussSidebarCategoryItem_image {
object-fit: cover;
}
}
.o_DiscussSidebarCategoryItem_commands {
display: none;
}
.o_DiscussSidebarCategoryItem_image {
object-fit: cover;
width: map-get($sizes, 100);
height: map-get($sizes, 100);
}
.o_DiscussSidebarCategoryItem_imageContainer {
position: relative;
width: $o-mail-discuss-sidebar-category-item-avatar-size;
height: $o-mail-discuss-sidebar-category-item-avatar-size;
}
.o_DiscussSidebarCategoryItem_item {
margin-left: $o-mail-discuss-sidebar-category-item-margin;
margin-right: $o-mail-discuss-sidebar-category-item-margin;
&:first-child {
margin-left: $o-mail-discuss-sidebar-category-item-avatar-left-margin;
}
&:last-child {
margin-right: $o-mail-discuss-sidebar-scrollbar-width;
}
}
.o_DiscussSidebarCategoryItem_threadIcon {
@include o-position-absolute($bottom: 0, $right: 0);
display: flex;
align-items: center;
justify-content: center;
width: 13px;
height: 13px;
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_DiscussSidebarCategoryItem {
.o_DiscussSidebarCategoryItem_threadIcon {
font-size: xx-small;
background-color: gray('100');
border-radius: 50%;
}
&.o-active {
background-color: gray('200');
.o_DiscussSidebarCategoryItem_commands {
display: none;
}
&:hover {
background-color: gray('300');
}
}
.o_DiscussSidebarCategoryItem_command {
&:not(:hover) {
color: gray('600');
}
}
.o_DiscussSidebarCategoryItem_counter {
background-color: $o-brand-primary;
color: gray('300');
}
.o_DiscussSidebarCategoryItem_name {
&.o-item-unread {
font-weight: bold;
.o_DiscussSidebarCategoryItem_imageContainer {
width: $o-mail-discuss-sidebar-category-item-avatar-size;
height: $o-mail-discuss-sidebar-category-item-avatar-size;
}
.o_DiscussSidebarCategoryItem_threadIcon {
width: 13px;
height: 13px;
}
}
addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
+16 -14
View File
@@ -2,45 +2,47 @@
<templates xml:space="preserve">
<t t-name="mail.DiscussSidebarCategoryItem" owl="1">
<t t-if="categoryItem">
<div class="o_DiscussSidebarCategoryItem"
<t t-set="o_DiscussSidebarCategoryItem_hoverItem" t-value="'btn p-0 text-left text-700 opacity-100-hover opacity-75'"/>
<button class="o_DiscussSidebarCategoryItem btn d-flex align-items-center w-100 px-0 py-2 border-0 rounded-0 font-weight-normal text-reset"
t-att-class="{
'o-active': categoryItem.isActive,
'bg-100': !categoryItem.isActive,
'o-active bg-200': categoryItem.isActive,
'o-unread': categoryItem.isUnread,
}" t-attf-class="{{ className }}" t-on-click="categoryItem.onClick" t-att-data-thread-local-id="categoryItem.channel.localId" t-att-data-thread-name="categoryItem.channel.displayName"
t-ref="root"
>
<div class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_avatar">
<div class="o_DiscussSidebarCategoryItem_imageContainer">
<img class="o_DiscussSidebarCategoryItem_image rounded-circle" t-att-src="categoryItem.avatarUrl" alt="Thread Image"/>
<div class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_avatar ms-4">
<div class="o_DiscussSidebarCategoryItem_imageContainer position-relative d-flex">
<img class="o_DiscussSidebarCategoryItem_image w-100 h-100 rounded-circle" t-att-src="categoryItem.avatarUrl" alt="Thread Image"/>
<t t-if="categoryItem.hasThreadIcon">
<ThreadIcon className="'o_DiscussSidebarCategoryItem_threadIcon'" thread="categoryItem.channel"/>
<ThreadIcon className="'o_DiscussSidebarCategoryItem_threadIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center rounded-circle bg-100'" thread="categoryItem.channel"/>
</t>
</div>
</div>
<span class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_name ml-3 text-truncate" t-att-class="{ 'o-item-unread': categoryItem.isUnread }">
<span class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_name ms-3 me-2 text-truncate" t-att-class="{ 'o-item-unread font-weight-bolder': categoryItem.isUnread }">
<t t-esc="categoryItem.channel.displayName"/>
</span>
<div class="o-autogrow o_DiscussSidebarCategoryItem_item"/>
<div class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_commands">
<div t-attf-class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_commands ms-1 {{ categoryItem.channel and categoryItem.channel.rtcSessions.length ? 'me-1' : 'me-3' }}">
<t t-if="categoryItem.hasSettingsCommand">
<div class="o_DiscussSidebarCategoryItem_command o_DiscussSidebarCategoryItem_commandSettings fa fa-cog" t-on-click="categoryItem.onClickCommandSettings" title="Channel settings" role="img"/>
<div t-attf-class="o_DiscussSidebarCategoryItem_command o_DiscussSidebarCategoryItem_commandSettings fa fa-cog {{ o_DiscussSidebarCategoryItem_hoverItem }}" t-on-click="categoryItem.onClickCommandSettings" title="Channel settings" role="img"/>
</t>
<t t-if="categoryItem.hasLeaveCommand">
<div class="o_DiscussSidebarCategoryItem_command o_DiscussSidebarCategoryItem_commandLeave fa fa-times" t-on-click="categoryItem.onClickCommandLeave" title="Leave this channel" role="img"/>
<div t-attf-class="o_DiscussSidebarCategoryItem_command o_DiscussSidebarCategoryItem_commandLeave fa fa-times {{ o_DiscussSidebarCategoryItem_hoverItem }} ms-1" t-on-click="categoryItem.onClickCommandLeave" title="Leave this channel" role="img"/>
</t>
<t t-if="categoryItem.hasUnpinCommand">
<div class="o_DiscussSidebarCategoryItem_command o_DiscussSidebarCategoryItem_commandUnpin fa fa-times" t-on-click="categoryItem.onClickCommandUnpin" title="Unpin Conversation" role="img"/>
<div t-attf-class="o_DiscussSidebarCategoryItem_command o_DiscussSidebarCategoryItem_commandUnpin fa fa-times {{ o_DiscussSidebarCategoryItem_hoverItem }} ms-1" t-on-click="categoryItem.onClickCommandUnpin" title="Unpin Conversation" role="img"/>
</t>
</div>
<t t-if="categoryItem.channel and categoryItem.channel.rtcSessions.length">
<div class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_callIndicator fa fa-volume-up" t-att-class="{ 'o-isCalling': categoryItem.channel.rtc }"/>
<div class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_callIndicator fa fa-volume-up ms-1 me-3" t-att-class="{ 'o-isCalling text-danger': categoryItem.channel.rtc }"/>
</t>
<t t-if="categoryItem.counter > 0">
<div class="o_DiscussSidebarCategoryItem_counter o_DiscussSidebarCategoryItem_item badge badge-pill">
<div class="o_DiscussSidebarCategoryItem_counter o_DiscussSidebarCategoryItem_item badge badge-pill badge-primary ms-1 me-3">
<t t-esc="categoryItem.counter"/>
</div>
</t>
</div>
</button>
</t>
</t>
</templates>