Commit Graph

700 Commits

Author SHA1 Message Date
Ty Correll
368f4ef24d
UX: fix overlap obstructed anon topic reply (#24921)
This commit addresses the overlap between the anonymous reply button in a topic and the related or new and unread topics component.
2023-12-15 13:24:33 -06:00
Blake Erickson
00209f03e6
DEV: Add file_size_restriction site setting type (#24704)
This change will allow admins to configure file sizes in mb instead of
having to convert to kb.

Co-authored-by: Ella <ella.estigoy@gmail.com>
2023-12-13 16:22:48 -07:00
Mark VanLandingham
6fc992f66a
FIX: Color of notification icons in user-notifications index (#24826) 2023-12-11 11:35:02 -06:00
Mark VanLandingham
223e413a6c
DEV: Render glimmer notification items for user notification list (#24802)
This removes the widget notifications list and renders the glimmer user menu notification items instead.
2023-12-11 11:04:43 -06:00
Penar Musaraj
6dc5fe0c83
A11Y: improve setting focus to a post (#24786)
See https://github.com/discourse/discourse/pull/23367 for implementation details.
2023-12-08 11:06:21 -05:00
Penar Musaraj
61cf76bf70
Revert "A11Y: fix setting focus to a post (#23367)" (#24783)
This reverts commit 9dce1592dc.

The change is having some adverse effects.
2023-12-07 17:03:52 -05:00
Penar Musaraj
9dce1592dc
A11Y: fix setting focus to a post (#23367)
This is a second attempt to fix this issue. First fix at #23243, see PR for details.
2023-12-07 15:44:42 -05:00
chapoi
001d2176e5
UX: minor fixes in topic action modal (#24772) 2023-12-07 14:54:56 +01:00
chapoi
42e5bbaf38
UX: fix double-scrollbar in keyboard-shortcuts-modal (#24751) 2023-12-06 17:12:14 +01:00
chapoi
1df1a9490d
UX: fix sidebar modal (#24646)
* UX: fix modal width
2023-12-04 08:10:17 +01:00
Kris
56795f5c07
UX: improve btn-transparent styling (#24666) 2023-12-02 14:21:22 +11:00
Natalie Tay
a934804464
UX: Vertically align the svg in checkbox slider component (#24478) 2023-11-21 14:48:11 +08:00
chapoi
f72899401d
UX: refactor .d-modal to use BEM and improve styling (#23967)
This PR refactors the following:
* leaving all the CSS applied to the old `modal-body` classes in their respective files
* made  new clean styling for `.d-modal` and refactored the template to use the new BEM classes
  * `inner-`, `middle-`, `outer-` container classes are gone and replaced with simplified `wrapper` and `container` classes  
  * use standardised max-sizes with modifiers `-large` and `-max`
  * lighter backdrop,
  * min-width to prevent puny modals
  * other styling changes regarding padding, close button,…
* pulled out all modal overrides into a general `modal-overrides` file + cleanup of outdated CSS
* pulled out login and create account modal styling into their own file, cause it's such a big override 
* removed old general login.scss file for mobile & desktop
* only kept some remainders I don't want to touch in `app/assets/stylesheets/common/base/login.scss`
2023-11-15 10:14:47 +00:00
Kris
797da5870b
FEATURE: remove category badge style options, set bullet style as default (#24198) 2023-11-13 10:46:15 -05:00
Joffrey JAFFEUX
ab832cc865
FEATURE: introduces group channels (#24288)
Group channels will allow users to create channels with a name and invite people. It's possible to add people even after creation of the channel. Removing users is not yet possible but will be added in the near future.

Technically a group channel is `direct_message_channel` with a group attribute set to true on its direct message (chatable). This model might evolve in the future but offers much flexibility for now without having to rely on a complex migration.

The commit essentially consists of:
- a migration to set existing direct message channels with more than 2 users to a group
- a new message creator which allows to search, add members, and create groups
- a new `AddUsersToChannel` service
- a modified `SearchChatable` service
2023-11-10 11:29:28 +01:00
David Battersby
b2ec92390a
FIX: remove background image from lightbox backdrop (#24225)
This change removes the background image (which is the small version of the uploaded image) from the lightbox backdrop.

Now a solid color (dark grey) is used for the backdrop so we can distinguish between the lightbox's head, body and footer.
2023-11-03 16:10:04 +08:00
Kris
923fe3d082
UX: fix btn-flat focus style (#24156) 2023-10-30 12:44:38 -04:00
Kris
3ee8678cf1
FIX: don't nest all user info in one link (#23783) 2023-10-04 19:44:54 -04:00
Renato Atilio
1d70cf455e
FEATURE: support a description attribute on form template fields (#23744)
* FEATURE: support a description attribute on form template fields
2023-10-04 17:51:53 -03:00
Kris
f3a7ebf75c
A11Y: improve summary page user link structure (#23746) 2023-10-03 09:43:45 -04:00
Kris
0bb7e9e0b8
A11Y: improve about page profile link markup (#23695) 2023-10-02 13:55:28 -04:00
Ty Correll
70a07abfa4
UX: focused spacing in more topics table (#23730)
This PR addresses spacing between focused & the topic header, by cancelling out the spacing added between the first table row while still having space between the tabs "Suggested" & "Related"
2023-09-29 13:22:57 -05:00
Ty Correll
76e5a939d4
UX: selected indicator more topics spacing (#23696)
* UX: selected indicator more topics spacing

In relation to the selected indicator, this PR addresses a vertical and horizontal issue with the indicator touching the table header and its left alignment to be more consistent with the regular topic list feed.

* UX: border for pill navigation on mobile

Makes UI more consistent desktop -> mobile, by adding a border to the bottom of the Suggested/Related.
2023-09-27 18:23:30 -05: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
Kris
98c8dcecba
A11Y: disable non-essential CSS animations for reduced-motion users (#23571) 2023-09-14 17:31:43 -04:00
Jarek Radosz
5df1b1c523
DEV: Upgrade the so-called share-and-invite modal (#23574) 2023-09-14 10:50:50 +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
Keegan George
4238c57a1d
A11Y: Improvements to <DToggleSwitch/> component (#23514) 2023-09-11 11:26:41 -07:00
Kris
22747e26fd
DEV: common CSS property for content backgrounds (#23467) 2023-09-08 12:07:04 -04:00
Kris
4ed0ab79f6
FIX: focus state color on .btn[href] (#23469) 2023-09-07 17:51:34 -04:00
Jarek Radosz
1ca4e7241e
UX: Fix checkbox slider (#23412) 2023-09-05 22:08:44 +02:00
Martin Brennan
bbd908ae09
FIX: Add hashtag placeholder when chat message sent (#23287)
This commit fixes an issue from 2ecc8291e8
where the user sees an ugly plain #hashtag when sending a chat
message. Now, we add a basic placeholder that looks like the
cooked hashtag with a grey square, which is then filled in
once the "sent" message bus event for the message comes back,
and we do decorateCooked on the message to fill in the proper
hashtag details.
2023-08-30 11:31:34 +10:00
Jordan Vidrine
480419565f
FIX: Remove border radius on more topics container buttons: (#23314) 2023-08-29 12:02:38 -05:00
Penar Musaraj
76f4142d3f
Revert "A11Y: Improve setting focus to post" (#23311)
This reverts commit 9b3fc8081a.
2023-08-29 09:24:16 -04:00
Jordan Vidrine
1209efb63c
FIX: Adjust border-radius in multiple locations (#23278) 2023-08-25 16:09:18 -05:00
Penar Musaraj
a94834abd5
A11Y: Improve setting focus to post (#23243) 2023-08-25 14:45:56 -04:00
Ty Correll
bffd61746b
UX: update styling for related/suggested (#23242)
This PR changes the icon color to always be the same color for Related/Suggested buttons, even when not selected or active.
2023-08-24 16:22:44 -05:00
Ty Correll
0944666232
UX: update styling for related/suggested (#23231)
* UX: update styling for related/suggested

This PR addresses state issues for icons of the Related & Suggested buttons, as well as well as fixes alignment issues for folding phones / tablets, wider mobile devices by moving styling to the desktop scss file; also replaces border with box-shadow.
2023-08-24 15:23:35 -05:00
Renato Atilio
353306219b
UX: fix form template error label position (#23208) 2023-08-24 11:09:47 -03:00
Ty Correll
af34e910f2
UX: update styling for related/suggested (#23217)
* UX: update styling for related/suggested

This PR fixes styling for previous related/suggested changes' positioning being off for topics and updates the active icon color by removing a line that changed its active color.
2023-08-24 01:53:53 -05:00
Ty Correll
7c12f7d50a
UX: update styling for related/suggested (#23213)
This PR updates the styling for the related & suggested topics to distract less from the Reply buttons and clearly indicate its usage as tabs, also referred to as pills.
2023-08-23 19:28:14 -05:00
Roman Rizzi
7d0e2b9e7b
FIX: Keep track of suggestion updates during scrolling and navigation. (#23190)
This PR changes how we track which lists are available for a topic and how we decide which is the active one. The new approach centralizes everything in the service, and exposes functions for adding/removing a list, which each calls via `did-insert/will-destroy` modifiers.

It makes it much easier to track and update state when navigated to another topic or PM, ensuring things get updated correctly.
2023-08-22 14:10:15 -03:00
Roman Rizzi
af30f9945a
UX: Use pill design on both mobile and desktop (#23124) 2023-08-17 14:37:11 -03:00
Jordan Vidrine
d546f34f2f
FIX: Adjust badge overflow ellipsis (#23086) 2023-08-14 11:10:02 -05:00
Martin Brennan
fb36af7799
DEV: Move calendar date + time picker from local dates into core component (#23023)
This commit moves the calendar date and time picker shown in
the local dates modal into a core component that can be reused
in other places. Also add system specs to make sure there isn't
any breakages with this feature, and a section to the styleguide.
2023-08-11 13:05:44 +10:00
chapoi
ca1671023a
UX: align tags to top in modal (#23055)
* UX: align tags to top in modal

* UX: fix alignment in grid with multiple rows
2023-08-10 10:26:25 +02:00
Penar Musaraj
9e9aa8f653
UX: Differentiate focus state from hover state (#22985)
When a button gets a focused state via keyboard, it is highlighted a bit more than the hover or selected state.
2023-08-07 16:46:10 -04:00
Keegan George
1ded0a1429
UX: Add disabled styling to <DToggleSwitch/> (#22988) 2023-08-04 15:20:56 -07:00
Kris
6bf0c0a52e
UX: fix long image titles in experimental lightbox (#22883) 2023-07-31 18:36:33 -04:00
Kris
8c75fa5dfd
UX: increase experimental lightbox z-index (#22865) 2023-07-28 18:06:48 -04:00
David Battersby
d11f02c03a
FIX: make document overflow hidden on both axis when lightbox is open (#22775)
Fixes issue with scrolling background when lightbox is opened on mobile.

Since we rely on swiping for navigating lightbox galleries on mobile, we want to disable document scrolling.
2023-07-25 15:27:32 +08:00
Alan Guo Xiang Tan
fe1034e89c
FIX: Loading more tags in edit nav menu tags modal not working (#22770)
Why this change?

When setting up the `IntersectionObserver`, we did not account for the
top margin and padding causing no intersection event to fire when the
last tag is load into view. This commits fixes the problem by setting a
bottom margin using the `rootMargin` option when setting up the
`IntersectionObserver`.

This commit also improves the test coverage surrounding the loading of
more tags.
2023-07-25 13:44:25 +08:00
Kris
ba91309cb8
UX: fix bookmark modal footer layout (#22766) 2023-07-25 06:42:29 +08:00
chapoi
346ccfd7f5
UX: firefox fix for shorthand modal width (#22638) 2023-07-17 13:16:45 +02:00
Martin Brennan
6459922993
DEV: Move Bookmark modal/component to use d-modal (#22532)
c.f. https://meta.discourse.org/t/converting-modals-from-legacy-controllers-to-new-dmodal-component-api/268057

This also converts the Bookmark component to a Glimmer
component.
2023-07-17 10:14:17 +10:00
Joe
82c03127df
FEATURE: New Discourse Lightbox using Glimmer (#19798)
Introduces new lightbox as a step to migrate away from Magnific Popup.

Please see https://meta.discourse.org/t/migrating-away-from-magnific-popup/251505 for more details

Co-authored-by: Nat <natalie.tay@discourse.org>
Co-authored-by: David Battersby <info@davidbattersby.com>
2023-07-13 15:06:17 +08:00
chapoi
83352e93ff
UX: double scroll fix for keyboard shortcuts modal (#22535) 2023-07-11 16:30:53 +02:00
Kris
98afea4748
UX: adjust sidebar modal styles, consolidate css (#22444)
This gets all the related CSS into the common file, and removes desktop and mobile variants.

This also makes some general styling adjustments.
2023-07-07 06:54:47 +08:00
Kris
4cec091f1a
REFACTOR: improve poll info layout (#22353) 2023-07-05 12:20:18 -04:00
Alan Guo Xiang Tan
82d6420e31
PERF: Paginate loading of tags in edit nav menu tags modal (#22380)
What is the problem?

Before this change, we were relying on the  `/tags` endpoint which 
returned all the tags that are visible to a give user on the site leading to potential performance problems. 
The attribute keys of the response also changes based on the `tags_listed_by_group` site setting. 

What is the fix?

This commit fixes the problems listed above by creating a dedicate `#list` action in the
`TagsController` to handle the listing of the tags in the edit
navigation menu tags modal. This is because the `TagsController#index`
action was created specifically for the `/tags` route and the response
body does not really map well to what we need. The `TagsController#list`
action added here is also much safer since the response is paginated and
we avoid loading a whole bunch of tags upfront.
2023-07-04 11:36:39 +08:00
Alan Guo Xiang Tan
fe294ab1a7
DEV: Switch edit nav menu tags/categories modal to component (#22401)
Why this change?

A new component based API for modals was introduced in
b3a23bd9d6. This commit moves the edit
navigation menu tags and categories modal to the new API.
2023-07-04 09:45:21 +08:00
Keegan George
c3fa85c450
UX: Make template fields fill the container width (#22334) 2023-06-28 13:29:36 -07:00
Keegan George
b6f03fcecd
DEV: Add support for uploads to form templates (#22232) 2023-06-28 12:49:05 -07:00
Alan Guo Xiang Tan
75b402f07c
UX: Fix position of filters in edit categories/tags nav menu modals (#22292)
Why this change?

We want the position of the filters to remain fixed when scrolling
through the list of categories or tags. Otherwise, the user has to
scroll all the way back to othe top in order to access the filters when
the list of categories or tags is large.
2023-06-27 12:52:42 +08:00
Alan Guo Xiang Tan
303fcf303c
FEATURE: Add dropdown to filter by selected in edit nav menu modal (#22251)
What does this change do?

This change adds a dropdown filter that allows a user to filter by
selected or unselected categories/tags in the edit navigation menu
modal.

For the categories modal, parent categories that do not match the
dropdown filter will be displayed as disabled since those parent
categories need to be displayed to maintain the hieracy of the child
child categories.
2023-06-23 10:29:00 +08:00
Alan Guo Xiang Tan
6e3f3dff86
DEV: Refactor edit tags/categories modal to reduce duplication (#22240)
Why this change?

There was alot of duplication between the edit navigation menu tags/categories modal which
was making it hard to introduce new changes as the work had to be
duplicated into multiple places.

This commit mainly extracts the duplicated code into common components
such that it is easier to make styling changes across both modals.
2023-06-23 08:28:55 +08:00
Jarek Radosz
876ff17cc2
DEV: Update eslint/prettier (#22226) 2023-06-21 20:59:03 +02:00
Alan Guo Xiang Tan
547b520261
FEATURE: Add deslect all and reset to defaults btn edit nav menu modal (#22218)
What does this change do?

This change adds the deselect all and reset to defaults buttons to the
edit navigation menu tags modal. The deselect all button when
clicked deselects all the selected tags in the modal. If the user
saves with no tags selected, the user's tags section in the
navigation menu will be set to the site's top tags.

The reset to defaults button is only shown when the
`default_navigation_menu_tags` site setting has been configured.
When clicked, the user's tags section in the navigation menu is
automatically set to the tags defined by the
`default_navigation_menu_tags` site setting.
2023-06-21 12:45:48 +08:00
Alan Guo Xiang Tan
609562be3e
FEATURE: Add input filter for editing tags in navigation menu modal (#22216)
What does this change do?

This commit adds an input filter to filter through the tag checkboxes in the
modal to edit tags that are shown in the user's navigation menu. The
filtering is a simple matching of the given filter term against the
names of the tags.
2023-06-21 10:59:56 +08:00
Alan Guo Xiang Tan
08d8bd9f43
FEATURE: Add modal for editing tags in navigation menu (#22214)
What does this change do?

This change is a first pass for adding a modal used to edit tags that appears in
the navigation menu. As the feature is being worked on in phases, it is
currently hidden behind the `new_edit_sidebar_categories_tags_interface_groups` site setting.

The following features will be worked on in future commits:

1. Input filter to filter through the tgas
2. Button to reset tag selection to default navigation menu tags site
   settings
3. Button to deselect all current selection
2023-06-21 09:09:56 +08:00
Alan Guo Xiang Tan
6781e31195
UX: Remove horizontal scroll on mobile for edit categories nav modal (#22197)
What does this commit do?

Prior to this change, a long category name on mobile would cause a
horizontal scroll to appear because the category name was overflowing
its element. This commit changes it such that the category name will
wrap around instead.
2023-06-20 10:55:53 +08:00
Alan Guo Xiang Tan
289d2a5540
DEV: Deselect all and reset to defaults btns to edit categories modal (#22143)
What does this change do?

This change adds the deselect all and reset to defaults buttons to the
edit navigation menu categories modal. The deselect all button when
click deselects all the selected categories in the modal. If the user
saves with no categories selected, the user's categories section in the
navigation menu will be set to the site's top categories.

The reset to defaults button is only shown when the
`default_navigation_menu_categories` site setting has been configured.
When clicked, the user's categories section in the navigation menu is
automatically set to the categories defined by the
`default_navigation_menu_categories` site setting.
2023-06-20 08:17:53 +08:00
Kris
ffcac7bf5a
UX: consistent button hover transitions (#22157) 2023-06-16 10:25:58 -04:00
Keegan George
9dc63c0755
UX: Add required indicator to fields with required validation (#22096) 2023-06-14 11:25:05 -07:00
Kris
e0f848c2ea
REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
Kris
ae8347d948
UX: minor #mention style adjustments (#22048) 2023-06-09 15:08:54 -04:00
Keegan George
39efa4c32a
DEV: Create posts from form templates (#21980) 2023-06-08 12:49:18 -07:00
Alan Guo Xiang Tan
853bce2abc
UX: Allow users to filter categories in edit sidebar categories modal (#21996)
What does this change do?

This change is a continuation of
2191b879c6 and adds an input filter to the
edit sidebar categories modal which the user can use to filter through
the list of categories by the category's name.

Note that if a child category is being shown, all of its ancestors will
be shown even if the names of the ancestors do not match the given
filter. This is to ensure that we continue to display the hierarchy of a
child category even if the parent category does not match the filter.
2023-06-08 12:54:51 +08:00
Alan Guo Xiang Tan
2191b879c6
FEATURE: Support sub-subcategories in new edit sidebar categories modal (#21994)
Why does this commit do?

This commit adds support for sub-subcategories in the new edit sidebar
categories modal added in fc296b9a81. Note
that sub-subcategories are enabled when `max_category_nesting` is set to
`3`.
2023-06-08 10:15:01 +08:00
Alan Guo Xiang Tan
fc296b9a81
UX: First pass at edit categories navigation modal for sidebar (#21963)
What this change?

We are currently not fully satisfied with the current way to edit the
categories and tags that appears in the sidebar where the user is
redirected to the tracking preferences tab in the user's profile causing
the user to lose context of the current page. In addition, the dropdown
to select categories or tags limits the amount of information we can
display.

Since editing or adding a custom categories section is already using a
modal, we have decided to switch editing the categories and tags that
appear in the sidebar to use a modal as well.

This commit ships a first pass of the edit categories modal such that we
can keep the commit small and reviewable. The incomplete nature of the
feature is also reflected in the fact that the feature is hidden behind
a new `new_edit_sidebar_categories_tags_interface_groups` site setting.
2023-06-07 12:09:30 +08:00
Martin Brennan
69eecf92d0
FIX: Use a default hashtag icon color for user with no permission (#21825)
One user can create a post or chat message with a hashtag they
have permission to use, but then when other users look at that
post they will see an empty space next to the hashtag because they
do not have the permission to load the colors in CSS classes for
the related category.

This fixes the issue by adding a default color with a special
CSS class if the user doesn't have permission to see the linked
channel/category on the hashtag.
2023-06-07 10:15:39 +10:00
Jarek Radosz
4313cd5298
DEV: Fix a sass warning (#21931) 2023-06-05 18:57:33 +02:00
Mark VanLandingham
3bfc6805ce
FEATURE: Offline indicator (#21369) 2023-06-05 11:08:04 -05:00
Kris
8e618a5484
FIX: use fixed dimensions for user card avatar (#21892) 2023-06-01 14:30:49 -04:00
Kris
1d9f195207
UX: adjust various avatars due to size changes (#21890) 2023-06-01 11:17:44 -04:00
Jarek Radosz
475ac297a4
UX: Tweak user deleted posts items (#21856) 2023-05-31 16:49:56 +02:00
Martin Brennan
b7229953f7
FIX: Hashtag CSS class color specificity (#21766)
Followup to eae47d82e2,
we removed some specificity from the hashtag color
CSS classes, but now the color is being overridden
by the base hashtag-cooked.d-icon color. This color
is no longer needed, so we just remove that and
the specificity.
2023-05-26 12:16:34 +02:00
Kris
9268bb92bd
UX: long unsetyled category names need truncation (#21756) 2023-05-25 17:08:39 -04:00
Joffrey JAFFEUX
eae47d82e2
FEATURE: Apply hashtag styles to autocomplete (#21731)
This commit uses improvements done in 0b3cf83 to apply these styles to the autocomplete in composer.
2023-05-25 09:38:12 +02:00
Martin Brennan
0b3cf83e3c
FIX: Do not cook icon with hashtags (#21676)
This commit makes some fundamental changes to how hashtag cooking and
icon generation works in the new experimental hashtag autocomplete mode.
Previously we cooked the appropriate SVG icon with the cooked hashtag,
though this has proved inflexible especially for theming purposes.

Instead, we now cook a data-ID attribute with the hashtag and add a new
span as an icon placeholder. This is replaced on the client side with an
icon (or a square span in the case of categories) on the client side via
the decorateCooked API for posts and chat messages.

This client side logic uses the generated hashtag, category, and channel
CSS classes added in a previous commit.

This is missing changes to the sidebar to use the new generated CSS
classes and also colors and the split square for categories in the
hashtag autocomplete menu -- I will tackle this in a separate PR so it
is clearer.
2023-05-23 09:33:55 +02:00
Jordan Vidrine
984a616204
Button research (#21621) 2023-05-22 16:03:34 -05:00
Bianca Nenciu
78022e7a5f
FEATURE: Show user cards for inactive users (#21387)
It used to return 404 which made the user card render and then quickly disappear.
2023-05-15 21:45:26 +03:00
Kris
3ea86985b9
UX: fix color preference layout (#21346) 2023-05-03 10:11:52 +08:00
Mark VanLandingham
86385bc9cf
REVERT: "FEATURE: Offline indicator controlled by message-bus connectivity (#21324)" (#21327)
This reverts commit b1da670898.
2023-05-01 15:27:02 -05:00
Mark VanLandingham
b1da670898
FEATURE: Offline indicator controlled by message-bus connectivity (#21324) 2023-05-01 12:41:30 -05:00
Mark VanLandingham
36d388b57f
Revert "FEATURE: Reimplement offline indicator (#21285)" (#21296)
This reverts commit de1066abcd.
2023-04-28 06:59:10 -05:00
Mark VanLandingham
de1066abcd
FEATURE: Reimplement offline indicator (#21285) 2023-04-28 06:32:35 -05:00