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

[IMP] mail: prevent partner name from overflowing

Browse Source 
Some of them were completely missing (eg. author name on message, followers
menu), others were only partially done (eg. missing no wrap).

Adapt all of them to guideline with class.

closes odoo/odoo#73660

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Sébastien Theys
2021-07-14 10:11:45 +00:00
parent 865b2f0513
commit 6fe1173107
23 changed files with 35 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/attachment/attachment.scss
-6
View File
@@ -59,12 +59,6 @@
padding-right : map-get($spacers, 1);
}
.o_Attachment_filename {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.o_Attachment_image {
flex-shrink: 0;
margin: map-get($spacers, 1);
addons/mail/static/src/components/attachment/attachment.xml
+2 -2
View File
@@ -27,7 +27,7 @@
<div class="o_Attachment_imageOverlay">
<div class="o_Attachment_details o_Attachment_imageOverlayDetails">
<t t-if="props.showFilename">
<div class="o_Attachment_filename">
<div class="o_Attachment_filename text-truncate">
<t t-esc="attachment.displayName"/>
</div>
</t>
@@ -62,7 +62,7 @@
<t t-if="(props.showFilename or props.showExtension) and detailsMode === 'card'">
<div class="o_Attachment_details">
<t t-if="props.showFilename">
<div class="o_Attachment_filename">
<div class="o_Attachment_filename text-truncate">
<t t-esc="attachment.displayName"/>
</div>
</t>
addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
-6
View File
@@ -88,12 +88,6 @@
min-width: 0;
}
.o_AttachmentViewer_nameText {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.o_AttachmentViewer_toolbar {
position: absolute;
bottom: 45px;
addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
+1 -1
View File
@@ -21,7 +21,7 @@
</div>
</t>
<div class="o_AttachmentViewer_headerItem o_AttachmentViewer_name">
<span class="o_AttachmentViewer_nameText" t-esc="attachmentViewer.attachment.displayName"/>
<span class="o_AttachmentViewer_nameText text-truncate" t-esc="attachmentViewer.attachment.displayName"/>
</div>
<div class="o-autogrow"/>
<div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton" t-on-click="_onClickDownload" role="button" title="Download">
addons/mail/static/src/components/chat_window_header/chat_window_header.scss
-3
View File
@@ -49,9 +49,6 @@
.o_ChatWindowHeader_name {
max-height: map-get($sizes, 100);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.o_ChatWindowHeader_rightArea {
addons/mail/static/src/components/chat_window_header/chat_window_header.xml
+1 -1
View File
@@ -15,7 +15,7 @@
threadLocalId="chatWindow.thread.localId"
/>
</t>
<div class="o_ChatWindowHeader_item o_ChatWindowHeader_name" t-att-title="chatWindow.name">
<div class="o_ChatWindowHeader_item o_ChatWindowHeader_name text-truncate" t-att-title="chatWindow.name">
<t t-esc="chatWindow.name"/>
</div>
<t t-if="chatWindow.thread and chatWindow.thread.localMessageUnreadCounter > 0">
addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
-2
View File
@@ -49,8 +49,6 @@
}
.o_ChatWindowHiddenMenu_windowCounter {
overflow: hidden;
text-overflow: ellipsis;
margin-left: map-get($spacers, 1);
}
addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
+1 -1
View File
@@ -5,7 +5,7 @@
<div class="dropup o_ChatWindowHiddenMenu">
<div class="dropdown-toggle o_ChatWindowHiddenMenu_dropdownToggle" t-att-class="{ show: env.messaging.chatWindowManager.isHiddenMenuOpen }" t-on-click="_onClickToggle">
<div class="fa fa-comments-o o_ChatWindowHiddenMenu_dropdownToggleIcon o_ChatWindowHiddenMenu_dropdownToggleItem"/>
<div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter">
<div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter text-truncate">
<t t-esc="env.messaging.chatWindowManager.allOrderedHidden.length"/>
</div>
</div>
addons/mail/static/src/components/composer/composer.scss
-2
View File
@@ -126,8 +126,6 @@
.o_Composer_threadTextualTypingStatus {
font-size: $font-size-sm;
overflow: hidden;
text-overflow: ellipsis;
&:before {
// invisible character so that typing status bar has constant height, regardless of text content.
addons/mail/static/src/components/composer/composer.xml
+1 -1
View File
@@ -26,7 +26,7 @@
t-ref="fileUploader"
/>
<t t-if="hasHeader">
<div class="o_Composer_coreHeader">
<div class="o_Composer_coreHeader text-truncate">
<t t-if="props.hasThreadName and composer.thread">
<span class="o_Composer_threadName">
on: <b><t t-esc="composer.thread.displayName"/></b>
addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
-4
View File
@@ -13,16 +13,12 @@
// because no shrink, ensure it cannot overflow with a max-width
flex: 0 0 auto;
max-width: map-get($sizes, 100);
overflow: hidden;
padding-inline-end: map-get($spacers, 2);
text-overflow: ellipsis;
}
.o_ComposerSuggestion_part2 {
// shrink part 2 to properly ensure it cannot overflow
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
}
.o_ComposerSuggestion_partnerImStatusIcon {
addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
+7 -7
View File
@@ -5,15 +5,15 @@
<a class="o_ComposerSuggestion dropdown-item" t-att-class="{ 'active': props.isActive }" href="#" t-att-title="title()" role="menuitem" t-on-click="_onClick">
<t t-if="record">
<t t-if="isCannedResponse">
<span class="o_ComposerSuggestion_part1"><t t-esc="record.source"/></span>
<span class="o_ComposerSuggestion_part2"><t t-esc="record.substitution"/></span>
<span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.source"/></span>
<span class="o_ComposerSuggestion_part2 text-truncate"><t t-esc="record.substitution"/></span>
</t>
<t t-if="isChannel">
<span class="o_ComposerSuggestion_part1"><t t-esc="record.name"/></span>
<span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.name"/></span>
</t>
<t t-if="isCommand">
<span class="o_ComposerSuggestion_part1"><t t-esc="record.name"/></span>
<span class="o_ComposerSuggestion_part2"><t t-esc="record.help"/></span>
<span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.name"/></span>
<span class="o_ComposerSuggestion_part2 text-truncate"><t t-esc="record.help"/></span>
</t>
<t t-if="isPartner">
<PartnerImStatusIcon
@@ -21,9 +21,9 @@
hasBackground="false"
partnerLocalId="record.localId"
/>
<span class="o_ComposerSuggestion_part1"><t t-esc="record.nameOrDisplayName"/></span>
<span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.nameOrDisplayName"/></span>
<t t-if="record.email">
<span class="o_ComposerSuggestion_part2">(<t t-esc="record.email"/>)</span>
<span class="o_ComposerSuggestion_part2 text-truncate">(<t t-esc="record.email"/>)</span>
</t>
</t>
</t>
addons/mail/static/src/components/composer_text_input/composer_text_input.scss
+1 -3
View File
@@ -23,9 +23,7 @@
overflow: auto;
&::placeholder {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
@include text-truncate();
}
&.o-composer-is-compact {
addons/mail/static/src/components/follower/follower.scss
+1
View File
@@ -19,6 +19,7 @@
align-items: center;
display: flex;
flex: 1;
min-width: 0;
padding-left: map-get($spacers, 3);
padding-right: map-get($spacers, 3);
}
addons/mail/static/src/components/follower/follower.xml
+2 -2
View File
@@ -4,9 +4,9 @@
<t t-name="mail.Follower" owl="1">
<div class="o_Follower">
<t t-if="follower">
<a class="o_Follower_details" t-att-class="{ 'o-inactive': !follower.isActive }" href="#" t-on-click="_onClickDetails">
<a class="o_Follower_details d-flex" t-att-class="{ 'o-inactive': !follower.isActive }" href="#" t-on-click="_onClickDetails">
<img class="o_Follower_avatar" t-att-src="follower.partner.avatarUrl" alt="Avatar"/>
<span class="o_Follower_name" t-esc="follower.name or follower.displayName"/>
<span class="o_Follower_name flex-shrink text-truncate" t-esc="follower.name or follower.displayName"/>
</a>
<t t-if="follower.isEditable">
<button class="btn btn-icon o_Follower_button o_Follower_editButton" title="Edit subscription" t-on-click="_onClickEdit">
addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss
+6 -1
View File
@@ -15,7 +15,12 @@
.o_FollowerListMenu_dropdown {
display: flex;
flex-flow: column;
overflow-y: auto;
/**
* Note: Min() refers to CSS min() and not SCSS min().
*
* To by-pass SCSS min() shadowing CSS min(), we rely on SCSS being case-sensitive while CSS isn't.
*/
max-width: Min(400px, 95vw);
}
.o_FollowerListMenu_followers {
addons/mail/static/src/components/message/message.xml
+3 -3
View File
@@ -63,17 +63,17 @@
<t t-if="!props.isSquashed">
<div class="o_Message_header">
<t t-if="message.author">
<div class="o_Message_authorName o_Message_authorRedirect o_redirect" t-on-click="_onClickAuthorName" title="Open profile">
<div class="o_Message_authorName o_Message_authorRedirect o_redirect text-truncate" t-on-click="_onClickAuthorName" title="Open profile">
<t t-esc="message.author.nameOrDisplayName"/>
</div>
</t>
<t t-elif="message.email_from">
<a class="o_Message_authorName" t-attf-href="mailto:{{ message.email_from }}?subject=Re: {{ message.subject ? message.subject : '' }}">
<a class="o_Message_authorName text-truncate" t-attf-href="mailto:{{ message.email_from }}?subject=Re: {{ message.subject ? message.subject : '' }}">
<t t-esc="message.email_from"/>
</a>
</t>
<t t-else="">
<div class="o_Message_authorName">
<div class="o_Message_authorName text-truncate">
Anonymous
</div>
</t>
addons/mail/static/src/components/notification_group/notification_group.xml
+2 -2
View File
@@ -11,7 +11,7 @@
</div>
<div class="o_NotificationGroup_content">
<div class="o_NotificationGroup_header">
<span class="o_NotificationGroup_name">
<span class="o_NotificationGroup_name text-truncate">
<t t-esc="group.res_model_name"/>
</span>
<span class="o_NotificationGroup_counter">
@@ -25,7 +25,7 @@
</t>
</div>
<div class="o_NotificationGroup_core">
<span class="o_NotificationGroup_coreItem o_NotificationGroup_inlineText">
<span class="o_NotificationGroup_coreItem o_NotificationGroup_inlineText text-truncate">
<t t-if="group.notification_type === 'email'">
An error occurred when sending an email.
</t>
addons/mail/static/src/components/notification_list/notification_list_item.scss
-8
View File
@@ -63,10 +63,6 @@
}
@mixin o-mail-notification-list-item-inline-text-layout {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.o-empty::before {
content: '\00a0'; // keep line-height as if it had content
}
@@ -78,10 +74,6 @@
}
@mixin o-mail-notification-list-item-name-layout {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.o-mobile {
font-size: 1.1em;
}
addons/mail/static/src/components/notification_request/notification_request.xml
+2 -2
View File
@@ -15,12 +15,12 @@
</div>
<div class="o_NotificationRequest_content">
<div class="o_NotificationRequest_header">
<span class="o_NotificationRequest_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
<span class="o_NotificationRequest_name text-truncate" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
<t t-esc="getHeaderText()"/>
</span>
</div>
<div class="o_NotificationRequest_core">
<span class="o_NotificationRequest_coreItem o_NotificationRequest_inlineText">
<span class="o_NotificationRequest_coreItem o_NotificationRequest_inlineText text-truncate">
Enable desktop notifications to chat.
</span>
</div>
addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
+2 -2
View File
@@ -24,7 +24,7 @@
</div>
<div class="o_ThreadNeedactionPreview_content">
<div class="o_ThreadNeedactionPreview_header">
<span class="o_ThreadNeedactionPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
<span class="o_ThreadNeedactionPreview_name text-truncate" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
<t t-esc="thread.displayName"/>
</span>
<span class="o_ThreadNeedactionPreview_counter">
@@ -38,7 +38,7 @@
</t>
</div>
<div class="o_ThreadNeedactionPreview_core">
<span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_inlineText" t-att-class="{ 'o-empty': inlineLastNeedactionMessageAsOriginThreadBody.length === 0 }">
<span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_inlineText text-truncate" t-att-class="{ 'o-empty': inlineLastNeedactionMessageAsOriginThreadBody.length === 0 }">
<t t-if="thread.lastNeedactionMessageAsOriginThread and thread.lastNeedactionMessageAsOriginThread.author">
<MessageAuthorPrefix
messageLocalId="thread.lastNeedactionMessageAsOriginThread.localId"
addons/mail/static/src/components/thread_preview/thread_preview.xml
+2 -2
View File
@@ -25,7 +25,7 @@
</div>
<div class="o_ThreadPreview_content">
<div class="o_ThreadPreview_header">
<span class="o_ThreadPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-muted': thread.localMessageUnreadCounter === 0 }">
<span class="o_ThreadPreview_name text-truncate" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-muted': thread.localMessageUnreadCounter === 0 }">
<t t-esc="thread.displayName"/>
</span>
<t t-if="thread.localMessageUnreadCounter > 0">
@@ -41,7 +41,7 @@
</t>
</div>
<div class="o_ThreadPreview_core">
<span class="o_ThreadPreview_coreItem o_ThreadPreview_inlineText" t-att-class="{ 'o-empty': inlineLastMessageBody.length === 0 }">
<span class="o_ThreadPreview_coreItem o_ThreadPreview_inlineText text-truncate" t-att-class="{ 'o-empty': inlineLastMessageBody.length === 0 }">
<t t-if="thread.lastMessage and thread.lastMessage.author">
<MessageAuthorPrefix
messageLocalId="thread.lastMessage.localId"
addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
+1 -1
View File
@@ -6,7 +6,7 @@
<t t-if="thread and thread.orderedOtherTypingMembers.length > 0">
<ThreadTypingIcon animation="'pulse'" size="'medium'"/>
<span class="o_ThreadTextualTypingStatus_separator"/>
<span t-esc="thread.typingStatusText"/>
<span class="text-truncate" t-esc="thread.typingStatusText"/>
</t>
</div>
</t>