mirror of
https://github.com/discourse/discourse.git
synced 2024-12-02 16:24:17 +08:00
b6c5a2da08
This commit adds the thread index and individual thread in the index list unread indicators, and wires up the message bus events to mark the threads as read/unread when: 1. People send a new message in the thread 2. The user marks a thread as read There are several hacky parts and TODOs to cover before this is more functional: 1. We need to flesh out the thread scrolling and message visibility behaviour. Currently if you scroll to the end of the thread it will just mark the whole thread read unconditionally. 2. We need to send down the thread current user membership along with the last read message ID to the client and update that with read state. 3. We need to handle the sidebar unread dot for when threads are unread in the channel and clear it based on when the channel was last viewed. 4. We need to show some indicator of thread unreads on the thread indicators on original messages. 5. UI improvements to make the experience nicer and more like the actual design rather than just placeholders. But, the basic premise around incrementing/decrementing the thread overview count and showing which thread is unread in the list is working as intended.
133 lines
2.4 KiB
SCSS
133 lines
2.4 KiB
SCSS
@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;
|
|
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;
|
|
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;
|
|
}
|
|
|
|
&__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);
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|