mirror of
https://github.com/discourse/discourse.git
synced 2025-10-03 17:21:20 +08:00
FIX: hides redundant chat icon on mobile chat routes (#35015)
### Chat in Mobile view In order to reduce visual noise in mobile view, there is no need to show chat icon in header, once user has already chat open. |Before|After| |---|---| |<img width="456" height="199" alt="Screenshot 2025-10-01 at 17 16 29" src="https://github.com/user-attachments/assets/6d124a79-4a0a-4edd-913a-43a0cfa05623" />|<img width="442" height="198" alt="Screenshot 2025-10-01 at 17 16 06" src="https://github.com/user-attachments/assets/052a2f78-574e-4d35-aff4-264f54f2fb15" />|
This commit is contained in:
parent
d7cea61e36
commit
eae2370424
6 changed files with 73 additions and 51 deletions
|
@ -1,5 +1,6 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { service } from "@ember/service";
|
||||
import { and } from "truth-helpers";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
|
@ -61,10 +62,6 @@ export default class ChatHeaderIcon extends Component {
|
|||
}
|
||||
|
||||
get href() {
|
||||
if (this.site.mobileView && this.chatStateManager.isFullPageActive) {
|
||||
return getURL("/chat");
|
||||
}
|
||||
|
||||
if (
|
||||
this.chatStateManager.isFullPageActive &&
|
||||
!this.chatSeparateSidebarMode.never
|
||||
|
@ -80,22 +77,24 @@ export default class ChatHeaderIcon extends Component {
|
|||
}
|
||||
|
||||
<template>
|
||||
<li class="header-dropdown-toggle chat-header-icon">
|
||||
<DButton
|
||||
@href={{this.href}}
|
||||
tabindex="0"
|
||||
class={{concatClass "icon" "btn-flat" (if this.isActive "active")}}
|
||||
title={{this.title}}
|
||||
>
|
||||
{{~icon this.icon~}}
|
||||
{{#if this.showUnreadIndicator}}
|
||||
<ChatHeaderIconUnreadIndicator
|
||||
@urgentCount={{@urgentCount}}
|
||||
@unreadCount={{@unreadCount}}
|
||||
@indicatorPreference={{@indicatorPreference}}
|
||||
/>
|
||||
{{/if}}
|
||||
</DButton>
|
||||
</li>
|
||||
{{#unless (and this.site.mobileView this.isActive)}}
|
||||
<li class="header-dropdown-toggle chat-header-icon">
|
||||
<DButton
|
||||
@href={{this.href}}
|
||||
tabindex="0"
|
||||
class={{concatClass "icon" "btn-flat" (if this.isActive "active")}}
|
||||
title={{this.title}}
|
||||
>
|
||||
{{~icon this.icon~}}
|
||||
{{#if this.showUnreadIndicator}}
|
||||
<ChatHeaderIconUnreadIndicator
|
||||
@urgentCount={{@urgentCount}}
|
||||
@unreadCount={{@unreadCount}}
|
||||
@indicatorPreference={{@indicatorPreference}}
|
||||
/>
|
||||
{{/if}}
|
||||
</DButton>
|
||||
</li>
|
||||
{{/unless}}
|
||||
</template>
|
||||
}
|
||||
|
|
|
@ -84,8 +84,8 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
|
|||
|
||||
create_message(channel_1, user: user_1)
|
||||
|
||||
expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator", text: "")
|
||||
expect(channels_index_page).to have_unread_channel(channel_1)
|
||||
expect(chat_page.footer).to have_unread_channels
|
||||
end
|
||||
end
|
||||
|
||||
|
@ -101,8 +101,8 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
|
|||
message: "hello @#{current_user.username} what's up?",
|
||||
)
|
||||
|
||||
expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator")
|
||||
expect(channels_index_page).to have_unread_channel(channel_1, count: 1)
|
||||
expect(chat_page.footer).to have_unread_channels
|
||||
end
|
||||
|
||||
it "shows correct count when there are multiple messages but only 1 is urgent" do
|
||||
|
@ -118,11 +118,8 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
|
|||
|
||||
3.times { create_message(channel_1, user: user_1) }
|
||||
|
||||
expect(page).to have_css(
|
||||
".chat-header-icon .chat-channel-unread-indicator",
|
||||
text: "1",
|
||||
)
|
||||
expect(channels_index_page).to have_unread_channel(channel_1, count: 1)
|
||||
expect(chat_page.footer).to have_unread_channels
|
||||
end
|
||||
end
|
||||
end
|
||||
|
@ -141,21 +138,12 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
|
|||
visit("/chat/direct-messages")
|
||||
|
||||
create_message(dm_channel_1, user: user_1)
|
||||
|
||||
expect(page).to have_css(
|
||||
".chat-header-icon .chat-channel-unread-indicator",
|
||||
text: "1",
|
||||
wait: 25,
|
||||
)
|
||||
expect(channels_index_page).to have_unread_channel(dm_channel_1, wait: 25)
|
||||
expect(channels_index_page).to have_unread_channel(dm_channel_1, count: 1, wait: 25)
|
||||
expect(chat_page.footer).to have_unread_dms("1")
|
||||
|
||||
create_message(dm_channel_1, user: user_1)
|
||||
|
||||
expect(page).to have_css(
|
||||
".chat-header-icon .chat-channel-unread-indicator",
|
||||
text: "2",
|
||||
wait: 25,
|
||||
)
|
||||
expect(channels_index_page).to have_unread_channel(dm_channel_1, count: 2, wait: 25)
|
||||
expect(chat_page.footer).to have_unread_dms("2")
|
||||
end
|
||||
|
||||
it "reorders channels" do
|
||||
|
@ -223,18 +211,12 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
|
|||
context "when messages are created" do
|
||||
it "correctly renders notifications" do
|
||||
visit("/chat/channels")
|
||||
|
||||
create_message(channel_1, user: user_1)
|
||||
|
||||
expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator", text: "")
|
||||
expect(channels_index_page).to have_unread_channel(channel_1)
|
||||
|
||||
visit("/chat/direct-messages")
|
||||
|
||||
create_message(dm_channel_1, user: user_1)
|
||||
|
||||
expect(channels_index_page).to have_unread_channel(dm_channel_1)
|
||||
expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator", text: "1")
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
@ -38,10 +38,10 @@ RSpec.describe "Navigation", type: :system do
|
|||
end
|
||||
end
|
||||
|
||||
context "when clicking chat icon on mobile and is viewing channel" do
|
||||
context "when clicking back button on mobile and is viewing channel" do
|
||||
it "navigates to channels tab", mobile: true do
|
||||
chat_page.visit_channel(category_channel_2)
|
||||
chat_page.open_from_header
|
||||
chat_page.back_to_channels_list
|
||||
|
||||
expect(page).to have_current_path("/chat/channels")
|
||||
end
|
||||
|
|
|
@ -11,6 +11,10 @@ module PageObjects
|
|||
@sidebar ||= PageObjects::Components::Chat::Sidebar.new
|
||||
end
|
||||
|
||||
def footer
|
||||
@footer ||= PageObjects::Components::Chat::Footer.new
|
||||
end
|
||||
|
||||
def prefers_full_page
|
||||
page.execute_script(
|
||||
"window.localStorage.setItem('discourse_chat_preferred_mode', '\"FULL_PAGE_CHAT\"');",
|
||||
|
@ -33,6 +37,11 @@ module PageObjects
|
|||
has_no_css?("html.has-chat")
|
||||
end
|
||||
|
||||
def back_to_channels_list
|
||||
find(".d-icon.d-icon-chevron-left").click
|
||||
has_css?("html.has-chat")
|
||||
end
|
||||
|
||||
def has_header_href?(href)
|
||||
find(".chat-header-icon").has_link?(href: href)
|
||||
end
|
||||
|
|
|
@ -0,0 +1,17 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
module PageObjects
|
||||
module Components
|
||||
module Chat
|
||||
class Footer < PageObjects::Components::Base
|
||||
def has_unread_channels?
|
||||
has_css?(".c-footer #c-footer-channels .c-unread-indicator")
|
||||
end
|
||||
|
||||
def has_unread_dms?(text)
|
||||
has_css?(".c-footer #c-footer-direct-messages .c-unread-indicator", text: text)
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
|
@ -1,4 +1,5 @@
|
|||
import { render } from "@ember/test-helpers";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { render, settled } from "@ember/test-helpers";
|
||||
import { module, test } from "qunit";
|
||||
import sinon from "sinon";
|
||||
import { forceMobile } from "discourse/lib/mobile";
|
||||
|
@ -43,16 +44,30 @@ module("Discourse Chat | Component | chat-header-icon", function (hooks) {
|
|||
});
|
||||
|
||||
test("mobile", async function (assert) {
|
||||
const testState = new (class {
|
||||
@tracked isActive = false;
|
||||
})();
|
||||
|
||||
forceMobile();
|
||||
|
||||
await render(<template><Icon /></template>);
|
||||
await render(
|
||||
<template><Icon @isActive={{testState.isActive}} /></template>
|
||||
);
|
||||
|
||||
assert
|
||||
.dom(".icon.btn-flat")
|
||||
.hasAttribute("title", i18n("chat.title_capitalized"))
|
||||
.hasAttribute("href", "/chat");
|
||||
|
||||
assert.dom(".d-icon-d-chat").exists();
|
||||
assert
|
||||
.dom(".d-icon-d-chat")
|
||||
.exists("chat icon is rendered if chat is inactive");
|
||||
|
||||
testState.isActive = true;
|
||||
await settled();
|
||||
assert
|
||||
.dom(".d-icon-d-chat")
|
||||
.doesNotExist("chat icon is not rendered if chat is active");
|
||||
});
|
||||
|
||||
test("full page - with unread", async function (assert) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue