Commit Graph

354 Commits

Author SHA1 Message Date
Kris
e5c0cfcd27
UX: remove default use of quaternary color, update nav pill styles (#27502) 2024-06-24 09:54:34 -04:00
Kris
f38bb5e3e4
UX: fix chat drawer z-index (#27568) 2024-06-21 10:09:05 -04:00
chapoi
c1f477c1b6
UX: Remove or replace button transitions with variable (#27527) 2024-06-20 19:51:20 +02:00
Jarek Radosz
1defb9449b
UX: Move user-cards above composer (#27491)
There is currently only one scenario when both the composer and a user card would be present at the same time:

if you have the composer open and then you click on something outside it that triggers a card. Which implies intent to see the card (unobstructed by the composer 😉)

The reverse doesn't happen because opening the composer would close an existing user card.

In theory there's also displaying a user card by clicking on a mention in composer's preview but that functionality is currently broken (and this PR is a prerequisite 😉)

---

I changed `.user-card, .group-card` to `.fk-d-menu[data-identifier="card"]` because that regressed when we moved user cards to float-kit – they are nested inside `.fk-d-menu` so its `z-index` is now important (effectively the cards had `z-index: z("dropdown")` instead of `z("usercard")`)
2024-06-18 15:12:41 +02:00
Kris
3a31c47d37
UX: remove padding to fix mobile thread date pinning (#27470) 2024-06-14 13:50:27 -04:00
David Battersby
47540fb4e0
FEATURE: chat drawer navigation improvement (#27419)
This change replaces the chat drawer tabs with new drawer routes for channels, direct messages and threads.

The main objective is to improve navigation within drawer, now that we have separation of chat sections in drawer.
2024-06-13 13:17:12 +04:00
chapoi
b6c2430bf6
UX: make chat drawer settingspage full height (#27385) 2024-06-10 15:25:28 +02:00
David Battersby
891fb17f60
FEATURE: load chat channel settings within drawer (#27346)
This change allows chat drawer users to edit channel settings and members without leaving drawer mode. If a channel is open within chat drawer and the user clicks the Channel name, it will load channel settings within the drawer.
2024-06-06 14:01:09 +04:00
Jan Cernik
625c715856
FIX: Lazy TikTok embeds height in chat (#27306) 2024-06-03 11:20:47 -03:00
Kris
62b1b69e82
UX: constrain width of chat transcripts in posts (#27288) 2024-05-31 16:26:46 -04:00
chapoi
eb8549e527
UX: Chat footer unread indicator (#27244)
A few follup changes after changing to the chat footer split for drawer:
* Fixing a bug that stretched the unread indicator on mobile
* Minor style changes in hover/focus behaviour for chat drawer
* Repositioning of unread indicator so it has more space at the top of the footer
* Using the `c-unread-indicator` mixin
2024-05-29 17:16:03 +02:00
chapoi
d0427919f1
UX: add illustrations for empty chat list + split into tabs on drawer (#26910)
Adds a placeholder image + CTA in chat, for empty channel and DM lists.

On desktop with drawer mode, we split chat into tabs (like mobile).

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Co-authored-by: David Battersby <info@davidbattersby.com>
Co-authored-by: Régis Hanol <regis@hanol.fr>
2024-05-28 17:00:04 +04:00
chapoi
6a21143d83
UX: add text-overflow for channel members list (#27208) 2024-05-27 21:28:54 +02:00
Joffrey JAFFEUX
e5d040ef61
UX: removes blinking indicator while streaming message (#27131)
Given this is currently buggy and  we have the cancel button Im not sure this is actually necessary. I feel like it's adding a lot of noise of low value.

For now at least, it's better without it.
2024-05-22 13:48:44 +02:00
Jan Cernik
0258e985d8
DEV: Remove legacy styles for LazyYT (#27047) 2024-05-16 09:53:59 -03:00
David Battersby
4404b6808c
UX: expand threads list tap area on mobile (#26818)
This change adds a wrapper link around the thread list details on mobile to make the click area larger.

We also update child div elements to span to ensure valid html, since the link is an inline element and divs are block level.

---------

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2024-05-09 12:45:02 +04:00
chapoi
8bbcd409e3
UX: hide user count in original message link (#26890) 2024-05-06 22:02:15 +02:00
Joffrey JAFFEUX
038236fcca
FIX: prevents long URL to overflow thread title (#26827) 2024-04-30 21:44:35 +02:00
David Battersby
0c8f531909
FEATURE: encourage users to set chat thread titles (#26617)
This change encourages users to title their threads to make it easier for other users to join in on conversations that matter to them.

The creator of the chat thread will receive a toast notification prompting them to add a thread title when on mobile and the thread has at least 5 sent replies.
2024-04-29 17:20:01 +08:00
Joffrey JAFFEUX
52e8d57293
FEATURE: implements last read message for threads (#26702)
This commit will now allow us to track read position in a thread and returns to this position when you open the thread.

Note this commit is also extracting the following components to make it possible:
- `<ChatMessagesScroller />`
- `<ChatMessagesContainer />`

The `UpdateUserThreadLastRead` has been updated to allow this.

Various refactorings have also been done to the code and specs to improve the support of last read.
2024-04-25 10:47:54 +02:00
Jarek Radosz
4d2dcdad9b
UX: Emoji aligment fixes, followup to #26491 (#26618) 2024-04-12 10:48:14 +02:00
Jarek Radosz
f5c9e75438
UX: Fix alignment issues around user status (#26491)
Minor changes but they 1. correct the html structure (no divs in spans) 2. unify the margins
2024-04-09 11:10:12 +02:00
chapoi
cf7f2a6afb
UX: chat > deleted msg styling (#26538) 2024-04-06 11:18:18 +02:00
Jan Cernik
79cf7c0935
DEV: Convert mobile chat message actions to a modal (#26436) 2024-04-04 09:25:52 -03:00
Joffrey JAFFEUX
f9eae75972
DEV: improves keyboard sizing (#26372)
This commit is making the following changes:

- replaces `mobile-keyboard` initializer and `chat-vh` with a new template-less component: `d-vh`
- ensures body scroll lock is released when page/tab focus changes
- correctly locks body on chat channels and chat threads when composer is focused
- removes `bodyScrollFix` as we now use body scroll lock
- `onViewportResize` has been debounced to ensure it's not a bad performance vector
- adds a reverse option do body scroll lock, this is made to support reversed scroll areas (like chat channels and threads)

---------

Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>
2024-03-27 08:50:32 +01:00
chapoi
fe02868a79
UX: chat > fix lock icon in original message link (#26227) 2024-03-18 19:30:36 +01:00
David Battersby
d5b944f1de
FEATURE: add chat direct message button to user profile (#26135)
This change adds the chat direct message button to user profiles, similarly to how we use it within the user card.
2024-03-18 11:17:37 +08:00
David Battersby
139e21e37d
UX: fix chat title margin on drawer and side panel (#26171)
Fixes alignment issues within the drawer mode and chat sidebar panel on desktop.
2024-03-14 13:41:42 +08:00
chapoi
1f786f4972
UX: fix chat navbar header alignment (#26161) 2024-03-14 12:11:08 +08:00
chapoi
cfd72fa65c
UX: remove last reply from My Threads preview + restyle (#25568)
On mobile, when viewing the My Threads area, each thread will show:

- The avatar of the last responder in the thread, overlaid with the chat thread symbol to visually distinguish this area from DMs.
- Either the thread title, where applicable, or the first message of the thread, truncated to fit on one line.
- The channel where the thread originated.
- The last message sent in the thread, truncated to fit on one line.
- When the last message was sent in the thread.

---------

Co-authored-by: David Battersby <info@davidbattersby.com>
2024-03-11 17:59:40 +08:00
chapoi
1fcd6fee29
UX: Chat avatar is-online styling (#26012)
* UX: change is-online from border to box-shadow

* Correct sizing of user-count channel-icon

* Delete obsolete css
2024-03-08 21:11:47 +01:00
Joffrey JAFFEUX
21a7ebf1bc
FIX: improves linking of thread messages (#26095)
- The thread preview is now a regular link and can be right clicked
- left gutter date, and regular date of a thread message will not correctly link to the thread's message
2024-03-08 09:09:42 +01:00
Joffrey JAFFEUX
76953cc356
FEATURE: allows to force a thread (#25987)
Forcing a thread will work even in channel which don't have `threading_enabled` or in direct message channels.

For now this feature is only available through the `ChatSDK`:

```ruby
ChatSDK::Message.create(in_reply_to_id: 1, guardian: guardian, raw: "foo bar baz", channel_id: 2, force_thread: true)
```
2024-03-06 12:03:42 +01:00
chapoi
f99687e10d
UX: fix fontsize and weight for prioritize username setting (#26034) 2024-03-05 19:42:24 +01:00
chapoi
180e6c6188
UX: chat message creator scss cleanup + design tweak to username display (#25928)
* UX: chat message creator scss cleanup + design tweak to username display

* add user status with live updates to modal

* show user status description in modal

* add tests for user status

* UX: add user-status styling to chat message creator


---------

Co-authored-by: David Battersby <info@davidbattersby.com>
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-03-05 12:49:29 +01:00
Joffrey JAFFEUX
0b778697ff
FIX: instantly removes group message when leaving (#25961)
Prior to this fix clicking <kbd>x</kdb> on a channel row would effectively leave the channel on server side, but it wouldn't disappear from the screen before a page refresh.
2024-02-29 23:49:01 +01:00
Kris
8c22831672
UX: update appropriate btn-flat instances to btn-transparent (#25945)
With the adjustments of `btn-transparent` in https://github.com/discourse/discourse/pull/24666, there are more buttons that could use this class instead of `btn-flat`. This mostly relates to `x` close buttons, but also includes composer and chat toggles.

The primary difference between these styles is that `btn-transparent` never has a background, where `btn-flat` may have a hover or focus background.
2024-02-29 11:47:07 +01:00
Kris
c8133318b8
DEV: move chat scrollbar style to scollbar file (#25934) 2024-02-28 19:07:22 +01:00
Kris
6426eaff39
UX: increase chat pre scrollbar contrast (#25930) 2024-02-28 12:27:08 -05:00
chapoi
337773b8ac
UX: chat > general fixes (#25929)
* UX: chat > keep send icon active when keyboard is hidden (mobile)

* FIX: chat > keep composer insert button at bottom

* UX: chat > give seperator equal padding
2024-02-28 15:12:13 +01:00
David Battersby
a423afbbb9
FEATURE: Add user status to chat members list (#25831)
This change adds the user status next to the name within the chat channel members list.
2024-02-27 12:17:15 +08:00
chapoi
ff9c6ce934
UX: fix border-radius for dropdown in chat msg actions (#25881) 2024-02-26 15:50:12 +01:00
chapoi
0dfd30f587
UX: remove margin on bookmark icon on chat msg (#25859) 2024-02-26 15:49:58 +01:00
Joffrey JAFFEUX
41790f7739
DEV: allows stop/resume streaming on a message (#25774)
```ruby
ChatSDK::Message.start_stream(message_id: 1, guardian: guardian)
ChatSDK::Message.stream(raw: "foo", message_id: 1, guardian: guardian)
ChatSDK::Message.stream(raw: "bar", message_id: 1, guardian: guardian)
ChatSDK::Message.stop_stream(message_id: 1, guardian: guardian)
```

Generally speaking only admins or owners of the message can interact with a message.  Also note, Streaming to an existing message with a different user won't change the initial user of the message.
2024-02-26 14:16:29 +01:00
chapoi
2d68d8f74c
UX: Chat > send btn alignment + hardcoded value fix (#25836)
* UX: chat > fix alignment of svg icon in send button

* fix forgotten hardcoded value
2024-02-23 10:46:55 +01:00
chapoi
b2a2203140
UX: chat composer > fix typing indicator and top padding (mobile) (#25821) 2024-02-23 07:59:06 +02:00
chapoi
f4848ae989
UX: tweaks for send button (#25816) 2024-02-22 16:39:54 +01:00
chapoi
64a41729f7
UX: chat composer design update (mobile) (#25789) 2024-02-22 12:42:07 +01:00
Joffrey JAFFEUX
d8d756cd2f
DEV: chat streaming (#25736)
This commit introduces the possibility to stream messages. To allow plugins to use streaming this commit also ships a `ChatSDK` library to allow to interact with few parts of discourse chat.

```ruby
ChatSDK::Message.create_with_stream(raw: "test") do |helper|
  5.times do |i|
    is_streaming = helper.stream(raw: "more #{i}")
    next if !is_streaming
    sleep 2
  end
end
```

This commit also introduces all the frontend parts:
- messages can now be marked as streaming
- when streaming their content will be updated when a new content is appended
- a special UI will be showing (a blinking indicator)
- a cancel button allows the user to stop the streaming, when cancelled `helper.stream(...)` will return `false`, and the plugin can decide exit early
2024-02-20 09:49:19 +01:00
chapoi
5b9eac00b9
UX: better card alignment (#25720) 2024-02-16 16:00:55 +01:00