Commit Graph

128 Commits

Author SHA1 Message Date
Joffrey JAFFEUX
c3a3ede8cf
FIX: correct replying indicator padding (#21679) 2023-05-22 17:55:31 +02: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
Jarek Radosz
f2339d2d5b
DEV: Fix random typos (#21638) 2023-05-18 15:34:46 +02:00
chapoi
7444ab006d
UX: General chat composer tweaks (#21639)
- prevent hover on disabled state
- more contrast between focus and not focus for send button
2023-05-18 15:15:10 +02:00
Joffrey JAFFEUX
ed123c7cec
FIX: adds missing margin on desktop draft message (#21637) 2023-05-18 14:40:37 +02:00
chapoi
ab4e2bed84
UX: minor fix with new composer and reply/edit (#21634) 2023-05-18 12:04:14 +02:00
Joffrey JAFFEUX
44d28cd778
FIX: ensures replying indicator has limited height (#21614) 2023-05-17 18:03:15 +02:00
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