Commit Graph

2809 Commits

Author SHA1 Message Date
Penar Musaraj
6837888b8b
UX: Update highlight.js styles (#23999) 2023-10-18 19:07:39 -04:00
Penar Musaraj
a125c9e63e
UX: Minor fixes to passkey handling (#23947)
- don't try to guess the name of the manager (too many options)
- improve error message when registration is not allowed
- output error in console when registration fails
- minor fix to rename dialog layout
- hides action buttons in DiscourseHub (because adding passkeys there is not possible)
- adds acceptance test to ensure action buttons are hidden for admins seeing another user's profile
2023-10-18 11:46:51 -04:00
Penar Musaraj
87a635ed32
UX: Fix icon color for video placeholder (#23957)
Also adds a small effect on hover.
2023-10-17 10:25:57 -04:00
Jeff Wong
d208396c5c
UX: improve touch, swipe, panning performance on mobile menus (#23775)
PERF: improve touch, swipe, panning performance on mobile menus
---

* stop event propagation on swipe events: other touch events were stealing a huge amount of time here. Stop event
propagation when handling pan events.
* animate with [web animations api](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* prefer translate3d to hint for gpu rendering.
* query document for elements only on start move event, not on subsequent move
events
* remove unused calculations for directioned velocity and distance: all swipe/pan elements function in x/y direction only.
* re-implement scroll locking behavior.

re-implemented scroll lock behavior
---

With stop event propagation, we need to re-implement scroll locking on menu swipes.
Previously, this was using onTouchMove which was costly.

We may now use styling with overflow-y:hidden to lock scroll behavior.

overflow:hidden on html/body elements is now supported by iOS as of 2022
https://bugs.webkit.org/show_bug.cgi?id=153852
https://bugs.webkit.org/show_bug.cgi?id=220908

UX: improve swipe
---

Some improvements to get gestures and swipes feeling a little more polished.

This focuses on end gesture, and how we transfer it to a css animation to
complete a menu open/close action.

Multitouch: events may pan, scroll, and zoom - especially on iOS safari.
Cancelling the swipe event allows for a more pleasant zooming experience.

* ease-out on menus opening, linear on close
* calculate animation duration for opening and closing,
attempt to better transfer user swipe velocity to css animation.
* more timely close/open and cleanup from calculated animation timing.
* add animation to closing menus on cloak tap
* correctly animate menus with ease-in and ease-out
* add swipe cancel event on multitouch event

DEV
---

* lean on promises

js animations api gives us promises to listen to. Update test waiters
to use waitForPromise from @ember/test-waiters instead of reigster/unregister.

* convert swipe mixin to its own class.

Convert swipe callbacks to custom events on the element.
Move shared functions for max animation time and close logic to
new shared class.

swipe-events lib uses custom events to trigger callbacks, rather than assuming
implemented hard coded function from the mixin's base class. Custom events are
triggered from the bound element as swipestart, swipeend, swipe

Add shared convenience functions for swipe events so they can be more easily
shared.

A client receives an initial swipe event and can check some state to see if it
wants to handle the swipe event and if it doesn't, calling
`event.preventDefault();` will prevent `swipe` and `swipeend` events from firing
until another distinct swipestart event is fired. Swipe events will auto-cancel on multitouch.

The scroll lock has also exposed as its own utility class.
2023-10-16 11:27:00 -07:00
Penar Musaraj
1a70817962
DEV: Add UI for passkeys (3/3) (#23853)
Adds UI elements for registering a passkey and logging in with it. The feature is still in an early stage, interested parties that want to try it can use the `experimental_passkeys` site setting (via Rails console). 

See PR for more details. 
---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-10-13 12:24:06 -04:00
Martin Brennan
9762e65758
FEATURE: Add Revise... option for queued post reviewable (#23454)
This commit adds a new Revise... action that can be taken
for queued post reviewables. This will open a modal where
the user can select a Reason from a preconfigured list
(or by choosing Other..., a custom reason) and provide feedback
to the user about their post.

The post will be rejected still, but a PM will also be sent to
the user so they have an opportunity to improve their post when
they resubmit it.
2023-10-13 11:28:31 +10:00
Blake Erickson
2443446e62
DEV: Prevent videos from preloading metadata (#23807)
Preloading just metadata is not always respected by browsers, and
sometimes the whole video will be downloaded. This switches to using a
placeholder image for the video and only loads the video when the play
button is clicked.
2023-10-12 13:47:48 -06:00
Kris
76cbfcd60c
A11Y: move new account disclaimer above buttons (#23884) 2023-10-12 11:30:03 -04:00
Jan Cernik
5d632fd30a
FIX: Chat layout shift with GitHub onebox (#23909) 2023-10-12 07:54:11 -03:00
Meghna
90be6f304f
UX: fix likes notification for multiple users on mobile (#23896) 2023-10-11 20:41:19 +05:30
Mark VanLandingham
e110256cb0
DEV: Restructure search menu so that it can be rendered outside of header (#23852) 2023-10-10 11:36:32 -05:00
Kris
f3a7ebf75c
A11Y: improve summary page user link structure (#23746) 2023-10-03 09:43:45 -04:00
Kris
2cf1e15025
DEV: fix history modal code, consolidate style (#23743) 2023-10-03 09:42:09 -04:00
Kris
5884176174
A11Y: correctly markup /about stat table headers, tweak style (#23733) 2023-10-02 13:55:11 -04:00
Kris
9136109ca0
FIX: allow history modal columns to shrink width (#23700) 2023-09-28 10:31:24 -04:00
Kris
bbb4e19612
UX: improve history modal layout (#23675) 2023-09-26 17:50:09 -04: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
David Taylor
88ec2320dc
UX: Only close modal for full 'click' events outside (#23566)
Previously we were using 'mouseup', which meant that if you started the click inside, and then dragged to outside the modal, it would still close. This kind of dragging action is common when selecting text, and having it close the modal can be very frustrating.

Simply switching to a 'click' listener doesn't totally solve the problem, because when a click event involves dragging from one element to another, the browser will fire the event on "the most specific ancestor element that contained both elements". For modals, the most specific common ancestor was still the `modal-middle-container`, which would cause the modal to close.

Therefore, this commit sets the modal containers to have `pointer-events: none`, and sets up the click listener on the `.modal-backdrop` element, which is **adjacent** to the modal in the DOM. That means that click events fired on any ancestors of the modal will not accidentally trigger closure.
2023-09-25 14:23:59 +01:00
Ted Johansson
c42257b47d
DEV: Prettify negative numbers in reviewable score explanation (#23642)
This is an aesthetic change. Currently, if one of the scores involved in the reviewable score explanation is negative, we display it as: + -value. This changes that.

I also made an attempt at converting the component into GJS format. This is done as a separate commit.
2023-09-25 10:34:51 +01:00
Kris
ebe68e15fc
UX: fix "More" menu at small tablet width (#23616) 2023-09-15 17:21:24 -04:00
Canapin
bbad09df0e
UX: creates a vertical space between the title and the back link (#23558)
The link was to close to the title, there was no vertical space. Adding a space make elements spacing more even on the page.
2023-09-15 12:16:23 +10:00
Jarek Radosz
8cb8f130d9
DEV: Convert request-group-membership-form to new modal api (#23600) 2023-09-15 00: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
Kris
3d3a556933
A11Y: add focus state for advanced search button (#23573) 2023-09-13 17:24:36 -04: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
Renato Atilio
fd32ba2e13
UX: wider code lines so background takes the whole width (#23536) 2023-09-12 12:17:27 -03: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
David Taylor
3f86ee63b8
DEV: Move theme-error-handler initializer to service (#23534)
This will make it easier for other parts of the app to display similar error banners
2023-09-12 14:07:03 +01: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
Kris
22747e26fd
DEV: common CSS property for content backgrounds (#23467) 2023-09-08 12:07:04 -04:00
Meghna
5742c4b875
UX: fix tag chooser width when there are multiple tags (#23432) 2023-09-06 16:01:03 +05:30
Meghna
2cd2d7d4d6
FIX: add mobile specific stylesheet for onebox (#23329) 2023-08-31 10:35:28 +10:00
Kris
8dddc9eb39
DEV: remove broken margin removal (#23318) 2023-08-29 17:11:38 -04:00
Penar Musaraj
76f4142d3f
Revert "A11Y: Improve setting focus to post" (#23311)
This reverts commit 9b3fc8081a.
2023-08-29 09:24:16 -04:00
Meghna
60a34b0908
UX: Fix github onebox on mobile (#23306)
* UX: Fix github onebox on mobile

* UX: Fix github onebox on mobile
2023-08-29 16:36:20 +05:30
Jordan Vidrine
d8b62c2275
FIX: Update search-menu.scss (#23292)
Remove overflow hidden, which is causing issues on windows
2023-08-28 11:04:41 -05:00
Ted Johansson
4b52269827
DEV: Move option to delete user under reviewable reject menu (#23257)
Follow-up to #23199 in which we moved the "delete user" options under the relevant action menu for flagged post. This change does the same, but to queued posts.
2023-08-27 10:05:05 +08: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
Isaac Janzen
dcbfb8c54b
DEV: Convert edit-topic-timer modal to component-based API (#23252)
# Before
<img width="479" alt="Screenshot 2023-08-25 at 10 52 04 AM" src="https://github.com/discourse/discourse/assets/50783505/65ec8f94-d3e3-4520-a3f0-b265af069e83">

# After
<img width="569" alt="Screenshot 2023-08-25 at 10 53 44 AM" src="https://github.com/discourse/discourse/assets/50783505/35d12af7-c287-42f8-bf9c-d0ae1b5a08db">
2023-08-25 12:17:34 -05:00
Carson Chang
d0e369946c
Update compose.scss (#23198) 2023-08-23 10:11:16 -07:00
David Taylor
b5b4a3f233
UX: Fix positioning of mobile show-more following 71ff3417 (#23189)
71ff3417 removed the mobile-specific template for discovery/topics. It was noted that this would introduce an additional `<div class='show-more'>` wrapper around the new topic indicator on mobile, but I didn't realise that it would cause positioning problems on mobile.

This commit moves the desktop-specific CSS into the desktop SCSS file so that it does not apply to mobile.
2023-08-22 17:16:12 +01:00
Isaac Janzen
742d71e99c
DEV: Finalize glimmer search menu (#23174)
There was a few outstanding items that needed cleaning up.
### Make sure we don't clear the topic context prematurely
##### Before
https://github.com/discourse/discourse/assets/50783505/e92e4d6f-f42c-4357-8f13-8fa9f1024ade

_getting to zero search characters would automatically clear the search context_

##### After
https://github.com/discourse/discourse/assets/50783505/fd805dfd-576d-4e32-b6b5-5b93c25a5782

### Style fixes
##### Before
<img width="498" alt="Screenshot 2023-08-21 at 4 37 31 PM" src="https://github.com/discourse/discourse/assets/50783505/70847db1-43ec-477e-a21a-54ef2de0af42">

##### After
<img width="500" alt="Screenshot 2023-08-21 at 4 38 36 PM" src="https://github.com/discourse/discourse/assets/50783505/98cfb2e9-7c4d-44a6-bde2-53b85318fed3">

##### Before
<img width="450" alt="Screenshot 2023-08-21 at 4 33 45 PM" src="https://github.com/discourse/discourse/assets/50783505/3e057a52-5d1c-4776-93d0-a48133a722bc">

##### After
<img width="451" alt="Screenshot 2023-08-21 at 4 34 30 PM" src="https://github.com/discourse/discourse/assets/50783505/77548f6c-a9cf-4cf8-88d8-ee249736d684">

##### Before
<img width="460" alt="Screenshot 2023-08-21 at 4 31 01 PM" src="https://github.com/discourse/discourse/assets/50783505/9da57868-bc66-4d84-9108-4ae705a0562b">

##### After
<img width="456" alt="Screenshot 2023-08-21 at 4 30 52 PM" src="https://github.com/discourse/discourse/assets/50783505/f9444546-97f2-4d1a-9f78-7407f0f32ae7">
2023-08-21 17:51:11 -05:00
Ella E
9d7254184c
UX: remove border radius on tippy (#23133)
* UX: remove border radius on tippy

* DEV: use border radius var
2023-08-17 20:53:28 -06:00
Ella E
49a54d4cee
UX: remove boostrap mode rounded corners (#23132) 2023-08-17 14:59:45 -06:00
Roman Rizzi
af30f9945a
UX: Use pill design on both mobile and desktop (#23124) 2023-08-17 14:37:11 -03:00
Jordan Vidrine
4d2d31e68a
Revert "UX: Simplify and redesign summary skeleton (#22965)" (#23012)
This reverts commit bd19f0c9f1.
2023-08-08 07:55:37 -05:00
Penar Musaraj
161d3d190a
A11Y: Fix selecting topic when navigation via keyboard (#22996)
This fixes:
- a regression from 30c152c, where navigating to a topic's last reply
  via keyboard would lose track of the topic when returning to the topic
  list
- an issue where if a topic's last post is a small post, navigating to it
   via keyboard would not focus the post

Co-authored-by: David Taylor <david@taylorhq.com>
2023-08-07 17:05:16 -04:00
Roman Rizzi
2485f5d5f6
FIX: Don't cut browse more message on the mobile app. (#22998)
Adds a padding-bottom to the wrapper to avoid cutting the message on the mobile app and sets a max-width to align with the timeline on the desktop.

Fixes a bug on mobile where we updated the preference, but the user had a single list.
2023-08-07 17:19:21 -03:00
Keegan George
bd19f0c9f1
UX: Simplify and redesign summary skeleton (#22965) 2023-08-03 13:59:35 -07:00
Roman Rizzi
001320c9f1
FIX: Display browse more message as long as there are suggested topics (#22967) 2023-08-03 17:39:51 -03:00
Isaac Janzen
d2502c9a79
DEV: Convert theme-change modal to component-based API (#22964)
# Before
<img width="575" alt="Screenshot 2023-08-03 at 1 35 47 PM" src="https://github.com/discourse/discourse/assets/50783505/b4ae1487-bef8-40d4-8949-902e36303d43">

# After
<img width="897" alt="Screenshot 2023-08-03 at 1 41 21 PM" src="https://github.com/discourse/discourse/assets/50783505/a37c5fe1-eee5-4e0a-8b0a-66aebbaf2342">

This modal could still use some design love. I will raise this internally.
2023-08-03 15:01:40 -05:00
Roman Rizzi
dd8d89d9c8
UX: Use full width when displaying a single recommendations list. (#22896) 2023-08-01 13:49:24 +10:00
Roman Rizzi
e7fb4be23e
UX: Topic recommendations tweaks. (#22880)
This PR updates how we display related and suggested topics on mobile and desktop. It adds a new `PluginOutlet` specifically designed for adding new topic lists, which automatically work if following the same conventions as the ones inside `<MoreTopics />`.

While we display lists side by side on desktop, we only display one in mobile. You can switch to another one by clicking on the nav pills, and we'll automatically save your preference for next time.
2023-07-31 18:33:21 -03:00
Bianca Nenciu
a68752df25
UX: Move Admin Guide link to URL (#22789)
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-07-31 15:30:27 +01:00
chapoi
984dd89cb4
Revert "UX: fix alignment extra buttons in post controls" (#22876)
This reverts commit 507551ea73.
2023-07-31 14:46:36 +02:00
chapoi
6a67d69f7a
UX: fix alignment extra buttons in post controls (#22872) 2023-07-31 11:55:46 +02:00
Jordan Vidrine
0f1479e896
UX: Refactor AI summarizing animation (#22839) 2023-07-28 14:02:26 -05:00
Kris
331507f6b0
UX: allow composer title to shrink when needed (#22863) 2023-07-28 14:48:23 -04:00
Carson Chang
98e3bbd6bf
FIX: Breaking typo, missing closing parenthesis in topic-post.scss (#22852)
* Breaking typo, Update topic-post.scss

* Update topic-post.scss
2023-07-28 09:55:04 -07:00
Ella E
9e4c747657
FIX: Tweak right arrow position; set other arrow placements to default (#22848) 2023-07-28 08:58:34 -06:00
Jordan Vidrine
5d1c1e5f62
prettier (#22786) 2023-07-25 16:19:07 -05:00
Penar Musaraj
c6dca50ba4
UX: Remove ring from avatar for a new user (#22780) 2023-07-25 14:49:44 -04:00
Penar Musaraj
f5e8e737ad
UX: Compact option for multi-selects (#22239)
Adds an alternative to the default multi select item, better suited for quickly adding/removing tags.
2023-07-25 11:00:02 -04:00
Kris
ba91309cb8
UX: fix bookmark modal footer layout (#22766) 2023-07-25 06:42:29 +08:00
Roman Rizzi
238d71bcad
FEATURE: Regenerate outdated summaries. (#22718)
Users unable to generate new summaries won't be able to regenerate them. They'll only see the warning saying it's outdated.
2023-07-20 15:25:46 -03:00
Roman Rizzi
3820fae041
UX: Disclose AI model used and add animation to placeholder (#22670)
* UX: Disclose AI model used and add animation to placeholder

* Move text into hbs template

DTooltip (weirdly) attaches to a sibling element, so we need something else to be rendered inside the RenderGlimmer wrapper div

---------

Co-authored-by: David Taylor <david@taylorhq.com>
2023-07-19 12:03:36 -03:00
Krzysztof Kotlarek
20ec7ac174
FEATURE: new API to add panels to sidebar (#22534)
Define new concept of panels in sidebar. Panels are wrappers around sidebar sections. In the future, it allows creating full focus mode by switching between panels.

A new API method called addSidebarPanel was added. Default main panel is already registered and by default all API sections are mounted to main.
2023-07-19 11:31:45 +10:00
Kris
7b23010c4a
UX: fix icon warning position in sidebar modal (#22572) 2023-07-12 13:57:11 -04:00
Roman Rizzi
61aeb2da90
FEATURE: Inline topic summary. Cached version accessible to everyone. (#22551)
* FEATURE:  Inline topic summary. Cached version accessible to everyone.

Anons and non-members of the `custom_summarization_allowed_groups_map` groups can see cached summaries for any accessible topic. After the first 12 hours and if the posts to summarize have changed, allowed users clicking on the button will automatically re-generate it.

* Ensure chat summaries work and prevent model hallucinations when there are no messages.
2023-07-12 11:21:51 -03:00
Bianca Nenciu
bdb9ee8507
UX: Improve user tips (#22518)
- Add an icon to the bootstrap user tip to draw attention
- Remove the second "don't show user tip" button from every user tip
2023-07-11 18:22:40 +03:00
Alan Guo Xiang Tan
ab053ac669
UX: Remove section heading for community section (#22405)
Why is this change being made?

We've decided that the previous "community" section should look more
like a primary section that holds the most important navigation links
for the site and the word "community" doesn't quite fit that
description. Therefore, we've made the decision to drop the
section heading for the community section. 

As part of removing the section heading, the following changes are made
as well:

1. Button to customize the section has been moved to the "footer" of the
   "More..." section when `navigation_menu` site setting is set to `sidebar`. 
   When `navigation_menu` is set to `header dropdown`, a button to customize 
   the section is shown inline.

2. The section will no longer be collapsable.

3. The title of the section is no longer customisable as it is no longer
   displayed. As a technical note, we have not dropped any previous
   customisations of the section's title previously in case we have to
   bring back the header in the future.

4. The new topic button that was previously present in the header has
   been removed alongside the header. Admins can add a custom section
   link to the `/new-topic` route if there would like to make it easier for
   users to create a new topic in the sidebar.
2023-07-11 09:40:37 +08:00
Kris
7d5db385d6
DEV: Remove header floats and clearfixes (#22523) 2023-07-10 17:57:20 -04:00
Bianca Nenciu
0b16fc8172
FEATURE: Show tooltip for bootstrap mode (#22257)
Improve user tips UX and make them smoother.
2023-07-10 20:42:09 +03:00
Meghna
0b36cf5a3f
UX: Fix margin for group label (#22510) 2023-07-10 21:18:12 +05:30
Kris
26d19fc1bd
UX: indicate main sidebar section is always public (#22492) 2023-07-10 11:44:40 -04:00
Rafael dos Santos Silva
3fd327c458
FEATURE: Basic support for threads.net onebox (#22471) 2023-07-06 16:02:49 -03:00
Alan Guo Xiang Tan
effaf95355
UX: Improve position of modal close button (#22450) 2023-07-06 13:45:19 -04: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
Krzysztof Kotlarek
2f5cb0a280
UX: visual indicator for reorder sidebar links mode (#22379)
Bring back CSS which was removed here 10dce46886 (diff-fa3cff3fcf18e3677f75fd71989c9bbd1b9940a5ce73f9c9efa6c4cbb0123b97L34)
2023-07-04 09:56:52 +10:00
Jan Cernik
77732cd2b4
FIX: Minor Twitter onebox improvements (#22387) 2023-07-03 19:53:12 -03:00
Jan Cernik
585a2e4e77
FEATURE: Use rich user status tooltip everywhere (#21125)
- Inline mentions on posts
- Inline mentions on chat messages
- The user autocomplete for the composer
- The user autocomplete for chat
- The chat section of the sidebar
2023-07-03 11:09:41 -03:00
Bianca Nenciu
4bb4be958c
FIX: Show tag chooser in composer for PM on mobile (#22241)
This was not displayed on mobile due to space constraints. With better
organization of the title, category and tags inputs, it can be
displayed.
2023-06-26 20:12:32 +03:00
Kris
ea2b5db462
UX: fix user preference saved! position (#22263) 2023-06-26 09:02:34 -04:00
Kris
6ec95fa79c
FIX: sidebar dot color when chat is off (#22264) 2023-06-26 10:43:35 +02: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
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
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
Ella E
f736748853
FIX: Make the arrow and tooltip background the same color (#22171)
* FIX: Make the arrow and tooltip background the same color
* FIX: move position arrow
2023-06-19 12:05:23 -06:00
Canapin
84bbf0fdd7
UX: fix avatar selector overflow (#22159) 2023-06-16 16:36:13 +01:00
Kris
ffcac7bf5a
UX: consistent button hover transitions (#22157) 2023-06-16 10:25:58 -04:00
Isaac Janzen
a2b038ffe7
DEV: Upgrade search-menu to glimmer (#20482)
# Top level view
This PR is the first version of converting the search menu and its logic from (deprecated) widgets to glimmer components. The changes are hidden behind a group based feature flag. This will give us the ability to test the new implementation in a production setting before fully committing to the new search menu.

# What has changed
The majority of the logic from the widget implementation has been updated to fit within the context of a glimmer component, but it has not fundamentally changed. Instead of having a single widget - [search-menu.js](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/widgets/search-menu.js) - that built the bulk of the search menu logic, we split the logic into (20+) bite size components. This greatly increases the readability and makes extending a component in the search menu much more straightforward.

That being said, certain pieces needed to be rewritten from scratch as they did not translate from widget -> glimmer, or there was a general code upgraded needed. There are a few of these changes worth noting:

### Search Service
**Search Term** -> In the widget implementation we had a overly complex way of managing the current search term. We tracked the search term across multiple different states (`term`, `opts.term`, `searchData.term`) causing headaches. This PR introduces a single source of truth: 
```js
this.search.activeGlobalSearchTerm
```
This tracked value is available anywhere the `search` service is injected. In the case the search term should be needs to be updated you can call 
```js
this.search.activeGlobalSearchTerm = "foo"
```
 
**event listeners** -> In the widget implementation we defined event listeners **only** on the search input to handle things such as 
- keyboard navigation / shortcuts
- closing the search menu
- performing a search with "enter"

Having this in one place caused a lot of bloat in our logic as we had to handle multiple different cases in one location. Do _x_ if it is this element, but do _y_ if it is another. This PR updates the event listeners to be attached to individual components, allowing for a more fine tuned set of actions per element. To not duplicate logic across multiple components, we have condensed shared logic to actions on the search service to be reused. For example - `this.search.handleArrowUpOrDown` - to handle keyboard navigation.

### Search Context
We have unique logic based on the current search context (topic / tag / category / user / etc). This context is set within a models route file. We have updated the search service with a tracked value `searchContext` that can be utilized and updated from any component where the search service is injected.

```js
# before
this.searchService.set("searchContext", user.searchContext);

# after
this.searchService.searchContext = user.searchContext;
```

# Views
<img width="434" alt="Screenshot 2023-06-15 at 11 01 01 AM" src="https://github.com/discourse/discourse/assets/50783505/ef57e8e6-4e7b-4ba0-a770-8f2ed6310569">

<img width="418" alt="Screenshot 2023-06-15 at 11 04 11 AM" src="https://github.com/discourse/discourse/assets/50783505/2c1e0b38-d12c-4339-a1d5-04f0c1932b08">

<img width="413" alt="Screenshot 2023-06-15 at 11 04 34 AM" src="https://github.com/discourse/discourse/assets/50783505/b871d164-88cb-405e-9b78-d326a6f63686">

<img width="419" alt="Screenshot 2023-06-15 at 11 07 51 AM" src="https://github.com/discourse/discourse/assets/50783505/c7309a19-f541-47f4-94ef-10fa65658d8c">

<img width="424" alt="Screenshot 2023-06-15 at 11 04 48 AM" src="https://github.com/discourse/discourse/assets/50783505/f3dba06e-b029-431c-b3d0-36727b9e6dce">

<img width="415" alt="Screenshot 2023-06-15 at 11 08 57 AM" src="https://github.com/discourse/discourse/assets/50783505/ad4e7250-040c-4d06-bf06-99652f4c7b7c">
2023-06-16 09:24:07 -05:00
Joffrey JAFFEUX
7dafd275ac
FIX: various mobile chat improvements (#22132)
- FIX: improves reactions and thread indicator touch event on mobile
These "buttons" are located inside a scroll list which makes them very specific. The general idea is to ensure these events are passive and are not bubbling to the parent.
- DEV: moves state on top level message node
- FIX: ensures popover arrow has the correct border
- FIX: makes a message expanded by default
- FIX applies the same ios scroll fix on thread and channel
- UI: better active/hover state for thread indicator
- UI: attempts to follow more closely our BEM naming scheme
- FIX: reduces bottom padding on message with thread indicator and user info hidden
- UI: add padding for first message in thread
- FIX: prevents actions backdrop to open thread
- UI: makes thread indicator resizable
2023-06-16 11:36:43 +02:00
Alan Guo Xiang Tan
783bce4b2c
DEV: Don't render header on invites page (#22138)
What this change?

Previous solution relied on CSS to hide the header which is first
wasteful since we're still rendering the header and second makes it
untestable. If we don't want the header to show, we should avoid
rendering it in the first place.
2023-06-16 09:42:00 +08:00
Meghna
7da307669f
UX: stack group inbox label horizontally (#22130) 2023-06-15 18:35:36 +05:30
Ella E
61cf221416
UX: Remove branded blobs background (#22115)
* UX: Remove branded blobs background

* Update app/assets/stylesheets/common/base/login.scss

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

---------

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-06-14 13:21:08 -06:00
Kris
e0f848c2ea
REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04:00
Kris
17656e4451
UX: force long filenames to wrap in lightbox (#22091) 2023-06-13 13:34:14 -04:00
Roman Rizzi
8938ecabc2
FEATURE: Custom content summarization strategies. (#21813)
* FEATURE: Content custom summarization strategies.

This PR establishes a pattern for plugins to register alternative ways of summarizing content by extending a class that defines an interface.

Core controls which strategy we'll use and who has access to it through the `summarization_strategy` and `custom_summarization_allowed_groups`. It also defines the UI for summarizing topics.

Other plugins can access this summarization mechanism and implement their features, removing cross-plugin customizations, as it currently happens between chat and the discourse-ai plugin.

* Group membership validation and rate limiting

* Work with objects instead of classes

* Port summarization feature from discourse-ai to chat

* Rename available summaries to 'Top Replies' and 'Summary'
2023-06-13 14:21:46 -03:00
Blake Erickson
e576fdbe3a
SECURITY: set max-height property for iframes (#22084)
Co-authored-by: David Battersby <info@davidbattersby.com>
2023-06-13 11:07:32 -06:00
Penar Musaraj
3c490b2db8
UX: Better alignment for experimental grids (#22066)
Improves the layout of most grids in posts, by using `object-fit: cover` for most images. This allows images to better fill up the space, without changing their aspect ratio.
2023-06-13 09:25:46 -04:00
chapoi
bb4b60d624
UX: remove rounded border on hover lightbox (#22080) 2023-06-13 13:31:28 +02:00
Bianca Nenciu
774698491d
UX: Make user tips more visible (#22012)
Inverts the background of the user tip to make it more visible.
2023-06-12 21:08:49 +03:00
chapoi
fca6c1836c
UX: Chat unread indicator refactor (#22040)
* move the chat unread indicator to top to match the profile avatar indicator
* add white border to profile avatar indicator (badge notification) to match chat indicator and userstatus styling
* change `.urgent` to BEM
* congregate all styling into mixin
  * update chat index to use mixin
  * update thread indicator to use mixin
  * update header indicator to use mixin

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Co-authored-by: Martin Brennan <martin@discourse.org>
2023-06-12 14:33:45 +10:00
Penar Musaraj
1abfe2e61d
UX: Small spacing fix for grid items (#21979)
Supports spacing for videos and placeholder elements.
2023-06-09 15:28:50 -04:00
Kris
6e395786bf
UX: increase contrast of "more" sidebar dropdown (#22044) 2023-06-09 12:38:44 -04:00
Meghna
124de2ba7c
UX: list group label indicator should match existing design (#21999)
* UX: list group label indicator should match existing design

* better formatting

* add slight left margin
2023-06-09 21:30:34 +05:30
Keegan George
39efa4c32a
DEV: Create posts from form templates (#21980) 2023-06-08 12:49:18 -07:00
Kris
d246938265
UX: show tooltip for global nav section icon (#21974) 2023-06-08 12:57:44 -04: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
Jordan Vidrine
928589adfd
CSS: Move table editor button to right (#21976) 2023-06-07 14:50:34 -05:00
Penar Musaraj
987ec602ec
FEATURE: image grid in posts (experimental) (#21513)
Adds a new `[grid]` tag that can arrange images (or other media) into a grid in posts. 

The grid defaults to a 3-column with a few exceptions:

- if there are only 2 or 4 items, it defaults to a 2-column grid (because it generally looks better)
- on mobile, it defaults to a 2-column grid
- if there is only one item, the grid has no effect
2023-06-07 14:15:57 -04:00
Kris
e43ac00bf4
FIX: add category colors back to categories pages (#21977) 2023-06-07 12:57:10 -04:00
Alan Guo Xiang Tan
1cbc65ba79
DEV: Refactor GroupNotificationsButton into userPrivateMessages.group route (#21930)
Why this change?

Before this change, the `GroupNotificationsButton` is rendered in the
template of `userPrivateMessages` route based on a conditional that
checks if the `isGroup` property is true. However, the `isGroup`
property is determined based on the child route that is rendered.
However, this leads to "jankiness" in the UI because the
`GroupNotificationsButton` will be rendered once the route is entered
even if the model for the child route has not been resolved yet.

What is the solution?

In order to avoid this, we move the rendering of the
`GroupNotificationsButton` into the template of the
`userPrivateMessages.group` route and rely on the `in-element` helper to
render it into the right spot in the template of the
`userPrivateMessages` route.
2023-06-07 06:22:50 +08:00
Kris
d371f3906e
FIX: restore sidebar footer background (#21956) 2023-06-06 14:46:08 -04:00
Kris
10dce46886
UX: remove sidebar background color (#21775) 2023-06-06 09:24:56 -04:00
Kris
7d9953dc15
UX: adjust frequent poster size in topic map (#21933) 2023-06-05 18:18:58 -04:00
chapoi
9616a08fa6
UX: Add show more btn to reviewable item (#21579) 2023-06-01 11:55:27 -07:00
Kris
1d9f195207
UX: adjust various avatars due to size changes (#21890) 2023-06-01 11:17:44 -04:00
Kris
594b892409
UX: style adjustments for sidebar edit modal (#21869) 2023-06-01 10:37:28 +08:00
Osama Sayegh
c2fcd55a80
FEATURE: Serve RTL versions of admin and plugins CSS bundles for RTL locales (#21876)
Prior to this commit, we didn't have RTL versions of our admin and plugins CSS bundles and we always served LTR versions of those bundles even when users used an RTL locale, causing admin and plugins UI elements to never look as good as when an LTR locale was used. Example of UI issues prior to this commit were: missing margins, borders on the wrong side and buttons too close to each other etc.

This commit creates an RTL version for the admin CSS bundle as well as RTL bundles for all the installed plugins and serves those RTL bundles to users/sites who use RTL locales.
2023-06-01 05:27:11 +03:00
Vinoth Kannan
d4bfd441ba
FEATURE: display PM participant group names in the topics list. (#21677)
After this change, we can view all participant group names on the topic list page.

Co-authored-by: Régis Hanol <regis@hanol.fr>
2023-05-31 19:32:06 +05:30
Alan Guo Xiang Tan
c01580298e
Revert "PERF: Client side triggering multiple requests when opening composer (#21823)" (#21858)
This reverts commit e1ba4c6b73.

Tests are flaky
2023-05-31 21:18:45 +08:00
Alan Guo Xiang Tan
e1ba4c6b73
PERF: Client side triggering multiple requests when opening composer (#21823)
What is the problem?

There are two problems being fixed here:

1. When opening the composer, we are seeing multiple requests made to
   the `/composer_messages` endpoint. This is due to our use of the
   `transitionend` event on the `#reply-control` element. The event is
   fired once for each transition event and the `#reply-control` element
   has multiple transition events.

2. System tests have animations disabled so the `transitionend` event
   does not fire at all.

What is the solution?

Instead of relying on the `transitionend` event, we can instead just
observer the `composerState` property of the `ComposerBody` component
and trigger the `composer:opened` appEvent with a delay that is similar
to the transition duration used for the `ComposerBody` component.
2023-05-31 20:58:45 +08:00
Osama Sayegh
0b9f035eac
FIX: Remove unneeded RTL-specific CSS rules
We currently have some CSS rules in `common/base/rtl.scss` that were added to workaround shortcomings of the R2 gem that we used to use to generate versions of our CSS that are suitable for RTL layouts. Those workarounds are mostly duplicates of existing rules with the only difference being that they're flipped to suit RTL layouts (e.g. `padding-left` is changed to `padding-right` and vice versa).

However, we've recently replaced R2 with `rtlcss` which doesn't have those shortcomings of R2 (see f94951147e) which means those workarounds/duplicate rules need to be removed because they're getting flipped by `rltcss`, essentially reverting them to their original LTR version and causing issues with RTL layouts.

This commit removes those workarounds that are no longer needed, and cleans up the the file that contains our RTL-specific CSS.

Meta topic: https://meta.discourse.org/t/avatar-in-rtl-website-in-wrong-place/264676?u=osama.
2023-05-31 01:27:38 +03:00
Canapin
a187411611
UX: Fix post history raw view (#21830)
The RAW view was broken by previous PR. This commit fixes it.
2023-05-31 05:29:04 +08:00
Keegan George
c74c90bae5
DEV: Show form templates in the composer (#21190) 2023-05-29 14:47:18 -07:00
chapoi
5bf2dca24a
UX: add support for flagged chat message in reviewqueue (#21802)
* UX: add support for flagged chat message in reviewqueue

* correctly init a chat message object

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2023-05-29 10:02:02 +02:00
Krzysztof Kotlarek
9f78ff5572
FEATURE: modal for admins to edit Community section (#21668)
Allow admins to edit Community section. This includes drag and drop reorder, change names, delete and reset to default.

Visual improvements introduced in edit community section modal are available in edit custom section form as well. For example:
- drag and drop links to change their position;
- smaller icon picker.
2023-05-29 15:20:23 +10:00
Kris
ff03b2274f
UX: minor active state fix for sidebar (#21754) 2023-05-25 16:01:27 -04:00
Renato Atilio
c539f749f1
FEATURE: support for chronologically merging posts into existing topic (#21374)
When a user chooses to move a topic/message to an existing topic/message, they can now opt to merge the posts chronologically (using a checkbox in the UI).
2023-05-25 14:38:34 -04:00
Kris
442b5538bb
UX: more style adjustments for larger sidebar font (#21751) 2023-05-25 11:21:30 -04:00
Kris
2aae8d6092
UX: increase sidebar font-size (#21704) 2023-05-24 11:00:20 -04:00
Canapin
d537265ddd
UX: improve edit history display (#21474) 2023-05-24 08:59:13 +08:00
Kris
5dd89e0b70
UX: iPad footer nav now included in header offset (#21699) 2023-05-23 17:49:19 -04:00
Canapin
ecb9a27e55
UX: improve tags spacing (#21585) 2023-05-23 09:52:15 +08:00
Keegan George
2ebe7db3c6
DEV: .quick-access-profile no longer exists (#21663) 2023-05-20 17:47:04 +10:00
Ella E
219fd7bb42
UX: tweak on logo size to make sure it's not too small on small screen (#21644) 2023-05-18 13:11:53 -06:00
Keegan George
082821c754
DEV: Remove legacy user menu (#21308) 2023-05-17 09:16:42 -07:00
David Taylor
f2482b5daa DEV: Replace modal 'maxHeight' calculation with css 2023-05-15 13:43:01 +01:00
Joffrey JAFFEUX
5ce0697348
FIX: limits max height to viewport on channel only (#21539)
Before this commit chat was applying a fixed height on everything under the `/chat` route. It's only really needed on the channel page with the composer at the bottom of the page.

This commits makes the following changes:
- moves height limitation from `#main-outlet-wrapper` to `.chat-channel`
- makes browse channel page and members list page full height and rely on main document scrollbar
- adds height computation for draft header and direct message creator block to ensure the height is correct when creating a draft channel
- makes chat index full height to rely on the browser scrollbar. As a result the <kbd> + </kbd> button used on mobile to create a direct message as been moved out of `<ChannelsList>` into the chat index template
- sidebar height was relying on chat setting a max height, as a result the height computation of sidebar has been changed to work correctly, especially with an opened keyboard on mobile or ipad
2023-05-15 11:46:33 +02:00
Bianca Nenciu
b73a9a1faa
UX: Various improvements to welcome topic CTA (#21010)
- Update welcome topic copy
- Edit the welcome topic automatically when the title or description changes
- Remove “Create your Welcome Topic” banner/CTA
- Add "edit welcome topic" user tip
2023-05-12 17:09:40 +03:00
Krzysztof Kotlarek
be1cbc7082
FIX: jumpy more sidebar section (#21430)
Bug introduced in PR https://github.com/discourse/discourse/pull/21398

More section needs to be wrapped in div with position:relative to have sticky and absolute position.
2023-05-08 14:33:24 +10:00
Krzysztof Kotlarek
dddbdffea6
FIX: flaky sidebar-user-community-section-test (#21398)
Change mechanism handling `more` button for sidebar.
Before it was using HTML details tag.
To make tests more reliable, we are switching to use ember runloop.
2023-05-08 13:37:34 +10:00
Krzysztof Kotlarek
709fa24558
DEV: move sidebar community section to database (#21166)
* DEV: move sidebar community section to database

Before, community section was hard-coded. In the future, we are planning to allow admins to edit it. Therefore, it has to be moved to database to `custom_sections` table.

Few steps and simplifications has to be made:
- custom section was hidden behind `enable_custom_sidebar_sections` feature flag. It has to be deleted so all forums, see community section;
- migration to add `section_type` column to sidebar section to show it is a special type;
- migration to add `segment` column to sidebar links to determine if link should be displayed in primary section or in more section;
- simplify more section to have one level only (secondary section links are merged);
- ensure that links like `everything` are correctly tracking state;
- make user an anonymous links position consistence. For example, from now on `faq` link for user and anonymous is visible in more tab;
- delete old community-section template.
2023-05-04 12:14:09 +10:00
Kris
4f306cf88f
UX: fix color scheme setting reset position (#21365) 2023-05-03 13:37:23 -04:00
Kris
3ea86985b9
UX: fix color preference layout (#21346) 2023-05-03 10:11:52 +08:00
Kris
8caa58acf2
DEV: remove old and experimental user menu styles (#21326) 2023-05-02 15:07:42 -04:00
Kris
4cca7de22d
UX: two column dropdown sidebar layout (#21288) 2023-05-01 10:41:28 -04:00
Penar Musaraj
a67c96438c
UX: Fix user onebox layout (#21284) 2023-04-28 09:50:49 -04:00
David Taylor
f5fa1ef771
UX: Use dvh for sidebar height (#21278)
This will automatically adjust when browser UI is shown/hidden (e.g. when scrolling up/down on mobile Safari).

Similar approach to c82094cd9d, which targeted the 'slide-in' version of menus.
2023-04-27 16:31:09 +01:00
Kris
4eb7d2d79b
UX: improve layout and styles for solo preferences (#21094) 2023-04-19 09:41:02 -04:00
Kris
af58dbeb24
UX: update ring animation to avoid scroll (#21150) 2023-04-19 09:13:50 -04:00
Joffrey JAFFEUX
4fee0fc333
UX: ensures cursor is pointer over custom sections (#21138) 2023-04-18 11:23:09 +02:00
Meghna
68549fe54e
UX: Vertical alignment issues on mobile (#21118)
Vertical alignment fixes for topic closed small message and poll info.
2023-04-17 22:51:13 +05:30
Kris
87515b1aa0
FIX: composer collapse position while uploading (#21101) 2023-04-17 09:21:32 -04:00
Canapin
4b9061ae3f
UX: Remove color attribute from <kbd> tag (#20429)
As a single example, if a `<kbd>` tag is wrapped by a `<a>` link, it doesn't inherit the link color:

`[<kbd> **Support**</kbd>](https://meta.discourse.org)`

It's because the `<kbd>` tag has a `color: var(--primary);` CSS rule which seems superfluous.

If we disable it, the `<kbd>` tag inherits all the normal colors (including the link color 👌).

The direct `<kbd>` parent that assigns the text color is `<html>` (can't go higher!) which has an identical `color: var(--primary);`. 

WCAG palettes don't seem to assign specific colors in this context.

It seems fairly safe to remove `color: var(--primary);` from `<kbd>` so it won't interfere anymore with its content.
2023-04-14 10:06:12 +08:00
Canapin
b328ada667
UX: Prevents letters from being partially cut off on the profile summary page (#20715) 2023-04-14 10:04:05 +08:00
Canapin
b9ca4c9031
UX: fix anchor z-index (#21002) 2023-04-14 10:02:57 +08:00
Alan Guo Xiang Tan
2eb60c9713
DEV: Switch sidebar section link identifier to data attribute (#21051)
Data attribute is less restrictive than relying on the class attribute
2023-04-12 15:52:10 +08:00
Kris
ce601ac84c
UX: improve composer control spacing on mobile (#21021) 2023-04-11 14:11:00 -05:00
Kris
1f0aff2719
UX: remove extra space from emoji in notifications (#21024) 2023-04-07 13:55:11 -04:00
Kris
18470c9195
UX: fix solo preference page layout (#21012) 2023-04-07 08:55:32 -04:00
Kris
56f2fdf430
UX: fix spacing between assign tags (#20967) 2023-04-04 17:26:06 -04:00
Alan Guo Xiang Tan
b82cd6c148
DEV: Nuke plugin related code from core (#20928)
Plugin related code should be not polluting core's code base.
2023-04-04 07:33:31 +08:00
Jarek Radosz
29e2e3ff3b
DEV: Fix random typos (#20937) 2023-04-03 19:27:32 +02:00
chapoi
df31b8dd2e
UX: reviewq flagging (#20913)
* DEV: add context question to flagged chat messages too

* UX: added -ai-flagged badge colour + grey fallback

* UX: add one more badge name
2023-04-02 12:16:26 +02:00
Kris
1ff9bc6e55
UX: onebox site icon needs a right margin (#20902) 2023-03-31 11:06:46 +11:00
Krzysztof Kotlarek
fd718c1a42
FIX: use unselectable mixin in sidebar drag and drop (#20886)
7dcaaec90c/app/assets/stylesheets/common/foundation/mixins.scss (L122)
2023-03-31 09:28:22 +11:00
Krzysztof Kotlarek
b854fa8cdb
FIX: disable text select on sidebar (#20871)
To make drag&drop links reliable, we have to disable user-select option on whole sidebar.

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
2023-03-29 14:32:28 +11:00
Krzysztof Kotlarek
f5fadc3149
FIX: reorder custom sidebar links on touch screen (#20856)
Previously, reorder on touch screens was disabled https://github.com/discourse/discourse/pull/20769.

This PR enables it again. However, link has to be hold for 300 ms to enable drag&drop. Otherwise, normal scroll is performed.
2023-03-29 08:57:04 +11:00
Penar Musaraj
f8720a20f9
Revert "UX: Take sticky header into account when spacebar scrolling (#20848)" (#20863)
This reverts commit cb92ea3c2b.

Was causing unexpected scrolling when interacting with the header. Will
investigate.
2023-03-28 11:13:51 -04:00
Ella E
0b05fa71ca
UX: Improve login required page (#20847)
* UX: improve static login page

* DEV: separate welcome header to its own translation line

* Define waving_hand_url helper

* Remove redundant copy

* Update translations for welcome_message

* DEV: remove unused imported getURL

---------

Co-authored-by: Bianca Nenciu <nenciu.bianca@gmail.com>
2023-03-28 07:09:44 -05:00
Penar Musaraj
cb92ea3c2b
UX: Take sticky header into account when spacebar scrolling (#20848) 2023-03-27 20:37:01 -04:00
Krzysztof Kotlarek
326a7a47e7
FIX: global sidebar section icon not moving on scroll (#20851)
Global section icon is using absolute position. To make it move on scroll, the parent element has to be relative.

https://meta.discourse.org/t/globe-icon-at-sidebar-behaves-badly/259382
2023-03-28 10:13:27 +11:00
Keegan George
83db0bf41a
FIX: Post height issues with Expand Table button (#18810) 2023-03-24 11:55:49 -07:00
Kris
88004873ec
A11Y: usernames aren't a meaningful heading (#20623) 2023-03-24 13:22:22 -04:00
Bianca Nenciu
142d2ab65e
FEATURE: Move bootstrap mode indicator to header (#20663)
The information about bootstrap mode has been moved from the notice to
the README topic for admins.
2023-03-24 15:59:03 +02:00
Krzysztof Kotlarek
4929288bdd
FIX: delay custom section reorder (#20799)
Reorder should start after 300ms.
In addition, pointer events should be blocked to not open link after reorder is finished.
2023-03-24 13:58:05 +11:00
Joffrey JAFFEUX
165a3217c8
Revert "FIX: delay custom section reorder (#20781)" (#20786)
This reverts commit 4fe79ccc79.
2023-03-23 11:27:12 +01:00
Krzysztof Kotlarek
4fe79ccc79
FIX: delay custom section reorder (#20781)
Reorder should start after 300ms.
In addition, pointer events should be blocked to not open link after reorder is finished.
2023-03-23 15:05:36 +11:00
Krzysztof Kotlarek
3eaf48aa37
FIX: disable reorder links on touch screens (#20769)
This feature causes troubles on touch screens like phones and tablets. Right now, we would like to limit it to mouse and touchpads.

/t/94351
2023-03-22 13:34:19 +11:00
Kris
d4c6511d31
UX: improve directory user fields on small screens (#20765) 2023-03-21 14:09:02 -04:00
Kris
1ed70d17ed
UX: allow profile menu tabs to scroll if needed (#20619) 2023-03-21 13:49:19 -04:00
Penar Musaraj
ae939f4111
UX: Fix menu panel padding on non-safe-area contexts (#20746)
Followup to 32ad46c. Only picks the `safe-area-inset-bottom` if it is
greater than the default padding value for the element.
2023-03-20 21:46:13 -04:00
Krzysztof Kotlarek
db74e9484b
FEATURE: ability to reorder links in custom sidebar sections (#20626)
Drag and drop to reorder custom sidebar sections
2023-03-21 12:23:28 +11:00
Joffrey JAFFEUX
c37dd63ac3
DEV: fixes linting (#20748)
Followup to 54eaae4326
2023-03-20 20:59:27 +00:00
Dominik Schlipper
54eaae4326
FIX: replace unitless 0 in CSS calc() with '0px' (#20689)
Using the unitless number 0 in CSS calc() functions is recognized as invalid (tested in Chrome 110 & Firefox 111).
In this code, this would disable the style definition for the 'height' property when one of the custom properties is undefined and the fallback '0' is used.
For more insight on this topic. see https://stackoverflow.com/questions/55406001/why-doesnt-css-calc-work-when-using-0-inside-the-equation
2023-03-20 16:06:49 -04:00
Penar Musaraj
5b0d300b8a
DEV: Set containing block for Popper dropdowns (#20745)
Popper dropdowns used `position: fixed` or `position: absolute`. But in
tables, we want the content to use auto overflow horizontally, and that
causes the dropdowns to be hidden vertically in some scenarios.

Setting a containing block on the parent container fixes both placement
and overflow issues.
2023-03-20 15:26:20 -04:00
Bianca Nenciu
fa96569ef2
FIX: Do not show user tips over composer (#20708) 2023-03-20 18:17:04 +02:00
Penar Musaraj
32ad46c551
UX: Adjust menu panels on iOS (#20703) 2023-03-16 19:23:15 -04:00
Penar Musaraj
a208ed0925
UX: Improve menu panel height fallback for older browsers (#20673)
Tested with Chrome <100, Firefox <100 and Samsung Internet 20, using
percentage-based height here works better for these browsers.

This was especially a problem for the Samsung Internet browser, because
it previously was hiding the "Dismiss" button on the user profile menu.
2023-03-14 10:41:38 -04:00
chapoi
dd07e0dbd0
FIX: review q issues (#20558)
* DEV: specify type of flag in status

* FIX: passing missing parameter

* DEV: pass type for reviewable score table

* UX: add missing queued-topic styling

* UX: fix img overflow

* UX: add styling for queued user

* UX: fix user flag color

* UX: prevent overflow

* UX: add copy for filters

* FIX: fix typo in css for akismet flagging

* UX: copy change for flag something else

* UX: prevent overflow

* Fixing reviewable-status css classes

* Changes based on no longer using humanType

* Need to use type rather than humanType for reviewable-status

* FIX: linting

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
2023-03-09 16:02:13 +01:00
Kris
3cab9d5f80
UX: position of group user table dropdown, border (#20593) 2023-03-09 09:39:02 -05:00
Kris
7b1eb080ba
UX: ensure header logo has dimensions, style clean-up (#20512) 2023-03-08 12:50:36 -05:00
Kris
6fc2cded55
UX: fix width for top embedded reply, post notice (#20546) 2023-03-06 11:24:49 -05:00
Kris
d28390054e
UX: style improvements to new user tables (#20530) 2023-03-06 09:30:48 -05:00
Kris
fac78413c8
REFACTOR: user directories without <table>, second attempt (#20515) 2023-03-02 15:10:19 -05:00
Kris
654ba44723
Revert "REFACTOR: user directories without <table> (#20316)" (#20513)
This reverts commit e206bd8907.
2023-03-02 12:52:02 -05:00
chapoi
e52bbc1230
UX/DEV: Review queue redesign fixes (#20239)
* UX: add type tag and design update

* UX: clarify status copy in reviewQ

* DEV: switch to selectKit

* UX: color approve/reject buttons in RQ

* DEV: regroup actions

* UX: add type tag and design update

* UX: clarify status copy in reviewQ

* Join questions for flagged post with "or" with new I18n function
* Move ReviewableScores component out of context
* Add CSS classes to reviewable-item based on human type

* UX: add table header for scoring

* UX: don't display % score

* UX: prefix modifier class with dash

* UX: reviewQ flag table styling

* UX: consistent use of ignore icon

* DEV: only show context question on pending status

* UX: only show table headers on pending status

* DEV: reviewQ regroup actions for hidden posts

* UX: reviewQ > approve/reject buttons

* UX: reviewQ add fadeout

* UX: reviewQ styling

* DEV: move scores back into component

* UX: reviewQ mobile styling

* UX: score table on mobile

* UX: reviewQ > move meta info outside table

* UX: reviewQ > score layout fixes

* DEV: readd `agree_and_keep` and fix the spec tests.

* Fix the spec tests

* fix the quint test

* DEV: readd deleting replies

* UX: reviewQ copy tweaks

* DEV: readd test for ignore + delete replies

* Remove old

* FIX: Add perform_ignore back in for backwards compat

* DEV: add an action alias `ignore` for `ignore_and_do_nothing`.

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
Co-authored-by: Vinoth Kannan <svkn.87@gmail.com>
2023-03-02 16:40:53 +01:00
Kris
e206bd8907
REFACTOR: user directories without <table> (#20316) 2023-03-02 09:20:38 -05:00
Jordan Vidrine
366f5e08d7
FIX: Copy & Fullscreen button edits in codeblocks (#20483) 2023-02-28 10:54:24 -06:00
Jarek Radosz
c81d4f60af
UX: Fix large onebox avatars in img chat messages (#20469)
When you included an image and a full-line (github) onebox in a single message the user avatar in the inbox would be incorrectly embiggened.
2023-02-27 23:03:02 +01:00
Keegan George
6108eee31d
DEV: Apply form template to categories (#20337) 2023-02-23 11:18:14 -08:00
chapoi
ab46a05d77
UX: User badges tweaks (#20408)
* UX: fix standalone badge padding

* UX: badge number formatting

* UX: copy

* DEV: Add LinkTo for the admin-badges/show count text

* UX: user badge awarded style update

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
2023-02-23 03:21:26 +01:00
Krzysztof Kotlarek
b9d037770c
DEV: configurable public sidebar sections (#20303)
Extension of https://github.com/discourse/discourse/pull/20057

Admin can create a public session visible to everyone. An additional checkbox is displayed for staff members.
2023-02-22 08:55:44 +11:00
David Taylor
235edfd07b
UX: Restore wider search dropdown width (#20391)
Followup to c82094cd9d
2023-02-21 15:40:22 +00:00
David Taylor
c82094cd9d
PERF: Refactor slide-in menu sizing for improved performance (#20377)
Using Javascript to read and recalculate sizing is prone to causing 'forced reflows', which are very expensive, especially on slower devices. This PR refactors the slide-in menus so that all of the height calculation is done using CSS. This is made possible by the new dvh (dynamic view height) units and env(safe-area-inset-bottom), both of which are supported on all of our target browsers.

In tests on a moto g50, on a sidebar with 16 categories, 15 tags, and 2 chat channels, this improves the sidebar opening time by around 50ms (6%).
2023-02-21 13:55:38 +00:00
chapoi
87de3c2319
UX: highlight vars updates (#20346)
* UX: replace highlight vars in popup menu

* UX: replace highlight vars in autcomplete

* UX: replace highlight vars in menu-panel

* UX: update style guide

* UX: bulk replace highlight vars in various small appearances
2023-02-21 10:15:49 +01:00
chapoi
b50a581c5d
UX: badge page styling update (#20373)
* UX: change layout badge card

* UX:  copy change

* UX: badge list styling

* UX: make active badge styling more clear

* Update translation

Co-authored-by: Gerhard Schlager <gerhard.schlager@discourse.org>

* Include x in translation

Co-authored-by: Gerhard Schlager <gerhard.schlager@discourse.org>

---------

Co-authored-by: Gerhard Schlager <gerhard.schlager@discourse.org>
2023-02-20 15:14:54 +01:00
chapoi
8465f53a35
UX: userstatus limit handling in UI (#20343)
* UX: handle long userstatus in menupanel

* UX: remove margin on userstatus emoji

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

* FIX: user status overflow on chat index
2023-02-17 06:54:56 +01:00
Joffrey JAFFEUX
7391f8e077
FIX: correctly account for ipad footer nav height (#20334)
This code also removes duplicated code in chat which doesn’t seem necessary anymore.
2023-02-16 16:49:17 +01:00
Krzysztof Kotlarek
1a5f6aefc7
FIX: correct sidebar and chat height on DiscourseHub (#20323)
Before that change, footer of the sidebar was not visible.
Footer is very important, especially now, when add custom section button is located there.
Also, distance between chat input and keyboard were increased
2023-02-16 15:59:09 +11:00
Jordan Vidrine
d40143371b
UX: Style edits (#19927) 2023-02-15 11:02:16 -06:00
Canapin
4bfa130c3a
UX: Fix remove-user-from-pm hover styling (#20273) 2023-02-15 11:06:21 -05:00
chapoi
f19044af6a
UX: add transparent border for header icon (#20306) 2023-02-15 06:55:13 +01:00
Kris
2dbcea9eee
A11Y: Allow header logo/title to hide, if needed (#20244) 2023-02-14 09:04:48 -05:00
Kris
1c64b2dd95
UX: allow sidebar to appear inline down to 768px (#20271)
* UX: allow sidebar to appear inline down to 768px

* test fix

* fix typos
2023-02-14 09:51:42 +11:00
Kris
8bc9acc414
A11Y: Header icons should be buttons, not links (#20242) 2023-02-10 13:55:51 -05:00
Krzysztof Kotlarek
6e1f3e0023
FIX: improvements for user custom sections (#20190)
Improvements for this PR: https://github.com/discourse/discourse/pull/20057

What was fixed:
- [x] Use ember transitions instead of full reload
- [x] Link was inaccurately kept active
- [x] "+ save" renamed to just "save"
- [x] Render emojis in link name
- [x] UI to set icon
- [x] Delete link is trash icon instead of "x"
- [x] Add another link to on the left and rewording
- [x] Raname "link name" -> "name", "points to" ->  link
- [x] Add limits to fields
- [x] Move add section button to the bottom
2023-02-08 11:45:34 +11:00
Kris
67ef46894f
UX: allow tags to wrap under categories on mobile (#20187) 2023-02-07 13:44:07 -05:00
Rafael dos Santos Silva
6e522e4aad
DEV: Move to Sass compilation to dart-sass (#19910)
This PR is a major change to Sass compilation in Discourse.

The new version of sass-ruby moves to dart-sass putting we back on the supported version of Sass. It does so while keeping compatibility with the existing method signatures, so minimal change is needed in Discourse for this change.

This moves us

From:
  - sassc 2.0.1 (Feb 2019)
  - libsass 3.5.2 (May 2018)

To:
  - dart-sass 1.58

This update applies the following breaking changes:

> 
> These breaking changes are coming soon or have recently been released:
> 
>  [Functions are stricter about which units they allow](https://sass-lang.com/documentation/breaking-changes/function-units) beginning in Dart Sass 1.32.0.
> 
>  [Selectors with invalid combinators are invalid](https://sass-lang.com/documentation/breaking-changes/bogus-combinators) beginning in Dart Sass 1.54.0.
> 
>  [/ is changing from a division operation to a list separator](https://sass-lang.com/documentation/breaking-changes/slash-div) beginning in Dart Sass 1.33.0.
> 
>  [Parsing the special syntax of @-moz-document will be invalid](https://sass-lang.com/documentation/breaking-changes/moz-document) beginning in Dart Sass 1.7.2.
> 
>  [Compound selectors could not be extended](https://sass-lang.com/documentation/breaking-changes/extend-compound) in Dart Sass 1.0.0 and Ruby Sass 4.0.0.


SCSS files have been migrated automatically using `sass-migrator division app/assets/stylesheets/**/*.scss`
2023-02-07 12:24:57 -03:00
Penar Musaraj
d29dc087b2
FEATURE: Support collapsing array sections in JSON Schema field types (#20118)
This allows users to collapse array-type data tables in JSON Schema
fields. Note that this data type is currently only used in themes and
plugins.
2023-02-07 08:22:01 -05:00
Kris
ec4ac1465e
UX: show full topic title for reply-where (#20109) 2023-02-06 13:51:14 -05:00
Krzysztof Kotlarek
84a87a703c
DEV: configurable custom sidebar sections (#20057)
Allows users to configure their own custom sidebar sections with links withing Discourse instance. Links can be passed as relative path, for example "/tags" or full URL.

Only path is saved in DB, so when Discourse domain is changed, links will be still valid.

Feature is hidden behind SiteSetting.enable_custom_sidebar_sections. This hidden setting determines the group which members have access to this new feature.
2023-02-03 14:44:40 +11:00
Osama Sayegh
f94951147e
FIX: Replace R2 gem with rtlcss for generating RTL CSS (#19636)
We've had a couple of problems with the R2 gem where it generated a broken RTL CSS bundle that caused a badly broken layout when Discourse is used in an RTL language, see a3ce93b and 5926386. For this reason, we're replacing R2 with `rtlcss` that can handle modern CSS features better than R2 does.

`rltcss` is written in JS and available as an npm package. Calling the `rltcss` from rubyland is done via the `rtlcss_wrapper` gem which contains a distributable copy of the `rtlcss` package and loads/calls it with Mini Racer. See https://github.com/discourse/rtlcss_wrapper for more details.

Internal topic: t/76263.
2023-02-01 14:21:15 +03:00
chapoi
18f7b47ecb
UX: improve emoji alignment for text (#19815)
* UX: improve emoji alignment for text

* UX: emoji exception for titles
2023-01-30 14:07:08 +01:00
chapoi
d0780eacdc
FIX: preserves avatar size inside onebox (#20066)
* UX: Wrap chat one-box avatars

* UX: restrict onebox image css to non-avatar
2023-01-30 13:59:25 +01:00
Ayke Halder
137dbaf0dc
DEV: declare post position as simple number in structured data (#16231)
This replaces the position declared as `#123` with the more simple version `123`.

The property position may be of type Integer or Text. A value of type Integer, or more precise of type Text which simply casts to integer, is sufficient here.
See: https://schema.org/position

In category-view the topic-list already uses this notation for the position of topics:
`<meta itemprop="position" content="123">`
2023-01-30 08:07:04 +01:00
Keegan George
a4c68d4a2e
FIX: Failing system spec for rate limited search (#20046) 2023-01-27 12:14:29 -08:00
chapoi
e03f6057ec
UX: Highlight var refactor (#20026)
* Add new color vars

* Select-kit > use new color vars

* update all color schemes with values for new hover/select vars

* Add variable yml names
2023-01-27 15:50:36 +01:00
Kris
7683b4bbfa
UX: improve bulk button layout and alignment (#19966) 2023-01-24 09:47:35 -05:00
Kris
239815c4a4
UX: fixes and adjustments for user nav (#19954) 2023-01-23 14:28:55 -05:00
Jordan Vidrine
1d7b50a0d3
FIX: Fix margin on mini-tag-chooser (#19953) 2023-01-23 10:39:57 -06:00
Kris
f7907a3645
A11Y: remove heading tags from user profile (#19935) 2023-01-20 12:27:07 -05:00
Jordan Vidrine
b412f03b29
UX: Remove left margin (#19932) 2023-01-20 07:59:25 -06:00
Jordan Vidrine
62aa2adc74
UX: Add margin to search keyword (#19931) 2023-01-20 07:40:48 -06:00
Krzysztof Kotlarek
b05f193cf0
FIX: move min tag setting to tags section in edit category (#19789)
`Minimum number of tags required in a topic` should be in `Tags` panel instead of `Settings`
2023-01-20 13:30:39 +11:00
Kris
2fb2b0a538
UX: switch categories-boxes layouts from flexbox to grid (#19501) 2023-01-19 12:48:58 -05:00
Kris
2b36a9f7b8
UX: prevent search context btn text from wrapping (#19904) 2023-01-18 09:40:56 -05:00
Kris
20f5a69427
UX: add missing space and other minor search adjustments (#19899) 2023-01-18 09:40:38 -05:00
Kris
3483285b89
UX: restyle quote/share popup, fix hover jitter (#19561) 2023-01-17 12:28:33 -05:00
Penar Musaraj
86b4f4d664
UX: Refactor alignment of tag icon in Discourse onebox (#19880)
Followup to 1ce9582a6c
2023-01-17 11:13:55 -05:00
Loïc Guitaut
1ce9582a6c FIX: Display Discourse onebox tag icon properly in chat 2023-01-16 14:53:49 +01:00
Isaac Janzen
92bb728fe5
DEV: Add search suggestions for tag-intersections (#19777)
Added `tagIntersection` search context for handling search suggestions on tag intersection and tag+category routes.

# Tag & Category Route Search Suggestions
eg. /tags/c/general/5/updates
### Before
<img width="422" alt="Screenshot 2023-01-06 at 2 58 50 PM" src="https://user-images.githubusercontent.com/50783505/211098933-ade438c6-5008-49ce-9a90-c8200ec5fe00.png">

### After
<img width="359" alt="Screenshot 2023-01-06 at 3 00 35 PM" src="https://user-images.githubusercontent.com/50783505/211099183-c3feaeac-8661-47ed-843c-da9d9fb78e9e.png">

# Tag Intersection Route Search Suggestions
eg. /tags/intersection/updates/foo
### Before
<img width="421" alt="Screenshot 2023-01-06 at 3 02 23 PM" src="https://user-images.githubusercontent.com/50783505/211099435-e8fc6d87-2772-45b5-b455-1831f80eab3a.png">

### After
<img width="362" alt="Screenshot 2023-01-09 at 2 02 09 PM" src="https://user-images.githubusercontent.com/50783505/211397349-acb350f7-8e6a-4d9f-a749-8292e49400d9.png">

I defaulted to using `+` as a separator for tag intersections. The reasoning behind this is that we don't make the tag intersection routes easily accessible, so if you are going out of your way to view multiple tags, you are most likely going to be searching by **both** of those tags as well.

# General Search
Introducing flex wrap removes whitespace causing a [test](https://github.com/discourse/discourse/pull/19777/files#diff-5d3d13fabc1a511635eb7471ffe74f4d455d77f6984543c2be6ad136dfaa6d3aR813) to fail, but to remedy this I added spacing to the `.search-item-prefix` and `.search-item-slug` which achieves the same thing.

### After
<img width="359" alt="Screenshot 2023-01-09 at 2 04 54 PM" src="https://user-images.githubusercontent.com/50783505/211397900-60220394-5596-4e13-afd0-b6130afa0de2.png">
2023-01-11 13:02:22 -06:00
Loïc Guitaut
14d97f9cf1 FEATURE: Show more context in Discourse topic oneboxes
Currently when generating a onebox for Discourse topics, some important
context is missing such as categories and tags.

This patch addresses this issue by introducing a new onebox engine
dedicated to display this information when available. Indeed to get this
new information, categories and tags are exposed in the topic metadata
as opengraph tags.
2023-01-11 14:22:53 +01:00
Meghna
a9f2b62ac0
UX: fix the positioning of topic admin popup menu (#19713) 2023-01-04 17:45:24 +01:00
chapoi
179f13078e
UX: fix for misalignment in autocomplete (#19693) 2023-01-03 15:20:12 +01:00
Andrei Prigorshnev
c0b21bf9cf
FIX: styles of user status on mentions (#19563)
Reported in https://meta.discourse.org/t/users-mentions-wrongly-show-their-status-with-the-emoji/249534.

The problem was that we had styles for user status on mentions in the calendar plugin. So it looked fine on sites with Discourse Calendar but not on sites without it.
2022-12-22 14:15:52 +04:00
Penar Musaraj
e90c2cabfc
UX: Temporarily revert autocomplete highlight change (#19554)
This affects custom themes too much, reverting for now while we work
on a more robust solution.
2022-12-21 10:11:53 -05:00
chapoi
70eda1d84b
UX: update classname to something non-conflicting (#19529) 2022-12-20 12:14:58 +01:00
Kris
bd5f57e90c
FEATURE: add user toggle to mask/unmask passwords (#19306) 2022-12-19 18:56:51 -05:00
chapoi
8db1f1892d
UX: Hashtag autocomplete styling (#19426)
* UX: added fadeout + hashtag styling

UX: add full name to autocomplete

UX: autocomplete mentions styling

UX: emoji styling user status

UX: autocomplete emoji

* DEV: Move hashtag tag counts into new secondary_text prop

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

UX: make is-online avatar styling globally available

* DEV: Fix specs

* DEV: Test fix

Co-authored-by: Martin Brennan <martin@discourse.org>
2022-12-19 12:31:45 +01:00
Andrei Prigorshnev
ff5a0bec89
FEATURE: show user status on group pages (#19323)
This adds live user status to /g/{group-name} routes.
2022-12-14 13:18:09 +04:00
Jordan Vidrine
f29291a869
user input adjustments (#19446) 2022-12-13 10:13:48 -06:00
Jarek Radosz
0671a95cd6
FIX: GitHub onebox ellipsis styling regressed in 9d03f20 (#19441) 2022-12-13 12:01:48 +01:00
Kris
1719075352
UX: include space between elements in kbd tag (#19427) 2022-12-12 13:53:48 -05:00
Kris
9d03f207fa
UX: more consistent style for the new topic banner (#19405) 2022-12-12 12:56:25 -05:00
Kris
f7f0ca801b
UX: improve nav for user messages on small screens (#19362)
This prevents long inbox names from causing issues in the dropdown on /my/messages and tries a new mobile layout that makes better use of the available space:
2022-12-08 08:51:26 +08:00
Krzysztof Kotlarek
e313190fdb
FEATURE: better UI to manage 2fa (#19338)
In this PR, we introduced an option, that when all authenticators are disabled, but backup codes still exists, user can authenticate with those backup codes. This was reverted as this is not expected behavior.

https://github.com/discourse/discourse/pull/18982

Instead, when the last authenticator is deleted, backup codes should be deleted as well. Because this disables 2fa, user is asked to confirm that action by typing text.

In addition, UI for 2fa preferences was refreshed.
2022-12-08 09:41:22 +11:00
Kris
6d1de26279
UX: refactor & update small post styles (#19274) 2022-12-05 09:54:29 -05:00
Osama Sayegh
23bd993164
FEATURE: Separate notification indicators for new PMs and reviewables (#19201)
This PR adds separate notification indicators for PMs and reviewables that have arrived since the last time the user opened the notifications menu.

The PM indicator is the strongest one of all three indicators followed by the reviewable indicator and then finally the blue indicator. This means that if there's a new PM and a new reviewable, then the PM indicator will be shown.

Meta topic: https://meta.discourse.org/t/no-green-or-red-notification-bubbles/242783?u=osama.

Internal topic: t/82995.
2022-12-01 07:05:32 +08:00
Krzysztof Kotlarek
99fa10eee6
FIX: margin for sidebar and revamped user menu on iPad (#19254)
Additional top margin when footer is visible on iPad
2022-11-30 13:45:38 +11:00
Krzysztof Kotlarek
5b6604f5a7
FEATURE: sidebar for narrow desktop screen (#19160)
When desktop screen is narrow like < 1100px, sidebar should behave similarly to mobile version.
2022-11-25 15:33:26 +11:00
Kris
6b7bdc991d
UX: improve mention styling, simplify (#19169)
* UX: improve mention styling, simplify

* revert default
2022-11-24 09:35:57 +11:00
Jordan Vidrine
34e21525d0
UX: Style adjustments & addition of login button on admin invite page (#19073)
* user field label move
* more user field edits
* invite page adjustments
* caps lock adjustment


Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>
2022-11-23 12:06:19 +11:00
Kris
d6ddb337c8
UX: use solid envelope icon for consistency (#19157) 2022-11-23 08:46:35 +08:00
Kris
b0f380c4c7
UX: improve mention styling (#19156)
This updates mention styling. This reduces bold, increases contrast, and makes inactive mentions look more inactive.
2022-11-23 09:17:03 +10:00
Kris
e30df22716
A11Y: Improve the accessibility of sidebar content (#19131) 2022-11-22 05:32:43 +08:00
Alan Guo Xiang Tan
a64d2364ec
FIX: Correct implementation for user preferences tracking page (#19119)
The user preferences tracking page is only present when the redesign
user navigation menu is enabled. During the first pass of
implementation, some old bugs were introduced and this commit fixes
that. Regression tests have also been added.
2022-11-21 14:48:47 +08:00
Martin Brennan
d3f02a1270
FEATURE: Generic hashtag autocomplete lookup and markdown cooking (#18937)
This commit fleshes out and adds functionality for the new `#hashtag` search and
lookup system, still hidden behind the `enable_experimental_hashtag_autocomplete`
feature flag.

**Serverside**

We have two plugin API registration methods that are used to define data sources
(`register_hashtag_data_source`) and hashtag result type priorities depending on
the context (`register_hashtag_type_in_context`). Reading the comments in plugin.rb
should make it clear what these are doing. Reading the `HashtagAutocompleteService`
in full will likely help a lot as well.

Each data source is responsible for providing its own **lookup** and **search**
method that returns hashtag results based on the arguments provided. For example,
the category hashtag data source has to take into account parent categories and
how they relate, and each data source has to define their own icon to use for the
hashtag, and so on.

The `Site` serializer has two new attributes that source data from `HashtagAutocompleteService`.
There is `hashtag_icons` that is just a simple array of all the different icons that
can be used for allowlisting in our markdown pipeline, and there is `hashtag_context_configurations`
that is used to store the type priority orders for each registered context.

When sending emails, we cannot render the SVG icons for hashtags, so
we need to change the HTML hashtags to the normal `#hashtag` text.

**Markdown**

The `hashtag-autocomplete.js` file is where I have added the new `hashtag-autocomplete`
markdown rule, and like all of our rules this is used to cook the raw text on both the clientside
and on the serverside using MiniRacer. Only on the server side do we actually reach out to
the database with the `hashtagLookup` function, on the clientside we just render a plainer
version of the hashtag HTML. Only in the composer preview do we do further lookups based
on this.

This rule is the first one (that I can find) that uses the `currentUser` based on a passed
in `user_id` for guardian checks in markdown rendering code. This is the `last_editor_id`
for both the post and chat message. In some cases we need to cook without a user present,
so the `Discourse.system_user` is used in this case.

**Chat Channels**

This also contains the changes required for chat so that chat channels can be used
as a data source for hashtag searches and lookups. This data source will only be
used when `enable_experimental_hashtag_autocomplete` is `true`, so we don't have
to worry about channel results suddenly turning up.

------

**Known Rough Edges**

- Onebox excerpts will not render the icon svg/use tags, I plan to address that in a follow up PR
- Selecting a hashtag + pressing the Quote button will result in weird behaviour, I plan to address that in a follow up PR
- Mixed hashtag contexts for hashtags without a type suffix will not work correctly, e.g. #ux which is both a category and a channel slug will resolve to a category when used inside a post or within a [chat] transcript in that post. Users can get around this manually by adding the correct suffix, for example ::channel. We may get to this at some point in future
- Icons will not show for the hashtags in emails since SVG support is so terrible in email (this is not likely to be resolved, but still noting for posterity)
- Additional refinements and review fixes wil
2022-11-21 08:37:06 +10:00
Kris
a6c787345c
UX: reorganize user prefs for experimental user nav (#18764)
Trying out changes to reduce the number of nav items in the experimental horizontal user nav. These changes should only appear with the redesigned_user_page_nav_enabled feature flag.

1. Created a new "Tracking" route. This combines some tracking-related settings from Notifications and Category and Tag tracking (which were separate tabs previously). Don't love the layout yet, but it's something that we can work on.

2. Moved some user-related settings out of Notifications and to the
Users tab. These seem more user-related to me, and it's nice that we can
associate enabling messages with the setting to limit who can send
messages.

3. Moved the App tab (lists app permissions) to be within the Security tab. It's very similar to Recently Used Devices.
2022-11-18 09:09:04 +08:00
Kris
a18f6dcb7e
UX: user message controls need some padding (#19079) 2022-11-17 12:33:17 -05:00
Meghna
040136675b
UX: better email login pages (#19058)
* UX: better email login pages

* Update error message for email login error
2022-11-17 13:09:39 +05:30
Kris
7465fadca0
DEV: remove unused CSS (#19069) 2022-11-17 08:19:08 +08:00
Kris
19ec341bce
DEV: allow themes to more easily set border-radii (#19037) 2022-11-16 11:35:09 -05:00
Bianca Nenciu
9f3371f367
DEV: Remove old "first notification" tutorial (#19036)
It was replaced by the new "first notification" user tip.
2022-11-16 14:35:18 +02:00
Kris
e071ba5d84
UX: move horiz nav margin to padding (#19041) 2022-11-15 17:05:43 -05:00
Bianca Nenciu
ac272c041e
FEATURE: Add user tips for post and topic features (#18964)
* DEV: Add utility to hide all user tips

* DEV: Add UserTip Glimmer component

* DEV: Add tests for existing user tips

* FEATURE: Add user tip for post menu

* FEATURE: Add user tip for topic notification level

* FEATURE: Add user tip for suggested topics

* FEATURE: Hide new popups for existing users
2022-11-15 17:36:08 +02:00
Kris
4692f4ee7c
UX: more contrast for sidebar counts (#18980) 2022-11-10 18:43:37 -05:00
Bianca Nenciu
4dad7816b2
FEATURE: Rename onboarding popups to user tips (#18826)
This commit also hides the new user tips for existing users.
2022-11-09 20:20:34 +02:00
Kris
943c43ddc5
UX: less link-like unread/new color in sidebar (#18868) 2022-11-03 14:57:01 -04:00
Kris
4201ca61e2
FIX: fix circle indicator on "my posts", color (#18844) 2022-11-02 11:43:28 -04:00
David Taylor
d22fddf00a
UX: Ensure image size is maintained even after loading error (#18805) 2022-10-31 17:55:24 +00:00
Kris
9c2f0edbec
UX: make whole category box clickable (#18780) 2022-10-27 15:27:53 -04:00
David Taylor
a9f5af1065
UX: Allow linebreaks mid-word in github onebox file paths (#18777) 2022-10-27 18:16:18 +01:00
Kris
2556e5a715
FIX: a couple of topic elements are too wide (#18775) 2022-10-27 10:59:58 -04:00
Kris
d0f88da9c9
FEATURE: control topic width with variables (#18743) 2022-10-25 14:45:37 -04:00
Kris
b6f5b236b3
UX: drag new user menus, scroll primary user nav (#18690) 2022-10-25 07:22:02 +08:00
Jarek Radosz
ab330a98ad
UX: Fix user status display in autocomplete (#18726)
A follow-up to c421dc0b28
2022-10-24 21:34:41 +02:00
Jarek Radosz
c421dc0b28
UX: Improve autocomplete styling (#18723)
1. Restore the original text color (`--primary-high`)
2. Fix the double bottom border
3. Make the padding around icons even
2022-10-24 19:37:01 +02:00
Kris
c937b6dd36
FIX: set max-width on category logo img (#18703) 2022-10-21 12:01:26 -04:00
Kris
ab217d8ae0
FIX: set width on category logo img, not container (#18676) 2022-10-20 13:20:17 -04:00
Keegan George
3e6b22db69
A11Y: Sortable header elements should have pointer (#18672) 2022-10-20 09:28:03 -07:00
Kris
f1f2c1acd4
UX: extend horizontal user nav to all user pages (#18674) 2022-10-20 09:05:51 +08:00
Martin Brennan
7c25597da2
FEATURE: Generic hashtag autocomplete part 1 (#18592)
This commit adds a new `/hashtag/search` endpoint and both
relevant JS and ruby plugin APIs to handle plugins adding their
own data sources and priority orders for types of things to search
when `#` is pressed.

A `context` param is added to `setupHashtagAutocomplete` which
a corresponding chat PR https://github.com/discourse/discourse-chat/pull/1302
will now use.

The UI calls `registerHashtagSearchParam` for each context that will
require a `#` search (e.g. the topic composer), for each type of record that
the context needs to search for, as well as a priority order for that type. Core
uses this call to add the `category` and `tag` data sources to the topic composer.

The `register_hashtag_data_source` ruby plugin API call is for plugins to
add a new data source for the hashtag searching endpoint, e.g. discourse-chat
may add a `channel` data source.

This functionality is hidden behind the `enable_experimental_hashtag_autocomplete`
flag, except for the change to `setupHashtagAutocomplete` since only core and
discourse-chat are using that function. Note this PR does **not** include required
changes for hashtag lookup or new styling.
2022-10-19 14:03:57 +10:00
Kris
99d9c933c6
FIX: ensure dropdown is above sibling labels (#18658) 2022-10-18 18:18:23 -04:00
Pixlz
3a204f72d3
UX: Prevent reply to name from being longer than 400px (#18623) 2022-10-17 14:09:49 -04:00