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

UX: fix number cutoff in header chat indicator (#21946)

Browse Source 
In the chat header indicator, expand to a pill when the number reaches
N digits, and also display 99+ if the number is over 99.
This commit is contained in:
chapoi 2023-06-07 10:42:08 +09:00 committed by GitHub
parent 41f8bff2c3
commit 9809103ed9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/chat/assets/javascripts/discourse/components/chat-header-icon-unread-indicator.hbs
View File

@ -1,9 +1,7 @@
{{#if this.showUrgentIndicator}}
<div class="chat-channel-unread-indicator urgent">
<div class="number-wrap">
<div
class="number"
>{{this.chatTrackingStateManager.allChannelUrgentCount}}</div>
<div class="chat-channel-unread-indicator__number">
{{this.unreadCountLabel}}
</div>
</div>
{{else if this.showUnreadIndicator}}

6
plugins/chat/assets/javascripts/discourse/components/chat-header-icon-unread-indicator.js
View File

@ -41,4 +41,10 @@ export default class ChatHeaderIconUnreadIndicator extends Component {
return preferences.includes(this.indicatorPreference);
}
get unreadCountLabel() {
return this.chatTrackingStateManager.allChannelUrgentCount > 99
? "99+"
: this.chatTrackingStateManager.allChannelUrgentCount;
}
}

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

@ -114,11 +114,28 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
.header-dropdown-toggle.chat-header-icon {
.icon {
.chat-channel-unread-indicator {
display: flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 14px;
padding: 3px;
border-radius: 1em;
border: 2px solid var(--header_background);
position: absolute;
right: 2px;
right: 0;
bottom: 2px;
transition: border-color linear 0.15s;
&__number {
font-size: 0.7rem;
line-height: 15px;
height: inherit;
&.-too-high {
font-size: 1.25rem;
}
}
}
}