Commit Graph

178 Commits

Author SHA1 Message Date
Joffrey JAFFEUX a982b6765f
FIX: allows to resize panels on tablets (#22640)
On tablets like iPad where we allow channel and thread to be on the same screen, it was not possible to resize the panels due to code being thought for mouse events. This commit should now correctly allow for this.

The "resizer" has also been made larger to simplify touching.

No test as it's hard to test on iPad and dragging events are also complex.
2023-07-17 15:11:51 +02:00
chapoi e4deba0075
UX: size down unread indicators fror drawer/mobile (#22636) 2023-07-17 12:54:00 +02:00
Joffrey JAFFEUX 720063fcfb
FIX: s/--border-radius-large)/--d-border-radius-large (#22587) 2023-07-13 10:17:29 +02:00
chapoi ab67b2bda9
UX: more border-radius removal from chat (#22542) 2023-07-12 14:30:06 +02:00
chapoi 9576aab391
UX: z-index for for tippy box in chat (#22541) 2023-07-12 14:29:44 +02:00
chapoi 8c74bb6573
UX: lower border radius for channel cards (#22513) 2023-07-10 19:07:01 +02:00
chapoi 0ce0bcd8ff
Remove border radius from chat (#22437)
* add border-radius-large variable

* UX: replace chat border-radius with variable
2023-07-10 15:07:38 +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
chapoi c7cebbfe38
UX: change z-index of thread resizer to be below emoji popup (#22505) 2023-07-10 12:27:55 +02:00
chapoi c2b98802ea
UX: message creator spacing and sizing on mobile + fix text wrapping (#22508)
* UX: mobile more spacing and bigger

* UX: align text better

* UX: ellipsis and pill bg colour

* UX: disabled-chat msg styling
2023-07-10 12:27:26 +02:00
Joffrey JAFFEUX af22f77d38
DEV: removes unused components (#22497)
Removes the following components which are not used anymore:
- d-progress-bar
- on-visibility-action
2023-07-10 09:54:45 +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
Mark VanLandingham 3171fd1a0a
DEV: Introduce Chat Notices with publishing method (#22369) 2023-07-06 08:26:25 -05:00
Joffrey JAFFEUX d75d64bf16
FEATURE: new jump to channel menu (#22383)
This commit replaces two existing screens:
- draft
- channel selection modal

Main features compared to existing solutions
- features are now combined, meaning you can for example create multi users DM
- it will show users with chat disabled
- it shows unread state
- hopefully a better look/feel
- lots of small details and fixes...

Other noticeable fixes
- starting a DM with a user, even from the user card and clicking <kbd>Chat</kbd> will not show a green dot for the target user (or even the channel) until a message is actually sent
- it should almost never do a full page reload anymore

---------

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
Co-authored-by: Mark VanLandingham <markvanlan@gmail.com>
2023-07-05 18:18:27 +02:00
chapoi ee1dbd46c6
UX: Thread indicator small fixes (#22389)
* UX: make timestamp font size smaller

* UX: participants use copy instead of avatar

* FIX: Move thread participant count into i18n

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
2023-07-04 10:32:09 +02:00
Joffrey JAFFEUX ea0b8ca38c
FEATURE: allows to enable/disable threading in UI (#22307)
Enabling/Disabling threading has been possible through command line until now. This commit introduces two new UIs:

- When creating a channel, it will be available once the category has been selected
- On the settings page of a channel for admins
2023-06-29 07:19:12 +02:00
Martin Brennan cec68b3e2c
FEATURE: Conditionally change back button route for thread (#22129)
When clicking back from a thread, we want to either go back to the
channel if the thread was opened from an indicator, or to the thread
list if we opened it from there. Since ember doesn't give a nice way
to get the previous route, we need to store this ourselves. We only
do this on mobile, on desktop we just follow existing behaviour.

Also implements a chat router history.

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-06-28 09:58:47 +10:00
Jarek Radosz a6bd3994f3
UX: Align chat separators, increase mobile chat width (#22298) 2023-06-27 18:49:45 +02:00
chapoi 802fb3b194
UX: chat message thread indicator improvements (#22224)
- gridified the thread message indicator, alleviating some problems with positioning and overflow
participant avatars will overlap/smush on smaller size and mobile
- the excerpt went from 3 > 2 lines of wrapping on smaller size, still 1 line on large size
- dropped the copy of "last reply"
- fixed wrong line height
- moved the "x replies" over to the right near the participants, as that makes more sense
- using a bubble to indicate other participants, instead of copy

This PR introduces the @container query, which is experimental. Nothing will break when it's being viewed in a not-supported browser, but it will be less elegant.
2023-06-26 14:47:13 +02:00
Kris 6ec95fa79c
FIX: sidebar dot color when chat is off (#22264) 2023-06-26 10:43:35 +02:00
chapoi a2a31eb420
UX: adding max height to image in chat blockquote (#22255)
* UX: adding max height to  blockquote image in chat
2023-06-23 10:33:12 +02:00
Jarek Radosz 876ff17cc2
DEV: Update eslint/prettier (#22226) 2023-06-21 20:59:03 +02:00
Jan Cernik e51bbfa4e8
FEATURE: Scroll to first message when clicking date in chat (#21926)
This PR adds a new parameter to fetch chat messages: `target_date`.

It can be used to fetch messages by a specific date string. Note that it does not need to be the `created_at` date of an existing message, it can be any date. Similar to `target_message_id`, it retrieves an array of past and future messages following the query limits.
2023-06-20 15:58:38 +02:00
Joffrey JAFFEUX cbb9396353
REFACTOR: <ChatMessage> component (#22172)
- Moves `<ChatMessageInfo />` to `<Chat::Message::Info />`
- Moves `<ChatMessageAvatar />` to `<Chat::Message::Avatar />`
- Moves `<ChatMessageLeftGutter />` to `<Chat::Message::LeftGutter />`, adds tests
- Creates `<Chat::Message::Error />`
- Creates `<Chat::Message::MentionWarning />`, adds tests and a styleguide
- Creates a model for ChatMessageMentionWarning, adds fabricator for it
- Keeps the enter/leave viewport logic inside the `<ChatMessage />` component instead of bubbling it to the channel and thread components
- Adds a scale animation when clicking a reaction
- Creates `chat/later-fn` modifier which accepts a function and a delay. It allows to call a function Xms after a component has been inserted, it's useful for animations.
- Moves css code out of chat-message into relevant files
- Deletes unused code

<!-- 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-06-19 09:50:54 +02:00
Joffrey JAFFEUX 7db6d27292
FIX: correctly sets and uses has-reply class (#22153)
The layout was broken for messages replying to another message in non threaded channels.

This commit also refactors the chat-message-test to use fabricators.
2023-06-16 14:04:11 +02:00
Joffrey JAFFEUX ab286cc6e1
FIX: css class was incorrect (#22149)
This was preventing to have the correct active background on the chat message while hovering the action's menu.
2023-06-16 12:33:13 +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
Joffrey JAFFEUX 79a260a6bb
FIX: allows selection of messages in threads (#22119)
This commit fixes the selection of message in threads and also applies various refactorings
- improves specs and especially page objects/components
- makes the channel/thread panes responsible of the state
- adds an animationend modifier
- continues to follow the logic of "state" should be displayed as data attributes on component by having a new `data-selected` attribute on chat messages
2023-06-15 11:27:31 +02:00
Martin Brennan c819c96c31
FIX: Minor thread indicator issue (#22128)
* Set a line height for the last reply excerpt so the height
  does not jump when including an emoji
2023-06-15 16:05:06 +10: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
Kris e0f848c2ea
REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
Roman Rizzi 8938ecabc2
FEATURE: Custom content summarization strategies. (#21813)
* FEATURE: Content custom summarization strategies.

This PR establishes a pattern for plugins to register alternative ways of summarizing content by extending a class that defines an interface.

Core controls which strategy we'll use and who has access to it through the `summarization_strategy` and `custom_summarization_allowed_groups`. It also defines the UI for summarizing topics.

Other plugins can access this summarization mechanism and implement their features, removing cross-plugin customizations, as it currently happens between chat and the discourse-ai plugin.

* Group membership validation and rate limiting

* Work with objects instead of classes

* Port summarization feature from discourse-ai to chat

* Rename available summaries to 'Top Replies' and 'Summary'
2023-06-13 14:21:46 -03: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
Joffrey JAFFEUX 89d7b1861d
FIX: various mobile optimizations (#22043)
* FIX: increases resize observer throttle delay
25ms is not necessary and was sometimes causing jankyness.

* FIX: removes ios momentum fix delay
Instead of a 50ms, simply use next+schedule("afterRender") to attempt to have the shortest delay possible.

* FIX: backdrop event propagation
Prevents backdrop touch to propagate to underlying channel/thread.

* UX: adds is-active class to container of active message
This change allows to keep the background on the active message while the actions menu is displayed.

* FIX: prevents skip-link to be selected on press

* UX: allows to close actions menu instantly
The backdrop should always receive events, we don't need to wait for the menu to be fully displayed.

* UI: adds spacing between last message and composer

* UI: makes backdrop less dark

* FIX: makes events passive on long-press modifier
2023-06-09 17:37:26 +02:00
Bianca Nenciu 4973f0ccde
UX: Remove 'Create Topics' notice (#21958)
We are looking at simplifying the new admin/user experience and the
many notices bring unnecessary complexity.
2023-06-08 22:30:26 +03:00
Sérgio Saquetim e306a521fd
DEV: Added chat api to remove secondary actions (#21982)
In some cases, plugins may want to hide some of these actions
at all times, overriding the rules for canX with hiding these
buttons. To achieve this, a plugin can call the API
`removeChatComposerSecondaryButtons` and pass the list of button
IDs that should be removed as argument, like the example below:

```
withPluginApi("1.2.0", (api) => {
  api.removeChatComposerSecondaryActions("copyLink", "select");
});
```

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
2023-06-08 11:37:50 -03:00
Joffrey JAFFEUX e6c6c342d9
REFACTOR: composer/thread (#21910)
This commit contains multiple changes to improve the composer behavior especially in the context of a thread:

- Generally rename anything of the form `chatChannelThread...` to `chatThread...``
- Moves the textarea interactor instance inside the composer server
- Improves the focus state and closing of panel related to the use of the Escape shortcut
- Creates `Chat::ThreadList` as a component instead of having `Chat::Thread::ListItem` and others which could imply they were children of a the `Chat::Thread` component
2023-06-07 21:49:15 +02: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 8c4cbd748d
UX: fix greyed out add button in chat composer when focussed (#21947) 2023-06-06 11:18:50 +02: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
Joffrey JAFFEUX 7b7c4c383a
UX: followups to #1f37fe5 (#21859)
- ensures buttons are aligned to the bottom
- makes the emoji icon tertiary as initially intended
- correctly sets the icon scale of the sending button
2023-05-31 16:58:31 +02:00
chapoi 1f37fe5fa5
UX: chat composer buttons refactor + emoji (#21852)
- Made the emoji btn blue when composer is focused
- Moved everything chat-composer-button to its own file and BEM-ified it and making the choice to only work with our own is-disabled definition instead of with the attribute :disabled, for consistency
2023-05-31 15:12:35 +02:00
Martin Brennan 6ec6cfccf8
FEATURE: Chat thread header indicator improvements (#21807)
This changes the thread header positioning of the
unread indicator to match the designs based on the route:

1. When the channel is open, show the indicator of # unread
   threads with the icon
2. When the threads list is open, show no indicator since
   you are on the list and can see which threads are unread
3. When a single thread is open, show the unread threads
   indicator along with a left < back button, with a label
   to show that this goes back to ongoing discussions

Drawer changes to come in another PR.
2023-05-30 10:10:07 +02:00
Joffrey JAFFEUX 9215de3af7
FIX: ensures chat-thread is not overflowing (#21782) 2023-05-29 09:55:50 +02:00
Martin Brennan 7a9514922b
FEATURE: Improving thread list item and header (#21749)
* Moved the settings cog from thread list to thread and
  put it in a new header component
* Remove thread original message component, no longer needed
  and the list item and thread indicator styles/content
  will be quite different
* Start adding content (unread indicator etc.) to the thread
  list item and changing structure to be more like designs
* Serialize the last thread reply when opening the thread index,
  show in list and update with message bus
2023-05-29 09:11:55 +02:00
Joffrey JAFFEUX 0645f3628c
UI: minor spacing adjustment in message details (#21761) 2023-05-26 09:16:27 +02:00
Martin Brennan b6c5a2da08
FEATURE: Initial chat thread unread indicators (#21694)
This commit adds the thread index and individual thread
in the index list unread indicators, and wires up the message
bus events to mark the threads as read/unread when:

1. People send a new message in the thread
2. The user marks a thread as read

There are several hacky parts and TODOs to cover before
this is more functional:

1. We need to flesh out the thread scrolling and message
   visibility behaviour. Currently if you scroll to the end
   of the thread it will just mark the whole thread read
   unconditionally.
2. We need to send down the thread current user membership
   along with the last read message ID to the client and
   update that with read state.
3. We need to handle the sidebar unread dot for when threads
   are unread in the channel and clear it based on when the
   channel was last viewed.
4. We need to show some indicator of thread unreads on the
   thread indicators on original messages.
5. UI improvements to make the experience nicer and more
   like the actual design rather than just placeholders.

But, the basic premise around incrementing/decrementing the
thread overview count and showing which thread is unread
in the list is working as intended.
2023-05-25 09:56:19 +02:00
Kris 5dd89e0b70
UX: iPad footer nav now included in header offset (#21699) 2023-05-23 17:49:19 -04:00
Joffrey JAFFEUX b8bd3b07ef
DEV: regroups composer button code (#21690)
This commit makes it easier to ensure each button have a similar behavior: hover, disabled, focus...

It also removes some dead code (__inline-button) and fixes a bug where the emoji button didnt have the right un-focused color (it was more visible than it should.
2023-05-23 10:12:03 +02:00