From 67d736a045e11735cf9eebae0f7bad506e564bf6 Mon Sep 17 00:00:00 2001 From: David Battersby Date: Tue, 26 Dec 2023 17:36:26 +0800 Subject: [PATCH] FEATURE: chat header redesign on mobile (#24938) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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). --- .../discourse/app/widgets/header-contents.js | 2 +- .../app/widgets/home-logo-wrapper-outlet.js | 8 +++ .../discourse/components/chat-header.gjs | 67 +++++++++++++++++++ .../chat-header-connector.hbs | 1 + .../stylesheets/mobile/base-mobile.scss | 9 +-- .../stylesheets/mobile/chat-header.scss | 35 ++++++++++ .../chat/assets/stylesheets/mobile/index.scss | 1 + plugins/chat/config/locales/client.en.yml | 1 + plugins/chat/spec/system/navigation_spec.rb | 27 ++++++++ 9 files changed, 143 insertions(+), 8 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/widgets/home-logo-wrapper-outlet.js create mode 100644 plugins/chat/assets/javascripts/discourse/components/chat-header.gjs create mode 100644 plugins/chat/assets/javascripts/discourse/connectors/home-logo-wrapper/chat-header-connector.hbs create mode 100644 plugins/chat/assets/stylesheets/mobile/chat-header.scss diff --git a/app/assets/javascripts/discourse/app/widgets/header-contents.js b/app/assets/javascripts/discourse/app/widgets/header-contents.js index 18e53eb47d0..385903f1956 100644 --- a/app/assets/javascripts/discourse/app/widgets/header-contents.js +++ b/app/assets/javascripts/discourse/app/widgets/header-contents.js @@ -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}} diff --git a/app/assets/javascripts/discourse/app/widgets/home-logo-wrapper-outlet.js b/app/assets/javascripts/discourse/app/widgets/home-logo-wrapper-outlet.js new file mode 100644 index 00000000000..d82ba7e405b --- /dev/null +++ b/app/assets/javascripts/discourse/app/widgets/home-logo-wrapper-outlet.js @@ -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`` +); diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-header.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-header.gjs new file mode 100644 index 00000000000..f823995f17e --- /dev/null +++ b/plugins/chat/assets/javascripts/discourse/components/chat-header.gjs @@ -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; + } + } + + +} diff --git a/plugins/chat/assets/javascripts/discourse/connectors/home-logo-wrapper/chat-header-connector.hbs b/plugins/chat/assets/javascripts/discourse/connectors/home-logo-wrapper/chat-header-connector.hbs new file mode 100644 index 00000000000..fa8c661943c --- /dev/null +++ b/plugins/chat/assets/javascripts/discourse/connectors/home-logo-wrapper/chat-header-connector.hbs @@ -0,0 +1 @@ +{{yield}} \ No newline at end of file diff --git a/plugins/chat/assets/stylesheets/mobile/base-mobile.scss b/plugins/chat/assets/stylesheets/mobile/base-mobile.scss index b515b122cd9..05cfaaa8f58 100644 --- a/plugins/chat/assets/stylesheets/mobile/base-mobile.scss +++ b/plugins/chat/assets/stylesheets/mobile/base-mobile.scss @@ -76,13 +76,8 @@ 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 { - color: var(--primary-medium); - } + &.active .d-icon { + color: var(--primary-medium); } .chat-channel-unread-indicator { border-color: var(--primary-very-low); diff --git a/plugins/chat/assets/stylesheets/mobile/chat-header.scss b/plugins/chat/assets/stylesheets/mobile/chat-header.scss new file mode 100644 index 00000000000..ce34f4587d6 --- /dev/null +++ b/plugins/chat/assets/stylesheets/mobile/chat-header.scss @@ -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; + } + } +} diff --git a/plugins/chat/assets/stylesheets/mobile/index.scss b/plugins/chat/assets/stylesheets/mobile/index.scss index 81b8998da14..212dd415770 100644 --- a/plugins/chat/assets/stylesheets/mobile/index.scss +++ b/plugins/chat/assets/stylesheets/mobile/index.scss @@ -20,3 +20,4 @@ @import "chat-navbar"; @import "chat-thread-list-header"; @import "chat-user-threads"; +@import "chat-header"; diff --git a/plugins/chat/config/locales/client.en.yml b/plugins/chat/config/locales/client.en.yml index d9d6b8b7490..71315d8a513 100644 --- a/plugins/chat/config/locales/client.en.yml +++ b/plugins/chat/config/locales/client.en.yml @@ -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" diff --git a/plugins/chat/spec/system/navigation_spec.rb b/plugins/chat/spec/system/navigation_spec.rb index e410f0a0268..10195c09afe 100644 --- a/plugins/chat/spec/system/navigation_spec.rb +++ b/plugins/chat/spec/system/navigation_spec.rb @@ -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