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

[FIX] mail: no white leak on rounded border of chat window

Browse Source 
Before this commit, in white theme, chat window rounded borders
had some white color leak.

This comes from background color of chat window, which is white,
while the header background color is purple.

This commit fixes the issue by setting the chat window background
color to purple. The content now defines its own color, and the
header just inherit from the chat window background color.

This commit also fixes a bug where the chat window hidden menu
items were below visible chat windows.

closes odoo/odoo#118242

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
This commit is contained in:
Alexandre Kühn
2023-04-11 18:49:43 +02:00
parent 87c91139c6
commit 5293827949
9 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/im_livechat/static/src/legacy/public_livechat.scss
+2 -2
View File
@@ -14,7 +14,7 @@ $o-mail-ChatWindow-zindex: $zindex-modal + 1 !default;
height: 460px;
max-height: 100%;
font-size: 12px;
background-color: $o-mail-ChatWindow-bg;
background-color: #FAFAFA;
border-radius: 6px 6px 0 0;
z-index: $o-mail-ChatWindow-zindex;
box-shadow: -5px -5px 10px rgba(black, 0.18);
@@ -113,7 +113,7 @@ $o-mail-ChatWindow-zindex: $zindex-modal + 1 !default;
.o_thread_date_separator {
margin: 0px 0px 15px 0px;
.o_thread_date {
background-color: $o-mail-ChatWindow-bg;
background-color: #FAFAFA;
}
}
.o_thread_message {
addons/mail/static/src/composer/composer.scss
+4
View File
@@ -65,3 +65,7 @@
padding-top: 10px;
padding-bottom: 10px;
}
.o-mail-Composer-send {
border: 1px solid darken($primary, 5%);
}
addons/mail/static/src/core_ui/primary_variables.scss
-1
View File
@@ -1,6 +1,5 @@
$o-mail-Avatar-size: 36px !default;
$o-mail-Avatar-sizeSmall: 24px !default;
$o-mail-ChatWindow-bg: #FAFAFA !default;
$o-mail-ChatWindow-width: 340px !default;
// Needed because $border-radius variations are all set to 0 in enterprise.
$o-RoundedRectangle-small: .2rem !default;
addons/mail/static/src/scss/variables/primary_variables.scss
-1
View File
@@ -1,5 +1,4 @@
$o-mail-Avatar-size: 36px !default;
$o-mail-ChatWindow-bg: #FAFAFA !default;
$o-mail-ChatWindow-width: 340px !default;
$o-mail-Typing-medium: 5px !default;
$o-mail-Typing-small: 3px !default;
addons/mail/static/src/web/chat_window/chat_window.dark.scss
+1 -1
View File
@@ -1,3 +1,3 @@
.o-mail-ChatWindow-header {
.o-mail-ChatWindow {
--o-mail-ChatWindow-header-background-color: #{$o-gray-100};
}
addons/mail/static/src/web/chat_window/chat_window.scss
+1 -2
View File
@@ -3,7 +3,7 @@
height: 460px;
width: $o-mail-ChatWindow-width;
z-index: 999; // messaging menu is dropdown (1000)
background-color: $o-mail-ChatWindow-bg;
background-color: var(--o-mail-ChatWindow-header-background-color, #{$o-brand-odoo});
box-shadow: -5px -5px 10px rgba(#000000, 0.09);
outline: none;
@@ -17,7 +17,6 @@
}
.o-mail-ChatWindow-header {
background-color: var(--o-mail-ChatWindow-header-background-color, #{$o-brand-odoo});
height: 36px;
color: #ffffff;
}
addons/mail/static/src/web/chat_window/chat_window.xml
+2 -2
View File
@@ -7,7 +7,7 @@
t-att-class="{
'w-100 h-100': store.isSmall,
'o-folded': props.chatWindow.folded,
'position-absolute bottom-0 rounded-top-3 bg-view overflow-hidden d-flex flex-column': !props.chatWindow.hidden
'position-absolute bottom-0 rounded-top-3 overflow-hidden d-flex flex-column': !props.chatWindow.hidden
}"
t-on-keydown.stop="onKeydown"
tabindex="1"
@@ -46,7 +46,7 @@
<i class="fa fa-close"></i>
</div>
</div>
<div t-if="!props.chatWindow.folded" class="o-mail-ChatWindow-content d-flex flex-column h-100 overflow-auto border-start border-end" t-ref="content">
<div t-if="!props.chatWindow.folded" class="o-mail-ChatWindow-content bg-view d-flex flex-column h-100 overflow-auto border-start border-end" t-ref="content">
<t t-if="thread">
<CallSettings t-if="state.activeMode === 'in-settings'" thread="thread" className="'flex-grow-1'"/>
<ChannelMemberList t-elif="state.activeMode === 'member-list'" thread="thread" className="'o-mail-Discuss-channelMemberList flex-shrink-0 border-start w-100 h-100'"/>
addons/mail/static/src/web/chat_window/chat_window_container.scss
+4
View File
@@ -2,3 +2,7 @@
transform: translate(50%, -50%);
z-index: $zindex-tooltip; // on top of bootstrap dropup menu
}
.o-mail-ChatWindow-hiddenMenuContainer {
z-index: 1000;
}
addons/mail/static/src/web/chat_window/chat_window_container.xml
+1 -1
View File
@@ -3,7 +3,7 @@
<t t-name="mail.ChatWindowContainer" owl="1">
<div class="o-mail-ChatWindowContainer" t-if="!store.discuss.isActive or store.isSmall">
<div t-if="chatWindowService.hidden.length > 0 and !store.isSmall" t-ref="hiddenMenu" class="position-fixed bottom-0">
<div t-if="chatWindowService.hidden.length > 0 and !store.isSmall" t-ref="hiddenMenu" class="o-mail-ChatWindow-hiddenMenuContainer position-fixed bottom-0">
<t t-call="mail.ChatWindowHiddenMenu"/>
</div>
<t t-foreach="chatWindowService.visible" t-as="chatWindow" t-key="chatWindow.threadLocalId">