mirror of
https://github.com/discourse/discourse.git
synced 2024-12-12 16:13:54 +08:00
2d567cee26
Prior to this commit we were loading a large number of thread messages without any pagination. This commit attempts to fix this and also improves the following points: - code sharing between channels and threads: Attempts to reuse/share the code use in channels for threads. To make it possible part of this code has been extracted in dedicated helpers or has been improved to reduce the duplication needed. Examples of extracted helpers: - `stackingContextFix`: the ios hack for rendering bug when momentum scrolling is interrupted - `scrollListToMessage`, `scrollListToTop`, `scrollListToBottom`: a series of helper to correctly scroll to a specific position in the list of messages - better general performance of listing messages: One of the main changes which has been made is to remove the computation of visible message during scroll, it will only happen when needed (update last read for example). This constant recomputation of `message.visible` on intersection observer event while scrolling was consuming a lot of CPU time.
389 lines
7.0 KiB
SCSS
389 lines
7.0 KiB
SCSS
:root {
|
|
--message-left-width: 42px;
|
|
--full-page-border-radius: 12px;
|
|
--full-page-sidebar-width: 275px;
|
|
--channel-list-avatar-size: 30px;
|
|
--chat-header-offset: 50px;
|
|
}
|
|
|
|
// Very specific hack to ensure the contextual menu (copy/paste/...) is
|
|
// not completely over the textarea, the rules to position this menu are quite obscure
|
|
// and under DiscourseHUB the space between the textarea and the keyboard is so small that
|
|
// it sometimes prefer to appear on top of the textarea, making any gesture very complicated
|
|
html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
|
|
padding-bottom: 0.2rem;
|
|
}
|
|
|
|
.uppy-is-drag-over .chat-composer .drop-a-file {
|
|
display: flex;
|
|
position: absolute;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.75);
|
|
z-index: z("header");
|
|
&-content {
|
|
width: max-content;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 2em;
|
|
background-color: #1d1d1d;
|
|
border-radius: 0.25em;
|
|
&-images {
|
|
.d-icon {
|
|
height: 3em;
|
|
width: 3em;
|
|
color: var(--secondary-or-primary);
|
|
&:first-of-type {
|
|
transform: rotate(-5deg);
|
|
}
|
|
&:nth-of-type(2) {
|
|
height: 4em;
|
|
width: 4em;
|
|
}
|
|
&:last-of-type {
|
|
transform: rotate(5deg);
|
|
}
|
|
}
|
|
}
|
|
&-text {
|
|
margin: 1.5em 0 0 0;
|
|
font-size: var(--font-up-1);
|
|
color: var(--secondary-or-primary);
|
|
.d-icon-upload {
|
|
padding-right: 0.25em;
|
|
position: relative;
|
|
bottom: 2px;
|
|
color: var(--secondary-or-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-dropdown-toggle.chat-header-icon {
|
|
.icon {
|
|
.chat-channel-unread-indicator {
|
|
@include chat-unread-indicator;
|
|
border: 2px solid var(--header_background);
|
|
position: absolute;
|
|
top: 0;
|
|
right: 2px;
|
|
|
|
&.-urgent {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: auto;
|
|
height: 1em;
|
|
min-width: 0.6em;
|
|
padding: 0.21em 0.42em;
|
|
top: -1px;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
span.icon {
|
|
cursor: auto;
|
|
|
|
&:hover {
|
|
.d-icon {
|
|
color: var(--header_primary-low-mid);
|
|
}
|
|
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
a.icon {
|
|
&.active {
|
|
.d-icon-comment {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.chat-channel-unread-indicator {
|
|
border-color: var(--primary-low);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-messages-container {
|
|
word-wrap: break-word;
|
|
white-space: normal;
|
|
position: relative;
|
|
|
|
.chat-message-container {
|
|
display: grid;
|
|
|
|
&.-selectable {
|
|
grid-template-columns: 1.5em 1fr;
|
|
}
|
|
|
|
.chat-message-selector {
|
|
align-self: center;
|
|
justify-self: end;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.chat-time {
|
|
color: var(--primary-high);
|
|
font-size: var(--font-down-2);
|
|
}
|
|
|
|
.emoji-picker {
|
|
position: fixed;
|
|
}
|
|
|
|
&:hover {
|
|
.chat-.chat-message-react-btn {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-emoji-avatar {
|
|
width: var(--message-left-width);
|
|
align-items: center;
|
|
|
|
img {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
border: 1px solid transparent;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
|
|
.is-online & {
|
|
border: 1px solid var(--secondary);
|
|
box-shadow: 0px 0px 0px 1px var(--success);
|
|
}
|
|
}
|
|
|
|
.topic-title-chat-icon {
|
|
display: inline-block;
|
|
* {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
|
|
gap: 0;
|
|
}
|
|
|
|
body.has-full-page-chat {
|
|
.alert-error,
|
|
.alert-info,
|
|
.alert-success,
|
|
.alert-warning {
|
|
margin: 0;
|
|
border-bottom: 1px solid var(--primary-low);
|
|
}
|
|
}
|
|
|
|
.full-page-chat {
|
|
display: grid;
|
|
grid-template-columns: var(--full-page-sidebar-width) 1fr;
|
|
|
|
.chat-full-page-header {
|
|
border-top: 1px solid var(--primary-low);
|
|
border-bottom: 1px solid var(--primary-low);
|
|
background: var(--secondary);
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__back-btn {
|
|
width: 40px;
|
|
min-width: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.chat-channel-title {
|
|
.category-chat-name,
|
|
.chat-name,
|
|
.dm-usernames {
|
|
color: var(--primary);
|
|
display: inline;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.-not-following {
|
|
.chat-channel-title {
|
|
max-width: calc(100% - 50px);
|
|
}
|
|
.join-channel-btn {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-messages-scroll {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.chat-full-page-header__left-actions {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.chat-full-page-header__title {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.chat-full-page-header__right-actions {
|
|
align-items: stretch;
|
|
display: flex;
|
|
flex-grow: 1;
|
|
gap: 0.5rem;
|
|
font-size: var(--font-up-1);
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.chat-full-page-header {
|
|
box-sizing: border-box;
|
|
|
|
.chat-channel-header-details {
|
|
display: flex;
|
|
align-items: stretch;
|
|
flex: 1;
|
|
max-width: 100%;
|
|
|
|
.chat-channel-archive-status {
|
|
text-align: right;
|
|
padding-right: 1em;
|
|
}
|
|
}
|
|
|
|
.chat-channel-title {
|
|
margin: 0;
|
|
max-width: 100%;
|
|
|
|
.d-icon:not(.d-icon-lock) {
|
|
height: 1.25em;
|
|
width: 1.25em;
|
|
}
|
|
|
|
.category-chat-name,
|
|
.dm-username {
|
|
font-weight: 700;
|
|
font-size: var(--font-up-1);
|
|
line-height: var(--font-up-1);
|
|
}
|
|
|
|
.dm-usernames {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.chat-channel-retry-archive {
|
|
display: flex;
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
|
|
.user-preferences .chat-setting .controls {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.chat-message-collapser,
|
|
.chat-message-text {
|
|
> p {
|
|
margin: 0.5em 0 0.5em;
|
|
}
|
|
|
|
> p:first-of-type {
|
|
margin-top: 0.1em;
|
|
}
|
|
|
|
> p:last-of-type {
|
|
margin-bottom: 0.1em;
|
|
}
|
|
}
|
|
|
|
.reviewable-chat-message {
|
|
.chat-channel-title {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.chat-channel-dm-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.channel-name {
|
|
font-weight: 700;
|
|
font-size: var(--font-up-1);
|
|
line-height: var(--font-up-1);
|
|
}
|
|
}
|
|
|
|
.chat-channel-status {
|
|
background: var(--secondary);
|
|
padding: 0.5rem 1rem;
|
|
border-bottom: 1px solid var(--primary-low);
|
|
}
|
|
|
|
html.has-full-page-chat {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
#main-outlet {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.full-page-chat {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.main-chat-outlet {
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mobile-view {
|
|
#main-outlet-wrapper {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
// these need to apply to desktop too, because iPads
|
|
&.discourse-touch {
|
|
.full-page-chat,
|
|
.chat-channel,
|
|
#main-outlet {
|
|
// allows containers to shrink to fit
|
|
min-height: 0;
|
|
}
|
|
}
|
|
[data-popper-reference-hidden] {
|
|
visibility: hidden;
|
|
}
|
|
}
|