FEATURE: chat header redesign on mobile (#24938)
This change simplifies the layout of our header when chat is open on mobile. The search icon and hamburger menu icons are also hidden and the Discourse logo is replaced by a ← Forum link to make it easier to continue where you left off within the forum (prior to this update the user could only go back to the forum index page).
This commit is contained in:
David Battersby
GitHub
parent
b456320880
commit
67d736a045
|
|
@ -15,7 +15,7 @@ createWidget("header-contents", {
|
|||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{home-logo attrs=attrs}}
|
||||
{{home-logo-wrapper-outlet attrs=attrs}}
|
||||
|
||||
{{#if attrs.topic}}
|
||||
{{header-topic-info attrs=attrs}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import { hbs } from "ember-cli-htmlbars";
|
||||
import { registerWidgetShim } from "discourse/widgets/render-glimmer";
|
||||
|
||||
registerWidgetShim(
|
||||
"home-logo-wrapper-outlet",
|
||||
"div.home-logo-wrapper-outlet",
|
||||
hbs`<PluginOutlet @name="home-logo-wrapper"><MountWidget @widget="home-logo" @attrs={{@data}} @args={{hash minimized=@data.topic}} /></PluginOutlet>`
|
||||
);
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { LinkTo } from "@ember/routing";
|
||||
import { inject as service } from "@ember/service";
|
||||
import icon from "discourse-common/helpers/d-icon";
|
||||
import getURL from "discourse-common/lib/get-url";
|
||||
import I18n from "discourse-i18n";
|
||||
|
||||
export default class ChatHeader extends Component {
|
||||
@service site;
|
||||
@service siteSettings;
|
||||
@service router;
|
||||
|
||||
@tracked previousURL;
|
||||
|
||||
title = I18n.t("chat.back_to_forum");
|
||||
heading = I18n.t("chat.heading");
|
||||
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.router.on("routeDidChange", this, this.#updatePreviousURL);
|
||||
}
|
||||
|
||||
get shouldRender() {
|
||||
return (
|
||||
this.siteSettings.chat_enabled && this.site.mobileView && this.isChatOpen
|
||||
);
|
||||
}
|
||||
|
||||
willDestroy() {
|
||||
super.willDestroy(...arguments);
|
||||
this.router.off("routeDidChange", this, this.#updatePreviousURL);
|
||||
}
|
||||
|
||||
get isChatOpen() {
|
||||
return this.router.currentURL.startsWith("/chat");
|
||||
}
|
||||
|
||||
get forumLink() {
|
||||
return getURL(this.previousURL ?? this.router.rootURL);
|
||||
}
|
||||
|
||||
#updatePreviousURL() {
|
||||
if (!this.isChatOpen) {
|
||||
this.previousURL = this.router.currentURL;
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if this.shouldRender}}
|
||||
<div class="c-header">
|
||||
<a
|
||||
href={{this.forumLink}}
|
||||
class="btn-flat back-to-forum"
|
||||
title={{this.title}}
|
||||
>
|
||||
{{icon "arrow-left"}}
|
||||
{{this.title}}
|
||||
</a>
|
||||
|
||||
<LinkTo @route="chat.index" class="c-heading">{{this.heading}}</LinkTo>
|
||||
</div>
|
||||
{{else}}
|
||||
{{yield}}
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<ChatHeader>{{yield}}</ChatHeader>
|
||||
|
|
@ -76,14 +76,9 @@ html.has-full-page-chat {
|
|||
|
||||
.header-dropdown-toggle.chat-header-icon {
|
||||
.icon {
|
||||
&.active {
|
||||
border: 1px solid var(--primary-low);
|
||||
background: var(--primary-very-low);
|
||||
|
||||
.d-icon {
|
||||
&.active .d-icon {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
.chat-channel-unread-indicator {
|
||||
border-color: var(--primary-very-low);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
.has-full-page-chat {
|
||||
.d-header-icons .search-dropdown,
|
||||
.d-header-icons .hamburger-dropdown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.home-logo-wrapper-outlet {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.back-to-forum {
|
||||
color: var(--primary-medium);
|
||||
font-size: var(--font-up-1);
|
||||
font-weight: var(--font-bold);
|
||||
padding: 0.8rem;
|
||||
|
||||
&:focus {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.c-heading {
|
||||
color: var(--primary);
|
||||
font-size: var(--font-up-2);
|
||||
font-weight: var(--font-bold);
|
||||
margin: 0 auto;
|
||||
padding: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -20,3 +20,4 @@
|
|||
@import "chat-navbar";
|
||||
@import "chat-thread-list-header";
|
||||
@import "chat-user-threads";
|
||||
@import "chat-header";
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ en:
|
|||
chat:
|
||||
text_copied: Text copied to clipboard
|
||||
link_copied: Link copied to clipboard
|
||||
back_to_forum: "Forum"
|
||||
deleted_chat_username: deleted
|
||||
dates:
|
||||
time_tiny: "h:mm"
|
||||
|
|
|
|||
|
|
@ -46,6 +46,33 @@ RSpec.describe "Navigation", type: :system do
|
|||
end
|
||||
end
|
||||
|
||||
context "when clicking chat icon on mobile" do
|
||||
it "has the chat title with link to chat index", mobile: true do
|
||||
visit("/")
|
||||
chat_page.open_from_header
|
||||
|
||||
expect(page).to have_title(I18n.t("js.chat.heading"))
|
||||
expect(page).to have_css("a.c-heading[href='#{chat_path}']")
|
||||
end
|
||||
|
||||
it "has the back to forum link", mobile: true do
|
||||
visit("/")
|
||||
find("a[href='#{topic.relative_url}']").click
|
||||
|
||||
chat_page.open_from_header
|
||||
|
||||
expect(page).to have_css(".back-to-forum[href='#{topic.relative_url}']")
|
||||
end
|
||||
|
||||
it "hides the search icon and hamburger icon", mobile: true do
|
||||
visit("/")
|
||||
chat_page.open_from_header
|
||||
|
||||
expect(page).to have_no_css(".search-dropdown")
|
||||
expect(page).to have_no_css(".hamburger-dropdown")
|
||||
end
|
||||
end
|
||||
|
||||
context "when visiting /chat" do
|
||||
it "opens full page" do
|
||||
chat_page.open
|
||||
|
|
|
|||
Loading…
Reference in New Issue