[FIX] web, mail: searchbar facet cog overlapping
When discuss is not installed, hovering a facet in the searchbar makes the cog overlap the icon/text. This is due to the `o-bg-inherit` class which is set in the mail module. Therefore if discuss is not installed, the SCSS for the background doesn't exist. This commit moves the `o-bg-inherit` as a new utility class `bg-inherit` , allowing it to be used even if no apps are installed. Therefore also renaming the occurences of `o-bg-inherit` into `bg-inherit`. task-3575837 closes odoo/odoo#140334 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
mano-odoo
@@ -2,10 +2,6 @@
|
||||
background-color: rgba(0, 0, 0, var(--bg-opacity, 1));
|
||||
}
|
||||
|
||||
.o-bg-inherit {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.o-discuss-badge {
|
||||
--o-discuss-badge-bg: #{$o-success}; // sync with --o-navbar-badge-bg
|
||||
color: white !important;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="mail.ImStatus">
|
||||
<div class="o-mail-ImStatus d-flex justify-content-center flex-shrink-0 align-items-center rounded-circle o-bg-inherit" t-att-class="props.className" t-att-style="props.style">
|
||||
<div class="o-mail-ImStatus d-flex justify-content-center flex-shrink-0 align-items-center rounded-circle bg-inherit" t-att-class="props.className" t-att-style="props.style">
|
||||
<span class="d-flex flex-column" name="icon">
|
||||
<t t-if="!props.thread or !typingService.hasTypingMembers(props.thread)">
|
||||
<i t-if="props.persona.im_status === 'online'" class="fa fa-circle text-success" title="Online" role="img" aria-label="User is online"/>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<span class="d-flex flex-grow-1 align-items-center">
|
||||
<span class="mx-2 text-truncate fs-6" t-esc="persona.name"/>
|
||||
<div class="flex-grow-1"/>
|
||||
<button t-if="persona.eq(store.self)" class="btn btn-light fa fa-trash rounded-pill o-bg-inherit border-0" title="Remove" t-on-click.stop="() => this.messageService.removeReaction(state.reaction)"/>
|
||||
<button t-if="persona.eq(store.self)" class="btn btn-light fa fa-trash rounded-pill bg-inherit border-0" title="Remove" t-on-click.stop="() => this.messageService.removeReaction(state.reaction)"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -19,12 +19,12 @@
|
||||
<button
|
||||
class="o-mail-DiscussSidebar-item btn d-flex align-items-center py-1 px-0 border-0 rounded-0 fw-normal text-reset"
|
||||
t-att-class="{
|
||||
'o-bg-inherit': mailbox.notEq(store.discuss.thread),
|
||||
'bg-inherit': mailbox.notEq(store.discuss.thread),
|
||||
'o-active': mailbox.eq(store.discuss.thread),
|
||||
}"
|
||||
t-on-click="(ev) => this.openThread(ev, mailbox)"
|
||||
>
|
||||
<ThreadIcon className="'ms-4 me-2 o-bg-inherit'" thread="mailbox"/>
|
||||
<ThreadIcon className="'ms-4 me-2 bg-inherit'" thread="mailbox"/>
|
||||
<div class="me-2 text-truncate" t-esc="mailbox.name"/>
|
||||
<div t-attf-class="flex-grow-1 {{ mailbox.counter === 0 ? 'me-3': '' }}"/>
|
||||
<span
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<t t-name="mail.NotificationItem">
|
||||
<ActionSwiper onLeftSwipe="props.onSwipeLeft ? props.onSwipeLeft : undefined" onRightSwipe="props.onSwipeRight ? props.onSwipeRight : undefined">
|
||||
<button class="o-mail-NotificationItem list-group-item list-group-item-action d-flex cursor-pointer align-items-center p-1" t-att-class="{ 'text-muted': props.muted === 1, 'opacity-50': props.muted === 2 }" t-on-click="onClick" t-ref="root">
|
||||
<div class="position-relative o-bg-inherit m-1 flex-shrink-0" style="width:40px;height:40px;">
|
||||
<div class="position-relative bg-inherit m-1 flex-shrink-0" style="width:40px;height:40px;">
|
||||
<img class="o_avatar w-100 h-100 rounded" alt="Notification Item Image" t-att-src="props.iconSrc"/>
|
||||
<t t-slot="icon"/>
|
||||
</div>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<t t-name="discuss.channel_member">
|
||||
<div class="o-discuss-ChannelMember d-flex align-items-center p-2 bg-view" t-att-class="{ 'cursor-pointer': canOpenChatWith(member) }" t-on-click.stop="() => this.openChatAvatar(member)">
|
||||
<div class="o-bg-inherit o-discuss-ChannelMember-avatar position-relative d-flex ms-4 flex-shrink-0">
|
||||
<div class="bg-inherit o-discuss-ChannelMember-avatar position-relative d-flex ms-4 flex-shrink-0">
|
||||
<img class="w-100 h-100 rounded o_object_fit_cover"
|
||||
t-att-src="threadService.avatarUrl(member.persona, props.thread)"/>
|
||||
<ImStatus persona="member.persona" className="'position-absolute top-100 start-100 translate-middle mt-n1 ms-n1'"/>
|
||||
|
||||
@@ -43,16 +43,16 @@
|
||||
<t t-set="counter" t-value="threadService.getCounter(thread)"/>
|
||||
<button class="o-mail-DiscussSidebarChannel o-mail-DiscussSidebar-item btn btn-secondary d-flex align-items-center w-100 px-0 py-2 border-0 rounded-0 text-reset"
|
||||
t-att-class="{
|
||||
'o-bg-inherit': thread.notEq(store.discuss.thread),
|
||||
'bg-inherit': thread.notEq(store.discuss.thread),
|
||||
'o-active': thread.eq(store.discuss.thread),
|
||||
'o-unread': thread.message_unread_counter > 0 and !thread.muteUntilDateTime,
|
||||
'opacity-50': thread.muteUntilDateTime,
|
||||
}"
|
||||
t-on-click="(ev) => this.openThread(ev, thread)"
|
||||
>
|
||||
<div class="o-bg-inherit position-relative d-flex ms-4 flex-shrink-0" style="width:30px;height:30px">
|
||||
<div class="bg-inherit position-relative d-flex ms-4 flex-shrink-0" style="width:30px;height:30px">
|
||||
<img class="w-100 h-100 rounded" t-att-src="thread.imgUrl" alt="Thread Image"/>
|
||||
<ThreadIcon t-if="thread.type === 'chat' or (thread.type === 'channel' and !thread.authorizedGroupFullName)" thread="thread" size="'small'" className="'o-mail-DiscussSidebarChannel-threadIcon position-absolute bottom-0 end-0 p-1 me-n1 mb-n1 d-flex align-items-center justify-content-center rounded-circle o-bg-inherit'"/>
|
||||
<ThreadIcon t-if="thread.type === 'chat' or (thread.type === 'channel' and !thread.authorizedGroupFullName)" thread="thread" size="'small'" className="'o-mail-DiscussSidebarChannel-threadIcon position-absolute bottom-0 end-0 p-1 me-n1 mb-n1 d-flex align-items-center justify-content-center rounded-circle bg-inherit'"/>
|
||||
</div>
|
||||
<span class="ms-3 me-2 text-truncate" t-att-class="{ 'o-item-unread fw-bolder': thread.message_unread_counter > 0 and !thread.muteUntilDateTime }">
|
||||
<t t-esc="thread.displayName"/>
|
||||
|
||||
@@ -267,6 +267,11 @@ $-o-bg-colors-custom: null;
|
||||
}
|
||||
}
|
||||
|
||||
// 6. Adds a bg-inherit custom utility class
|
||||
.bg-inherit {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
// Cards
|
||||
// ============================================================================
|
||||
.card-body {
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<!-- Editable facets' overlay -->
|
||||
<span t-if="facet.domain"
|
||||
class="position-absolute start-0 top-0 bottom-0 end-0 o-bg-inherit opacity-0 opacity-100-hover"
|
||||
class="position-absolute start-0 top-0 bottom-0 end-0 bg-inherit opacity-0 opacity-100-hover"
|
||||
t-att-class="{'px-2 transition-base': !facet.icon}"
|
||||
>
|
||||
<i class="fa fa-fw fa-cog"/>
|
||||
|
||||
Reference in New Issue
Block a user