github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-29 21:25:57 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
ef895f1c32
discourse/app/assets/stylesheets/common/admin/schema_field.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

67 lines
1.1 KiB
SCSS
Raw Normal View History

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
.schema-field {
margin-bottom: 1em;
DEV: Add validation message to string fields in theme object editor (#26257) Why this change? In our schema, we support the `min_length` and `max_length` validation rules like so: ``` some_objects_setting type: objects schema: name: some_object properties: title: type: string validations: min_length: 1 max_length: 10 ``` While the validations used to validate the objects on the server side, we should also add client side validation for better UX.
2024-03-21 12:39:25 +08:00
width: 50%;
min-width: 200px;
UX: Improve layout of theme objects setting editor (#26309)
2024-03-22 11:36:34 +08:00
display: grid;
grid-template-columns: 25% 1fr;
gap: 1em;
.schema-field__label {
word-break: break-all;
}
.schema-field__input:has(input[type="checkbox"]) {
flex-direction: row;
}
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
.schema-field__input {
UX: Improve layout of theme objects setting editor (#26309)
2024-03-22 11:36:34 +08:00
display: flex;
flex-direction: column;
align-items: flex-start;
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
input {
DEV: Add validation message to string fields in theme object editor (#26257) Why this change? In our schema, we support the `min_length` and `max_length` validation rules like so: ``` some_objects_setting type: objects schema: name: some_object properties: title: type: string validations: min_length: 1 max_length: 10 ``` While the validations used to validate the objects on the server side, we should also add client side validation for better UX.
2024-03-21 12:39:25 +08:00
width: 100%;
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
margin-bottom: 0;
UX: Improve layout of theme objects setting editor (#26309)
2024-03-22 11:36:34 +08:00
}
input[type="checkbox"] {
width: auto;
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
}
DEV: Add validation message to string fields in theme object editor (#26257) Why this change? In our schema, we support the `min_length` and `max_length` validation rules like so: ``` some_objects_setting type: objects schema: name: some_object properties: title: type: string validations: min_length: 1 max_length: 10 ``` While the validations used to validate the objects on the server side, we should also add client side validation for better UX.
2024-03-21 12:39:25 +08:00
.select-kit {
width: 100%;
DEV: Change `tag` type to `tags` type for theme object schema (#26315) Why this change? While working on the tag selector for the theme object editor, I realised that there is an extremely high possibility that users might want to select more than one tag. By supporting the ability to select more than one tag, it also means that we get support for a single tag for free as well. What does this change do? 1. Change `type: tag` to `type: tags` and support `min` and `max` validations for `type: tags`. 2. Fix the `<SchemaThemeSetting::Types::Tags>` component to support the `min` and `max` validations
2024-03-22 15:32:00 +08:00
&.--invalid {
summary {
border-color: var(--danger);
}
}
DEV: Add validation message to string fields in theme object editor (#26257) Why this change? In our schema, we support the `min_length` and `max_length` validation rules like so: ``` some_objects_setting type: objects schema: name: some_object properties: title: type: string validations: min_length: 1 max_length: 10 ``` While the validations used to validate the objects on the server side, we should also add client side validation for better UX.
2024-03-21 12:39:25 +08:00
}
.schema-field__input-description {
font-size: var(--font-down-1);
color: var(--primary-medium);
}
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
}
UX: Improve layout of theme objects setting editor (#26309)
2024-03-22 11:36:34 +08:00
DEV: Add validation message to string fields in theme object editor (#26257) Why this change? In our schema, we support the `min_length` and `max_length` validation rules like so: ``` some_objects_setting type: objects schema: name: some_object properties: title: type: string validations: min_length: 1 max_length: 10 ``` While the validations used to validate the objects on the server side, we should also add client side validation for better UX.
2024-03-21 12:39:25 +08:00
.schema-field__input-supporting-text {
display: flex;
flex-direction: row;
margin-top: 0.2em;
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
DEV: Add validation message to string fields in theme object editor (#26257) Why this change? In our schema, we support the `min_length` and `max_length` validation rules like so: ``` some_objects_setting type: objects schema: name: some_object properties: title: type: string validations: min_length: 1 max_length: 10 ``` While the validations used to validate the objects on the server side, we should also add client side validation for better UX.
2024-03-21 12:39:25 +08:00
.schema-field__input-count {
margin-left: auto;
font-size: var(--font-down-1);
&.--error {
color: var(--danger);
}
}
.schema-field__input-error {
font-size: var(--font-down-1);
color: var(--danger);
}
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
}
}
Reference in New Issue Copy Permalink