github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 11:52:45 +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"}}
id="c-footer-channels"
class={{concatClass
"btn-flat"
"btn-transparent"
"c-footer__item"
(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>
{{#if this.showUrgent}}
<div class="chat-channel-unread-indicator -urgent">
<div class="chat-channel-unread-indicator__number">
<div class="c-unread-indicator -urgent">
<div class="c-unread-indicator__number">
{{this.urgentBadgeCount}}
</div>
</div>
{{else if this.showUnread}}
<div class="chat-channel-unread-indicator"></div>
<div class="c-unread-indicator"></div>
{{/if}}
</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,
.c-footer .c-footer__item {
.header-dropdown-toggle.chat-header-icon .icon {
.chat-channel-unread-indicator {
@include chat-unread-indicator;
border: 2px solid var(--header_background);

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

@ -38,7 +38,6 @@
&:focus {
.discourse-no-touch &,
.discourse-touch & {
background-color: var(--primary-low);
.d-icon,
.d-button-label {
color: var(--quaternary);
@ -61,17 +60,22 @@
color: var(--primary-medium);
}
.chat-channel-unread-indicator,
.chat-channel-unread-indicator.-urgent {
top: 0.25rem;
.c-unread-indicator {
position: absolute;
top: 0.35rem;
right: unset;
left: 50%;
margin-left: 0.75rem;
}
.chat-channel-unread-indicator:not(.-urgent) {
width: 11px;
height: 11px;
&.-urgent {
height: 1em;
width: min-content;
min-width: 0.6em;
padding: 0.21em 0.42em;
}
&:not(.-urgent) {
width: 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 {
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("/")
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
it "is urgent for mentions" do
@ -116,10 +116,7 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
user: user_2,
)
expect(page).to have_css(
"#c-footer-channels .chat-channel-unread-indicator.-urgent",
text: "1",
)
expect(page).to have_css("#c-footer-channels .c-unread-indicator.-urgent", text: "1")
end
end
@ -131,7 +128,7 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
visit("/")
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
@ -145,7 +142,7 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
visit("/")
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