diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-full-page-header.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-full-page-header.hbs index e8741914332..c987a43933d 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-full-page-header.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-full-page-header.hbs @@ -35,7 +35,7 @@ {{/if}} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread/header-unread-indicator.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/thread/header-unread-indicator.hbs index 05283d38870..d29401a549c 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/thread/header-unread-indicator.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/thread/header-unread-indicator.hbs @@ -4,10 +4,8 @@ aria-label={{i18n "chat.unread_threads_count" count=this.unreadCountLabel}} title={{i18n "chat.unread_threads_count" count=this.unreadCountLabel}} > -
-
{{this.unreadCountLabel}}
-
+
{{this.unreadCountLabel}}
{{/if}} \ No newline at end of file diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread/list-item-unread-indicator.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/thread/list-item-unread-indicator.hbs index 8145e292658..3df74276577 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/thread/list-item-unread-indicator.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/thread/list-item-unread-indicator.hbs @@ -1,9 +1,7 @@ {{#if this.showUnreadIndicator}}
-
-
{{this.unreadCountLabel}}
-
+
{{this.unreadCountLabel}}
{{/if}} \ No newline at end of file diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread/threads-list-button.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/thread/threads-list-button.hbs index fd0ef325d75..0c0182492b1 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat/thread/threads-list-button.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat/thread/threads-list-button.hbs @@ -4,7 +4,7 @@ title={{i18n "chat.threads.list"}} class={{concat-class "chat-threads-list-button btn btn-flat" - (if @channel.unreadThreadCount "-has-unreads") + (if @channel.unreadThreadCount "has-unreads") }} > {{d-icon "discourse-threads"}} diff --git a/plugins/chat/assets/stylesheets/common/base-common.scss b/plugins/chat/assets/stylesheets/common/base-common.scss index ba498a8dd26..5e9aa0c097b 100644 --- a/plugins/chat/assets/stylesheets/common/base-common.scss +++ b/plugins/chat/assets/stylesheets/common/base-common.scss @@ -260,120 +260,6 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat { } } -.chat-channel { - display: flex; - flex-direction: column; - width: 100%; - min-height: 1px; - position: relative; - overflow: hidden; - - .open-drawer-btn { - color: var(--primary-low-mid); - - &:visited { - color: var(--primary-low-mid); - } - - &:hover { - color: var(--primary); - } - - > * { - pointer-events: none; - } - } - - .chat-messages-scroll { - flex-grow: 1; - overflow-y: scroll; - overscroll-behavior: contain; - display: flex; - flex-direction: column-reverse; - z-index: 1; - margin: 0 1px 0 0; - will-change: transform; - @include chat-scrollbar(); - - .join-channel-btn.in-float { - position: absolute; - transform: translateX(-50%); - left: 50%; - top: 10px; - z-index: 10; - } - - .all-loaded-message { - text-align: center; - color: var(--primary-medium); - font-size: var(--font-down-1); - padding: 0.5em 0.25em 0.25em; - } - } - - .scroll-stick-wrap { - display: flex; - justify-content: center; - margin: 0 1rem; - position: relative; - } - - .chat-scroll-to-bottom { - align-items: center; - justify-content: center; - position: absolute; - z-index: 1; - flex-direction: column; - bottom: -25px; - background: none; - opacity: 0; - transition: opacity 0.25s ease, transform 0.5s ease; - transform: scale(0.1); - padding: 0; - - > * { - pointer-events: none; - } - - &:hover, - &:active, - &:focus { - background: none !important; - } - - &.visible { - transform: translateY(-32px) scale(1); - opacity: 0.8; - } - - &__arrow { - display: flex; - background: var(--primary-medium); - border-radius: 100%; - align-items: center; - justify-content: center; - height: 32px; - width: 32px; - position: relative; - - .d-icon { - color: var(--secondary); - margin-left: 1px; // "fixes" the 1px svg shift - } - } - - &:hover { - opacity: 1; - - .chat-scroll-to-bottom__arrow { - .d-icon { - color: var(--secondary); - } - } - } - } -} - .topic-title-chat-icon { display: inline-block; * { @@ -456,6 +342,7 @@ body.has-full-page-chat { align-items: stretch; display: flex; flex-grow: 1; + gap: 0.5rem; font-size: var(--font-up-1); justify-content: flex-end; } diff --git a/plugins/chat/assets/stylesheets/common/chat-channel.scss b/plugins/chat/assets/stylesheets/common/chat-channel.scss index c44031ab882..9bbbea68913 100644 --- a/plugins/chat/assets/stylesheets/common/chat-channel.scss +++ b/plugins/chat/assets/stylesheets/common/chat-channel.scss @@ -1,34 +1,14 @@ -@mixin chat-channel-header-button { - color: var(--primary-low-mid); - - &:visited { - color: var(--primary-low-mid); - } - - &:hover { - color: var(--primary); - } - - > * { - pointer-events: none; - } -} - .chat-channel { display: flex; flex-direction: column; + width: 100%; min-height: 1px; position: relative; overflow: hidden; grid-area: main; - width: 100%; min-width: 250px; @include chat-height; - .open-drawer-btn { - @include chat-channel-header-button; - } - .chat-messages-scroll { flex-grow: 1; overflow-y: scroll; @@ -91,18 +71,6 @@ opacity: 0.8; } - &__text { - color: var(--secondary); - padding: 0.5rem; - margin-bottom: 0.5rem; - background: var(--primary-medium); - border-radius: 3px; - text-align: center; - font-size: var(--font-down-1); - bottom: 40px; - position: absolute; - } - &__arrow { display: flex; background: var(--primary-medium); diff --git a/plugins/chat/assets/stylesheets/common/chat-drawer.scss b/plugins/chat/assets/stylesheets/common/chat-drawer.scss index 00f15c13a16..493765f7a26 100644 --- a/plugins/chat/assets/stylesheets/common/chat-drawer.scss +++ b/plugins/chat/assets/stylesheets/common/chat-drawer.scss @@ -249,7 +249,7 @@ a.chat-drawer-header__title { } } - &__thread-list-btn.-has-unreads { + &__thread-list-btn.has-unreads { margin-right: 0.5rem; } } diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-header-button.scss b/plugins/chat/assets/stylesheets/common/chat-thread-header-button.scss deleted file mode 100644 index 89887dcfb64..00000000000 --- a/plugins/chat/assets/stylesheets/common/chat-thread-header-button.scss +++ /dev/null @@ -1,37 +0,0 @@ -.chat-threads-list-button { - position: relative; - display: flex; - align-items: center; - border-radius: 5px; - padding: 0.5rem 0; - - @include chat-channel-header-button; - - &.-has-unreads { - .d-icon { - color: var(--tertiary-med-or-tertiary); - } - - &:hover { - .d-icon { - color: var(--tertiary-med-or-tertiary); - } - } - } - - .d-icon { - margin-right: 0; - } - - &:hover { - .discourse-touch & { - background: none !important; - } - } - - &:active { - .discourse-touch & { - background: var(--secondary-very-high) !important; - } - } -} diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-header-buttons.scss b/plugins/chat/assets/stylesheets/common/chat-thread-header-buttons.scss new file mode 100644 index 00000000000..688b4dd99af --- /dev/null +++ b/plugins/chat/assets/stylesheets/common/chat-thread-header-buttons.scss @@ -0,0 +1,66 @@ +@mixin chat-channel-header-button { + color: var(--primary-low-mid); + padding: 0.25em 0.4em; + + .d-icon { + color: inherit; + } + + &:visited { + color: var(--primary-low-mid); + } + + &:hover { + color: var(--primary-medium); + background: var(--primary-very-low); + border-radius: 5px; + + &:hover { + .d-icon { + color: inherit; + } + } + } + + > * { + pointer-events: none; + } +} + +.chat-channel { + .chat-threads-list-button { + @include chat-channel-header-button; + position: relative; + display: flex; + align-items: center; + + &.has-unreads { + color: var(--tertiary-med-or-tertiary); + gap: 0.25rem; + + &:hover { + color: var(--tertiary-hover); + } + } + + .d-icon { + margin-right: 0; + } + + &:hover { + .discourse-touch & { + background: none !important; + } + } + + &:active { + .discourse-touch & { + background: var(--secondary-very-high) !important; + } + } + } + + .open-drawer-btn { + @include chat-channel-header-button; + } +} diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss index 1781edcb778..2d53defad2e 100644 --- a/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss +++ b/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss @@ -1,22 +1,18 @@ @mixin chat-thread-unread-indicator { - color: var(--tertiary); - padding-left: 0.25rem; - - &__number-wrap { - background-color: var(--tertiary-med-or-tertiary); - display: flex; - padding: 0.25rem 0.5rem; - border-radius: 20px; - width: 35px; - box-sizing: border-box; - flex-direction: column; - align-items: center; - } + display: flex; + align-items: center; + justify-content: center; + width: auto; + min-width: 14px; + padding: 3px; + font-size: 0.8rem; + border-radius: 1em; + background: var(--tertiary-med-or-tertiary); &__number { - color: var(--secondary); - font-size: var(--font-down-3); font-weight: bold; + color: var(--secondary); + line-height: 1; } } diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss index 8113a62cce1..2ed9f0aa6cd 100644 --- a/plugins/chat/assets/stylesheets/common/index.scss +++ b/plugins/chat/assets/stylesheets/common/index.scss @@ -51,6 +51,6 @@ @import "chat-thread-list-item"; @import "chat-threads-list"; @import "chat-composer-separator"; -@import "chat-thread-header-button"; +@import "chat-thread-header-buttons"; @import "chat-thread-header"; @import "chat-thread-unread-indicator"; diff --git a/plugins/chat/spec/system/page_objects/chat/chat_channel.rb b/plugins/chat/spec/system/page_objects/chat/chat_channel.rb index f83dcd91a60..8a6ebc24a2e 100644 --- a/plugins/chat/spec/system/page_objects/chat/chat_channel.rb +++ b/plugins/chat/spec/system/page_objects/chat/chat_channel.rb @@ -227,15 +227,15 @@ module PageObjects end def has_unread_thread_indicator?(count:) - has_css?("#{thread_list_button_selector}.-has-unreads") && + has_css?("#{thread_list_button_selector}.has-unreads") && has_css?( - ".chat-thread-header-unread-indicator .chat-thread-header-unread-indicator__number-wrap", + ".chat-thread-header-unread-indicator .chat-thread-header-unread-indicator__number", text: count.to_s, ) end def has_no_unread_thread_indicator? - has_no_css?("#{thread_list_button_selector}.-has-unreads") + has_no_css?("#{thread_list_button_selector}.has-unreads") end def thread_list_button_selector diff --git a/plugins/chat/spec/system/page_objects/chat/chat_thread.rb b/plugins/chat/spec/system/page_objects/chat/chat_thread.rb index b03d8651255..158a147716b 100644 --- a/plugins/chat/spec/system/page_objects/chat/chat_thread.rb +++ b/plugins/chat/spec/system/page_objects/chat/chat_thread.rb @@ -34,7 +34,7 @@ module PageObjects def has_unread_list_indicator?(count:) has_css?( - ".chat-thread__back-to-list .chat-thread-header-unread-indicator .chat-thread-header-unread-indicator__number-wrap", + ".chat-thread__back-to-list .chat-thread-header-unread-indicator .chat-thread-header-unread-indicator__number", text: count.to_s, ) 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 92a921a9370..f0816217482 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 @@ -56,15 +56,15 @@ module PageObjects end def has_unread_thread_indicator?(count:) - has_css?("#{thread_list_button_selector}.-has-unreads") && + has_css?("#{thread_list_button_selector}.has-unreads") && has_css?( - ".chat-thread-header-unread-indicator .chat-thread-header-unread-indicator__number-wrap", + ".chat-thread-header-unread-indicator .chat-thread-header-unread-indicator__number", text: count.to_s, ) end def has_no_unread_thread_indicator? - has_no_css?("#{thread_list_button_selector}.-has-unreads") + has_no_css?("#{thread_list_button_selector}.has-unreads") end end end