mirror of
https://github.com/discourse/discourse.git
synced 2024-12-04 21:03:57 +08:00
07ab20131a
This commit introduces the skeleton of the chat thread UI. The
structure of the components looks like this. Its done this way
so the side panel can be used for other things as well if we wish,
not just for threads:
```
.main-chat-outlet
<ChatLivePane />
<ChatSidePanel>
<-- rendered with {{outlet}} -->
<ChatThread />
</ChatSidePanel>
```
Later on the `ChatThreadList` will be rendered here as well.
Now, when you go to a channel you can open a thread by clicking
on either the Open Thread message action button or by clicking on
the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`.
This works on mobile as well.
This commit includes basic serializers and routes for threads,
as well as a new `ChatThreadsManager` service in JS that caches
threads for a channel the same way the channel threads manager does.
The chat messages inside the thread are intentionally left out
until a later PR.
**NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions
and the threading_enabled boolean on a ChatChannel**
645 lines
12 KiB
SCSS
645 lines
12 KiB
SCSS
$float-height: 530px;
|
|
|
|
:root {
|
|
--message-left-width: 42px;
|
|
--full-page-border-radius: 12px;
|
|
--full-page-sidebar-width: 275px;
|
|
--channel-list-avatar-size: 30px;
|
|
--chat-header-offset: 65px;
|
|
}
|
|
|
|
.chat-message-move-to-channel-modal-modal {
|
|
.modal-inner-container {
|
|
.chat-move-message-channel-chooser {
|
|
width: 100%;
|
|
.category-chat-badge {
|
|
.d-icon {
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-channel-unread-indicator {
|
|
@include unselectable;
|
|
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 100%;
|
|
box-sizing: content-box;
|
|
-webkit-touch-callout: none;
|
|
background: var(--tertiary-med-or-tertiary);
|
|
color: var(--secondary);
|
|
font-size: var(--font-down-2);
|
|
text-align: center;
|
|
|
|
&.urgent {
|
|
background: var(--success);
|
|
color: var(--secondary);
|
|
|
|
.number-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.number {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-dropdown-toggle.chat-header-icon {
|
|
.icon {
|
|
.chat-channel-unread-indicator {
|
|
border: 2px solid var(--header_background);
|
|
position: absolute;
|
|
right: 2px;
|
|
bottom: 2px;
|
|
transition: border-color linear 0.15s;
|
|
}
|
|
}
|
|
|
|
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;
|
|
|
|
.chat-message-container {
|
|
display: grid;
|
|
|
|
&.selecting-messages {
|
|
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);
|
|
}
|
|
}
|
|
|
|
.chat-user-avatar {
|
|
@include unselectable;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.chat-message:not(.is-reply) & {
|
|
width: var(--message-left-width);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&.is-online {
|
|
.chat-user-avatar-container .avatar {
|
|
box-shadow: 0px 0px 0px 1px var(--success);
|
|
border: 1px solid var(--secondary);
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.chat-user-avatar-container {
|
|
position: relative;
|
|
padding: 1px; //for is-online boxshadow effect, preventing cutoff
|
|
|
|
.avatar {
|
|
padding: 1px; ////for is-online boxshadow effect, preventing shift
|
|
}
|
|
|
|
.chat-user-presence-flair {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
background-color: var(--success);
|
|
border: 1px solid var(--secondary);
|
|
border-radius: 50%;
|
|
|
|
.chat-message & {
|
|
width: 10px;
|
|
height: 10px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
}
|
|
|
|
.chat-channel-title & {
|
|
width: 8px;
|
|
height: 8px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-channel-title & {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.chat-live-pane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
min-height: 1px;
|
|
position: relative;
|
|
|
|
.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;
|
|
scrollbar-color: var(--primary-low) transparent;
|
|
transition: scrollbar-color 0.2s ease-in-out;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
z-index: 1;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 15px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background: var(--primary-low);
|
|
border-radius: 8px;
|
|
border: 3px solid var(--secondary);
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
&:hover {
|
|
scrollbar-color: var(--primary-low-mid) transparent;
|
|
&::-webkit-scrollbar-thumb {
|
|
background: var(--primary-low-mid);
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
position: relative;
|
|
}
|
|
|
|
.chat-scroll-to-bottom {
|
|
background: var(--primary-medium);
|
|
bottom: 1em;
|
|
border-radius: 100%;
|
|
left: 50%;
|
|
opacity: 50%;
|
|
padding: 0.5em;
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
z-index: 2;
|
|
|
|
&:hover {
|
|
background: var(--primary-medium);
|
|
opacity: 100%;
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--primary);
|
|
margin: 0;
|
|
}
|
|
|
|
&.unread-messages {
|
|
opacity: 85%;
|
|
border-radius: 0;
|
|
transition: border-radius 0.1s linear;
|
|
|
|
&:hover {
|
|
opacity: 100%;
|
|
}
|
|
|
|
.d-icon {
|
|
margin: 0 0 0 0.5em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-live-pane,
|
|
.chat-messages-scroll,
|
|
.chat-live-pane {
|
|
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;
|
|
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;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.chat-channel-archive-modal-inner {
|
|
.chat-to-topic-selector {
|
|
width: 500px;
|
|
height: 300px;
|
|
}
|
|
|
|
.radios {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.radio-label {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
details {
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
input[type="text"],
|
|
.select-kit.combo-box.category-chooser {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.chat-channel-archive-modal-inner {
|
|
.chat-to-topic-selector {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.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%;
|
|
|
|
&.keyboard-visible body #main-outlet .full-page-chat {
|
|
padding-bottom: 0.2rem;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
#main-outlet {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(
|
|
var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) -
|
|
var(--composer-height, 0px)
|
|
);
|
|
|
|
.full-page-chat {
|
|
height: 100%;
|
|
min-height: 0;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.main-chat-outlet {
|
|
min-height: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mobile-view {
|
|
#main-outlet-wrapper {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
// these need to apply to desktop too, because iPads
|
|
&.discourse-touch {
|
|
// iPad web
|
|
#main-outlet-wrapper {
|
|
// restrict the row height, including when virtual keyboard is open
|
|
grid-template-rows: calc(
|
|
var(--chat-vh, 1vh) * 100 - var(--header-offset)
|
|
);
|
|
.sidebar-wrapper {
|
|
// prevents sidebar from overflowing behind the virtual keyboard
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// iPad webview
|
|
.footer-nav-ipad {
|
|
#main-outlet-wrapper {
|
|
// restrict the row height, including when virtual keyboard is open
|
|
grid-template-rows: calc(
|
|
var(--chat-vh, 1vh) * 100 - calc(var(--header-offset))
|
|
);
|
|
}
|
|
}
|
|
|
|
.full-page-chat,
|
|
.chat-live-pane,
|
|
#main-outlet {
|
|
// allows containers to shrink to fit
|
|
min-height: 0;
|
|
}
|
|
|
|
#main-outlet {
|
|
// limits height for iPad
|
|
max-height: calc(
|
|
100vh - calc(var(--header-offset) + var(--composer-ipad-padding))
|
|
);
|
|
}
|
|
}
|
|
[data-popper-reference-hidden] {
|
|
visibility: hidden;
|
|
}
|
|
}
|