mirror of
https://github.com/discourse/discourse.git
synced 2024-12-02 05:13:44 +08:00
cdba864598
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>
```
66 lines
1.7 KiB
Plaintext
66 lines
1.7 KiB
Plaintext
import Component from "@glimmer/component";
|
|
import { cached } from "@glimmer/tracking";
|
|
import htmlSafe from "discourse-common/helpers/html-safe";
|
|
import BooleanField from "./types/boolean";
|
|
import CategoryField from "./types/category";
|
|
import EnumField from "./types/enum";
|
|
import FloatField from "./types/float";
|
|
import GroupField from "./types/group";
|
|
import IntegerField from "./types/integer";
|
|
import StringField from "./types/string";
|
|
import TagField from "./types/tag";
|
|
|
|
export default class SchemaThemeSettingField extends Component {
|
|
get component() {
|
|
switch (this.args.spec.type) {
|
|
case "string":
|
|
return StringField;
|
|
case "integer":
|
|
return IntegerField;
|
|
case "float":
|
|
return FloatField;
|
|
case "boolean":
|
|
return BooleanField;
|
|
case "enum":
|
|
return EnumField;
|
|
case "category":
|
|
return CategoryField;
|
|
case "tag":
|
|
return TagField;
|
|
case "group":
|
|
return GroupField;
|
|
default:
|
|
throw new Error("unknown type");
|
|
}
|
|
}
|
|
|
|
@cached
|
|
get description() {
|
|
return this.args.description.trim().replace(/\n/g, "<br>");
|
|
}
|
|
|
|
get hasDescription() {
|
|
return this.args.description?.length > 0;
|
|
}
|
|
|
|
<template>
|
|
<div class="schema-field" data-name={{@name}}>
|
|
<label class="schema-field__label">{{@name}}</label>
|
|
|
|
<div class="schema-field__input">
|
|
<this.component
|
|
@value={{@value}}
|
|
@spec={{@spec}}
|
|
@onChange={{@onValueChange}}
|
|
/>
|
|
</div>
|
|
|
|
{{#if this.hasDescription}}
|
|
<div class="schema-field__description">
|
|
{{htmlSafe this.description}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</template>
|
|
}
|