Commit Graph

32 Commits

Author SHA1 Message Date
Joffrey JAFFEUX
9961163e82
FIX: prevents discourse header to go under ipad navigation (#25542)
We had two issues which were present for a long time I think:
- one that impacts both core discourse and chat. We were not setting top on the header when `footer-nav-ipad` was present, meaning that you could make it scroll under if you try to scroll up by putting your finger on the discourse header
- one that impacted only chat. It's also present in core, but in core it's not a probem because we don't have a fixed height div. The body height was higher than the screen which would cause a second scrollbar to appear and would slightly break layout, if you scroll on this scrollbar (body).
2024-02-02 15:24:18 +01:00
Jan Cernik
ab326d10d8
FIX: Make long thread titles readable (#25456)
When reaching the top of a thread, the full thread title will be displayed if it was too long to fit.
It works in mobile, drawer mode, and fullscreen.
---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-01-30 14:18:00 +01:00
David Battersby
6b3a68e562
FEATURE: Mobile Chat Notification Badges (#25438)
This change adds notification badges to the new footer tabs on mobile chat, to help users easily find areas where there’s new activity to review.

When on mobile chat:
- Show a badge on the DMs footer when there is unread activity in DMs.
- Show a badge on the Channels footer tab when there is unread channel activity.
- Show a badge on the Threads footer tab when there is unread activity in a followed thread.
- Notification badges should be removed once the unread activity is viewed.

Additionally this change will:
- Show green notification badges for channel mentions or DMs
- Show blue notification badges for unread messages in channels or threads

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2024-01-29 10:38:14 +08:00
Kris
6b185f8655
PERF: eliminate some slow CSS selectors (#25392) 2024-01-26 13:10:45 -05:00
Joffrey JAFFEUX
608ce620fb
FIX: chat navbar followups (#24953)
- displays title on threads screen on one line instead of two on mobile

- ensures chat is not overflowing the screen width
2023-12-18 21:39:36 +01:00
Joffrey JAFFEUX
53b96638c5
DEV: implements <Chat::Navbar /> (#24917)
This new navbar component is used for every navbar in chat, full page or drawer, and any screen.

This commit also uses this opportunity to correctly decouple drawer-routes from full page routes. This will avoid having this kind of properties in components: `@includeHeader={{false}}`. The header is now defined in the parent template using a navbar. Each route has now its own template wrapped in a div of the name of the route, eg: `<div class="c-routes-threads">..</div>`.

The navbar API:

```gjs
<Navbar as |navbar|>
 <navbar.BackButton />
 <navbar.Title @title="Foo" />
 <navbar.ChannelTitle @channel={{@channel}} />
 <navbar.Actions as |action|>
   <action.CloseThreadButton />
 </navbar.Actions>
</navbar>
```

The full list of components is listed in `plugins/chat/assets/javascripts/discourse/components/navbar/index.gjs` and `plugins/chat/assets/javascripts/discourse/components/navbar/actions.gjs`.

Visually the header is not changing much, only in drawer mode the background has been removed.

This commit also introduces a `<List />` component to facilitate rendering lists in chat plugin.
2023-12-18 17:49:58 +01:00
Jarek Radosz
41942357ed
DEV: Use class attribute instead of @class arg (#24804) 2023-12-12 13:09:05 +01:00
Joffrey JAFFEUX
09277bc543
FEATURE: my threads page (#24771)
This commit adds a new "My threads" link in sidebar and drawer. This link will open the "/chat/threads" page which contains all threads where the current user is a member. It's ordered by activity (unread and then last message created).

Moreover, the threads list of a channel page is now showing every threads of a channel, and not just the ones where you are a member.
2023-12-11 07:38:07 +01:00
Kris
22747e26fd
DEV: common CSS property for content backgrounds (#23467) 2023-09-08 12:07:04 -04:00
Joffrey JAFFEUX
2d567cee26
FEATURE: thread pagination (#22624)
Prior to this commit we were loading a large number of thread messages without any pagination. This commit attempts to fix this and also improves the following points:

- code sharing between channels and threads:
Attempts to reuse/share the code use in channels for threads. To make it possible part of this code has been extracted in dedicated helpers or has been improved to reduce the duplication needed.

Examples of extracted helpers:
- `stackingContextFix`: the ios hack for rendering bug when momentum scrolling is interrupted
- `scrollListToMessage`, `scrollListToTop`, `scrollListToBottom`:  a series of helper to correctly scroll to a specific position in the list of messages

- better general performance of listing messages:
One of the main changes which has been made is to remove the computation of visible message during scroll, it will only happen when needed (update last read for example). This constant recomputation of `message.visible` on intersection observer event while scrolling was consuming a lot of CPU time.
2023-07-27 09:57:03 +02:00
Joffrey JAFFEUX
9830c40386
DEV: makes chat modals use the new <DModal /> component (#22495)
This commit also standardize the naming pattern of modals: `<Chat::Modal::FooBar />` and changes css class accordingly.

Co-authored-by: David Taylor <david@taylorhq.com>
2023-07-10 13:43:33 +02:00
Joffrey JAFFEUX
03e495186f
FIX: makes chat user avatar show presence by default (#22490)
It's way more common to have presence enabled than disabled, so we should have been making it the default from start.

This commit also changes the namespace of `<ChatUserAvatar />` into `<Chat::UserAvatar />` and refactors tests.
2023-07-10 09:36:20 +02:00
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
chapoi
fca6c1836c
UX: Chat unread indicator refactor (#22040)
* move the chat unread indicator to top to match the profile avatar indicator
* add white border to profile avatar indicator (badge notification) to match chat indicator and userstatus styling
* change `.urgent` to BEM
* congregate all styling into mixin
  * update chat index to use mixin
  * update thread indicator to use mixin
  * update header indicator to use mixin

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Co-authored-by: Martin Brennan <martin@discourse.org>
2023-06-12 14:33:45 +10:00
chapoi
86facadec1
FIX: apply chat header icon indicator style to urgent only (#21967)
* FIX: apply chat header icon indicator style to urgent only

* UX: smaller padding
2023-06-07 06:42:51 +02:00
chapoi
9809103ed9
UX: fix number cutoff in header chat indicator (#21946)
In the chat header indicator, expand to a pill when the number reaches
N digits, and also display 99+ if the number is over 99.
2023-06-07 11:42:08 +10:00
chapoi
d40649c648
UX: chat channel header icons (#21887)
* UX: BEM fix for has-unreads

* UX: small refactor for chat channel header icons

* UX: refactor chat thread unread indicator

* UX: channel header thread icon hover styling

* DEV: Spec fixes

* UX: fix font + line-height

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
2023-06-02 10:34:19 +02:00
Jarek Radosz
f2339d2d5b
DEV: Fix random typos (#21638) 2023-05-18 15:34:46 +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
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
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
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
e4029bfab8
FIX: chat height was incorrect on ipad (#21289) 2023-04-28 10:51:23 +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
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
Jan Cernik
768851920e
DEV: Add overflow-x: hidden to chat message containers (#21030) 2023-04-08 13:37:13 -03: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
Jarek Radosz
38fdd842f5
UX: Fix chat separator alignment (#20669)
Also: work around 1px svg shift in scroll-to-bottom button
2023-03-18 18:03:54 +01: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