Commit Graph

346 Commits

Author SHA1 Message Date
Martin Brennan
a16faa27cd
FEATURE: Allow showing site text search in selected locale (#28453)
When searching for site texts for admin using the english
version of the text, previously we would show the english
version in the results _even if_ there was another locale
translated version available when a locale was selected
from the dropdown.

This commit adds a "Only show results in selected locale"
checkbox option which will instead make it so the results
shown are in the target locale, making it easier for translators
to tell when there is actually translations vs. missing tranlsations.
2024-08-26 11:25:36 +10:00
Martin Brennan
1446596089
UX: Apply admin interface guidelines to Backups page (#28051)
This commit converts the Backups page in the admin interface
to follow our new admin interface guidelines.

As part of this work, I've also made `AdminPageHeader` and `AdminPageSubheader`
components that can be reused on any admin page for consistency, that handle
the title and action buttons and also breadcrumbs.

Also renamed `AdminPluginFilteredSiteSettings` to `AdminFilteredSiteSettings` since
it can be used generally to show a subset of filtered site settings, not only
settings for a plugin. Not sure if it's ideal to have to define a new route for this
for every config area, but not sure how else to do it right now.
2024-08-20 09:59:43 +10:00
Keegan George
18ac600352
DEV: Add stacked line chart mode (#28203) 2024-08-02 09:40:27 -07:00
Ella E.
803877748d
UX: Fix page content overflow when the setting category list is expanded on mobile (#27983) 2024-07-18 17:52:15 -06: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
Martin Brennan
5f4dc1042e
FIX: Bold admin sidebar headings (#27912)
We lost these by mistake in fed9055818,
this reinstates them.
2024-07-15 16:31:16 +10:00
Kris
e5c0cfcd27
UX: remove default use of quaternary color, update nav pill styles (#27502) 2024-06-24 09:54:34 -04:00
Osama Sayegh
fed9055818
DEV: Remove admin-revamp and introduce foundations for admin config (#27293)
This commit removes the `/admin-revamp` routes which were introduced as a part of an experiment to revamp the admin pages. We still want to improve the admin/staff experience, but we're going to do them within the existing `/admin` routes instead of introducing a completely new route.

Our initial efforts to improve the Discourse admin experience is this commit which introduces the foundation for a new subroute `/admin/config` which will house various new pages for configuring Discourse. The first new page (or "config area") will be `/admin/config/about` that will house all the settings and controls for configuring the `/about` page of Discourse.

Internal topic: t/128544
2024-06-03 10:18:14 +03:00
Krzysztof Kotlarek
963b9fd157
FEATURE: admin can disable flags (#27171)
UI for admins to disable system flags.
2024-05-29 14:39:58 +10:00
Martin Brennan
2ed8f96e67
UX: Implement new top-level nav on admin plugin pages (#27126)
This uses a new nav style with the heirarchy:

```
Breadcrumbs
  |- Title
    |- Description
      |- Third-Level Navigation
```

The navigation bar uses the transparent red-underlined
buttons similar to the user activity page.

Over time all admin pages will use this, but this starts
with the new plugin show page.

---------

Co-authored-by: Ella <ella.estigoy@gmail.com>
2024-05-29 12:20:55 +10:00
Alan Guo Xiang Tan
426c035b80
UX: First pass styling experimental objects typed setting editor (#26194)
Why this change?

This is a first pass at styling the editor for creating/editing/updating
an objects typed theme setting. Only the desktop view is being
considered at the current moment.

The objects typed theme setting is still behind a feature flag at this moment so there is no need for us to get the styling perfect. The purpose of this PR is to get us to a state which we can quickly iterate with a designer on.
2024-03-18 10:03:30 +08:00
Alan Guo Xiang Tan
cdba864598
DEV: Support description for properties in objects schema (#26172)
Why this change?

When editing a objects typed theme setting, the input fields which are
rendered should include a description so that the user knows the purpose
of the field which they are changing.

What does this change do?

This change adds support for adding description to each property in the
schema for an object by following a given convention in the locale file.

For a schema like this:

```
objects_setting:
  type: objects
  schema:
    name: section
    properties:
      name:
        type: string
        required: true
      links:
        type: objects
        schema:
          name: link
          properties:
            name:
              type: string
              required: true
              validations:
                max_length: 20
            url:
              type: string
```

Description for each property in the object can be added like so:

```
en:
  theme_metadata:
    settings:
      objects_setting:
        description: <description> for the setting
        schema:
          properties:
            name: <description for the name property>
            links:
              name: <description for the name property in link>
              url: <description for the url property in link>
```

If the a description is not present, the input field will simply not
have an description.

Also note that a description for a theme setting can now be added like
so:

```
en:
  theme_metadata:
    settings:
      some_other_setting: <This will be used as the description>
      objects_setting:
        description: <This will also be used as the description>
```
2024-03-15 07:47:42 +08:00
Martin Brennan
86183fea37
FIX: Admin nav active link in dark mode (#25759)
Followup e4b6142d6a,
the link was still black in dark mode.
2024-02-20 11:25:35 +10:00
Ella E
e4b6142d6a
UX: Tweaks on the admin sidebar (#25717) 2024-02-16 14:28:25 -07:00
Roman Rizzi
3c29a84d98
DEV: Add support for radar charts when displaying reports. (#24274)
Reports can have the radar type, which will get rendered by the `admin-report-radar` component.
2023-11-08 10:48:12 -03:00
Martin Brennan
9ef3a18ce4
DEV: Add new experimental admin UI route and sidebar (#23952)
This commit adds a new admin UI under the route `/admin-revamp`, which is
only accessible if the user is in a group defined by the new `enable_experimental_admin_ui_groups` site setting. It
also adds a special `admin` sidebar panel that is shown instead of the `main`
forum one when the admin is in this area.

![image](https://github.com/discourse/discourse/assets/920448/fa0f25e1-e178-4d94-aa5f-472fd3efd787)

We also add an "Admin Revamp" sidebar link to the community section, which
will only appear if the user is in the setting group:

![image](https://github.com/discourse/discourse/assets/920448/ec05ca8b-5a54-442b-ba89-6af35695c104)

Within this there are subroutes defined like `/admin-revamp/config/:area`,
these areas could contain any UI imaginable, this is just laying down an
initial idea of the structure and how the sidebar will work. Sidebar links are
currently hardcoded.

Some other changes:

* Changed the `main` and `chat` panels sidebar panel keys to use exported const values for reuse
* Allowed custom sidebar sections to hide their headers with the `hideSectionHeader` option
* Add a `groupSettingArray` setting on `this.siteSettings` in JS, which accepts a group site setting name
  and splits it by `|` then converts the items in the array to integers, similar to the `_map` magic for ruby
  group site settings
* Adds a `hidden` option for sidebar panels which prevents them from showing in separated mode and prevents
  the switch button from being shown

---------

Co-authored-by: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
2023-10-19 14:23:41 +10:00
Kris
22747e26fd
DEV: common CSS property for content backgrounds (#23467) 2023-09-08 12:07:04 -04:00
Ted Johansson
341acacba8
DEV: Add endpoint for dismissing outdated translations (#22509)
Recently we started giving admins a notice in the advice panel when their translations have become outdated due to changes in core. However, we didn't include any additional information.

This PR adds more information about the outdated translation inside the site text edit page, together with an option to dismiss the warning.
2023-07-19 23:06:13 +08:00
Ted Johansson
6fc62586a2
FEATURE: Show available interpolation keys when overriding translations (#22220)
This is the first of a number of PRs aimed at helping admins manage their translation overrides. It simply adds a list of available interpolation keys below the input field when editing an override.

It also includes custom interpolation key.
2023-06-28 19:03:04 +08:00
Andrei Prigorshnev
3ea31f443c
FEATURE: Export chat messages to CSV file (#22113)
To export chat messages, go to `/admin/plugins/chat` and click the Create export 
button in the _Export chat messages_ section. You'll receive a direct message 
when the export is finished.

Currently, this exports all messages from the last 6 months, but not more than 
10000 messages.

This exports all chat messages, including messages from private channels and 
users' direct conversations. This also exports messages that were deleted.
2023-06-21 16:13:36 +04:00
Kris
e0f848c2ea
REFACTOR: move shadow vars to css custom props (#22094) 2023-06-13 16:38:31 -04: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
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
Kris
e206bd8907
REFACTOR: user directories without <table> (#20316) 2023-03-02 09:20:38 -05: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
Kris
d67ed8468f
UX: move vertical admin plugin nav to horizontal overflow nav (#20319) 2023-02-17 10:21:30 -05:00
Bianca Nenciu
1ad06eb764
UX: Redesign and refactor penalty modals (#19458)
This merges the two modals code to remove duplication and implements
a more consistent design.
2022-12-19 19:36:03 +02:00
Bianca Nenciu
187b0bfb43
FEATURE: Show similar users when penalizing a user (#19334)
* FEATURE: Show similar users when penalizing a user

Moderators will be notified if other users with the same IP address
exist before penalizing a user.

* FEATURE: Allow staff to penalize multiple users

This allows staff members to suspend or silence multiple users belonging
to the same person.
2022-12-08 14:42:33 +02:00
Jarek Radosz
67e422c2d4
DEV: Remove noop CSS (#18564)
The lint warnings were:

```
inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'

scss(propertyIgnoredDueToDisplay)
```
2022-10-12 16:35:51 +02:00
Jarek Radosz
4170b9bb58
DEV: Use more css vars (#18561)
Followup to #18518

This time it's mostly line-height vars and a couple of other uncommon vars.
2022-10-12 16:05:42 +02:00
Jarek Radosz
ea326906e3
DEV: Use css var font sizes (#18518)
For consistency and and the ability to change all font sizes at once in the dev tools
2022-10-12 15:31:59 +02:00
Kris
f44eb13236
FIX: add clearfix back for admin contents (#17278) 2022-06-29 10:17:01 -04:00
Penar Musaraj
749e496a2c
DEV: Minor fixes to json schema editor styling (#16634) 2022-05-05 09:52:58 +08:00
Keegan George
1485dab12e
FEATURE: Ability to re-order value lists (#15775)
Adds up and down buttons next to the inputs of value lists when there is more than 1 item present. This helps to re-order the items in the value lists if necessary.
2022-02-03 22:47:02 +01:00
Jarek Radosz
7806857841
UX: Highlight "Users" link when on adminUser path (#15739) 2022-02-01 21:32:48 +01:00
Penar Musaraj
4ee5d52ac9
DEV: Remove jQuery autoellipsis dependency (#15336) 2021-12-17 11:45:12 -05:00
David Taylor
389a3ce389
DEV: Add basic theme support to the mini_profiler badge (#14952) 2021-11-15 18:39:11 +00:00
Penar Musaraj
a736ff5f69
DEV: Clean up some styles (#14374) 2021-09-20 09:52:03 -04:00
Penar Musaraj
954f8f8e7e
UX: Fix alignment for admin controls on mobile (#14312) 2021-09-13 13:43:43 -04:00
Penar Musaraj
24e71acf3f
UX: Normalize sizing for inputs, buttons, dropdowns (#14226)
See PR for details
2021-09-09 11:01:56 -04:00
Jordan Vidrine
385535f421
UX: Hide email columns when Hide Emails is selected (#13502)
* UX: Scroll user list container when emails are present
2021-06-23 12:42:16 -05:00
Kris
2fb1eaa868
UX: more consistent mobile spacing (#13297) 2021-06-07 13:22:28 -04:00
Ahmed Gagan
2308a58113
DEV: Added support for custom site setting 'emoji_list' (#12414)
Example usage:

```
best_emojis:
    type: emoji_list
    default: laughing|open_mouth|cry|angry|hugs
    client: true
```
2021-04-07 15:32:05 +02:00
Roman Rizzi
ea8b5c18db
UX: Text customization for different languages. (#11729)
Admins can now edit translations in different languages without having to change their locale. We display a warning when there's a fallback language set.
2021-01-18 14:53:45 -03:00
Penar Musaraj
5f846531a5
DEV: Cleanup variables/mixins SCSS imports (#11618)
Prepends variables.scss and mixins.scss globally for all assets. With
one notable exception, theme fields, which will be addressed in a
separate PR.
2021-01-05 14:05:34 -05:00
Joe
eecff3d15b
DEV: Ensures mobile RTL stylesheets are loaded (#11360)
This PR only makes CSS changes that have no visual impact, but they fix an issue in the compiler that causes some stylesheets not to load on mobile RTL.

Full context here

https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/6?u=johani
2020-11-26 21:03:25 +08:00
Penar Musaraj
6f5d8cad51
UX: Move category editing/creation to its own page (#10973)
* Move new/edit category modals to its own page

* Fix JS tests

* Minor fixes to new-category UI

* Add mobile toggle

* Use global pretender endpoint so plugins can benefit too

* Alignment fix

* Minor review fixes

* Styling refactor

* Move some SCSS out of the modal
2020-10-23 12:49:02 -04:00
Penar Musaraj
dbdb5b9a47
DEV: Use border-box sizing for admin controls
Fixes floating issues in admin site settings on screen widths between
768 and 880 pixels. This also cleans up spacing on mobile.
2020-09-17 11:49:41 -04:00
Penar Musaraj
c937afc75e
FEATURE: automatic dark mode (#10341)
A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. 

This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
2020-08-03 22:57:10 -04:00