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

[IMP] mail, website_livechat: avatars & Activity apply milk design

Browse Source 
task-2818586

Part-of: odoo/odoo#116641
This commit is contained in:
stefanorigano (SRI)
2023-05-12 22:59:15 +02:00
committed by Pierre Paridans
parent 23504d3d85
commit 580db954fc
11 changed files with 25 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/composer/composer.xml
+2 -2
View File
@@ -6,7 +6,7 @@
<t t-set="normal" t-value="props.mode === 'normal'"/>
<t t-set="extended" t-value="props.mode === 'extended'"/>
<div t-ref="composer">
<div class="o-mail-Composer d-grid flex-shrink-0 bg-view"
<div class="o-mail-Composer d-grid flex-shrink-0"
t-att-class="{
'px-3 py-4 o-extended': extended,
'p-3': normal,
@@ -77,7 +77,7 @@
<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"/>
</div>
</div>
<button t-if="!compact or store.isSmall" class="o-mail-Composer-send btn btn-primary o-last border-start-0"
<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}"
t-on-click="sendMessage"
type="button"
addons/mail/static/src/core_ui/message.js
+1 -1
View File
@@ -465,7 +465,7 @@ export class Message extends Component {
}
get imStatusClassName() {
let res = "position-absolute bottom-0 end-0";
let res = "position-absolute";
if (this.hasOpenChatFeature) {
res += " cursor-pointer";
}
addons/mail/static/src/core_ui/message.xml
+1 -1
View File
@@ -27,7 +27,7 @@
<div class="o-mail-Message-core position-relative d-flex flex-shrink-0">
<div class="o-mail-Message-sidebar d-flex flex-shrink-0" t-att-class="{ 'justify-content-end': isAlignedRight, 'align-items-center': props.squashed }">
<div t-if="!props.squashed" class="o-mail-Message-avatarContainer position-relative bg-view" t-on-click="ev => this.onClickAuthor(ev)">
<img class="o-mail-Message-avatar w-100 h-100 rounded-circle o_object_fit_cover"
<img class="o-mail-Message-avatar w-100 h-100 rounded o_object_fit_cover"
t-att-title="authorText"
t-att-src="authorAvatarUrl"
t-att-class="{ 'o_redirect cursor-pointer': hasAuthorClickable }"/>
addons/mail/static/src/core_ui/message_in_reply.xml
+1 -1
View File
@@ -9,7 +9,7 @@
<small class="position-relative d-block text-small mb-1" t-attf-class="{{ env.inChatWindow and props.alignedRight ? 'justify-content-end pe-5': 'ps-5' }}" t-on-click="() => this.props.onClick?.()">
<span class="o-mail-MessageInReply-corner position-absolute bottom-0 top-50 pe-4 border-top text-300" t-attf-class="{{ env.inChatWindow and props.alignedRight ? 'o-isRightAlign border-end' : 'o-isLeftAlign border-start' }}" t-att-class="{ 'ms-n2': store.discuss.isActive }"/>
<span t-if="!message.parentMessage.isEmpty" class="d-inline-flex align-items-center text-muted opacity-75" t-att-class="{ 'cursor-pointer opacity-100-hover': props.onClick }" t-attf-class="{{ env.inChatWindow and props.alignedRight ? 'pe-3': 'ps-3' }}">
<img class="o-mail-MessageInReply-avatar me-2 rounded-circle" t-att-src="authorAvatarUrl" t-att-title="message.parentMessage.author.name" alt="Avatar"/>
<img class="o-mail-MessageInReply-avatar me-2 rounded" t-att-src="authorAvatarUrl" t-att-title="message.parentMessage.author.name" alt="Avatar"/>
<span class="o-mail-MessageInReply-content overflow-hidden">
<b>@<t t-out="message.parentMessage.author.name"/></b>:
<span class="o-mail-MessageInReply-message ms-1 text-break">
addons/mail/static/src/discuss/channel_invitation.xml
+1 -1
View File
@@ -15,7 +15,7 @@
<div class="o-discuss-ChannelInvitation-avatar position-relative d-flex flex-shrink-0 bg-100">
<img class="w-100 h-100 rounded-circle o_object_fit_cover o_redirect"
t-att-src="threadService.avatarUrl(selectablePartner, props.thread)"/>
<ImStatus className="'position-absolute bottom-0 end-0'" persona="selectablePartner"/>
<ImStatus persona="selectablePartner"/>
</div>
</div>
<span class="flex-grow-1 mx-2 text-truncate fs-6" t-esc="selectablePartner.name"/>
addons/mail/static/src/discuss/channel_member_list.xml
+1 -1
View File
@@ -30,7 +30,7 @@
<div class="o-bg-inherit o-discuss-ChannelMember-avatar position-relative d-flex ms-4 flex-shrink-0">
<img class="w-100 h-100 rounded-circle o_object_fit_cover o_redirect"
t-att-src="threadService.avatarUrl(member.persona, props.thread)"/>
<ImStatus className="'position-absolute bottom-0 end-0'" persona="member.persona"/>
<ImStatus persona="member.persona"/>
</div>
<span class="ms-2 text-truncate" t-esc="member.persona.name"/>
<span class="ms-auto">
addons/mail/static/src/discuss_app/im_status.scss
+4 -6
View File
@@ -1,12 +1,10 @@
.o-mail-ImStatus {
width: 1.2em;
height: 1.2em;
line-height: 1.3em;
$-gap: $font-size-lg - $font-size-base;
i {
line-height: 2rem;
}
@include o-position-absolute($right: -$-gap, $bottom: -$-gap);
width: $font-size-lg;
height: $font-size-lg;
}
.o-bg-inherit {
addons/mail/static/src/web/activity/activity.xml
+9 -9
View File
@@ -3,9 +3,9 @@
<t t-name="mail.Activity" owl="1">
<t t-set="activity" t-value="props.data"/>
<div class="o-mail-Activity d-flex px-4 py-1 mb-2">
<div class="o-mail-Activity d-flex px-3 py-1 mb-2">
<div class="o-mail-Activity-sidebar flex-shrink-0 position-relative">
<img class="w-100 h-100 rounded-circle" t-attf-src="/web/image/res.users/{{activity.user_id[0]}}/avatar_128"/>
<img class="w-100 h-100 rounded" t-attf-src="/web/image/res.users/{{activity.user_id[0]}}/avatar_128"/>
<div
class="o-mail-Activity-iconContainer position-absolute top-100 start-100 translate-middle d-flex align-items-center justify-content-center mt-n1 ms-n1 rounded-circle w-50 h-50"
t-att-class="{
@@ -18,7 +18,7 @@
</div>
</div>
<div class="flex-grow px-3">
<div class="o-mail-Activity-info">
<div class="o-mail-Activity-info lh-1">
<span class="fw-bolder text-success" t-if="state.delay === 1">Tomorrow:</span>
<span class="fw-bolder text-success" t-elif="state.delay gt 0">Due in <t t-esc="state.delay"/> days:</span>
<span class="fw-bolder text-danger" t-elif="state.delay === -1">Yesterday:</span>
@@ -29,7 +29,7 @@
<i class="fa fa-info-circle btn-link btn-primary cursor-pointer ms-1" role="img" title="Info" aria-label="Info" t-on-click="toggleDetails"></i>
</div>
<div t-if="state.showDetails">
<table class="o-mail-Activity-details table table-sm">
<table class="o-mail-Activity-details table table-sm mt-2">
<tbody>
<tr><td class="text-end fw-bolder">Activity type</td><td><t t-esc="activity.activity_type_id[1]"/></td></tr>
<tr><td class="text-end fw-bolder">Created</td><td><t t-esc="activity.create_date"/> by <t t-esc="activity.create_uid[1]"/></td></tr>
@@ -42,16 +42,16 @@
<div t-if="activity.mail_template_ids.length > 0" class="o-mail-Activity-mailTemplates">
<ActivityMailTemplate activity="activity" onUpdate="props.onUpdate"/>
</div>
<div t-if="activity.can_write">
<div t-if="activity.can_write" class="lh-lg">
<t name="tools">
<span class="o-mail-Activity-markDone btn btn-link btn-primary p-0 me-3" t-on-click="onClickMarkAsDone"><i class="fa fa-check"/> Mark Done</span>
<span class="o-mail-Activity-markDone btn btn-link btn-success p-0 me-3" t-on-click="onClickMarkAsDone"><i class="fa fa-check"/> Mark Done</span>
<FileUploader t-if="activity.activity_category === 'upload_file'" onUploaded.bind="onFileUploaded">
<t t-set-slot="toggler">
<span class="btn btn-link btn-primary p-0 me-3"><i t-attf-class="fa {{ activity.icon }}"/><t t-out="' ' + activity.display_name"/></span>
<span class="btn btn-link text-action p-0 me-3"><i t-attf-class="fa {{ activity.icon }}"/><t t-out="' ' + activity.display_name"/></span>
</t>
</FileUploader>
<span class="o-mail-Activity-edit btn btn-link btn-primary p-0 me-3" t-on-click="edit"><i class="fa fa-pencil"/> Edit</span>
<span class="btn btn-link btn-primary p-0" t-on-click="unlink"><i class="fa fa-times"/> Cancel</span>
<span class="o-mail-Activity-edit btn btn-link text-action p-0 me-3" t-on-click="edit"><i class="fa fa-pencil"/> Edit</span>
<span class="btn btn-link btn-danger p-0" t-on-click="unlink"><i class="fa fa-times"/> Cancel</span>
</t>
</div>
</div>
addons/mail/static/src/web/discuss_app/sidebar.xml
+2 -2
View File
@@ -91,8 +91,8 @@
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">
<img class="w-100 h-100 rounded-circle" 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-DiscussCategoryItem-threadIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center rounded-circle bg-100'"/>
<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-DiscussCategoryItem-threadIcon position-absolute bottom-0 end-0 p-1 me-n1 mb-n1 d-flex align-items-center justify-content-center rounded-circle bg-100'"/>
</div>
<span class="ms-3 me-2 text-truncate" t-att-class="{ 'o-item-unread fw-bolder': thread.message_unread_counter > 0 }">
<t t-esc="thread.displayName"/>
addons/mail/static/src/web/messaging_menu/messaging_menu.xml
+2 -2
View File
@@ -57,7 +57,7 @@
onClick="() => notification.requestPermission()"
>
<t t-set-slot="icon">
<ImStatus className="'position-absolute bottom-0 end-0'" persona="notificationRequest.partner"/>
<ImStatus persona="notificationRequest.partner"/>
</t>
</NotificationItem>
<t t-if="store.discuss.activeTab === 'all'">
@@ -89,7 +89,7 @@
onSwipeLeft="hasTouch() and threadService.canUnpin(thread) ? { action: () => this.threadService.unpin(thread), icon: 'fa-times-circle', bgColor: 'bg-danger' } : undefined"
>
<t t-set-slot="icon">
<ImStatus t-if="thread.type === 'chat'" className="'position-absolute bottom-0 end-0'" persona="thread.correspondent"/>
<ImStatus t-if="thread.type === 'chat'" persona="thread.correspondent"/>
</t>
<t t-if="message" t-set-slot="body-icon">
<t t-if="message.isSelfAuthored">
addons/website_livechat/static/src/core_ui/thread_patch.xml
+1 -1
View File
@@ -7,7 +7,7 @@
<div class="o-website_livechat-VisitorBanner-sidebar me-2 d-flex justify-content-center">
<div class="o-website_livechat-VisitorBanner-avatar mx-1 position-relative">
<img class="w-100 h-100 rounded-circle" t-att-src="threadService.avatarUrl(visitor, props.thread)" alt="Avatar"/>
<ImStatus t-if="visitor.isConnected" persona="visitor" className="'bottom-0 end-0 position-absolute'"/>
<ImStatus t-if="visitor.isConnected" persona="visitor"/>
</div>
</div>
<div>