Commit Graph

155 Commits

Author SHA1 Message Date
chapoi
8465f53a35
UX: userstatus limit handling in UI (#20343)
* UX: handle long userstatus in menupanel

* UX: remove margin on userstatus emoji

* UX: change emoji sise of user status in DM creator

* FIX: user status overflow on chat index
2023-02-17 06:54:56 +01:00
Joffrey JAFFEUX
5ebf016a3f
FIX: removes uneeded footer-nav-height subtraction (#20336)
This was incorrectly added.
2023-02-16 18:25:36 +01:00
Joffrey JAFFEUX
7391f8e077
FIX: correctly account for ipad footer nav height (#20334)
This code also removes duplicated code in chat which doesn’t seem necessary anymore.
2023-02-16 16:49:17 +01:00
chapoi
33ee46d62b
UX: update chat draft icon colour (#20326) 2023-02-16 09:16:07 +01:00
Krzysztof Kotlarek
1a5f6aefc7
FIX: correct sidebar and chat height on DiscourseHub (#20323)
Before that change, footer of the sidebar was not visible.
Footer is very important, especially now, when add custom section button is located there.
Also, distance between chat input and keyboard were increased
2023-02-16 15:59:09 +11:00
Martin Brennan
c767a38086
FIX: Overflowing chat content in main-chat-outlet grid (#20301)
Follow up to 82b4a53d29

On mobile, we just need to add `min-width: 0` to
`chat-live-pane` so it will not overflow the grid
defined in `main-chat-outlet.chat-view`.

The overflow could be triggered by:

1. Replying on mobile to a really long chat message
2. Uploading > 2 files

Both of these situations are fixed.
2023-02-15 12:48:18 +10:00
Joffrey JAFFEUX
82b4a53d29
FIX: reverts part of thread css (#20286)
This css was causing the view on mobile to take more space than the available width. This was particularly visible with uploads due to a bug preventing the overflow, this is also fixed.
2023-02-14 15:38:26 +01:00
Martin Brennan
07ab20131a
FEATURE: Chat side panel with threads initial skeleton (#20209)
This commit introduces the skeleton of the chat thread UI. The
structure of the components looks like this. Its done this way
so the side panel can be used for other things as well if we wish,
not just for threads:

```
.main-chat-outlet
   <ChatLivePane />
   <ChatSidePanel>
     <-- rendered with {{outlet}} -->
     <ChatThread />
   </ChatSidePanel>
```

Later on the `ChatThreadList` will be rendered here as well.
Now, when you go to a channel you can open a thread by clicking
on either the Open Thread message action button or by clicking on
the reply indicator. This will take you to a route like `chat/c/:slug/:channelId/t/:threadId`.
This works on mobile as well.

This commit includes basic serializers and routes for threads,
as well as a new `ChatThreadsManager` service in JS that caches
threads for a channel the same way the channel threads manager does.

The chat messages inside the thread are intentionally left out
until a later PR.

**NOTE: These changes are gated behind the site setting enable_experimental_chat_threaded_discussions
and the threading_enabled boolean on a ChatChannel**
2023-02-14 11:38:41 +10:00
chapoi
d33d98f9c1
FIX: changed classname for YT images (#20212) 2023-02-08 05:57:36 +01:00
Joffrey JAFFEUX
a04201ae01
UX: implements a random and auto generated skeleton (#20202)
UI is not modified much besides removing the border-bottom, and using only message body.

However instead of having a fix template, this is all automatically generated and random, resulting in a more natural experience.
2023-02-07 22:48:10 +01:00
Joffrey JAFFEUX
b755b45029
FIX: apply max-height on the outer container (#20199)
This change allow to correctly work with the topic composer height changing.
2023-02-07 22:00:00 +01:00
Joffrey JAFFEUX
7dcaaec90c
UX: allows drawer to take most of height space (#20197)
Only the header's height and 15px spacing are removed from the height of the viewport.

Previously it was limited to 90vh and there was also a useless property on a child node limiting it to 85vh. We now use only one property.
2023-02-07 19:49:00 +01:00
chapoi
2f8ad17aed
UX: apply same style for highlight mention span (#20176) 2023-02-06 10:56:52 +01:00
Jan Cernik
44df5ee7c8
FIX: Allow keyboard navigation when searching emojis in chat (#20157) 2023-02-03 11:36:45 -03:00
Joffrey JAFFEUX
d5024d96f1
FEATURE: resizeable chat drawer (#20160)
This commit implements a requested feature: resizing the chat drawer.

The user can now adjust the drawer size to their liking, and the new size will be stored in localstorage so that it persists across refreshes. In addition to this feature, a bug was fixed where the --composer-right margin was not being correctly computed. This bug could have resulted in incorrectly positioned drawer when the composer was expanded.

Note that it includes support for RTL.
2023-02-03 15:11:12 +01:00
chapoi
565b5c4b18
UX: remove chat-specific font declaration (#20096) 2023-01-31 11:00:33 +01:00
chapoi
d0780eacdc
FIX: preserves avatar size inside onebox (#20066)
* UX: Wrap chat one-box avatars

* UX: restrict onebox image css to non-avatar
2023-01-30 13:59:25 +01:00
Martin Brennan
db5ad34508
FEATURE: Allow editing channel slug (#19948)
This commit introduces the ability to edit the channel
slug from the About tab for the chat channel when the user
is admin. Similar to the create channel modal functionality
introduced in 641e94f, if
the slug is left empty then we autogenerate a slug based
on the channel name, and if the user just changes the slug
manually we use that instead.

We do not do any link remapping or anything else of the
sort, when the category slug is changed that does not happen
either.
2023-01-30 13:18:34 +10:00
Kris
e3a48d2681
FIX: data-popper-reference-hidden too broad (#19937) 2023-01-23 14:28:48 -05:00
Martin Brennan
641e94fc3c
FEATURE: Allow changing slug on create channel (#19928)
This commit allows us to set the channel slug when creating new chat
channels. As well as this, it introduces a new `SlugsController` which can
generate a slug using `Slug.for` and a name string for input. We call this
after the user finishes typing the channel name (debounced) and fill in
the autogenerated slug in the background, and update the slug input
placeholder.

This autogenerated slug is used by default, but if the user writes anything
else in the input it will be used instead.
2023-01-23 14:48:33 +10:00
Joffrey JAFFEUX
1d4c1fe002
UX: reorders chat-channel fields (#19905)
This commit also adds a long description to the auto join field. This is the same description used in channel settings.
2023-01-18 13:12:08 +01:00
Martin Brennan
31f6811a93
FIX: Change wording from title -> name in channel about page (#19889)
We refer to the channel name rather than title elsewhere
(including the new channel modal), so we should be consistent.
Title is an internal abstraction, since DM channels cannot have
names (currently).

Also change the name field on channel edit to a input type="text"
rather than a textarea, since we don't want a huge input here.
2023-01-18 09:13:33 +10:00
Joffrey JAFFEUX
2644a4d303
DEV: removes chat-channel-settings-row (#19650)
This is dead code which should have been removed when `chat-settings-settings-modal` has been removed.
2022-12-29 13:50:01 +01:00
Joffrey JAFFEUX
4ba4959a26
FIX: various fixes to channel archive status (#19649)
- improves UI by displaying channel status on it's own line
- ensures channel status is correctly updated right after the request on frontend
- adds status on info page
2022-12-29 11:45:40 +01:00
Joffrey JAFFEUX
d2e24f9569
DEV: start glimmer-ification and optimisations of chat plugin (#19531)
Note this is a very large PR, and some of it could have been splited, but keeping it one chunk made it to merge conflicts and to revert if necessary. Actual new code logic is also not that much, as most of the changes are removing js tests, adding system specs or moving things around.

To make it possible this commit is doing the following changes:

- converting (and adding new) existing js acceptances tests into system tests. This change was necessary to ensure as little regressions as possible while changing paradigm
- moving away from store. Using glimmer and tracked properties requires to have class objects everywhere and as a result works well with models. However store/adapters are suffering from many bugs and limitations. As a workaround the `chat-api` and `chat-channels-manager` are an answer to this problem by encapsulating backend calls and frontend storage logic; while still using js models.
- dropping `appEvents` as much as possible. Using tracked properties and a better local storage of channel models, allows to be much more reactive and doesn’t require arbitrary manual updates everywhere in the app.
- while working on replacing store, the existing work of a chat api (backend) has been continued to support more cases.
- removing code from the `chat` service to separate concerns, `chat-subscriptions-manager` and `chat-channels-manager`, being the largest examples of where the code has been rewritten/moved.

Future wok:
- improve behavior when closing/deleting a channel, it's already slightly buggy on live, it's rare enough that it's not a big issue, but should be improved
- improve page objects used in chat
- move more endpoints to the API
- finish temporarily skipped tests
- extract more code from the `chat` service
- use glimmer for `chat-messages`
- separate concerns in `chat-live-pane`
- eventually add js tests for `chat-api`, `chat-channels-manager` and `chat-subscriptions-manager`, they are indirectly heavy tested through system tests but it would be nice to at least test the public API

<!-- 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. -->
2022-12-21 13:21:02 +01:00
chapoi
3c43beebc8
FIX: box-sizing for avatars (#19517) 2022-12-19 13:43:18 +01:00
chapoi
8db1f1892d
UX: Hashtag autocomplete styling (#19426)
* UX: added fadeout + hashtag styling

UX: add full name to autocomplete

UX: autocomplete mentions styling

UX: emoji styling user status

UX: autocomplete emoji

* DEV: Move hashtag tag counts into new secondary_text prop

* FIX: Add is-online style to mention users via chat

UX: make is-online avatar styling globally available

* DEV: Fix specs

* DEV: Test fix

Co-authored-by: Martin Brennan <martin@discourse.org>
2022-12-19 12:31:45 +01:00
chapoi
d9806b5314
UX: change color of preview card in channels (#19480) 2022-12-15 16:58:42 +01:00
Roman Rizzi
9c8043a4d2
FEATURE: Enforce mention limits for chat messages (#19034)
* FEATURE: Enforce mention limits for chat messages

The first part of these changes adds a new setting called `max_mentions_per_chat_message`, which skips notifications when the message contains too many mentions. It also respects the `max_users_notified_per_group_mention` setting
and skips notifications if expanding a group mention would exceed it.

We also include a new component to display JIT warning for these limits to the user while composing a message.

* Simplify ignoring/muting filter in chat_notifier

* Post-send warnings for unsent warnings

* Improve pluralization

* Address review feedback

* Fix test

* Address second feedback round

* Third round of feedback

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2022-12-06 14:54:04 -03:00
Joffrey JAFFEUX
68c4f16a73
FEATURE: channels can allow/disallow @all/@here mentions (#19317)
The settings tab of each category channel should now present the option to allow or disallow channel wide mentions: @here and @all.

When disallowed, using these mentions in the channel should have no effect.
2022-12-05 17:03:51 +01:00
Kris
6d1de26279
UX: refactor & update small post styles (#19274) 2022-12-05 09:54:29 -05:00
chapoi
b83d9fa802
UX: chat index refactor (#19264)
* Refactor: split out chat index files

* Refactor: is-online offset
2022-12-01 14:56:04 +01:00
Joffrey JAFFEUX
f7c29d959b
FIX: do not apply hover state to non capable devices (#19228) 2022-11-28 21:33:44 +01:00
chapoi
bf9b346b76
UX: chat index UX fixes (#19227) 2022-11-28 20:33:39 +01:00
Joffrey JAFFEUX
a3abbe07db
FIX: ensures date/time don't linebreak (#19225) 2022-11-28 19:43:36 +01:00
Keegan George
7a8e018965
UX: reworks channel index (drawer and mobile) (#18892)
- Multiple style improvements
- adds last sent message date to the view

Co-authored-by: chapoi <charlie@discourse.org>
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2022-11-28 18:38:05 +01:00
Joffrey JAFFEUX
84c1cc70d6
REFACTOR: naming and state refactor (#19187)
- better handling of drawer state using chat state manager
- removes various float and topic occurrences to use drawer
- ensures user can chat before doing a lot of chat setup
- fixes a bug which was creating presence errors in tests
- removes dead code
2022-11-25 14:15:38 +01:00
Kris
6b7bdc991d
UX: improve mention styling, simplify (#19169)
* UX: improve mention styling, simplify

* revert default
2022-11-24 09:35:57 +11:00
Kris
8dff9a7fd2
UX: padding adjustment for empty channel message (#19105) 2022-11-18 14:25:22 -05:00
chapoi
7e39a21de1
UX: redesign of chat settings + add chat retention info (#19017)
* UX: redesign of chat settings
2022-11-16 11:10:42 +01:00
chapoi
3277a858bf
UX: add channel header offset to browse page height (#19030) 2022-11-15 11:35:40 +01:00
Joffrey JAFFEUX
88ede43ec5
FIX: correctly highlights active channel (#18991)
Prior to this change, only hovering the row would highlight it.
2022-11-11 22:32:06 +01:00
Joffrey JAFFEUX
795687160d
UX: adds chat section in settings and hide it in plugins (#18984) 2022-11-11 12:43:20 +01:00
Joffrey JAFFEUX
66130dc8c1
REFACTOR: handles every chat resource as an URL (#18961)
- Note this is also tweaking the UI a little bit as we are now using links/buttons in the header as needed
- It disables the find ideal channel in drawer mode, if loading `/chat` in drawer mode it will either reopen at the last position or just stay on index
2022-11-11 06:39:15 +01:00
Joffrey JAFFEUX
07e1b0591f
REFACTOR: chat-msgactions (#18969)
- s/chat-msg-actions/chat-message-actions
- s/chat-msgactions-hover/chat-message-actions-container
- creates dedicated css files for this component
- removes useless code
- removes grayscale
2022-11-10 15:08:14 +01:00
Joffrey JAFFEUX
c0a4823203
UX: tweaks to msg actions menu (#18966)
- allows to scroll while hovering the menu
- correctly changes message background color while hovering menu
- prevents a bug where it would sometimes close the menu while moving from menu to the 3 dots expanded dropdown. This was caused by the gap between header/body of the 3 dots dropdown, which would sometimes allow to create a mouseover event on a possible different underlying message
- removes recent/favorite reactions on drawer mode
- grayscale reactions until hover
- boxshadow on msgactions container
- removes useless code
2022-11-10 07:42:37 +01:00
Keegan George
3d376c71b6
A11Y: Improve accessibility for saved status message (#18950)
Toggling channel settings shows a status message when saved. This status message is not accessible to screen readers. This commit ensures that the status message is made accessible.
2022-11-09 10:12:35 -08:00
Joffrey JAFFEUX
e0edfa9345
FIX: retention reminder is absolute and needs relative parent (#18913) 2022-11-07 19:10:09 +01:00
chapoi
091d83af60
UX: Chat index tweaks (#18905)
- rounded avatar
- cut off avatar
- no index background
2022-11-07 12:26:46 +01:00
chapoi
c122c032bb
Ux sidebar muted icon (#18856)
* UX: sidebar muted channel opacity and colour change

* UX: visual state for active on muted channel
2022-11-03 16:00:21 +01:00
chapoi
2f510cbd05
FIX: Do not limit scope to direct messages (#18855) 2022-11-03 09:17:23 +01:00
Keegan George
0028149ed4
UX: Add back button in chat browse screen on mobile (#18849) 2022-11-03 09:06:30 +01:00
chapoi
1c52e11d48
UX: scope chat-channel-title hover effect (#18854) 2022-11-03 09:04:57 +01:00
Alan Guo Xiang Tan
d446ad3290
UX: Muted style for entire chat section link when muted (#18852) 2022-11-03 08:37:39 +09:00
Roman Rizzi
0a5f548635
DEV: Move discourse-chat to the core repo. (#18776)
As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 10:41:30 -03:00