github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 06:49:14 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: truncate long usernames in multi-username notifications (#11153)

Browse Source 
* UX: truncate long usernames in multi-username notifications

* remove extra class, clarify comments
This commit is contained in:
Kris 2020-11-09 00:06:52 -05:00 committed by GitHub
parent 8be04ff7f7
commit 1455421433
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/discourse/app/widgets/liked-notification-item.js
View File

@ -15,14 +15,14 @@ createWidgetFrom(DefaultNotificationItem, "liked-notification-item", {
if (count === 0) {
return I18n.t("notifications.liked_2", {
description,
username,
username2,
username: `<span class="multi-username">${username}</span>`,
username2: `<span class="multi-username">${username2}</span>`,
});
} else {
return I18n.t("notifications.liked_many", {
description,
username,
username2,
username: `<span class="multi-username">${username}</span>`,
username2: `<span class="multi-username">${username2}</span>`,
count,
});
}

32
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -236,6 +236,38 @@
color: var(--primary);
}
span.double-user,
// e.g., "username, username2"
span.multi-user
// e.g., "username, username2, and n others"
{
display: inline-flex;
max-width: 100%;
align-items: baseline;
white-space: nowrap;
}
span.multi-user
// e.g., "username, username2, and n others"
{
span.multi-username:nth-of-type(2) {
// margin between username2 and "and n others"
margin-right: 0.25em;
}
}
// truncate when usernames are very long
span.multi-username {
@include ellipsis;
flex: 0 1 auto;
min-width: 2em;
max-width: 10em;
&:nth-of-type(2) {
// margin for comma between username and username2
margin-left: 0.25em;
}
}
&:hover,
&:focus {
background-color: var(--highlight-medium);

6
config/locales/client.en.yml
View File

@ -1989,10 +1989,10 @@ en:
posted: "<span>%{username}</span> %{description}"
edited: "<span>%{username}</span> %{description}"
liked: "<span>%{username}</span> %{description}"
liked_2: "<span>%{username}, %{username2}</span> %{description}"
liked_2: "<span class='double-user'>%{username}, %{username2}</span> %{description}"
liked_many:
one: "<span>%{username}, %{username2} and %{count} other</span> %{description}"
other: "<span>%{username}, %{username2} and %{count} others</span> %{description}"
one: "<span class='multi-user'>%{username}, %{username2} and %{count} other</span> %{description}"
other: "<span class='multi-user'>%{username}, %{username2} and %{count} others</span> %{description}"
liked_consolidated_description:
one: "liked %{count} of your posts"
other: "liked %{count} of your posts"