diff --git a/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.scss b/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.scss
index 55b14cd4e6e846b48ffdb5bf0fef826fa1d423b5..fcc23fd5c95f344d1533cb68a3d0d9ed9338fff5 100644
--- a/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.scss
+++ b/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.scss
@@ -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;
- }
-
- &:last-child {
- margin-right: 0px;
- }
-}
-
-.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;
+ &:hover {
+ .o_DiscussSidebarCategoryItem_commands {
+ display: flex;
+ }
}
- &:last-child {
- margin-right: $o-mail-discuss-sidebar-scrollbar-width;
+ .o_DiscussSidebarCategoryItem_image {
+ object-fit: cover;
}
-}
-
-.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_imageContainer {
+ width: $o-mail-discuss-sidebar-category-item-avatar-size;
+ height: $o-mail-discuss-sidebar-category-item-avatar-size;
}
-}
-.o_DiscussSidebarCategoryItem_counter {
- background-color: $o-brand-primary;
- color: gray('300');
-}
-
-.o_DiscussSidebarCategoryItem_name {
- &.o-item-unread {
- font-weight: bold;
+ .o_DiscussSidebarCategoryItem_threadIcon {
+ width: 13px;
+ height: 13px;
}
}
diff --git a/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml b/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
index cab7436cd80327440b042b47a2015c75a8dc12b3..801c40cce01fcc252942838e9bb3653541096d42 100644
--- a/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
@@ -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>