github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-27 18:57:40 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
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.

79 lines
1.4 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;
UX: add collabsible headings to theme objects editor, adjust styles (#26383) This adds collapsible headings to child lists, and adjusts the layout to utilize the available space.
2024-03-27 01:59:01 -04:00
width: 100%;
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;
UX: minor theme schema editor adjustments for mobile (#26434)
2024-03-29 15:01:02 -04:00
@include breakpoint(mobile-extra-large) {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
gap: 0;
&[data-type="boolean"] {
grid-template-columns: auto 1fr;
.schema-field__input {
order: -1;
}
}
}
UX: Improve layout of theme objects setting editor (#26309)
2024-03-22 11:36:34 +08:00
.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;
UX: Fix position of characters count on objects setting input field (#26357)
2024-03-26 12:54:04 +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
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