Commit Graph

567 Commits

Author SHA1 Message Date
Ella E ef2a9da8e7
UX: Add chevron icons for expanding and collapsing all toggles in the admin sidebar (#26246) 2024-03-21 10:25:14 +11:00
Kris d0d659e733
UX: update twitter icon, add threads & mastodon (#26203) 2024-03-15 16:48:23 -04:00
Jarek Radosz 147e5563fb
DEV: Update moment and moment-timezone (#26089)
* Bump the moment-timezone version in package.json
* update yarn lock
* bump moment
* bin/rails javascript:update
* npx yarn-deduplicate
* update the spec (not sure which tz changed exactly but there's a 1 hour difference now for year 2018 and earlier 🤷‍♂️)

---------

Co-authored-by: Anton Morgunov <45741336+anmorgunov@users.noreply.github.com>
Co-authored-by: Anton Morgunov <anton@ischemist.com>
2024-03-11 03:04:51 +01:00
Joffrey JAFFEUX 00a5f67daf
FIX: brings back discourse-sidebar icon (#26050)
This has been removed from 76953cc356 by mistake
2024-03-06 12:16:28 +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
Ella E f935b2ca6d
UX: Add sidebar icon (#26046) 2024-03-06 18:24:37 +10:00
Jordan Vidrine f2ac9e4c12
UX: Refactor Do Not Disturb indicator (#25508) 2024-01-31 16:56:07 -06:00
Meghna 73f8fb0985
UX: update "discourse-sparkles" icon (#24863) 2023-12-13 15:10:30 +05:30
David Taylor 0878dde213
DEV: Modernise highlightjs loading (#24197)
- Remove vendored copy
- Update Rails implementation to look for language definitions in node_modules
- Use webpack-based dynamic import for hljs core
- Use browser-native dynamic import for site-specific language bundle (and fallback to webpack-based dynamic import in tests)
- Simplify markdown implementation to allow all languages into the `lang-{blah}` className
- Now that all languages are passed through, resolve aliases at runtime to avoid the need for the pre-built `highlightjs-aliases` index
2023-11-10 20:39:48 +00:00
Ty Correll 700c636d29
UX: unify ai representing icon (#24029)
This PR addresses the push to unify the icon representing AI throughout Discourse, by using the discourse-sparkles icon.

The icon is being moved to core to make changes with dependencies included in core that were using the "magic" icon instead.

In 2 places "magic" -> "discourse-sparkles,
1. topic summaries
2. (unreleased) chat summaries example
2023-10-19 17:30:27 -05:00
Godfrey Chan 6036001667
DEV: stop relying on global jQuery, import "jquery" instead (#23924)
We'll probably have to keep the globals around for compatibility, but we should always import it ourselves. We'll followup with an updated eslint config to enforce this.
2023-10-17 13:56:59 +01:00
Joffrey JAFFEUX 2a10ea0e3f
DEV: FloatKit (#23650)
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-26 13:39:52 +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
chapoi a1899996d0
UX: Add bookmark-delete icon (#23025) 2023-08-09 10:51:09 +02:00
tshenry 0fb86e6dc1
UX: Temporarily add twitter-x Font Awesome icon (#22946)
This provides a pathway for a site to switch to the new X icon while we work on upgrading to FA6.
2023-08-03 19:44:08 -07:00
Jarek Radosz 7791bb1276
DEV: Update moment-timezone-with-data (#22313)
`Africa/Cairo` timezone introduced DST so I replaced it in tests with `America/Lima`
2023-06-28 11:33:55 +02:00
Jarek Radosz 6efc4bb065
DEV: Update highlightjs from 11.6.0 to 11.8.0 (#22312) 2023-06-28 09:40:30 +02:00
chapoi 4d0b997559
UX: add more mass to thread icon (#21611) 2023-05-17 12:05:58 +02:00
chapoi 7032733f10
FIX: Add new chat threads icon and move thread list button to right (#21575)
* DEV: add new thread icon

* FIX: Use new thread icon, fix typo in SVG

UX: move the thread list icon to the right of
the collapse button

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
2023-05-16 11:48:01 +02:00
Jarek Radosz d85f53fa94
DEV: Update moment-timezone (#19052) 2022-11-16 16:57:40 +01:00
Rafael dos Santos Silva f11b926823
DEV: Add test case for syntax highlight of complex HTML (#18320)
* DEV: Add test case for syntax highlight of complex HTML

The commit 685e0da upgrade HighlightJS to version 11, which deprecates
syntax highlight of complex HTML elements. See https://github.com/highlightjs/highlight.js/issues/2889

This brought a regression of syntax highlighting of GitHub oneboxes,
which was fixed in 09cec7d. This commit adds a test case to prevent
future regressions like this one.

* fix test and warning
2022-09-21 19:09:53 -03:00
Rafael dos Santos Silva 685e0da8c3
DEV: Update highlight.js to version 11 (#18282) 2022-09-20 12:43:28 -03:00
Jarek Radosz 584dbb7202
DEV: Update moment.js (#18207)
Closes #18176
2022-09-12 10:56:39 +02:00
Krzysztof Kotlarek 661a903a0b
FEATURE: other notifications tab for redesign user menu (#18164)
This commit adds to the experimental user menu a new "other notifications" tab that's very similar to the "all notifications" tab, but with the main difference being that it doesn't show notification types that do have dedicated tabs in the menu (e.g. mentions, likes, replies etc.).

The rationale behind this is that the notification types that do have dedicated tabs tend to dominate the "all notifications" tab, leaving very small chances for the user to notice rarer or infrequent notification types. Adding a tab for all the other types gives the user a way to review those infrequent notification types.

Internal ticket: t72978.

Co-authored-by: OsamaSayegh <asooomaasoooma90@gmail.com>
2022-09-02 14:49:49 +03:00
David Taylor 1bd1664ae0
DEV: Compile markdown-it-bundle with ember-cli (#18104)
We were already compiling the markdown bundle via ember-cli, but that version was only being used in the test environment. This commit improves the implementation, and updates the filename so it's also used in production.

This commit also
- Removes the vendored copy of `markdown-it.js` and fetches from node_modules instead
- Updates `pretty_text.rb` to remove the custom sprockets-manifest-parsing
- Removes `pretty-text-bundle.js`, which was only being used by `pretty_text.rb`
2022-08-29 19:11:59 +01:00
David Taylor 7f9c2c0bfb
DEV: Remove vendored babel and update config for plugins/themes (#17832)
The new plugin list is based on the ones currently used in our ember-cli pipeline, and are based on our official browser support policy.

This commit includes an update to the raw-handlebars compiler to remove the 'very hacky but lets us use ES6' code. It's  served us well for the last 6 years, but the babel config changes broke it (`const` -> `let`). This commit takes the opportunity to refactor it to take a similar approach to PrettyText, by leaning on `mini-loader.js`.
2022-08-09 11:53:24 +01:00
Jarek Radosz c5f0aa2f32
DEV: Remove handlebars from the old package.json (#17319) 2022-07-04 15:05:03 +02:00
Jarek Radosz aa7792cf93
DEV: Use npm bootstrap (#17315) 2022-07-04 11:36:51 +02:00
Jarek Radosz d1d6868325
DEV: Update xss.js (#17216)
* DEV: Update xss.js

* Fix our hack
2022-06-24 10:28:05 +08:00
Jarek Radosz def39b2d58
DEV: Update `@babel/core` (#17163) 2022-06-21 12:48:44 +02:00
David Taylor 1b4692039e DEV: Remove legacy JS manifests and vendored scripts
Now that we've switched to Ember CLI, these things are no longer used.

- These sprockets manifests are superceded by the assets generated by ember cli
- These vendored scripts are now fetched by ember-auto-import at compile time
2022-06-20 15:01:06 +01:00
Gerhard Schlager 1c6f8f8a36
DEV: Upgrade Markdown.it to v13.0.1 (#17099)
Updates markdown-it to v13.0.1

Noteworthy changes:
* `markdownit()` is now available on `globalThis` instead of `window`.

* The `text_collapse` rule was renamed to `fragments_join` which affected the `bbcode-inline` implementation.

* The `linkify` rule was added to the `inline` chain which affected the handling of the `[url]` BBCode. If available, our implementation reuses `link_open` and `link_close` tokens created by linkify in order to prevent duplicate links.

* The rendered HTML for code changed slightly. There's now a linebreak before the `</code>` tag. The tests were adjusted accordingly.
2022-06-20 15:25:13 +02:00
Joffrey JAFFEUX fad94160c7
FIX: uses tippy for popover (#15409)
Note this commit also introduce a new {{d-popover}} component, example usage:

```hbs
{{#d-popover |state|}}
  {{d-button label="foo.things" class="d-popover-trigger"}}

  <div class="d-popover-content">
    Some content
  <div>
{{/d-popover}}
```
2022-05-02 17:10:26 +02:00
Penar Musaraj a0ef25f4f0
DEV: Update Moment to 2.29.2 (#16423) 2022-04-11 13:27:24 -04:00
Jarek Radosz 77fed8dfc3
DEV: Update xss.js package (#16398) 2022-04-06 22:49:13 +02:00
Penar Musaraj 147ffadcf3
DEV: Update Uppy to 2.1.6 (#16227) 2022-03-23 09:28:55 -04:00
Jarek Radosz 3db4b3bc5e
DEV: Drop lodash (#16110) 2022-03-06 18:15:25 +01:00
Jarek Radosz d432e402a2
DEV: Update sinon (#16056) 2022-02-26 13:50:19 +01:00
janzenisaac 1febf3cd94
DEV: Update Font Awesome to 5.15.4 2022-02-03 09:16:17 -06:00
Jarek Radosz 7b7e707fa2
DEV: Follow up jQ file upload removal in #15376 (#15766) 2022-02-01 17:46:15 +01:00
Martin Brennan 68fe6903f7
DEV: Remove jQuery UI vendor dependencies (#15700)
We no longer use jQuery UI for anything since getting
rid of jQuery file uploader in 667a8a63b3,
so we can safely remove these now.
2022-01-28 11:21:59 +11:00
Martin Brennan 667a8a63b3
DEV: Drop jQuery file uploader and old upload components (#15376)
This commit removes jQuery file uploader from Discourse,
completing the transition to Uppy. The image-uploader
and UploadMixin components are also removed in this commit
as they have already been replaced and are the only things
using jQuery file upload.

            .-'~~~`-.
          .'         `.
          |  R  I  P  |
          |   jquery  |
          |    file   |
          |   upload  |
          |           |
        \\| 2013-2021 |//
        -----------------
2021-12-22 08:59:44 +10:00
Martin Brennan d330a5447d
DEV: Remove old backup uploader and resumable.js (#15365)
Now that d5e380e5c1 has been
committed there is nothing in the codebase that uses either
resumable.js or the old backup-uploader component.

R.I.P resumable.js
2021-12-21 15:02:10 +10:00
Penar Musaraj cebf55f590
DEV: Remove `jquery-tags-input` dependency (#15344) 2021-12-17 14:53:52 -05:00
Penar Musaraj 178acd4d46
DEV: Remove jQuery color dependency (#15340) 2021-12-17 14:26:16 -05:00
Penar Musaraj 4ee5d52ac9
DEV: Remove jQuery autoellipsis dependency (#15336) 2021-12-17 11:45:12 -05:00
Penar Musaraj 9fd92f329e
DEV: remove `showHtml` jQuery plugin (#15316) 2021-12-15 13:13:06 -05:00