Commit Graph

569 Commits

Author SHA1 Message Date
7d8974d02f UX: Upgrade to fontawesome 6.6.0 (#28778)
This upgrade is designed to be fully backwards-compatible. Any icon names which have changed will be automatically remapped to the new name. For now, this will happen silently. In future, once core & official themes/plugins have been updated, we will start raising deprecation errors to help theme/plugin authors update their code.

Extracted from https://github.com/discourse/discourse/pull/28715

Announcement at https://meta.discourse.org/t/were-upgrading-our-icons-to-font-awesome-6/325349

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2024-09-09 14:40:56 +01:00
7e31a8104d DEV: remove bootbox dependency (#27443) 2024-06-12 15:56:17 +08:00
ef2a9da8e7 UX: Add chevron icons for expanding and collapsing all toggles in the admin sidebar (#26246) 2024-03-21 10:25:14 +11:00
d0d659e733 UX: update twitter icon, add threads & mastodon (#26203) 2024-03-15 16:48:23 -04:00
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
00a5f67daf FIX: brings back discourse-sidebar icon (#26050)
This has been removed from 76953cc356 by mistake
2024-03-06 12:16:28 +01:00
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
f935b2ca6d UX: Add sidebar icon (#26046) 2024-03-06 18:24:37 +10:00
f2ac9e4c12 UX: Refactor Do Not Disturb indicator (#25508) 2024-01-31 16:56:07 -06:00
73f8fb0985 UX: update "discourse-sparkles" icon (#24863) 2023-12-13 15:10:30 +05:30
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
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
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
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
85fddf58bc Revert "DEV: FloatKit (#23541)" (#23549)
This reverts commits

0623ac684a65f95ce4f5438ff47944b1dc2119f4
408e71e437ef8abf98f93e3449898bf906766b0e
a32fa3b9470dde0543fcee809f2abd1f219f7336

User tips were running into some issues.
2023-09-12 13:55:12 -04:00
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
b8cc1072cc Revert "DEV: FloatKit (#23312)" (#23540)
This reverts commit abcdd8d367e8db430119f847f029e9cc94e62cb6.
2023-09-12 15:37:16 +02:00
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
a1899996d0 UX: Add bookmark-delete icon (#23025) 2023-08-09 10:51:09 +02:00
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
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
6efc4bb065 DEV: Update highlightjs from 11.6.0 to 11.8.0 (#22312) 2023-06-28 09:40:30 +02:00
4d0b997559 UX: add more mass to thread icon (#21611) 2023-05-17 12:05:58 +02:00
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
d85f53fa94 DEV: Update moment-timezone (#19052) 2022-11-16 16:57:40 +01:00
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
685e0da8c3 DEV: Update highlight.js to version 11 (#18282) 2022-09-20 12:43:28 -03:00
584dbb7202 DEV: Update moment.js (#18207)
Closes #18176
2022-09-12 10:56:39 +02:00
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
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
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
c5f0aa2f32 DEV: Remove handlebars from the old package.json (#17319) 2022-07-04 15:05:03 +02:00
aa7792cf93 DEV: Use npm bootstrap (#17315) 2022-07-04 11:36:51 +02:00
d1d6868325 DEV: Update xss.js (#17216)
* DEV: Update xss.js

* Fix our hack
2022-06-24 10:28:05 +08:00
def39b2d58 DEV: Update @babel/core (#17163) 2022-06-21 12:48:44 +02:00
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
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
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
a0ef25f4f0 DEV: Update Moment to 2.29.2 (#16423) 2022-04-11 13:27:24 -04:00
77fed8dfc3 DEV: Update xss.js package (#16398) 2022-04-06 22:49:13 +02:00
147ffadcf3 DEV: Update Uppy to 2.1.6 (#16227) 2022-03-23 09:28:55 -04:00
3db4b3bc5e DEV: Drop lodash (#16110) 2022-03-06 18:15:25 +01:00
d432e402a2 DEV: Update sinon (#16056) 2022-02-26 13:50:19 +01:00
1febf3cd94 DEV: Update Font Awesome to 5.15.4 2022-02-03 09:16:17 -06:00
7b7e707fa2 DEV: Follow up jQ file upload removal in #15376 (#15766) 2022-02-01 17:46:15 +01:00
68fe6903f7 DEV: Remove jQuery UI vendor dependencies (#15700)
We no longer use jQuery UI for anything since getting
rid of jQuery file uploader in 667a8a63b3b82f3d565f94d254347dfd13da7efa,
so we can safely remove these now.
2022-01-28 11:21:59 +11:00
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
d330a5447d DEV: Remove old backup uploader and resumable.js (#15365)
Now that d5e380e5c14ac1d24f1f5f32d082fdbfbd1a15db 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
cebf55f590 DEV: Remove jquery-tags-input dependency (#15344) 2021-12-17 14:53:52 -05:00
178acd4d46 DEV: Remove jQuery color dependency (#15340) 2021-12-17 14:26:16 -05:00