Commit Graph

221 Commits

Author SHA1 Message Date
chapoi
8823b5e504
UX: fix overflow channel row + mobile remove styling tweak (#23611)
* UX: fix missing overflow ellipsis

* cleanup double declaration

* UX: add missing border-radius

*UX: delete icon animation tweak
2023-09-15 14:06:31 +02:00
chapoi
02de223da8
UX: chat-channel-row alignment (#23607) 2023-09-15 10:09:50 +02:00
Kris
98c8dcecba
A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
Joffrey JAFFEUX
ae27beb01a
UI: improves remove channel animation (#23585)
Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2023-09-14 18:48:29 +02:00
Joffrey JAFFEUX
85fddf58bc
Revert "DEV: FloatKit (#23541)" (#23549)
This reverts commits

0623ac684a
408e71e437
a32fa3b947

User tips were running into some issues.
2023-09-12 13:55:12 -04:00
Joffrey JAFFEUX
0623ac684a
DEV: FloatKit (#23541)
Second iteration of https://github.com/discourse/discourse/pull/23312 with a fix for embroider not resolving an export file using .gjs extension.

---

This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast


## Tooltips
### Component

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip 
  @label={{i18n "foo.bar"}}
  @icon="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

### Service

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

## Menus

Menus are very similar to tooltips and provide the same kind of APIs:

### Component

```hbs
<DMenu @icon="plus" @label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

### Service

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```


## Toasts

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-12 15:50:26 +02:00
Joffrey JAFFEUX
b8cc1072cc
Revert "DEV: FloatKit (#23312)" (#23540)
This reverts commit abcdd8d367.
2023-09-12 15:37:16 +02:00
Joffrey JAFFEUX
abcdd8d367
DEV: FloatKit (#23312)
This PR introduces three new UI elements to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip
  @label={{i18n "foo.bar"}}
  @icon="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manually close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  {
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

Menus are very similar to tooltips and provide the same kind of APIs:

```hbs
<DMenu @icon="plus" @label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manually close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  {
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-12 15:06:51 +02:00
Joffrey JAFFEUX
b8d5f951f6
UX: implements swipe on row channel (#23436)
On mobile swiping a channel row will now show a "Remove" option. Holding this to the end will now remove this row from your list of followed direct message channels.

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2023-09-11 14:51:13 +02:00
Kris
22747e26fd
DEV: common CSS property for content backgrounds (#23467) 2023-09-08 12:07:04 -04:00
chapoi
cde5dea74f
UX: popping animation for adding users (#23459)
* UX:  popping animation for adding users

* accessibility wrapper
2023-09-07 15:42:49 +02:00
chapoi
bf971b022d
UX: lower z-index (#23386)
* UX: lower z-index

* Update plugins/chat/assets/stylesheets/common/chat-side-panel-resizer.scss

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

---------

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-04 22:30:51 +02:00
Mark VanLandingham
9c65e2140a
DEV: Use Notice API for mention warnings (#23238)
This PR swaps out the custom pathway to publishing and rendering mention warnings after a message is sent.

ChatPublisher#publish_notice is used, and expanded. Now, instead of only accepting text_content as an argument, component and component_args are accepted and there is a renderer for these components.

Translations moved to server, as notices expect text to be passed in unless a component is rendered

The warnings are rendered at the top now, outside of the scope of the single message that sent it.

I entirely removed the jit_messages_spec b/c it's duplicate testing of other parts of the app. IMO we don't need a backend test for a feature, a component test for the feature AND a system test (that is slow and potentially even flakey due to timing issues with wait) to test the same thing. So jit_messages_spec is gone.
2023-09-01 09:07:23 -05:00
Jordan Vidrine
72f33d1d5d
FIX: Chat message button radius (#23358) 2023-08-31 15:00:39 -05:00
chapoi
c9c2a73441
UX: thread list design changes (#23348) 2023-08-31 18:09:41 +02:00
chapoi
a97dcd8564
UX: composer fixes (#23334)
* UX: fix disappearing separator

* UX: slightly smaller composer btns on non-mobile
2023-08-30 15:10:21 +02:00
Jordan Vidrine
8ec1f6f404
Revert "UX: chat composer (#23267)" (#23273)
This reverts commit 3bcbb2444a.
2023-08-25 13:49:41 -05:00
chapoi
3bcbb2444a
UX: chat composer (#23267)
* UX: make composer buttons less wide

* UX: fix disappearing separator
2023-08-25 13:16:58 +02:00
Joffrey JAFFEUX
c5ac500181
UX: minor tweaks to thread list item (#23259)
- drop @
- prevents +X  (participants) to show on next line
- few spacing/fonts adjustments

Note that this commit is also stripping links from chat excerpts.
2023-08-25 11:20:03 +02:00
Joffrey JAFFEUX
39b598f304
UI: refines thread list item (#23207)
It will now replies count and participants list. Also the title will be OM excerpt or user defined title, no more default "Thread" title. Lastly, the author of the last reply is also shown as prefix of it.
2023-08-24 18:45:20 +02:00
chapoi
a2f5b1b101
UX: improved animation (#23145) 2023-08-18 11:59:54 +02:00
chapoi
cd5a9a2775
UX: add transition (#23034) 2023-08-10 10:28:59 +02:00
Joffrey JAFFEUX
df7dab9dce
FIX: ensures generic onebox has width/height for thumbnail (#23040)
Prior to this fix we would output an image with no width/height which would then bypass a large part of `CookedProcessorMixin` and have no aspect ratio. As a result, an image with no size would cause layout shift.

It also removes a fix for oneboxes in chat messages due to this case.
2023-08-09 20:31:11 +02:00
chapoi
a846226e92
UX: micro animations chat input (#23030) 2023-08-09 12:58:36 +02:00
chapoi
7b3f9dc86b
UX: different way of centering chat notice to accommodate longer texts (#22779)
* UX: different way of centering chat notice to accommodate longer

* linting

* UX: keep close button in top right corner
2023-07-27 15:53:43 +02:00
chapoi
d10fd697b4
UX: responsive oneboxing with images in chat (#22824)
* UX: fix narrow oneboxing with images in chat

* UX: more responsive oneboxing

* UX: onebox-avatar limits

* ony flex non onebox-avatars
2023-07-27 13:57:30 +02: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
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
Joffrey JAFFEUX
30e4b898f5
FIX: limits legacy sidebar height (#22466)
Prior to this fix the sidebar was taking unlimited height.
2023-07-06 15:40:20 +02:00
Mark VanLandingham
3171fd1a0a
DEV: Introduce Chat Notices with publishing method (#22369) 2023-07-06 08:26:25 -05:00
Joffrey JAFFEUX
478c4b1a74
DEV: prevents message actions to hide drawer's header (#22448)
In specific conditions (generally a small drawer, with a long message) it is possible to have the message’s actions menu to be displayed hover the drawer's header.

This is particularly hard to fix correctly using popper due to our positioning which is slightly at the limit of the container.

The proposed fix targets mostly the specs by ensuring the messages actions will be hidden before attempting to click any header's button.
2023-07-06 07:33:39 +08: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
2548b819be
UX: add max-width to thread indicator (#22282) 2023-06-27 09:30:15 +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