[REF] mail: Message, review and simplify scss (phase 2)
Since the migration to Bootstrap 5, we can now use BS 5 utility classes in the discuss_public view. This commit simplifies the scss related to discuss_public. task-2909016 closes odoo/odoo#95772 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Brieuc-brd
@@ -2,29 +2,15 @@
|
||||
// Layout
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
// TODO : When the migration to BS5 for the backend AND the frontend
|
||||
// will be done, we could use BS5 classes to handle the position values
|
||||
// (eg. position-absolute top-0 end-0 mt-n3)
|
||||
.o_Message_actionListContainer {
|
||||
@include o-position-absolute($top: - map-get($spacers, 3), $right: 0);
|
||||
z-index: 10; // Place the element in front of the Composer when they overlap
|
||||
}
|
||||
|
||||
.o_Message_authorAvatar {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.o_Message_authorAvatarContainer {
|
||||
height: $o-mail-thread-avatar-size;
|
||||
width: $o-mail-thread-avatar-size;
|
||||
}
|
||||
|
||||
.o_Message_authorName {
|
||||
// Could be replaced by "me-2" after the migration to BS5
|
||||
// for the backend AND the frontend
|
||||
margin-inline-end: map-get($spacers, 2);
|
||||
}
|
||||
|
||||
.o_Message_content {
|
||||
*:not(li):not(li div) {
|
||||
// Message content can contain arbitrary HTML that might overflow and break
|
||||
@@ -45,47 +31,17 @@
|
||||
|
||||
.o_Message_core {
|
||||
min-width: 0; // allows this flex child to shrink more than its content
|
||||
// Could be replaced by "me-4" after the migration to BS5
|
||||
// for the backend AND the frontend
|
||||
margin-inline-end: map-get($spacers, 4);
|
||||
}
|
||||
|
||||
.o_Message_headerDate {
|
||||
// Could be replaced by "me-2" after the migration to BS5
|
||||
// for the backend AND the frontend
|
||||
margin-inline-end: map-get($spacers, 2);
|
||||
}
|
||||
|
||||
.o_Message_highlightIndicator {
|
||||
// Could be replaced by "position absolute top-0 start-0"
|
||||
// after the migration to BS5 for the backend AND the frontend
|
||||
@include o-position-absolute($top: 0, $left: 0);
|
||||
width: $o-mail-discuss-message-highlight-indicator-width;
|
||||
transition: background-color .5s ease-out;
|
||||
}
|
||||
|
||||
.o_Message_originThread {
|
||||
// Could be replaced by "me-2" after the migration to BS5
|
||||
// for the backend AND the frontend
|
||||
margin-inline-end: map-get($spacers, 2);
|
||||
}
|
||||
|
||||
.o_Message_personaImStatusIcon {
|
||||
// Could be replaced by "position absolute bottom-0 end-0"
|
||||
// after the migration to BS5 for the backend AND the frontend
|
||||
@include o-position-absolute($bottom: 0, $right: 0);
|
||||
}
|
||||
|
||||
.o_Message_prettyBody > p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.o_Message_seenIndicator {
|
||||
// Could be replaced by "me-1" after the migration to BS5
|
||||
// for the backend AND the frontend
|
||||
margin-inline-end: map-get($spacers, 1);
|
||||
}
|
||||
|
||||
.o_Message_sidebar {
|
||||
flex-basis: $o-mail-message-sidebar-width;
|
||||
max-width: $o-mail-message-sidebar-width;
|
||||
@@ -111,10 +67,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.o_Message_originThreadLink {
|
||||
font-size: 1.25em; // original size
|
||||
}
|
||||
|
||||
// Used to hide buttons on rating emails in chatter
|
||||
// FIXME: should use a better approach for not having such buttons
|
||||
// in chatter of such messages, but keep having them in emails.
|
||||
|
||||
@@ -26,18 +26,18 @@
|
||||
t-ref="root"
|
||||
>
|
||||
<MessageInReplyToView t-if="messageView.messageInReplyToView" record="messageView.messageInReplyToView"/>
|
||||
<div t-if="messageView.isActive and messageView.messageActionList" class="o_Message_actionListContainer position-absolute px-3" t-att-class="{ 'o-squashed': messageView.isSquashed }">
|
||||
<div t-if="messageView.isActive and messageView.messageActionList" class="o_Message_actionListContainer position-absolute top-0 end-0 mt-n3 px-3" t-att-class="{ 'o-squashed': messageView.isSquashed }">
|
||||
<MessageActionList record="messageView.messageActionList"/>
|
||||
</div>
|
||||
<div class="d-flex flex-shrink-0">
|
||||
<div class="o_Message_highlightIndicator h-100" t-att-class="{ 'o-active bg-primary': messageView.message.isHighlighted or messageView.isHighlighted }"/>
|
||||
<div class="o_Message_highlightIndicator position-absolute top-0 start-0 h-100" t-att-class="{ 'o-active bg-primary': messageView.message.isHighlighted or messageView.isHighlighted }"/>
|
||||
<div class="o_Message_sidebar d-flex justify-content-center flex-shrink-0" t-att-class="{ 'o-message-squashed align-items-start': messageView.isSquashed }">
|
||||
<t t-if="!messageView.isSquashed">
|
||||
<div class="o_Message_authorAvatarContainer o_Message_sidebarItem position-relative mx-1">
|
||||
<img class="o_Message_authorAvatar w-100 h-100 rounded-circle" t-att-class="{ 'o_cursor_pointer': messageView.hasAuthorOpenChat, o_redirect: messageView.hasAuthorOpenChat }" t-att-src="messageView.message.avatarUrl" t-att-role="messageView.hasAuthorOpenChat ? 'button' : ''" t-att-tabindex="messageView.hasAuthorOpenChat ? '0' : ''" t-on-click="messageView.onClickAuthorAvatar" t-att-title="messageView.authorTitleText" t-att-alt="messageView.authorTitleText"/>
|
||||
<img class="o_Message_authorAvatar w-100 h-100 rounded-circle o_object_fit_cover" t-att-class="{ 'o_cursor_pointer': messageView.hasAuthorOpenChat, o_redirect: messageView.hasAuthorOpenChat }" t-att-src="messageView.message.avatarUrl" t-att-role="messageView.hasAuthorOpenChat ? 'button' : ''" t-att-tabindex="messageView.hasAuthorOpenChat ? '0' : ''" t-on-click="messageView.onClickAuthorAvatar" t-att-title="messageView.authorTitleText" t-att-alt="messageView.authorTitleText"/>
|
||||
<t t-if="messageView.personaImStatusIconView">
|
||||
<PersonaImStatusIcon
|
||||
className="'o_Message_personaImStatusIcon d-flex align-items-center justify-content-center'"
|
||||
className="'o_Message_personaImStatusIcon position-absolute bottom-0 end-0 d-flex align-items-center justify-content-center'"
|
||||
classNameObj="{
|
||||
'o-message-selected text-400': messageView.isSelected,
|
||||
'o_Message_personaImStatusIcon-mobile': messaging.device.isSmall,
|
||||
@@ -58,7 +58,7 @@
|
||||
</small>
|
||||
</t>
|
||||
<t t-if="!messageView.isActive and messageView.messageSeenIndicatorView">
|
||||
<MessageSeenIndicator className="'o_Message_seenIndicator'" record="messageView.messageSeenIndicatorView"/>
|
||||
<MessageSeenIndicator className="'o_Message_seenIndicator me-1'" record="messageView.messageSeenIndicatorView"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
@@ -66,7 +66,7 @@
|
||||
<t t-if="!messageView.isSquashed">
|
||||
<div class="o_Message_header d-flex flex-wrap align-items-baseline ms-2">
|
||||
<t t-if="messageView.message.author">
|
||||
<strong class="o_Message_authorName o_redirect text-truncate" t-att-class="{'o_cursor_pointer': messageView.hasAuthorOpenChat}" t-att-role="messageView.hasAuthorOpenChat ? 'button' : ''" t-att-tabindex="messageView.hasAuthorOpenChat ? '0' : ''" t-on-click="messageView.onClickAuthorName" t-att-title="messageView.authorTitleText">
|
||||
<strong class="o_Message_authorName o_redirect me-2 text-truncate" t-att-class="{'o_cursor_pointer': messageView.hasAuthorOpenChat}" t-att-role="messageView.hasAuthorOpenChat ? 'button' : ''" t-att-tabindex="messageView.hasAuthorOpenChat ? '0' : ''" t-on-click="messageView.onClickAuthorName" t-att-title="messageView.authorTitleText">
|
||||
<t t-if="messageView.message.originThread">
|
||||
<t t-esc="messageView.message.originThread.getMemberName(messageView.message.author)"/>
|
||||
</t>
|
||||
@@ -76,37 +76,37 @@
|
||||
</strong>
|
||||
</t>
|
||||
<t t-elif="messageView.message.guestAuthor">
|
||||
<strong class="o_Message_authorName text-truncate">
|
||||
<strong class="o_Message_authorName me-2 text-truncate">
|
||||
<t t-esc="messageView.message.guestAuthor.name"/>
|
||||
</strong>
|
||||
</t>
|
||||
<t t-elif="messageView.message.email_from">
|
||||
<a class="o_Message_authorName text-truncate" t-attf-href="mailto:{{ messageView.message.email_from }}?subject=Re: {{ messageView.message.subject ? messageView.message.subject : '' }}">
|
||||
<a class="o_Message_authorName me-2 text-truncate" t-attf-href="mailto:{{ messageView.message.email_from }}?subject=Re: {{ messageView.message.subject ? messageView.message.subject : '' }}">
|
||||
<strong>
|
||||
<t t-esc="messageView.message.email_from"/>
|
||||
</strong>
|
||||
</a>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<strong class="o_Message_authorName text-truncate">
|
||||
<strong class="o_Message_authorName me-2 text-truncate">
|
||||
Anonymous
|
||||
</strong>
|
||||
</t>
|
||||
<t t-if="messageView.message.date">
|
||||
<small class="o_Message_date o_Message_headerDate text-500" t-att-class="{ 'o-message-selected text-600': messageView.isSelected, 'text-500': !messageView.isSelected }" t-att-title="messageView.message.datetime">
|
||||
<small class="o_Message_date o_Message_headerDate me-2 text-500" t-att-class="{ 'o-message-selected text-600': messageView.isSelected, 'text-500': !messageView.isSelected }" t-att-title="messageView.message.datetime">
|
||||
- <t t-esc="messageView.dateFromNow"/>
|
||||
</small>
|
||||
</t>
|
||||
<t t-if="messageView.messageSeenIndicatorView">
|
||||
<MessageSeenIndicator className="'o_Message_seenIndicator'" record="messageView.messageSeenIndicatorView"/>
|
||||
<MessageSeenIndicator className="'o_Message_seenIndicator me-1'" record="messageView.messageSeenIndicatorView"/>
|
||||
</t>
|
||||
<t t-if="messageView.messageListViewMessageViewItemOwner and messageView.message.originThread and messageView.message.originThread !== messageView.messageListViewMessageViewItemOwner.messageListViewOwner.threadViewOwner.thread">
|
||||
<small class="o_Message_originThread" t-att-class="{ 'o-message-selected text-600': messageView.isSelected, 'text-500': !messageView.isSelected }">
|
||||
<small class="o_Message_originThread me-2" t-att-class="{ 'o-message-selected text-600': messageView.isSelected, 'text-500': !messageView.isSelected }">
|
||||
<t t-if="messageView.message.originThread.model === 'mail.channel'">
|
||||
(from <a class="o_Message_originThreadLink" t-att-href="messageView.message.originThread.url" t-on-click="messageView.onClickOriginThread"><t t-if="messageView.message.originThread.displayName">#<t t-esc="messageView.message.originThread.displayName"/></t><t t-else="">channel</t></a>)
|
||||
(from <a class="o_Message_originThreadLink fs-6" t-att-href="messageView.message.originThread.url" t-on-click="messageView.onClickOriginThread"><t t-if="messageView.message.originThread.displayName">#<t t-esc="messageView.message.originThread.displayName"/></t><t t-else="">channel</t></a>)
|
||||
</t>
|
||||
<t t-else="">
|
||||
on <a class="o_Message_originThreadLink" t-att-href="messageView.message.originThread.url" t-on-click="messageView.onClickOriginThread"><t t-if="messageView.message.originThread.displayName"><t t-esc="messageView.message.originThread.displayName"/></t><t t-else="">document</t></a>
|
||||
on <a class="o_Message_originThreadLink fs-6" t-att-href="messageView.message.originThread.url" t-on-click="messageView.onClickOriginThread"><t t-if="messageView.message.originThread.displayName"><t t-esc="messageView.message.originThread.displayName"/></t><t t-else="">document</t></a>
|
||||
</t>
|
||||
</small>
|
||||
</t>
|
||||
|
||||
Reference in New Issue
Block a user