Commit Graph

30 Commits

Author SHA1 Message Date
Joffrey JAFFEUX 7dafd275ac
FIX: various mobile chat improvements (#22132)
- FIX: improves reactions and thread indicator touch event on mobile
These "buttons" are located inside a scroll list which makes them very specific. The general idea is to ensure these events are passive and are not bubbling to the parent.
- DEV: moves state on top level message node
- FIX: ensures popover arrow has the correct border
- FIX: makes a message expanded by default
- FIX applies the same ios scroll fix on thread and channel
- UI: better active/hover state for thread indicator
- UI: attempts to follow more closely our BEM naming scheme
- FIX: reduces bottom padding on message with thread indicator and user info hidden
- UI: add padding for first message in thread
- FIX: prevents actions backdrop to open thread
- UI: makes thread indicator resizable
2023-06-16 11:36:43 +02:00
Martin Brennan f75ac9da30
FEATURE: Thread indicator improvements and participants (#21909)
This commit adds the initial part of thread indicator improvements:

* Show the reply count, last reply date and excerpt,
and the participants of the thread's avatars and
count of additional participants
* Add a participants component for the thread that
can be reused for the list
* Add a query class to get the thread participants
* Live update the thread indicator more consistently
with the last reply and participant details
image image

In subsequent PRs we will cache the participants since
they do not change often, and improve the thread list
further with participants.

This commit also adds a showPresence boolean (default
true) to ChatUserAvatar, since we don't want to show the
online indicator for thread participants.

---------

Co-authored-by: chapoi <charlie@discourse.org>
2023-06-15 10:49:27 +10:00
Joffrey JAFFEUX bdfd80bfe0
UI: chat composer step 2 (#21641)
- few improved alignments
- displays emoji picker button inline on desktop
- keeps composer focused when focusing dropdown button
- align buttons to bottom when increasing height of textarea
- max-height of textarea is now linked to the height of the screen

Co-authored-by: chapoi <charlie@discourse.org>
2023-05-22 17:00:50 +02:00
Joffrey JAFFEUX e4029bfab8
FIX: chat height was incorrect on ipad (#21289) 2023-04-28 10:51:23 +02:00
Joffrey JAFFEUX d381629655
FIX: correct border color of message actions (#21261)
This is a followup of 1372c5c435
2023-04-26 19:42:04 +02:00
Joffrey JAFFEUX bf886662df
UX: improves composer and thread panel (#21210)
This pull request is a full overhaul of the chat-composer and contains various improvements to the thread panel. They have been grouped in the same PR as lots of improvements/fixes to the thread panel needed an improved composer. This is meant as a first step.

### New features included in this PR

- A resizable side panel
- A clear dropzone area for uploads
- A simplified design for image uploads, this is only a first step towards more redesign of this area in the future

### Notable fixes in this PR

- Correct placeholder in thread panel
- Allows to edit the last message of a thread with arrow up
- Correctly focus composer when replying to a message
- The reply indicator is added instantly in the channel when starting a thread
- Prevents a large variety of bug where the composer could bug and prevent sending message or would clear your input while it has content

### Technical notes

To achieve this PR, three important changes have been made:

- `<ChatComposer>` has been fully rewritten and is now a glimmer component
- The chat composer now takes a `ChatMessage` as input which can directly be used in other operations, it simplifies a lot of logic as we are always working a with a `ChatMessage`
- `TextareaInteractor` has been created to wrap the existing `TextareaTextManipulation` mixin, it will make future migrations easier and allow us to have a less polluted `<ChatComposer>`

Note ".chat-live-pane" has been renamed ".chat-channel"

Design for upload dropzone is from @chapoi
2023-04-25 10:23:03 +02:00
Joffrey JAFFEUX 720cf24659
FIX: shows a message as hovered when hovering actions (#21026)
When hovering the chat message actions we are technically not hovering the message anymore, which was removing the background and is slightly unexpected. This commit ensures we keep this background until closing the message actions.
2023-04-07 20:29:33 +02:00
chapoi 6e2fd7a451
UX: Chat channel title overflow ellipsis fixes (#20956)
* UX: add correct class

* UX: prioritise name over user messages when truncating

* UX: add missing overflows to enable ellipsis
2023-04-04 12:44:36 +02:00
Joffrey JAFFEUX 1219f41c68
UX: multiple minor improvements (#20917)
- Raises the scroll distance to 250px instead of 100px to show the arrow down button
- Always have a margin on drawer when showing channel list, removes this margin when the scrollbar is apparent
- Makes all scrollbar used in chat look the same through the chat-scrollbar mixin
- Ensures hover state is not persistent on channel row in mobile
- Makes the channel row full width on mobile
2023-04-03 10:46:38 +02:00
Joffrey JAFFEUX 12a18d4d55
DEV: properly namespace chat (#20690)
This commit main goal was to comply with Zeitwerk and properly rely on autoloading. To achieve this, most resources have been namespaced under the `Chat` module.

- Given all models are now namespaced with `Chat::` and would change the stored types in DB when using polymorphism or STI (single table inheritance), this commit uses various Rails methods to ensure proper class is loaded and the stored name in DB is unchanged, eg: `Chat::Message` model will be stored as `"ChatMessage"`, and `"ChatMessage"` will correctly load `Chat::Message` model.
- Jobs are now using constants only, eg: `Jobs::Chat::Foo` and should only be enqueued this way

Notes:
- This commit also used this opportunity to limit the number of registered css files in plugin.rb
- `discourse_dev` support has been removed within this commit and will be reintroduced later

<!-- NOTE: All pull requests should have tests (rspec in Ruby, qunit in JavaScript). If your code does not include test coverage, please include an explanation of why it was omitted. -->
2023-03-17 14:24:38 +01:00
Joffrey JAFFEUX 6b0aeced7e
DEV: rework the chat-live-pane (#20519)
This PR is introducing glimmer usage in the chat-live-pane, for components but also for models. RestModel usage has been dropped in favor of native classes.

Other changes/additions in this PR:

sticky dates, scrolling will now keep the date separator of the current section at the top of the screen
better unread management, marking a channel as unread will correctly mark the correct message and not mark the whole channel as read. Tracking state will also now correctly return unread count and unread mentions.
adds an animation on bottom arrow
better scrolling behavior, we should now always correctly keep the scroll position while loading more
reactions are now more reactive, and will update their tooltip without needed to close/reopen it
skeleton has been improved with placeholder images and reactions
when making a reaction on the desktop message actions, the menu won't move anymore
simplify logic and stop maintaining a list of unloaded messages
2023-03-03 13:09:25 +01:00
Joffrey JAFFEUX 435761ef58
Revert "DEV: rework the chat-live-pane (#20511)" (#20514)
This reverts commit 10e1831139.
2023-03-02 20:20:39 +01:00
Joffrey JAFFEUX 10e1831139
DEV: rework the chat-live-pane (#20511)
This PR is introducing glimmer usage in the chat-live-pane, for components but also for models. RestModel usage has been dropped in favor of native classes.

Other changes/additions in this PR:

- sticky dates, scrolling will now keep the date separator of the current section at the top of the screen
- better unread management, marking a channel as unread will correctly mark the correct message and not mark the whole channel as read. Tracking state will also now correctly return unread count and unread mentions.
- adds an animation on bottom arrow
- better scrolling behavior, we should now always correctly keep the scroll position while loading more
- reactions are now more reactive, and will update their tooltip without needed to close/reopen it
- skeleton has been improved with placeholder images and reactions
- when making a reaction on the desktop message actions, the menu won't move anymore
- simplify logic and stop maintaining a list of unloaded messages
2023-03-02 19:46:03 +01:00
Joffrey JAFFEUX 31480bde92
Revert "DEV: rework the chat-live-pane" (#20510)
This reverts commit 67c0498f64.
2023-03-02 16:59:11 +01:00
Joffrey JAFFEUX 67c0498f64
DEV: rework the chat-live-pane
This PR is introducing glimmer usage in the chat-live-pane, for components but also for models. RestModel usage has been dropped in favor of native classes.

Other changes/additions in this PR:

- sticky dates, scrolling will now keep the date separator of the current section at the top of the screen
- better unread management, marking a channel as unread will correctly mark the correct message and not mark the whole channel as read. Tracking state will also now correctly return unread count and unread mentions.
- adds an animation on bottom arrow
- better scrolling behavior, we should now always correctly keep the scroll position while loading more
- reactions are now more reactive, and will update their tooltip without needed to close/reopen it
- skeleton has been improved with placeholder images and reactions
- when making a reaction on the desktop message actions, the menu won't move anymore
- simplify logic and stop maintaining a list of unloaded messages
2023-03-02 16:34:25 +01:00
Jarek Radosz c81d4f60af
UX: Fix large onebox avatars in img chat messages (#20469)
When you included an image and a full-line (github) onebox in a single message the user avatar in the inbox would be incorrectly embiggened.
2023-02-27 23:03:02 +01:00
Krzysztof Kotlarek 1a5f6aefc7
FIX: correct sidebar and chat height on DiscourseHub (#20323)
Before that change, footer of the sidebar was not visible.
Footer is very important, especially now, when add custom section button is located there.
Also, distance between chat input and keyboard were increased
2023-02-16 15:59:09 +11:00
Martin Brennan 07ab20131a
FEATURE: Chat side panel with threads initial skeleton (#20209)
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**
2023-02-14 11:38:41 +10:00
Joffrey JAFFEUX d5024d96f1
FEATURE: resizeable chat drawer (#20160)
This commit implements a requested feature: resizing the chat drawer.

The user can now adjust the drawer size to their liking, and the new size will be stored in localstorage so that it persists across refreshes. In addition to this feature, a bug was fixed where the --composer-right margin was not being correctly computed. This bug could have resulted in incorrectly positioned drawer when the composer was expanded.

Note that it includes support for RTL.
2023-02-03 15:11:12 +01:00
Joffrey JAFFEUX 2644a4d303
DEV: removes chat-channel-settings-row (#19650)
This is dead code which should have been removed when `chat-settings-settings-modal` has been removed.
2022-12-29 13:50:01 +01:00
Joffrey JAFFEUX 68c4f16a73
FEATURE: channels can allow/disallow @all/@here mentions (#19317)
The settings tab of each category channel should now present the option to allow or disallow channel wide mentions: @here and @all.

When disallowed, using these mentions in the channel should have no effect.
2022-12-05 17:03:51 +01:00
chapoi b83d9fa802
UX: chat index refactor (#19264)
* Refactor: split out chat index files

* Refactor: is-online offset
2022-12-01 14:56:04 +01:00
Keegan George 7a8e018965
UX: reworks channel index (drawer and mobile) (#18892)
- Multiple style improvements
- adds last sent message date to the view

Co-authored-by: chapoi <charlie@discourse.org>
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2022-11-28 18:38:05 +01:00
chapoi 7e39a21de1
UX: redesign of chat settings + add chat retention info (#19017)
* UX: redesign of chat settings
2022-11-16 11:10:42 +01:00
chapoi 3277a858bf
UX: add channel header offset to browse page height (#19030) 2022-11-15 11:35:40 +01:00
Joffrey JAFFEUX 66130dc8c1
REFACTOR: handles every chat resource as an URL (#18961)
- Note this is also tweaking the UI a little bit as we are now using links/buttons in the header as needed
- It disables the find ideal channel in drawer mode, if loading `/chat` in drawer mode it will either reopen at the last position or just stay on index
2022-11-11 06:39:15 +01:00
Joffrey JAFFEUX 07e1b0591f
REFACTOR: chat-msgactions (#18969)
- s/chat-msg-actions/chat-message-actions
- s/chat-msgactions-hover/chat-message-actions-container
- creates dedicated css files for this component
- removes useless code
- removes grayscale
2022-11-10 15:08:14 +01:00
chapoi 2f510cbd05
FIX: Do not limit scope to direct messages (#18855) 2022-11-03 09:17:23 +01:00
chapoi 1c52e11d48
UX: scope chat-channel-title hover effect (#18854) 2022-11-03 09:04:57 +01:00
Roman Rizzi 0a5f548635
DEV: Move `discourse-chat` to the core repo. (#18776)
As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 10:41:30 -03:00