diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-separator-date.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-message-separator-date.hbs index bb8e70d91a7..f824ef4b9a5 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message-separator-date.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-separator-date.hbs @@ -14,7 +14,7 @@ {{#if @message.newest}} - - + - {{i18n "chat.last_visit"}} {{/if}} diff --git a/plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message-separator-date.js b/plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message-separator-date.js index 71a19434521..480d7a57f88 100644 --- a/plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message-separator-date.js +++ b/plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message-separator-date.js @@ -16,11 +16,15 @@ export default class ChatTrackMessageSeparatorDate extends Modifier { modify(element) { this.intersectionObserver = new IntersectionObserver( - ([event]) => { - if (event.isIntersecting && event.intersectionRatio < 1) { - event.target.classList.add(IS_PINNED_CLASS); + ([entry]) => { + if ( + entry.isIntersecting && + entry.intersectionRatio < 1 && + entry.boundingClientRect.y < entry.intersectionRect.y + ) { + entry.target.classList.add(IS_PINNED_CLASS); } else { - event.target.classList.remove(IS_PINNED_CLASS); + entry.target.classList.remove(IS_PINNED_CLASS); } }, { threshold: [0, 1] } diff --git a/plugins/chat/assets/stylesheets/common/chat-message-separator.scss b/plugins/chat/assets/stylesheets/common/chat-message-separator.scss index 6c5361ff95a..380a807dbff 100644 --- a/plugins/chat/assets/stylesheets/common/chat-message-separator.scss +++ b/plugins/chat/assets/stylesheets/common/chat-message-separator.scss @@ -3,14 +3,15 @@ display: flex; &-new { + display: flex; + justify-content: center; + padding: 20px 0 20px 1em; position: relative; - padding: 20px 0; .chat-message-separator__text-container { text-align: center; position: absolute; height: 40px; - width: 100%; box-sizing: border-box; z-index: 1; top: 0; @@ -28,20 +29,22 @@ .chat-message-separator__line-container { width: 100%; + } - .chat-message-separator__line { - border-top: 1px solid var(--danger-medium); - } + .chat-message-separator__line { + border-top: 1px solid var(--danger-medium); } } &-date { + box-sizing: border-box; position: absolute; width: 100%; z-index: 2; display: flex; align-items: flex-start; justify-content: center; + padding-left: 1rem; pointer-events: none; &.with-last-visit { @@ -60,7 +63,7 @@ &.is-pinned, &.is-force-pinned { .chat-message-separator__text { - border: 1px solid var(--primary-medium); + border: 1px solid var(--secondary-high); border-radius: 3px; } @@ -70,6 +73,14 @@ } } + .chat-message-separator__last-visit { + display: flex; + } + + .chat-message-separator__last-visit-separator { + margin: 0 0.25rem; + } + .chat-message-separator__text { @include unselectable; background-color: var(--secondary); @@ -82,7 +93,7 @@ } & + .chat-message-separator__line-container { - padding: 20px 0; + padding: 20px 0 20px 1em; box-sizing: border-box; .chat-message-separator__line { diff --git a/plugins/chat/assets/stylesheets/common/common.scss b/plugins/chat/assets/stylesheets/common/common.scss index e6f8e3fbf5d..6049a756e9c 100644 --- a/plugins/chat/assets/stylesheets/common/common.scss +++ b/plugins/chat/assets/stylesheets/common/common.scss @@ -326,11 +326,13 @@ $float-height: 530px; } .scroll-stick-wrap { + display: flex; + justify-content: center; + margin: 0 1rem; position: relative; } .chat-scroll-to-bottom { - left: calc(50% - calc(32px / 2)); align-items: center; justify-content: center; position: absolute;