Commit Graph

1361 Commits

Author SHA1 Message Date
chapoi
8ac1f6ad9a
UX: Visual adjustments to login/signup forms (#28680)
This adds several improvements to the signup/login forms. Some of them include:

- Added a minimal signup progress bar design for mobile.
- Made the signup/login modals full height on mobile.
- Improved the activation, account creation, and login-required pages on mobile.
- Removed the subheader and emoji from the welcome component.
- Removed most input instructions.
- Used consistent font size for text below the inputs.
- Displayed input instructions only when the field is focused.
- Improved the vertical alignment of input labels.
- Increased the spacing between inputs.
- Fixed label positioning for custom fields.
- Moved the "(optional)" text for the name input outside the instructions.
- Disabled buttons during login to prevent layout shifts.
- Reused the CTA component for modals as well.
- Matched the invite CTA styles with the signup form.

---------

Co-authored-by: Jan Cernik <jancernik12@gmail.com>
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-10-25 09:34:59 -03:00
Penar Musaraj
9b1c6f8384
FIX: remove redundant body scroll lock (#29395)
PR #26784 adds the scroll lock in the modal which renders this second scroll lock for SK component redundant. Having it there in fact causes issues on iPads, where it isn't necessary.
2024-10-24 13:41:08 -04:00
Bianca Nenciu
d37a0d401c
FEATURE: Introduce an optimized style for category page (#29239)
The new style is called `categories_only_optimized` and it is designed
to show only the parent categories, without any subcategories. This
works best for communities with many categories (over a thousand).
2024-10-24 13:46:42 +03:00
chapoi
f9d86686ae
UX: DMenu modal add grip and min-height (#29309)
* UX: add min-height to DMenu modal

* UX: add grip handle
2024-10-22 11:22:20 +11:00
Osama Sayegh
a5497b74be
UX: Simplify invite modal (#28974)
This commit simplifies the initial state of the invite modal when it's opened to make it one click away from creating an invite link. The existing options/fields within the invite modal are still available, but are now hidden behind an advanced mode which can be enabled.

On the technical front, this PR also switches the invite modal to use our FormKit library.

Internal topic: t/134023.
2024-10-21 13:11:43 +03:00
Jan Cernik
7e1cca87a9
UX: Add option to use fullpages for login and signup (#29034)
This adds dedicated routes for /login and /signup, replacing the use of modals. Currently, this is behind the experimental_full_page_login feature flag. It also includes some small consistency fixes related to formatting, spacing, icons, and the loading of certain elements
2024-10-15 11:10:54 -03:00
Ella E.
19fb8b8d57
FIX: Adjustments to the admin sidebar following recent core sidebar styling changes (#29138) 2024-10-08 22:11:07 -06:00
Régis Hanol
34d04e7507
SECURITY: add pagination to post replies
When a post has some replies, and the user click on the button to show them, we would load ALL the replies. This could lead to DoS if there were a very large number of replies.

This adds support for pagination to these post replies.

Internal ref t/129773

FIX: Duplicated parent posts

DEV: Query refactor
2024-10-07 11:48:48 +08:00
Jarek Radosz
c6c4e09ba3
FIX: .badge-posts alignment on mobile glimmer topic list (#28959)
Regressed in 3eada7b572
2024-09-18 13:02:52 +02:00
chapoi
bca82e9dec
UX: fix double li-element in mobile list control (#28840) 2024-09-12 02:22:32 +02:00
chapoi
0332be0b34
UX: prevent a focus-visible outline on mobile (#28815) 2024-09-10 07:19:22 +02:00
Ella E.
a7db66e8ab
FIX: Prevent layout shift caused by locale description length (#28807)
* FIX: Prevent layout shift caused by locale description length

* Fix linting error

* Apply prettier
2024-09-09 15:33:43 -06:00
Jan Cernik
b092ccbdc5
UX: Add progress bar to the registration flow (#27694) 2024-08-28 08:43:39 -03:00
Joffrey JAFFEUX
b4a8873596
DEV: changes identifier from card to usercard (#28575) 2024-08-27 14:08:49 +02:00
chapoi
208007d9a0
UX: centralise DMenu mobile styling + fixes (#28469) 2024-08-23 17:56:35 +02:00
chapoi
931485b7c1
DEV: replace list control nav dropdown with DMenuMobile (#28324)
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Co-authored-by: Renato Atilio <renato@discourse.org>
Co-authored-by: David Taylor <david@taylorhq.com>
2024-08-16 01:40:47 +02:00
Kris
66a23180d4
UX: fix issue with long usernames wrapping in mobile user cards (#28256) 2024-08-06 17:47:59 -04:00
Kris
76b28ed836
UX: fix user profile button wrap, clean up styles (#28255) 2024-08-06 17:47:51 -04:00
Krzysztof Kotlarek
300ef67481
UX: move admin flag form to form-kit (#28187)
Rewrite the admin flag form to use FormKit. This is a draft because waiting for Checkbox improvements.
2024-08-05 11:01:25 +10:00
Krzysztof Kotlarek
2a9dcade0a
UX: group admin new features by month (#28106)
Display new features grouped by month and show additional information about the version.
2024-07-29 14:20:12 +10:00
chapoi
3e6b5a16a6
UX: restyle main nav on mobile (#28094) 2024-07-26 19:54:09 +02:00
Joffrey JAFFEUX
7a7cc815be
DEV: removes legacy modal code (#28047) 2024-07-24 18:07:17 +02:00
Jan Cernik
a027ec4663
UX: Merge the simplified topic map (#27964)
Replaces the existing topic map with the experimental-topic-map made by @awesomerobot.

---------

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2024-07-22 19:42:29 -03:00
chapoi
2ca06ba236
DEV: form-kit
This PR introduces FormKit, a component-based form library designed to simplify form creation and management. This library provides a single `Form` component, various field components, controls, validation mechanisms, and customization options. Additionally, it includes helpers to facilitate testing and writing specifications for forms.

1. **Form Component**:
   - The main component that encapsulates form logic and structure.
   - Yields various utilities like `Field`, `Submit`, `Alert`, etc.

   **Example Usage**:
   ```gjs
   import Form from "discourse/form";

   <template>
     <Form as |form|>
       <form.Field
         @name="username"
         @title="Username"
         @validation="required"
         as |field|
       >
         <field.Input />
       </form.Field>

       <form.Field @name="age" @title="Age" as |field|>
         <field.Input @type="number" />
       </form.Field>

       <form.Submit />
     </Form>
   </template>
   ```

2. **Validation**:
   - Built-in validation rules such as `required`, `number`, `length`, and `url`.
   - Custom validation callbacks for more complex validation logic.

   **Example Usage**:
   ```javascript
   validateUsername(name, value, data, { addError }) {
     if (data.bar / 2 === value) {
       addError(name, "That's not how maths work.");
     }
   }
   ```

   ```hbs
   <form.Field @name="username" @validate={{this.validateUsername}} />
   ```

3. **Customization**:
   - Plugin outlets for extending form functionality.
   - Styling capabilities through propagated attributes.
   - Custom controls with properties provided by `form` and `field`.

   **Example Usage**:
   ```hbs
   <Form class="my-form" as |form|>
     <form.Field class="my-field" as |field|>
       <MyCustomControl id={{field.id}} @onChange={{field.set}} />
     </form.Field>
   </Form>
   ```

4. **Helpers for Testing**:
   - Test assertions for form and field validation.

   **Example usage**:
   ```javascript
   assert.form().hasErrors("the form shows errors");
   assert.form().field("foo").hasValue("bar", "user has set the value");
   ```

   - Helper for interacting with he form

   **Example usage**:
   ```javascript
   await formKit().field("foo").fillIn("bar");
   ```

5. **Page Object for System Specs**:
   - Page objects for interacting with forms in system specs.
   - Methods for submitting forms, checking alerts, and interacting with fields.

   **Example Usage**:
   ```ruby
   form = PageObjects::Components::FormKit.new(".my-form")
   form.submit
   expect(form).to have_an_alert("message")
   ```

   **Field Interactions**:
   ```ruby
   field = form.field("foo")
   expect(field).to have_value("bar")
   field.fill_in("bar")
   ```


6. **Collections handling**:
   - A specific component to handle array of objects

   **Example Usage**:
   ```gjs
    <Form @data={{hash foo=(array (hash bar=1) (hash bar=2))}} as |form|>
      <form.Collection @name="foo" as |collection|>
        <collection.Field @name="bar" @title="Bar" as |field|>
          <field.Input />
        </collection.Field>
      </form.Collection>
    </Form>
   ```
2024-07-17 11:59:35 +02:00
Kris
d4ade75583
A11Y: remove heading tags from usercards (#27926) 2024-07-16 12:32:53 -04:00
chapoi
2db35149fd
UX: Chat mobile menu styling update (#27598) 2024-07-04 18:02:30 +02:00
Krzysztof Kotlarek
c3fadc7330
FEATURE: created edit and delete flags (#27484)
Allow admins to create edit and delete flags.
2024-07-03 08:45:37 +10:00
Kris
e5c0cfcd27
UX: remove default use of quaternary color, update nav pill styles (#27502) 2024-06-24 09:54:34 -04:00
chapoi
099bffe37a
UX: Increase spacing mobile menus (#27554)
* UX: increase sidebar row height on mobile

* UX: increase quick access panel row height
2024-06-21 17:05:19 +02:00
Jan Cernik
604ca4d46e
UX: Hide the error tooltip when focusing the topic title (#27531) 2024-06-19 11:55:29 -03:00
Kelv
7e31a8104d
DEV: remove bootbox dependency (#27443) 2024-06-12 15:56:17 +08:00
Krzysztof Kotlarek
aa88b07640
FEATURE: the ability to change the order of flags (#27269)
Continued work on moderate flags UI.
In this PR admins are allowed to change the order of flags. The notify user flag is always on top but all other flags can be moved.
2024-06-05 13:27:06 +10:00
Kris
14f81490ec
UX: fix mobile read state alignment (#27323) 2024-06-04 09:40:41 -04:00
Kris
13a2ca8b09
UX: update px spacing to em for proportionality (#27108) 2024-05-21 13:13:38 -04:00
Joffrey JAFFEUX
f752851030
FIX: mobile modal tweaks (#27073)
- removes `will-change: auto;` which is a performance hack which should be avoided and is probably causing more harm than good here
- lowers swipe velocity to 0.4 to ensure the modal can be dismissed with the thumb
- uses JS CSS animate API to animate the backdrop opacity
- uses the height of the modal container to have more precise values when computing backdrop opacity
- animate the modal container instead of the wrapper
- removes a useless template-lint-disable directive
- simplify the closing animation
- various small code tweaks to limit indirection
2024-05-19 15:43:03 +02:00
Jan Cernik
7bc7ad45bb
UX: Merge the redesign experiment for embedded replies (#26876)
This PR merges the [design experiment](https://meta.discourse.org/t/embedded-replies-feedback/290538) based on the [Custom embedded replies component](https://meta.discourse.org/t/custom-embedded-replies/272670) created by [Don](https://meta.discourse.org/u/don/summary)

---------

Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
2024-05-08 18:00:17 +02:00
Joffrey JAFFEUX
cf8b81771f
DEV: implements <DropdownMenu /> (#26917)
DropdownMenu component is meant as a way to describe the content of menus.

Syntax:

```
<DropdownMenu as |dm|>
  <dm.item class="test">
    First
  </dm.item>
  <dm.divider class="foo" />
  <dm.item class="bar">
    Second
  </dm.item>
</DropdownMenu>
```
2024-05-08 09:08:42 +02:00
Jan Cernik
8dd883d4e5
DEV: Refactor topic admin menu to use <DMenu> (#26678)
* DEV: Refactor topic admin menu to use `<DMenu>`

This PR also introduces a new plugin API to add buttons to the topic admin menu

```javascript
api.addTopicAdminMenuButton((topic) => {
  return {
    action: () => {
      alert('Sunrise!');
    },
    icon: 'sun',
    className: 'sunrise-button',
    label: 'actions.rise',
  };
});
```

The plugins that needed to be updated are:

- [discourse-zoom](https://github.com/discourse/discourse-zoom/pull/73)
- [discourse-salesforce](https://github.com/discourse/discourse-salesforce/pull/74)
- [discourse-topic-noindex](https://github.com/discourse/discourse-topic-noindex/pull/11)
2024-04-29 12:44:38 -03:00
Kris
b971efed8c
UX: dynamic spacing for summarization buttons (#26690) 2024-04-22 09:49:00 -04:00
Joffrey JAFFEUX
17c92b4b2a
UX: shows the bookmark menu improvements
This commit adds a new option `@modalForMobile` for `<DMenu />` which allows to display a `<DModal />` when expanding a menu on mobile.

This commit also adds a `@views` options to toasts which is an array accepting `['mobile',  'desktop']` and will control if the toast is show on desktop and/or mobile.

Finally this commit allows to hide the progressBar even if the toast is set to `@autoClose=true`. This is controlled through the `@showProgressBar` option.
2024-04-08 08:18:50 +02:00
Kris
b35da59865
UX: adjustments for experimental bulk select menu (#26474) 2024-04-02 18:01:21 -04:00
Joffrey JAFFEUX
f7b73f3d70
UX: improves modal on mobile (#26055)
This commit mainly improves three things:
- slide up/down animation of the modals on mobile, also allowing swipe down to close the modal
- body scroll locked modals, it means that only the body of the modal can scroll
- a new `<:headerPrimaryAction>` block for `d-modal` which when present will move the cancel button to the left of the modal title, and this primary action to the right of the title
2024-03-22 16:29:32 +01:00
David Taylor
8b935e5b33
Revert "UX: Make input sizing consistent across all browsers (#26159)" (#26295)
This reverts commit d0d4a363d4. This causes issues for people that have specified explicit font sizes in their browser - reverting while we investigate. https://meta.discourse.org/t/300374
2024-03-21 17:54:11 +00:00
David Taylor
d0d4a363d4
UX: Make input sizing consistent across all browsers (#26159)
Previously we had an iOS-specific sizing rule which would increase inputs to `1.07em`, which would bring them over the 16px 'zoom on focus' threshold in some (but technically, not all) situations.

This commit does two things:

1. Updates the sizing rule from `1.07em` to `max(1em, 16px)`. Essentially: use the cascaded font size, unless it is smaller than 16px

2. Applies that sizing rule on all platforms. This will make Discourse design/theming more consistent across different devices

It also removes some associated CSS rules which no longer make sense.
2024-03-20 16:23:44 +00:00
David Battersby
d5b944f1de
FEATURE: add chat direct message button to user profile (#26135)
This change adds the chat direct message button to user profiles, similarly to how we use it within the user card.
2024-03-18 11:17:37 +08:00
Kris
f65a5c5f02
UX: clean up invite buttons (#26068) 2024-03-07 10:50:11 -05:00
Kris
5c1147adf3
UX: Move top dismiss button from topics to d-navigation (#26032) 2024-03-05 15:43:07 -05:00
Kris
e408f4ff95
DEV: remove various unused CSS (#25994) 2024-03-01 16:51:26 -05:00
Kris
653b2e4678
DEV: remove unneeded buttons mobile CSS (#25992) 2024-03-01 16:42:02 -05:00
Kris
9421997866
DEV: remove old bootstrap alert CSS (#25991) 2024-03-01 16:03:34 -05:00