github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 14:32:44 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Chat footer unread indicator (#27244)

Browse Source 
A few follup changes after changing to the chat footer split for drawer:
* Fixing a bug that stretched the unread indicator on mobile
* Minor style changes in hover/focus behaviour for chat drawer
* Repositioning of unread indicator so it has more space at the top of the footer
* Using the `c-unread-indicator` mixin
This commit is contained in:
chapoi 2024-05-29 17:16:03 +02:00 committed by GitHub
parent f292e645b9
commit eb8549e527
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs
View File

@ -47,7 +47,7 @@ export default class ChatFooter extends Component {
aria-label={{i18n "chat.channel_list.aria_label"}} aria-label={{i18n "chat.channel_list.aria_label"}}
id="c-footer-channels" id="c-footer-channels"
class={{concatClass class={{concatClass
"btn-flat" "btn-transparent"
"c-footer__item" "c-footer__item"
(if (eq @activeTab "channels") "--active") (if (eq @activeTab "channels") "--active")
}} }}

6
plugins/chat/assets/javascripts/discourse/components/chat/footer/unread-indicator.gjs
View File

@ -58,13 +58,13 @@ export default class FooterUnreadIndicator extends Component {
<template> <template>
{{#if this.showUrgent}} {{#if this.showUrgent}}
<div class="chat-channel-unread-indicator -urgent"> <div class="c-unread-indicator -urgent">
<div class="chat-channel-unread-indicator__number"> <div class="c-unread-indicator__number">
{{this.urgentBadgeCount}} {{this.urgentBadgeCount}}
</div> </div>
</div> </div>
{{else if this.showUnread}} {{else if this.showUnread}}
<div class="chat-channel-unread-indicator"></div> <div class="c-unread-indicator"></div>
{{/if}} {{/if}}
</template> </template>
} }

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

@ -65,8 +65,7 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
} }
} }
.header-dropdown-toggle.chat-header-icon .icon, .header-dropdown-toggle.chat-header-icon .icon {
.c-footer .c-footer__item {
.chat-channel-unread-indicator { .chat-channel-unread-indicator {
@include chat-unread-indicator; @include chat-unread-indicator;
border: 2px solid var(--header_background); border: 2px solid var(--header_background);

16
plugins/chat/assets/stylesheets/common/chat-footer.scss
View File

@ -38,7 +38,6 @@
&:focus { &:focus {
.discourse-no-touch &, .discourse-no-touch &,
.discourse-touch & { .discourse-touch & {
background-color: var(--primary-low);
.d-icon, .d-icon,
.d-button-label { .d-button-label {
color: var(--quaternary); color: var(--quaternary);
@ -61,17 +60,22 @@
color: var(--primary-medium); color: var(--primary-medium);
} }
.chat-channel-unread-indicator, .c-unread-indicator {
.chat-channel-unread-indicator.-urgent { position: absolute;
top: 0.25rem; top: 0.35rem;
right: unset; right: unset;
left: 50%; left: 50%;
margin-left: 0.75rem; margin-left: 0.75rem;
&.-urgent {
height: 1em;
width: min-content;
min-width: 0.6em;
padding: 0.21em 0.42em;
} }
&:not(.-urgent) {
.chat-channel-unread-indicator:not(.-urgent) {
width: 11px; width: 11px;
height: 11px; height: 11px;
} }
} }
} }
}

9
plugins/chat/assets/stylesheets/mobile/chat-footer.scss
View File

@ -11,6 +11,15 @@
} }
} }
.c-footer {
&__item {
.c-unread-indicator,
.c-unread-indicator.-urgent {
margin-left: 1rem;
}
}
}
.has-full-page-chat div#reply-control { .has-full-page-chat div#reply-control {
display: none; display: none;
} }

11
plugins/chat/spec/system/chat_footer_spec.rb
View File

@ -100,7 +100,7 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
visit("/") visit("/")
chat_page.open_from_header chat_page.open_from_header
expect(page).to have_css("#c-footer-channels .chat-channel-unread-indicator") expect(page).to have_css("#c-footer-channels .c-unread-indicator")
end end
it "is urgent for mentions" do it "is urgent for mentions" do
@ -116,10 +116,7 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
user: user_2, user: user_2,
) )
expect(page).to have_css( expect(page).to have_css("#c-footer-channels .c-unread-indicator.-urgent", text: "1")
"#c-footer-channels .chat-channel-unread-indicator.-urgent",
text: "1",
)
end end
end end
@ -131,7 +128,7 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
visit("/") visit("/")
chat_page.open_from_header chat_page.open_from_header
expect(page).to have_css("#c-footer-direct-messages .chat-channel-unread-indicator.-urgent") expect(page).to have_css("#c-footer-direct-messages .c-unread-indicator.-urgent")
end end
end end
@ -145,7 +142,7 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
visit("/") visit("/")
chat_page.open_from_header chat_page.open_from_header
expect(page).to have_css("#c-footer-threads .chat-channel-unread-indicator") expect(page).to have_css("#c-footer-threads .c-unread-indicator")
end end
end end
end end