Commit Graph

121 Commits

Author SHA1 Message Date
Joffrey JAFFEUX df2614c0fb
FIX: ensures chat composer docks to topic composer (#21610) 2023-05-17 11:16:03 +02:00
chapoi 4c476b42b0
UX: chat composer styling on focus (#21603) 2023-05-17 07:10:02 +02:00
Joffrey JAFFEUX 928fab1c4e
FIX: compensate for lack of replying indicator on draft (#21597)
As we don't have the spacing generated by the replying indicator, we need to manually add spacing.
2023-05-16 22:32:07 +02:00
Joffrey JAFFEUX 0881186bfd
UI: removes thread margins (#21595) 2023-05-16 21:28:25 +02:00
Joffrey JAFFEUX 2f73316104
FIX: followups to composer notch adjustments (#21592)
We had safe-area-inset-bottom still set at a wrong place which was causing issues but was also useful to some cases. This commit removes it and ensures the affected cases are corrected.
2023-05-16 20:05:56 +02:00
Joffrey JAFFEUX 4bfd1fd998
FIX: allows notch to have composer bg color (#21589) 2023-05-16 18:46:14 +02:00
Joffrey JAFFEUX f45d1e6791
UX: implements new composer design (#21588)
This is only the first steps of a redesign

- redesigns the buttons to have a larger hitzone
- generally bigger composer
- clicking near textarea focuses the input
- relies on the fact that safe-area-inset-bottom is set globally and doesn’t need to be set in sub components
2023-05-16 17:17:12 +02:00
Martin Brennan a2b12b6ace
FIX: Drawer styles for chat thread icon (#21577)
The spacing was not correct for this icon
in the drawer.
2023-05-16 12:49:19 +02:00
Joffrey JAFFEUX a3522a5937
FIX: chat height fixes (#21561)
- Correctly resize when sending a message on android
- Do not blur active element
- Update direct message creator height following changes
2023-05-15 22:00:03 +02:00
Joffrey JAFFEUX 94b95266ca
FIX: hides global notice on chat (#21557)
It's not necessary and we already hide create-topics-notice and bootstrap mode, and it's also annoying to get correct chat's height.
2023-05-15 17:08:05 +02:00
Joffrey JAFFEUX 4b15ba405c
FIX: moves chat height computation to a mixin (#21555)
This commit also removes safe-area-inset-bottom when keyboard is displayed to avoid having a taller than needed space between composer and replying indicator.
2023-05-15 15:53:18 +02:00
Joffrey JAFFEUX 660a40ca06
FIX: various fixes following channel height changes (#21553)
- apply height on threads list
- apply height on thread
- correctly applies env(safe-area-inset-bottom)
2023-05-15 14:39:11 +02:00
Joffrey JAFFEUX 5ce0697348
FIX: limits max height to viewport on channel only (#21539)
Before this commit chat was applying a fixed height on everything under the `/chat` route. It's only really needed on the channel page with the composer at the bottom of the page.

This commits makes the following changes:
- moves height limitation from `#main-outlet-wrapper` to `.chat-channel`
- makes browse channel page and members list page full height and rely on main document scrollbar
- adds height computation for draft header and direct message creator block to ensure the height is correct when creating a draft channel
- makes chat index full height to rely on the browser scrollbar. As a result the <kbd> + </kbd> button used on mobile to create a direct message as been moved out of `<ChannelsList>` into the chat index template
- sidebar height was relying on chat setting a max height, as a result the height computation of sidebar has been changed to work correctly, especially with an opened keyboard on mobile or ipad
2023-05-15 11:46:33 +02:00
chapoi 74f01b8cbd
UX: hide settings btn when disabled
Also sets lighter border on hover
2023-05-15 07:53:30 +02:00
Martin Brennan c1cde16966
FIX: Thread reply indicator overflow (#21529)
In some cases the thread reply count indicator
(e.g. 433 replies) would wrap to the next line.
2023-05-12 15:46:22 +02:00
Joffrey JAFFEUX 55c4a550c1
FEATURE: chat-replying indicator for threads (#21485)
This feature adds the replying indicator in threads, it uses the same `/chat-reply/CHANNEL_ID` prefix than the channel composer replying indicator as we don't have specific right on threads ATM (if you can access channel, you can access thread). Thread will however use a presence channel name of the following format: `/chat-reply/CHANNEL_ID/thread/THREAD_ID`

This commit also simplifies the computation of `users` to eventually avoid a race-condition leading to a leak of the indicator in another channel/thread.

<!-- 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-05-11 08:02:04 +02:00
Martin Brennan 9b95a65dff
DEV: Fix thread excerpt word break (#21482)
Changing from break-all to break-word because otherwise
longer words (not just links) are split into separ
ate lines.
2023-05-10 17:20:02 +02:00
Joffrey JAFFEUX b713ae166f
FIX: excerpt overflow and children click events (#21473) 2023-05-10 15:07:43 +02:00
Martin Brennan 91c5658e9b
FIX: Handle deleted original message for thread index (#21470)
Since we have channel message retention which deletes
messages, we can end up with cases where the thread
is still around but the message is deleted. We will
handle the cascade delete in a different commit --
for now we will ensure the thread list lookup handles
this case and doesn't error.
2023-05-10 13:58:15 +02:00
Jan Cernik cbbaeb55b5
FIX: Don't autojoin users when they have ready-only permissions (#20213)
After this change, in order to join a chat channel, a user needs to be in a group with at least “Reply” permission for the category. If the user only has “See” permission, they are able to preview the channel, but not join it or send messages. The auto-join function also follows this new restriction.

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
2023-05-10 08:45:13 -03:00
Joffrey JAFFEUX c6b43ce68b
FEATURE: Thread list initial UI (#21412)
This commit adds an initial thread list UI. There are several limitations
with this that will be addressed in future PRs:

* There is no MessageBus reactivity, so e.g. if someone edits the original
   message of the thread it will not be reflected in the list. However if
   the thread title is updated the original message indicator will be updated.
* There is no unread functionality for threads in the list, if new messages
   come into the thread there is no indicator in the UI.
* There is no unread indicator on the actual button to open the thread list.
* No pagination.

In saying that, this is the functionality so far:

* We show a list of the 50 threads that the user has most recently participated
   in (i.e. sent a message) for the channel in descending order.
* Each thread we show a rich excerpt, the title, and the user who is the OM creator.
* The title is editable by staff and by the OM creator.
* Thread indicators show a title. We also replace emojis in the titles.
* Thread list works in the drawer/mobile.
2023-05-10 11:42:32 +02:00
Joffrey JAFFEUX e935d2bddb
FIX: minor thread changes on mobile (#21457)
- do not render sidepanel resizer as it's not usable on mobile
- removes 1px to the bottom spacing, this spacing won't be necessary once we implement chat-replying-indicator for thread
2023-05-09 22:38:44 +02:00
Joffrey JAFFEUX cb5e5f3e5b
UX: groups deleted messages (#21411)
Any continuous series of deleted messages will now be grouped into one single expand button.
2023-05-05 17:08:33 +02:00
Joffrey JAFFEUX 187b59d376
UX: implements draft threads (#21361)
This commit implements all the necessary logic to create thread seamlessly. For this it relies on the same logic used for messages and generates a `staged-id`(using the format: `staged-thread-CHANNEL_ID-MESSAGE_ID` which is used to re-conciliate state client sides once the thread has been persisted on the backend.

Part of this change the client side is now always using real thread and channel objects instead of sometimes relying on a flat `threadId` or `channelId`.

This PR also brings three UX changes:
- thread starts from top
- number of buttons on message actions is dependent of the width of the enclosing container
- <kbd>shift + ArrowUp</kbd> will reply to the last message
2023-05-05 08:55:55 +02:00
Joffrey JAFFEUX e66f640234
FIX: ensures page height is correct on ipad + hub (#21345)
The previous style was not being in each case, this should correctly fix it.
2023-05-02 23:00:16 +02:00
Joffrey JAFFEUX 290bd975c5
FIX: correctly differentiates channel/thread upload inputs (#21301)
Prior to this fix uploads event could end up in the wrong textarea. This will most importantly allow pasting an image in the thread composer.

Also fixes a minor padding issue on thread when uploads are associated to it.
2023-04-28 19:08:55 +02:00
Joffrey JAFFEUX 1403064835
FIX: correctly homogenizes panels min width (#21294)
`.chat-channel` had `300px` min width, when `.chat-drawer` was `250px`, resulting in overflowing channel when in drawer. This commits ensures the limits are always set at `250px`.
2023-04-28 13:05:00 +02:00
Joffrey JAFFEUX e4029bfab8
FIX: chat height was incorrect on ipad (#21289) 2023-04-28 10:51:23 +02:00
chapoi f29f131387
UX: composer use BEM + small tweaks to enabled/disabled styling (#21246)
- using BEM notation
- making animation linear instead of default ease
- small tweaks to composer state (disabled/send-disabled/send-enabled)
- fixing bug with disabled composer on mobile
2023-04-28 10:24:49 +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 7c9b8c42c1
FIX: allows composer to expand (#21234)
The fixed height was preventing the underlying textarea to expand (up to 125px height) when adding new lines with shift + enter
2023-04-25 11:00:18 +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
chapoi ba2adc7793
UX: chat thread hover (#21181)
* UX: switch standard message hover to new hover colour var

* UX: chat thread indication minor design changes
2023-04-20 16:32:21 +02:00
Martin Brennan 525d23e0e0
FIX: Revert "DEV: Add `overflow-x: hidden` to chat message containers (#21030)" (#21178)
This reverts commit 768851920e.

This was causing issues with the local date popup, cutting off
the top of it, there is no way to overrule an overflow:hidden
on the parent. Not z-index related.
2023-04-20 03:01:48 +02:00
chapoi c57f423083
UX: remove new message element from chatpane (#21143)
* UX: remove new message element

* Update chat-scroll-to-bottom-arrow.hbs

* Linting

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-19 01:54:15 +02:00
chapoi 4b02fa7082
UX: slight design changes to chat timestamp (#21144) 2023-04-19 01:54:02 +02:00
chapoi b8583f274d
UX: prevent overflow in description (#21124) 2023-04-18 04:20:25 +02:00
chapoi 9e269f993b
FIX: overflow of channel title in preview card (#21112) 2023-04-17 15:05:59 +02:00
Martin Brennan bd5c5c4b5f
FEATURE: Reacting to MessageBus in chat thread panel (#21070)
This commit introduces a ChatChannelPaneSubscriptionsManager
and a ChatChannelThreadPaneSubscriptionsManager that inherits
from the first service that handle MessageBus subscriptions
for the main channel and the thread panel respectively.

This necessitated a change to Chat::Publisher to be able to
send MessageBus messages to multiple channels based on whether
a message was an OM for a thread, a thread reply, or a regular
channel message.

An initial change to update the thread indicator with new replies
has been done too, but that will be improved in future as we have
more data to update on the indicators.

Still remaining is to fully move over the handleSentMessage
functionality which includes scrolling and new message indicator
things.

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-13 14:45:50 +02:00
Joffrey JAFFEUX 18c81958e5
UX: various tweaks on thread (#21083)
- Back button in drawer will bring you back to channel
- Larger font for thread indicator
- Prevents screen flashing due to clearing messages when they were already loaded
- Fixes a bug where did-update params were inverted causing an error when expanding/collapsing drawer
2023-04-13 10:08:12 +02:00
Martin Brennan 584a17c948
FEATURE: Initial chat thread indicator and disabling echo mode in channels (#21047)
This commit introduces a new thread indicator for channels with `threading_enabled`
set to true and the `enable_exp` site setting set to true. In addition, in the main channel
stream we now hide all messages that are linked to threads except for the original message,
disabling the concept of an "echo mode" for now, we may revisit this in future. We also
remove the jigsaw puzzle "Open Thread" button for message actions, since the thread
indicator can just be used instead.

This also stops the `Chat::Publisher` from sending any messages related to chat
messages that are linked to a thread, unless that chat message is the OM of the
thread. A subsequent PR will link up all MessageBus events within the thread panel,
and for the message indicators.

Another subsequent PR will add the excerpt of the latest message in each thread,
as well as the avatars of the users messaging in the thread.

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-04-12 11:09:06 +10:00
Joffrey JAFFEUX f55266e1ca
UX: chat mobile tweaks (#21041)
- rounded active style for messages
- better active state on chat message actions rows
- ensures long press on a message is not selecting text
- slightly improved messages actions animation and background fading
- ensures chat emoji picker is not cutoff on right side
- removes old legacy code related to hovered message
2023-04-11 09:03:12 +02:00
Joffrey JAFFEUX c7b49a14c7
Chat/drawer ux tweaks (#21032)
- clicking empty area on the header will toggle collapse/expand it
- applies a background on hover of the channel title
- active state for small buttons
- the back button now has the correct icon color when hovered
- adds missing focus state for heade buttons icons
2023-04-10 07:43:11 +02:00
Jan Cernik 768851920e
DEV: Add `overflow-x: hidden` to chat message containers (#21030) 2023-04-08 13:37:13 -03:00
Jan Cernik a6cba32e57
FIX: Resize chat collapser when using small width drawer (#21017) 2023-04-08 10:43:17 -03: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
Martin Brennan ea548292bc
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 15:19:52 +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
Jan Cernik afe3e36363
DEV: Remove lazy-yt and replace with lazy-videos (#20722)
- Refactors the old plugin to remove jquery usage
- Adds support for Vimeo videos (default on) and Tiktok (experimental and default off)
2023-03-29 11:54:25 -04:00