Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Chat channel title overflow ellipsis fixes (#20956) 

* UX: add correct class

* UX: prioritise name over user messages when truncating

* UX: add missing overflows to enable ellipsis
This commit is contained in:
chapoi 2023-04-04 12:44:36 +02:00 committed by GitHub
parent e014635a12
commit 6e2fd7a451
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/chat/assets/javascripts/discourse/components/chat-channel-title.hbs
View File

@ -28,6 +28,7 @@
<span class="chat-channel-title__name">{{user.username}}</span> <span class="chat-channel-title__name">{{user.username}}</span>
{{#if this.showUserStatus}} {{#if this.showUserStatus}}
<UserStatusMessage <UserStatusMessage
@class="chat-channel-title__user-status-message"
@status={{this.channel.chatable.users.firstObject.status}} @status={{this.channel.chatable.users.firstObject.status}}
@showDescription={{if this.site.mobileView "true"}} @showDescription={{if this.site.mobileView "true"}}
/> />

3
plugins/chat/assets/stylesheets/common/base-common.scss
View File

@ -262,6 +262,7 @@ $float-height: 530px;
width: 100%; width: 100%;
min-height: 1px; min-height: 1px;
position: relative; position: relative;
overflow: hidden;
.open-drawer-btn { .open-drawer-btn {
color: var(--primary-low-mid); color: var(--primary-low-mid);
@ -479,6 +480,7 @@ body.has-full-page-chat {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
flex: 1; flex: 1;
max-width: 100%;
.chat-channel-archive-status { .chat-channel-archive-status {
text-align: right; text-align: right;
@ -616,6 +618,7 @@ html.has-full-page-chat {
.main-chat-outlet { .main-chat-outlet {
min-height: 0; min-height: 0;
overflow: hidden;
} }
} }
} }

10
plugins/chat/assets/stylesheets/common/chat-channel-title.scss
View File

@ -1,6 +1,7 @@
.chat-channel-title-wrapper { .chat-channel-title-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden;
} }
.chat-channel-title { .chat-channel-title {
@ -8,10 +9,19 @@
align-items: center; align-items: center;
@include ellipsis; @include ellipsis;
&__user-info {
overflow: hidden;
}
.user-status-message { .user-status-message {
display: none; // we only show when in channels list display: none; // we only show when in channels list
} }
&__user-status-message {
flex-shrink: 3;
overflow: hidden;
}
.chat-name, .chat-name,
.category-chat-name, .category-chat-name,
&__usernames, &__usernames,

4
plugins/chat/assets/stylesheets/common/chat-drawer.scss
View File

@ -153,6 +153,10 @@ html.rtl {
font-weight: 700; font-weight: 700;
width: 100%; width: 100%;
&__user-info {
overflow: hidden;
}
.chat-name, .chat-name,
.chat-drawer-name, .chat-drawer-name,
.category-chat-name, .category-chat-name,

6
plugins/chat/assets/stylesheets/desktop/chat-channel-title.scss
View File

@ -5,4 +5,10 @@
background: var(--primary-very-low); background: var(--primary-very-low);
border-radius: 5px; border-radius: 5px;
} }
.chat-channel-title {
&__user-info {
overflow: hidden;
}
}
} }

2
plugins/chat/assets/stylesheets/mobile/chat-index.scss
View File

@ -61,7 +61,6 @@
} }
&__name { &__name {
flex-shrink: 0;
margin-left: 0.75em; margin-left: 0.75em;
font-size: var(--font-up-1); font-size: var(--font-up-1);
} }
@ -71,6 +70,7 @@
} }
&__user-status-message { &__user-status-message {
flex-shrink: 3;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }