From 7da33ad6ba2e4ca07f92a63e92cac916bfa9a69d Mon Sep 17 00:00:00 2001 From: chapoi <101828855+chapoi@users.noreply.github.com> Date: Wed, 13 Dec 2023 15:10:52 +0200 Subject: [PATCH] UX: user threads styling tweaks --- .../discourse/components/channels-list.gjs | 25 ++++---- .../components/user-threads/index.gjs | 48 ++++++--------- .../common/chat-unread-indicator.scss | 2 +- .../common/chat-user-threads-row.scss | 32 ---------- .../stylesheets/common/chat-user-threads.scss | 60 +++++++++++++------ .../chat/assets/stylesheets/common/index.scss | 1 - .../desktop/chat-index-drawer.scss | 12 ++++ .../assets/stylesheets/mobile/chat-index.scss | 18 ++++++ .../stylesheets/mobile/chat-user-threads.scss | 5 ++ .../chat/assets/stylesheets/mobile/index.scss | 1 + .../system/page_objects/chat/user_threads.rb | 6 +- .../page_objects/chat_drawer/chat_drawer.rb | 8 +-- 12 files changed, 113 insertions(+), 105 deletions(-) delete mode 100644 plugins/chat/assets/stylesheets/common/chat-user-threads-row.scss create mode 100644 plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss diff --git a/plugins/chat/assets/javascripts/discourse/components/channels-list.gjs b/plugins/chat/assets/javascripts/discourse/components/channels-list.gjs index ae12313e11c..b8db884bc28 100644 --- a/plugins/chat/assets/javascripts/discourse/components/channels-list.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/channels-list.gjs @@ -166,23 +166,18 @@ export default class ChannelsList extends Component { {{didInsert this.computeHasScrollbar}} {{onResize this.computeResizedEntries}} > -
- -
- - {{dIcon "discourse-threads" class="chat__user-threads-row__icon"}} - {{i18n "chat.my_threads.title"}} - - - {{#if this.hasUnreadThreads}} -
-
 
-
- {{/if}} + + + {{dIcon "discourse-threads" class="chat-user-threads__icon"}} + {{i18n "chat.my_threads.title"}} + + {{#if this.hasUnreadThreads}} +
+
 
- -
+ {{/if}} + {{#if this.displayPublicChannels}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs b/plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs index b69acdd2a34..b3061b6314f 100644 --- a/plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs +++ b/plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs @@ -71,39 +71,29 @@ export default class UserThreads extends Component { } } diff --git a/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss index 9d57b336193..a59e62a0c6b 100644 --- a/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss +++ b/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss @@ -22,6 +22,6 @@ } } -.chat__unread-indicator { +.c-unread-indicator { @include chat-unread-indicator; } diff --git a/plugins/chat/assets/stylesheets/common/chat-user-threads-row.scss b/plugins/chat/assets/stylesheets/common/chat-user-threads-row.scss deleted file mode 100644 index c0e17c87ceb..00000000000 --- a/plugins/chat/assets/stylesheets/common/chat-user-threads-row.scss +++ /dev/null @@ -1,32 +0,0 @@ -.chat__user-threads-row { - display: flex; - align-items: center; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - - .chat__unread-indicator { - width: 8px; - height: 8px; - } - - &-container { - height: 3.6em; - padding: 0 0.5rem; - margin: 0.5rem 0rem 0 0.5rem; - box-sizing: border-box; - display: flex; - - &:hover { - background: var(--primary-low); - } - - .chat__user-threads-row__icon { - color: var(--primary); - } - .chat__user-threads-row__title { - color: var(--primary); - } - } -} diff --git a/plugins/chat/assets/stylesheets/common/chat-user-threads.scss b/plugins/chat/assets/stylesheets/common/chat-user-threads.scss index f38c1118a09..884ae900d09 100644 --- a/plugins/chat/assets/stylesheets/common/chat-user-threads.scss +++ b/plugins/chat/assets/stylesheets/common/chat-user-threads.scss @@ -1,23 +1,45 @@ -.chat__user-threads__thread-indicator { - padding-top: 1rem; - - .chat-message-thread-indicator { - margin: 0; - } -} - -.chat__user-threads__title { - .chat-channel-title__name { - font-size: var(--font-down-1); - color: var(--primary-medium); - } -} - -.chat__user-threads__thread { - padding-bottom: 1rem; +.c-user-thread { + padding-block: 1.25rem; + margin-inline: 1rem; border-bottom: 1px solid var(--primary-low); - &-container { - padding: 1rem 1rem 0 1rem; + .c-unread-indicator { + width: 8px; + height: 8px; + align-self: flex-start; + } + + .chat-message-thread-indicator { + margin-left: 0; + margin-top: 1rem; + &:hover { + box-shadow: none; + } + } + + .chat__thread-title__name { + font-size: var(--font-up-1-rem); + + &:hover { + color: var(--primary-very-high); + } + } + + .chat-channel-title__name { + color: var(--primary-high); + font-size: var(--font-down-1); + } +} + +//sidebar +#sidebar-section-content-user-threads { + padding-bottom: 0.5rem; + .sidebar-section-link-wrapper:hover { + .sidebar-section-link-prefix { + color: var(--primary-very-high); + } + } + .sidebar-section-link-content-text { + color: var(--d-sidebar-header-color); } } diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss index 337cd189f72..96e12565c7a 100644 --- a/plugins/chat/assets/stylesheets/common/index.scss +++ b/plugins/chat/assets/stylesheets/common/index.scss @@ -67,5 +67,4 @@ @import "chat-channel-settings"; @import "chat-user-threads"; @import "chat-navbar"; -@import "chat-user-threads-row"; @import "chat-thread-title"; diff --git a/plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss b/plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss index 809821f2e31..3b53646814f 100644 --- a/plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss +++ b/plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss @@ -24,6 +24,18 @@ margin-top: 0.25rem; } } + + &.--threads { + margin-top: 0.25rem; + .c-unread-indicator { + width: 8px; + height: 8px; + } + .chat-channel-title { + gap: 0.5rem; + color: var(--primary); + } + } } .toggle-channel-membership-button.-leave { diff --git a/plugins/chat/assets/stylesheets/mobile/chat-index.scss b/plugins/chat/assets/stylesheets/mobile/chat-index.scss index 7bdc6681389..75e36509636 100644 --- a/plugins/chat/assets/stylesheets/mobile/chat-index.scss +++ b/plugins/chat/assets/stylesheets/mobile/chat-index.scss @@ -24,6 +24,24 @@ } } + .chat-channel-row { + &.--threads { + color: var(--primary); + padding-inline: 1.5rem; + font-size: var(--font-up-1-rem); + border: 0; + + .chat-channel-title { + gap: 0.5rem; + } + + .c-unread-indicator { + width: 8px; + height: 8px; + } + } + } + .chat-user-avatar { + .chat-channel-title__usernames { margin-left: 1rem; diff --git a/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss b/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss new file mode 100644 index 00000000000..c0f25ba704c --- /dev/null +++ b/plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss @@ -0,0 +1,5 @@ +.chat-user-threads { + .chat__thread-title { + justify-content: space-between; + } +} diff --git a/plugins/chat/assets/stylesheets/mobile/index.scss b/plugins/chat/assets/stylesheets/mobile/index.scss index edf7b33a568..2b704dc518d 100644 --- a/plugins/chat/assets/stylesheets/mobile/index.scss +++ b/plugins/chat/assets/stylesheets/mobile/index.scss @@ -18,3 +18,4 @@ @import "chat-form"; @import "chat-modal-new-message"; @import "chat-thread-list-header"; +@import "chat-user-threads"; diff --git a/plugins/chat/spec/system/page_objects/chat/user_threads.rb b/plugins/chat/spec/system/page_objects/chat/user_threads.rb index c98dbc7e325..1d2841caf7d 100644 --- a/plugins/chat/spec/system/page_objects/chat/user_threads.rb +++ b/plugins/chat/spec/system/page_objects/chat/user_threads.rb @@ -5,13 +5,11 @@ module PageObjects class UserThreads < PageObjects::Pages::Base def has_threads?(count: nil) has_no_css?(".spinner") - has_css?(".chat__user-threads__thread-container", count: count) + has_css?(".c-user-thread", count: count) end def open_thread(thread) - find( - ".chat__user-threads__thread-container[data-id='#{thread.id}'] .chat__thread-title__name", - ).click + find(".c-user-thread[data-id='#{thread.id}'] .chat__thread-title__name").click end end end diff --git a/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb b/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb index a3dca65eb2b..8c40b9d82a9 100644 --- a/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb +++ b/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb @@ -38,19 +38,19 @@ module PageObjects end def has_user_threads_section? - has_css?(".chat__user-threads-row-container[href='/chat/threads']") + has_css?(".chat-channel-row.--threads[href='/chat/threads']") end def has_unread_user_threads? - has_css?(".chat__user-threads-row .chat__unread-indicator") + has_css?(".chat-channel-row.--threads .c-unread-indicator") end def has_no_unread_user_threads? - has_no_css?(".chat__user-threads-row .chat__unread-indicator") + has_no_css?(".chat-channel-row.--threads .c-unread-indicator") end def click_user_threads - find(".chat__user-threads-row").click + find(".chat-channel-row.--threads").click end def maximize