2023-06-19 15:50:54 +08:00
|
|
|
.chat-message-text.-deleted,
|
|
|
|
|
.chat-message-text.-hidden {
|
2022-11-02 21:41:30 +08:00
|
|
|
margin-left: calc(var(--message-left-width) + 0.75em);
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
|
|
.chat-message-expand {
|
2024-04-06 17:18:18 +08:00
|
|
|
color: var(--primary-high);
|
2022-11-02 21:41:30 +08:00
|
|
|
padding: 0.25em;
|
|
|
|
|
|
2023-05-05 23:08:33 +08:00
|
|
|
.d-button-label {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
2022-11-02 21:41:30 +08:00
|
|
|
&:hover {
|
|
|
|
|
background: inherit;
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-06-19 15:50:54 +08:00
|
|
|
.chat-message-reaction {
|
|
|
|
|
> * {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
DEV: FloatKit (#23650)
This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit":
- menu
- tooltip
- toast
## Tooltips
### Component
Simple cases can be express with an API similar to DButton:
```hbs
<DTooltip
@Label={{i18n "foo.bar"}}
@ICON="check"
@content="Something"
/>
```
More complex cases can use blocks:
```hbs
<DTooltip>
<:trigger>
{{d-icon "check"}}
<span>{{i18n "foo.bar"}}</span>
</:trigger>
<:content>
Something
</:content>
</DTooltip>
```
### Service
You can manually show a tooltip using the `tooltip` service:
```javascript
const tooltipInstance = await this.tooltip.show(
document.querySelector(".my-span"),
options
)
// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();
// you can also just close any open tooltip through the service
this.tooltip.close();
```
The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:
```javascript
const tooltipInstance = this.tooltip.register(
document.querySelector(".my-span"),
options
)
// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```
Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:
```javascript
const tooltipInstance = await this.tooltip.show(
document.querySelector(".my-span"),
{
component: MyComponent,
data: { foo: 1 }
}
)
```
## Menus
Menus are very similar to tooltips and provide the same kind of APIs:
### Component
```hbs
<DMenu @ICON="plus" @Label={{i18n "foo.bar"}}>
<ul>
<li>Foo</li>
<li>Bat</li>
<li>Baz</li>
</ul>
</DMenu>
```
They also support blocks:
```hbs
<DMenu>
<:trigger>
{{d-icon "plus"}}
<span>{{i18n "foo.bar"}}</span>
</:trigger>
<:content>
<ul>
<li>Foo</li>
<li>Bat</li>
<li>Baz</li>
</ul>
</:content>
</DMenu>
```
### Service
You can manually show a menu using the `menu` service:
```javascript
const menuInstance = await this.menu.show(
document.querySelector(".my-span"),
options
)
// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();
// you can also just close any open tooltip through the service
this.menu.close();
```
The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:
```javascript
const menuInstance = this.menu.register(
document.querySelector(".my-span"),
options
)
// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```
Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:
```javascript
const menuInstance = await this.menu.show(
document.querySelector(".my-span"),
{
component: MyComponent,
data: { foo: 1 }
}
)
```
## Toasts
Interacting with toasts is made only through the `toasts` service.
A default component is provided (DDefaultToast) and can be used through dedicated service methods:
- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });
```javascript
this.toasts.success({
data: {
title: "Foo",
message: "Bar",
actions: [
{
label: "Ok",
class: "btn-primary",
action: (componentArgs) => {
// eslint-disable-next-line no-alert
alert("Closing toast:" + componentArgs.data.title);
componentArgs.close();
},
}
]
},
});
```
You can also provide your own component:
```javascript
this.toasts.show(MyComponent, {
autoClose: false,
class: "foo",
data: { baz: 1 },
})
```
Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-26 19:39:52 +08:00
|
|
|
[data-content][data-identifier="chat-message-reaction-tooltip"] {
|
|
|
|
|
font-size: var(--font-down-1);
|
|
|
|
|
|
2023-12-11 21:29:16 +08:00
|
|
|
.fk-d-tooltip__inner-content {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
DEV: FloatKit (#23650)
This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit":
- menu
- tooltip
- toast
## Tooltips
### Component
Simple cases can be express with an API similar to DButton:
```hbs
<DTooltip
@Label={{i18n "foo.bar"}}
@ICON="check"
@content="Something"
/>
```
More complex cases can use blocks:
```hbs
<DTooltip>
<:trigger>
{{d-icon "check"}}
<span>{{i18n "foo.bar"}}</span>
</:trigger>
<:content>
Something
</:content>
</DTooltip>
```
### Service
You can manually show a tooltip using the `tooltip` service:
```javascript
const tooltipInstance = await this.tooltip.show(
document.querySelector(".my-span"),
options
)
// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();
// you can also just close any open tooltip through the service
this.tooltip.close();
```
The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:
```javascript
const tooltipInstance = this.tooltip.register(
document.querySelector(".my-span"),
options
)
// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```
Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:
```javascript
const tooltipInstance = await this.tooltip.show(
document.querySelector(".my-span"),
{
component: MyComponent,
data: { foo: 1 }
}
)
```
## Menus
Menus are very similar to tooltips and provide the same kind of APIs:
### Component
```hbs
<DMenu @ICON="plus" @Label={{i18n "foo.bar"}}>
<ul>
<li>Foo</li>
<li>Bat</li>
<li>Baz</li>
</ul>
</DMenu>
```
They also support blocks:
```hbs
<DMenu>
<:trigger>
{{d-icon "plus"}}
<span>{{i18n "foo.bar"}}</span>
</:trigger>
<:content>
<ul>
<li>Foo</li>
<li>Bat</li>
<li>Baz</li>
</ul>
</:content>
</DMenu>
```
### Service
You can manually show a menu using the `menu` service:
```javascript
const menuInstance = await this.menu.show(
document.querySelector(".my-span"),
options
)
// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();
// you can also just close any open tooltip through the service
this.menu.close();
```
The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:
```javascript
const menuInstance = this.menu.register(
document.querySelector(".my-span"),
options
)
// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```
Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:
```javascript
const menuInstance = await this.menu.show(
document.querySelector(".my-span"),
{
component: MyComponent,
data: { foo: 1 }
}
)
```
## Toasts
Interacting with toasts is made only through the `toasts` service.
A default component is provided (DDefaultToast) and can be used through dedicated service methods:
- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });
```javascript
this.toasts.success({
data: {
title: "Foo",
message: "Bar",
actions: [
{
label: "Ok",
class: "btn-primary",
action: (componentArgs) => {
// eslint-disable-next-line no-alert
alert("Closing toast:" + componentArgs.data.title);
componentArgs.close();
},
}
]
},
});
```
You can also provide your own component:
```javascript
this.toasts.show(MyComponent, {
autoClose: false,
class: "foo",
data: { baz: 1 },
})
```
Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-26 19:39:52 +08:00
|
|
|
.emoji {
|
2023-12-11 21:29:16 +08:00
|
|
|
padding-left: 0.25rem;
|
DEV: FloatKit (#23650)
This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit":
- menu
- tooltip
- toast
## Tooltips
### Component
Simple cases can be express with an API similar to DButton:
```hbs
<DTooltip
@Label={{i18n "foo.bar"}}
@ICON="check"
@content="Something"
/>
```
More complex cases can use blocks:
```hbs
<DTooltip>
<:trigger>
{{d-icon "check"}}
<span>{{i18n "foo.bar"}}</span>
</:trigger>
<:content>
Something
</:content>
</DTooltip>
```
### Service
You can manually show a tooltip using the `tooltip` service:
```javascript
const tooltipInstance = await this.tooltip.show(
document.querySelector(".my-span"),
options
)
// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();
// you can also just close any open tooltip through the service
this.tooltip.close();
```
The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:
```javascript
const tooltipInstance = this.tooltip.register(
document.querySelector(".my-span"),
options
)
// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```
Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:
```javascript
const tooltipInstance = await this.tooltip.show(
document.querySelector(".my-span"),
{
component: MyComponent,
data: { foo: 1 }
}
)
```
## Menus
Menus are very similar to tooltips and provide the same kind of APIs:
### Component
```hbs
<DMenu @ICON="plus" @Label={{i18n "foo.bar"}}>
<ul>
<li>Foo</li>
<li>Bat</li>
<li>Baz</li>
</ul>
</DMenu>
```
They also support blocks:
```hbs
<DMenu>
<:trigger>
{{d-icon "plus"}}
<span>{{i18n "foo.bar"}}</span>
</:trigger>
<:content>
<ul>
<li>Foo</li>
<li>Bat</li>
<li>Baz</li>
</ul>
</:content>
</DMenu>
```
### Service
You can manually show a menu using the `menu` service:
```javascript
const menuInstance = await this.menu.show(
document.querySelector(".my-span"),
options
)
// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();
// you can also just close any open tooltip through the service
this.menu.close();
```
The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:
```javascript
const menuInstance = this.menu.register(
document.querySelector(".my-span"),
options
)
// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```
Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:
```javascript
const menuInstance = await this.menu.show(
document.querySelector(".my-span"),
{
component: MyComponent,
data: { foo: 1 }
}
)
```
## Toasts
Interacting with toasts is made only through the `toasts` service.
A default component is provided (DDefaultToast) and can be used through dedicated service methods:
- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });
```javascript
this.toasts.success({
data: {
title: "Foo",
message: "Bar",
actions: [
{
label: "Ok",
class: "btn-primary",
action: (componentArgs) => {
// eslint-disable-next-line no-alert
alert("Closing toast:" + componentArgs.data.title);
componentArgs.close();
},
}
]
},
});
```
You can also provide your own component:
```javascript
this.toasts.show(MyComponent, {
autoClose: false,
class: "foo",
data: { baz: 1 },
})
```
Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-26 19:39:52 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-11-02 21:41:30 +08:00
|
|
|
.chat-message {
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
padding: 0.25em 0.5em 0.25em 0.75em;
|
|
|
|
|
display: flex;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
|
|
|
|
|
.chat-message-reaction {
|
|
|
|
|
@include chat-reaction;
|
2023-06-19 15:50:54 +08:00
|
|
|
will-change: scale;
|
2022-11-02 21:41:30 +08:00
|
|
|
|
2023-06-19 15:50:54 +08:00
|
|
|
&:active {
|
|
|
|
|
transform: scale(0.93);
|
|
|
|
|
}
|
2022-11-02 21:41:30 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-message-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
word-break: break-word;
|
|
|
|
|
overflow-wrap: break-word;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-message-text {
|
|
|
|
|
min-width: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
code {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
font-size: var(--font-down-1);
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-20 20:37:28 +08:00
|
|
|
a.mention,
|
|
|
|
|
span.mention.--wide {
|
2023-11-22 06:14:09 +08:00
|
|
|
@include mention;
|
2023-11-22 00:16:19 +08:00
|
|
|
|
|
|
|
|
&.highlighted {
|
|
|
|
|
background: var(--tertiary-low);
|
|
|
|
|
}
|
2022-11-02 21:41:30 +08:00
|
|
|
}
|
|
|
|
|
|
2024-02-02 19:56:56 +08:00
|
|
|
// unlinked, invalid mention
|
2024-08-20 20:37:28 +08:00
|
|
|
span.mention:not(--wide) {
|
2024-02-02 19:56:56 +08:00
|
|
|
color: var(--primary-high);
|
|
|
|
|
}
|
|
|
|
|
|
2022-11-02 21:41:30 +08:00
|
|
|
// Automatic aspect-ratio mapping https://developer.mozilla.org/en-US/docs/Web/Media/images/aspect_ratio_mapping
|
|
|
|
|
p img:not(.emoji) {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ul,
|
|
|
|
|
ol {
|
|
|
|
|
padding-left: 1.25em;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-message-edited {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
color: var(--primary-medium);
|
|
|
|
|
font-size: var(--font-down-2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-message-reaction-list,
|
|
|
|
|
.chat-transcript-reactions {
|
|
|
|
|
@include unselectable;
|
|
|
|
|
margin-top: 0.25em;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
.chat-message-react-btn {
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
padding: 0em 0.25em;
|
|
|
|
|
background: none;
|
|
|
|
|
border: none;
|
2023-06-19 15:50:54 +08:00
|
|
|
will-change: scale;
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
transform: scale(0.93);
|
|
|
|
|
}
|
2022-11-02 21:41:30 +08:00
|
|
|
|
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756)
This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel.
There are now several new classes and concepts:
* ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each
message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit),
and interacts with the pane of the current context to modify the UI
* ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the
messages, and are mostly used for state management for things like message selection.
* ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the
message actions, and the composer, dealing with reply and edit message state.
* Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane
* Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues.
The thread panel now also works in the chat drawer, and the thread messages have less
actions than the main panel, since some do not make sense there (e.g. moving messages to
a different channel). The thread panel title, excerpt, and message sender have also been removed
for now to save space.
This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will
make the thread MessageBus subscriptions work and disable echo mode
for the initial release of threads.
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-06 21:19:52 +08:00
|
|
|
> * {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2022-11-02 21:41:30 +08:00
|
|
|
.d-icon {
|
|
|
|
|
color: var(--primary-high);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
.d-icon {
|
|
|
|
|
color: var(--primary);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-07-10 15:36:20 +08:00
|
|
|
.chat-message-avatar .chat-user-avatar .chat-user-avatar__container .avatar,
|
2022-11-02 21:41:30 +08:00
|
|
|
.chat-emoji-avatar .chat-emoji-avatar-container {
|
|
|
|
|
width: 28px;
|
|
|
|
|
height: 28px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-06-16 17:36:43 +08:00
|
|
|
.touch .chat-message-container {
|
|
|
|
|
&.-active {
|
|
|
|
|
background: var(--d-hover);
|
2023-07-10 21:07:38 +08:00
|
|
|
border-radius: var(--d-border-radius);
|
2022-11-02 21:41:30 +08:00
|
|
|
|
2023-06-16 17:36:43 +08:00
|
|
|
&.-bookmarked {
|
|
|
|
|
background: var(--highlight-low);
|
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756)
This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel.
There are now several new classes and concepts:
* ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each
message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit),
and interacts with the pane of the current context to modify the UI
* ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the
messages, and are mostly used for state management for things like message selection.
* ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the
message actions, and the composer, dealing with reply and edit message state.
* Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane
* Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues.
The thread panel now also works in the chat drawer, and the thread messages have less
actions than the main panel, since some do not make sense there (e.g. moving messages to
a different channel). The thread panel title, excerpt, and message sender have also been removed
for now to save space.
This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will
make the thread MessageBus subscriptions work and disable echo mode
for the initial release of threads.
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-06 21:19:52 +08:00
|
|
|
}
|
2023-06-16 17:36:43 +08:00
|
|
|
}
|
|
|
|
|
}
|
2022-11-02 21:41:30 +08:00
|
|
|
|
2023-06-16 17:36:43 +08:00
|
|
|
.no-touch .chat-message-container {
|
|
|
|
|
&:hover,
|
2023-06-16 18:33:13 +08:00
|
|
|
&.-active {
|
2023-06-16 17:36:43 +08:00
|
|
|
background: var(--d-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756)
This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel.
There are now several new classes and concepts:
* ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each
message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit),
and interacts with the pane of the current context to modify the UI
* ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the
messages, and are mostly used for state management for things like message selection.
* ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the
message actions, and the composer, dealing with reply and edit message state.
* Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane
* Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues.
The thread panel now also works in the chat drawer, and the thread messages have less
actions than the main panel, since some do not make sense there (e.g. moving messages to
a different channel). The thread panel title, excerpt, and message sender have also been removed
for now to save space.
This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will
make the thread MessageBus subscriptions work and disable echo mode
for the initial release of threads.
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-06 21:19:52 +08:00
|
|
|
.chat-message-reaction-list .chat-message-react-btn {
|
2023-06-16 17:36:43 +08:00
|
|
|
display: inline-block;
|
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756)
This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel.
There are now several new classes and concepts:
* ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each
message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit),
and interacts with the pane of the current context to modify the UI
* ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the
messages, and are mostly used for state management for things like message selection.
* ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the
message actions, and the composer, dealing with reply and edit message state.
* Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane
* Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues.
The thread panel now also works in the chat drawer, and the thread messages have less
actions than the main panel, since some do not make sense there (e.g. moving messages to
a different channel). The thread panel title, excerpt, and message sender have also been removed
for now to save space.
This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will
make the thread MessageBus subscriptions work and disable echo mode
for the initial release of threads.
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-06 21:19:52 +08:00
|
|
|
}
|
2023-06-09 23:37:26 +08:00
|
|
|
}
|
|
|
|
|
|
2023-06-16 17:36:43 +08:00
|
|
|
&.-active,
|
|
|
|
|
&:hover {
|
|
|
|
|
&.-bookmarked {
|
|
|
|
|
background: var(--highlight-medium);
|
|
|
|
|
}
|
2023-03-03 20:09:25 +08:00
|
|
|
|
2023-06-16 17:36:43 +08:00
|
|
|
&.-deleted {
|
2024-04-06 17:18:18 +08:00
|
|
|
background-color: var(--danger-low);
|
|
|
|
|
.chat-message-expand {
|
|
|
|
|
color: var(--danger);
|
|
|
|
|
}
|
2023-06-16 17:36:43 +08:00
|
|
|
}
|
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756)
This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel.
There are now several new classes and concepts:
* ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each
message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit),
and interacts with the pane of the current context to modify the UI
* ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the
messages, and are mostly used for state management for things like message selection.
* ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the
message actions, and the composer, dealing with reply and edit message state.
* Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane
* Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues.
The thread panel now also works in the chat drawer, and the thread messages have less
actions than the main panel, since some do not make sense there (e.g. moving messages to
a different channel). The thread panel title, excerpt, and message sender have also been removed
for now to save space.
This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will
make the thread MessageBus subscriptions work and disable echo mode
for the initial release of threads.
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-06 21:19:52 +08:00
|
|
|
|
2023-06-16 17:36:43 +08:00
|
|
|
&.-highlighted {
|
|
|
|
|
background-color: var(--tertiary-medium);
|
2023-03-03 20:09:25 +08:00
|
|
|
}
|
2023-06-16 17:36:43 +08:00
|
|
|
}
|
|
|
|
|
}
|
2023-03-03 20:09:25 +08:00
|
|
|
|
2023-06-16 17:36:43 +08:00
|
|
|
.chat-message-container {
|
2023-09-09 00:07:04 +08:00
|
|
|
background-color: var(--d-content-background, var(--secondary));
|
2023-10-10 00:25:57 +08:00
|
|
|
width: 100%;
|
2022-11-02 21:41:30 +08:00
|
|
|
|
2023-06-16 17:36:43 +08:00
|
|
|
&.-errored {
|
|
|
|
|
color: var(--primary-medium);
|
|
|
|
|
}
|
DEV: Refactoring chat message actions for ChatMessage component usage in thread panel (#20756)
This commit is a major overhaul of how chat message actions work, to make it so they are reusable between the main chat channel and the chat thread panel, as well as many improvements and fixes for the thread panel.
There are now several new classes and concepts:
* ChatMessageInteractor - This is initialized from the ChatMessage, ChatMessageActionsDesktop, and ChatMessageActionsMobile components. This handles permissions about what actions can be done for each
message based on the context (thread or channel), handles the actions themselves (e.g. copyLink, delete, edit),
and interacts with the pane of the current context to modify the UI
* ChatChannelThreadPane and ChatChannelPane services - This represents the UI context which contains the
messages, and are mostly used for state management for things like message selection.
* ChatChannelThreadComposer and ChatChannelComposer - This handles interaction between the pane, the
message actions, and the composer, dealing with reply and edit message state.
* Scrolling logic for the messages has now been moved to a helper so it can be shared between the main channel pane and the thread pane
* Various improvements with the emoji picker on both mobile and desktop. The DOM node of each component is now located outside of the message which prevents a large range of issues.
The thread panel now also works in the chat drawer, and the thread messages have less
actions than the main panel, since some do not make sense there (e.g. moving messages to
a different channel). The thread panel title, excerpt, and message sender have also been removed
for now to save space.
This gives us a solid base to keep expanding on and fixing up threads. Subsequent PRs will
make the thread MessageBus subscriptions work and disable echo mode
for the initial release of threads.
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-06 21:19:52 +08:00
|
|
|
|
2023-06-16 17:36:43 +08:00
|
|
|
&.-deleted {
|
|
|
|
|
background-color: var(--danger-low);
|
|
|
|
|
padding-block: 0.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.-bookmarked {
|
|
|
|
|
background: var(--highlight-bg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.-highlighted {
|
|
|
|
|
background-color: var(--tertiary-low);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.has-reply {
|
2023-06-16 20:04:11 +08:00
|
|
|
.chat-message {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: var(--message-left-width) 1fr;
|
|
|
|
|
grid-template-rows: 30px auto;
|
|
|
|
|
grid-template-areas:
|
|
|
|
|
"replyto replyto"
|
|
|
|
|
"avatar message";
|
|
|
|
|
|
|
|
|
|
.chat-user-avatar {
|
|
|
|
|
grid-area: avatar;
|
|
|
|
|
}
|
2023-06-16 17:36:43 +08:00
|
|
|
|
2023-06-16 20:04:11 +08:00
|
|
|
.chat-message-content {
|
|
|
|
|
grid-area: message;
|
|
|
|
|
}
|
2022-11-02 21:41:30 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-06-16 17:36:43 +08:00
|
|
|
&.has-thread-indicator {
|
|
|
|
|
.chat-message {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: var(--message-left-width) 1fr;
|
|
|
|
|
grid-template-rows: auto;
|
|
|
|
|
grid-template-areas:
|
|
|
|
|
"avatar message"
|
|
|
|
|
"threadindicator threadindicator";
|
|
|
|
|
padding-bottom: 0.65rem !important;
|
2022-11-02 21:41:30 +08:00
|
|
|
|
2023-06-16 17:36:43 +08:00
|
|
|
.chat-user-avatar {
|
|
|
|
|
grid-area: avatar;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chat-message-content {
|
|
|
|
|
grid-area: message;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-11-02 21:41:30 +08:00
|
|
|
}
|
|
|
|
|
|
2023-06-16 17:36:43 +08:00
|
|
|
.chat-message-reaction-list .chat-message-react-btn {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2022-11-02 21:41:30 +08:00
|
|
|
}
|