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

[FIX] mail: improve style from webclient redesign

Browse Source 
1. show hover effect in discuss sidebar

With redesign of web client style, hover effect in discuss sidebar
was not longer working.

This comes from buttons hover effect no longer having precedence
to defined bg classnames, e.g. `bg-100`.

This commit fixes the issue by explicitly defining a style for the
background when hovering items in the discuss sidebar.

2. improved background color of discuss app in dark mode

The background color was too dark. This commit fixes the issue by
using `bg-view`, which is the preferred background to put
content in both white and dark theme.

3. Send button visual matches composer rounded border

Send button lacked its border. This commit fixes the issue by
including Send button inside the element that does the pretty rounded
border of composer. That way, the border of send button will not
longer be affected by change of button style.

Also make the send button active / inactive state more visible, by
using button link (green when active, muted when inactive).

Part-of: odoo/odoo#117357
This commit is contained in:
Alexandre Kühn
2023-05-16 14:42:05 +02:00
parent ff122ac7ae
commit 2ecfd54251
6 changed files with 49 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/composer/composer.scss
+8
View File
@@ -32,6 +32,14 @@
}
}
.o-mail-Composer-actions button {
opacity: 75%;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
opacity: 100%;
}
}
.o-mail-Composer-input {
padding-top: 10px; // carefully crafted to have the text in the middle in chat window
padding-bottom: 10px;
addons/mail/static/src/composer/composer.xml
+24 -17
View File
@@ -31,7 +31,7 @@
t-att-class="{
'border-top border-bottom': compact and !props.composer.message,
'border': props.composer.message,
'border border-end-0 rounded-start-3' : normal,
'border rounded-3' : normal,
'border rounded-3 align-self-stretch flex-column' : extended,
}"
>
@@ -60,33 +60,27 @@
disabled="1"
/>
</div>
<div class="d-flex mx-3 bg-view"
<div class="o-mail-Composer-actions d-flex bg-view"
t-att-class="{
'px-1' : normal,
'border-top p-1' : extended,
'ms-1' : compact and store.isSmall,
'mx-1 me-2' : compact and !store.isSmall,
'ms-3' : normal,
'mx-3 border-top p-1' : extended,
}"
>
<div class="d-flex flex-grow-1 align-items-center" >
<button class="btn btn-light border-0 fa fa-smile-o rounded-pill" aria-label="Emojis" t-on-click="onClickAddEmoji" t-ref="emoji-picker"/>
<button class="btn border-0 fa fa-smile-o rounded-pill" aria-label="Emojis" t-on-click="onClickAddEmoji" t-ref="emoji-picker"/>
<FileUploader t-if="allowUpload" multiUpload="true" onUploaded="(data) => { attachmentUploader.uploadData(data) }">
<t t-set-slot="toggler">
<button t-att-disabled="!state.active" class="btn btn-light fa fa-paperclip border-0 rounded-pill" title="Attach files" aria-label="Attach files" type="button" t-on-click="onClickAddAttachment"/>
<button t-att-disabled="!state.active" class="btn fa fa-paperclip border-0 rounded-pill" title="Attach files" aria-label="Attach files" type="button" t-on-click="onClickAddAttachment"/>
</t>
</FileUploader>
</div>
<button t-if="thread and thread.type === 'chatter'" class="btn btn-light fa fa-expand mx-1 border-0 rounded-pill" title="Full composer" aria-label="Full composer" type="button" t-on-click="onClickFullComposer"/>
<button t-if="thread and thread.type === 'chatter'" class="btn fa fa-expand mx-1 border-0 rounded-pill" title="Full composer" aria-label="Full composer" type="button" t-on-click="onClickFullComposer"/>
</div>
<t t-if="!extended" t-call="mail.Composer.sendButton"/>
</div>
<button t-if="!compact or store.isSmall" class="o-mail-Composer-send btn btn-secondary o-last border-start-0"
t-att-class="{'mt-2': extended, 'rounded-0 rounded-end-3': !extended and !compact, 'align-self-stretch': !extended, 'border border-start-0': env.inDiscussApp}"
t-on-click="sendMessage"
type="button"
t-att-disabled="isSendButtonDisabled"
aria-label="Send"
>
<t t-if="store.isSmall"><i class="fa fa-paper-plane-o"/></t>
<t t-else="">Send</t>
</button>
<t t-if="extended" t-call="mail.Composer.sendButton"/>
</div>
<div class="o-mail-Composer-footer overflow-auto">
<AttachmentList
@@ -101,6 +95,19 @@
<NavigableList t-if="suggestion" class="'o-mail-Composer-suggestionList'" t-props="navigableListProps"/>
</t>
<t t-name="mail.Composer.sendButton" owl="1">
<button t-if="!compact or store.isSmall" class="o-mail-Composer-send btn btn-link o-last border-start-0"
t-att-class="{'mt-2': extended, 'rounded-0 rounded-end-3': !extended and !compact, 'align-self-stretch': !extended, 'border-start-0': env.inDiscussApp}"
t-on-click="sendMessage"
type="button"
t-att-disabled="isSendButtonDisabled"
aria-label="Send"
>
<t t-if="store.isSmall"><i class="fa fa-paper-plane-o"/></t>
<t t-else="">Send</t>
</button>
</t>
<t t-name="mail.Composer.suggestionPartner" owl="1">
<t t-set="partner" t-value="option.partner"/>
<ImStatus t-if="partner" persona="partner"/>
addons/mail/static/src/discuss_app/autoresize_input.xml
+1 -1
View File
@@ -3,7 +3,7 @@
<t t-name="mail.AutoresizeInput" owl="1">
<input
class="o-mail-AutoresizeInput text-truncate p-1 border-1 bg-transparent border-transparent"
class="o-mail-AutoresizeInput text-truncate p-1 border-1 bg-view border-transparent"
t-attf-class="{{ props.className }}"
t-attf-placeholder="{{ props.placeholder }}"
t-att-disabled="!props.enabled"
addons/mail/static/src/discuss_app/discuss.xml
+3 -3
View File
@@ -5,10 +5,10 @@
<div class="o-mail-Discuss d-flex h-100 flex-grow-1 border-top" t-att-class="{ 'flex-column align-items-center bg-view': store.isSmall }" t-ref="root">
<div t-if="store.isSmall and store.discuss.activeTab === 'mailbox'" class="w-100 border-bottom" t-call="mail.Discuss.mobileTopbar" t-ref="mobileTopbar"/>
<div t-if="thread and !(store.isSmall and ['chat', 'channel'].includes(store.discuss.activeTab))" class="o-mail-Discuss-content d-flex flex-column h-100 w-100 bg-view overflow-auto" t-ref="content">
<div class="o-mail-Discuss-header px-3 bg-100 border-bottom d-flex flex-shrink-0 align-items-center" style="height:46px;">
<div class="o-mail-Discuss-header px-3 bg-view border-bottom d-flex flex-shrink-0 align-items-center" style="height:46px;">
<div t-if="thread and thread.model === 'discuss.channel'" class="o-mail-Discuss-threadAvatar position-relative align-self-center align-items-center mt-2 mb-2 me-2">
<img class="rounded" t-att-src="channelAvatar" alt="Thread Image"/>
<FileUploader t-if="thread.is_editable" acceptedFileExtensions="'.bmp, .jpg, .jpeg, .png, .svg'" showUploadingText="false" multiUpload="false" onUploaded="(data) => this.onFileUploaded(data)">
<FileUploader t-if="thread.is_editable and thread.type !== 'chat'" acceptedFileExtensions="'.bmp, .jpg, .jpeg, .png, .svg'" showUploadingText="false" multiUpload="false" onUploaded="(data) => this.onFileUploaded(data)">
<t t-set-slot="toggler">
<a href="#" class="position-absolute z-index-1 h-100 w-100 rounded start-0 bottom-0" title="Upload Avatar">
<i class="position-absolute top-50 start-50 fa fa-sm fa-pencil text-white"/>
@@ -63,7 +63,7 @@
</div>
</div>
<div class="overflow-auto bg-100 d-flex flex-grow-1">
<div class="bg-white d-flex flex-column flex-grow-1">
<div class="bg-view d-flex flex-column flex-grow-1">
<Call t-if="Object.keys(thread.rtcSessions).length > 0" thread="thread"/>
<Thread thread="thread" t-key="thread.localId" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo"/>
<Composer t-if="thread.type !== 'mailbox' or messageToReplyTo.thread === thread" t-key="thread.localId" composer="thread.composer" autofocus="true" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo" onDiscardCallback="() => messageToReplyTo.cancel()" dropzoneRef="contentRef"/>
addons/mail/static/src/web/discuss_app/sidebar.scss
+6 -2
View File
@@ -6,8 +6,12 @@
height: 15px;
}
.o-mail-DiscussCategoryItem:hover .o-mail-DiscussCategoryItem-commands {
display: flex !important;
.o-mail-DiscussSidebar-item:hover {
background-color: $o-gray-300 !important;
.o-mail-DiscussCategoryItem-commands {
display: flex !important;
}
}
.o-mail-DiscussCategory-im-status {
addons/mail/static/src/web/discuss_app/sidebar.xml
+7 -7
View File
@@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-name="mail.DiscussSidebar" owl="1">
<div class="o-mail-DiscussSidebar d-flex flex-column overflow-auto flex-shrink-0 h-100 pt-3 border-end bg-light">
<div class="o-mail-DiscussSidebar d-flex flex-column overflow-auto flex-shrink-0 h-100 pt-3 border-end bg-view">
<div class="d-flex justify-content-center">
<button t-on-click="onClickStartMeeting" class="btn btn-primary rounded" title="Start a meeting">
Start a meeting
@@ -32,10 +32,10 @@
</t>
<t t-name="mail.Mailbox" owl="1">
<button class="btn d-flex align-items-center py-1 px-0 border-0 rounded-0 fw-normal text-dark"
<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="{
'bg-100': mailbox.localId !== store.discuss.threadLocalId,
'o-active bg-200': mailbox.localId === store.discuss.threadLocalId,
'o-bg-inherit': mailbox.localId !== store.discuss.threadLocalId,
'o-active bg-300': mailbox.localId === store.discuss.threadLocalId,
}"
t-on-click="(ev) => this.openThread(ev, mailbox)"
>
@@ -82,10 +82,10 @@
<t t-name="mail.DiscussCategoryItem" owl="1">
<t t-set="counter" t-value="threadService.getCounter(thread)"/>
<button class="o-mail-DiscussCategoryItem btn d-flex align-items-center w-100 px-0 py-2 border-0 text-reset"
<button class="o-mail-DiscussCategoryItem o-mail-DiscussSidebar-item btn btn-secondary d-flex align-items-center w-100 px-0 py-2 border-0 text-reset"
t-att-class="{
'bg-100': threadLocalId !== store.discuss.threadLocalId,
'o-active bg-200': threadLocalId === store.discuss.threadLocalId,
'o-bg-inherit': threadLocalId !== store.discuss.threadLocalId,
'o-active bg-300': threadLocalId === store.discuss.threadLocalId,
'o-unread': thread.message_unread_counter > 0,
}"
t-on-click="(ev) => this.openThread(ev, thread)"