From 22d4fbf59c61088a0b2490dfc309f42592cb5f01 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Wed, 20 Dec 2023 17:24:10 +0200
Subject: [PATCH] UX: chat navbar > alignments part 2 (#24985)
* UX: chat navbar > alignments part 2
* Change copy to be consistent My threads
* Dont show back button on full page desktop
---
.../components/chat/drawer-routes/threads.gjs | 2 +-
.../components/chat/routes/threads.gjs | 7 +++++-
.../components/chat/thread-list/header.gjs | 12 ++++++----
.../stylesheets/common/chat-navbar.scss | 23 ++++++++++++++-----
.../stylesheets/mobile/chat-navbar.scss | 5 ++++
.../chat/assets/stylesheets/mobile/index.scss | 1 +
6 files changed, 37 insertions(+), 13 deletions(-)
create mode 100644 plugins/chat/assets/stylesheets/mobile/chat-navbar.scss
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs
index ef12da41282..019c5eb6af8 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs
@@ -15,7 +15,7 @@ export default class ChatDrawerRoutesThreads extends Component {
<Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
<navbar.BackButton @title={{this.backButtonTitle}} />
<navbar.Title
- @title={{i18n "chat.threads.list"}}
+ @title={{i18n "chat.my_threads.title"}}
@icon="discourse-threads"
as |title|
>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/threads.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/threads.gjs
index 1770de239fa..8e8dbf9e5d3 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/threads.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/threads.gjs
@@ -1,13 +1,18 @@
import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
import i18n from "discourse-common/helpers/i18n";
import Navbar from "discourse/plugins/chat/discourse/components/chat/navbar";
import UserThreads from "discourse/plugins/chat/discourse/components/user-threads";
export default class ChatRoutesThreads extends Component {
+ @service site;
+
<template>
<div class="c-routes-threads">
<Navbar as |navbar|>
- <navbar.BackButton />
+ {{#if this.site.mobileView}}
+ <navbar.BackButton />
+ {{/if}}
<navbar.Title
@title={{i18n "chat.my_threads.title"}}
@icon="discourse-threads"
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/header.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/header.gjs
index 9362bb8ee0b..44ce849a0a6 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/header.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/header.gjs
@@ -24,11 +24,13 @@ export default class ChatThreadListHeader extends Component {
<template>
<Navbar as |navbar|>
- <navbar.BackButton
- @route="chat.channel"
- @routeModels={{@channel.routeModels}}
- @title={{i18n "chat.return_to_channel"}}
- />
+ {{#if this.site.mobileView}}
+ <navbar.BackButton
+ @route="chat.channel"
+ @routeModels={{@channel.routeModels}}
+ @title={{i18n "chat.return_to_channel"}}
+ />
+ {{/if}}
<navbar.Title @title={{this.title}} @icon="discourse-threads" />
diff --git a/plugins/chat/assets/stylesheets/common/chat-navbar.scss b/plugins/chat/assets/stylesheets/common/chat-navbar.scss
index e274e96db96..fe1a1d6297e 100644
--- a/plugins/chat/assets/stylesheets/common/chat-navbar.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-navbar.scss
@@ -12,12 +12,12 @@
box-sizing: border-box;
display: flex;
z-index: z("composer", "content") - 1;
+ padding-inline: 1rem;
- .full-page & {
- padding-inline: 1rem;
- }
- .chat-drawer & {
- padding-inline: 0.25rem;
+ .chat-drawer &,
+ .c-routes-channel-thread &,
+ .c-routes-channel-info & {
+ padding-inline: 0;
}
&.-clickable {
@@ -37,7 +37,18 @@
.c-navbar__title {
@include ellipsis();
font-weight: 700;
- padding-left: 0.75rem;
+
+ .c-routes-channel-threads & {
+ padding-left: 0;
+ }
+
+ .chat-drawer & {
+ padding-left: 1rem;
+ }
+ }
+
+ .c-navbar__back-button ~ .c-navbar__title {
+ padding-left: 0;
}
.c-navbar__sub-title {
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-navbar.scss b/plugins/chat/assets/stylesheets/mobile/chat-navbar.scss
new file mode 100644
index 00000000000..2a90d0496e4
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/mobile/chat-navbar.scss
@@ -0,0 +1,5 @@
+.c-navbar {
+ &-container {
+ padding-inline: 0.25rem;
+ }
+}
diff --git a/plugins/chat/assets/stylesheets/mobile/index.scss b/plugins/chat/assets/stylesheets/mobile/index.scss
index 2b704dc518d..81b8998da14 100644
--- a/plugins/chat/assets/stylesheets/mobile/index.scss
+++ b/plugins/chat/assets/stylesheets/mobile/index.scss
@@ -17,5 +17,6 @@
@import "chat-channel-settings";
@import "chat-form";
@import "chat-modal-new-message";
+@import "chat-navbar";
@import "chat-thread-list-header";
@import "chat-user-threads";