discourse/app/assets/stylesheets/common/admin/flags.scss

.admin-flag-item {
  &__name {
    font-weight: bold;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  &__description {
    margin-top: 0.5em;
  }
  .d-toggle-switch__label {
    margin-bottom: 0;
  }
  .d-toggle-switch {
    margin-right: 2em;
  }

  &__delete.btn,
  &__delete.btn:hover {
    border-top: 1px solid var(--primary-low);
    color: var(--danger);
    svg {
      color: var(--danger);
    }
  }
}

.admin-flags__header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .btn-primary {
    align-self: center;
  }

  h3 {
    margin-top: 1em;
    font-size: var(--font-0);
    font-weight: normal;
    flex-basis: 100%;
  }
}
FEATURE: admin can disable flags (#27171) UI for admins to disable system flags. 2024-05-29 14:39:58 +10:00			`.admin-flag-item {`
			`&__name {`
			`font-weight: bold;`
			`padding-bottom: 0;`
			`margin-bottom: 0;`
			`}`
			`&__description {`
			`margin-top: 0.5em;`
			`}`
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			`.d-toggle-switch__label {`
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			`margin-bottom: 0;`
			`}`
FEATURE: created edit and delete flags (#27484) Allow admins to create edit and delete flags. 2024-07-03 08:45:37 +10:00			`.d-toggle-switch {`
			`margin-right: 2em;`
			`}`

			`&__delete.btn,`
			`&__delete.btn:hover {`
			`border-top: 1px solid var(--primary-low);`
			`color: var(--danger);`
			`svg {`
			`color: var(--danger);`
			`}`
			`}`
			`}`

			`.admin-flags__header {`
			`display: flex;`
			`justify-content: space-between;`
			`flex-wrap: wrap;`

			`.btn-primary {`
			`align-self: center;`
			`}`

			`h3 {`
			`margin-top: 1em;`
			`font-size: var(--font-0);`
			`font-weight: normal;`
			`flex-basis: 100%;`
			`}`
FEATURE: admin can disable flags (#27171) UI for admins to disable system flags. 2024-05-29 14:39:58 +10:00			`}`