mirror of
https://github.com/4ian/GDevelop.git
synced 2025-10-15 10:19:04 +00:00
Add optional description to effect properties
This commit is contained in:

committed by
Florian Rival

parent
977dc27bd0
commit
ec9a629124
@@ -90,6 +90,7 @@ class GD_CORE_API PropertyDescriptor {
|
||||
const gd::String& GetValue() const { return currentValue; }
|
||||
const gd::String& GetType() const { return type; }
|
||||
const gd::String& GetLabel() const { return label; }
|
||||
const gd::String& GetDescription() const { return description; }
|
||||
const std::vector<gd::String>& GetExtraInfo() const {
|
||||
return extraInformation;
|
||||
}
|
||||
|
@@ -33,6 +33,7 @@ module.exports = {
|
||||
new gd.PropertyDescriptor(/* defaultValue= */ "1")
|
||||
.setLabel(_('Opacity of the effect (between 0 and 1)'))
|
||||
.setType('number')
|
||||
.setDescription(_("This is an optional description."))
|
||||
);
|
||||
dumyEffectProperties.set(
|
||||
'someImage',
|
||||
@@ -52,6 +53,7 @@ module.exports = {
|
||||
.setLabel(
|
||||
_("Color (won't be used, just for demonstration purpose)")
|
||||
)
|
||||
.setDescription(_("Another optional description."))
|
||||
);
|
||||
|
||||
// Declare conditions, actions or expressions:
|
||||
|
@@ -628,6 +628,8 @@ interface PropertyDescriptor {
|
||||
[Const, Ref] DOMString GetType();
|
||||
[Ref] PropertyDescriptor SetLabel([Const] DOMString label);
|
||||
[Const, Ref] DOMString GetLabel();
|
||||
[Ref] PropertyDescriptor SetDescription([Const] DOMString label);
|
||||
[Const, Ref] DOMString GetDescription();
|
||||
[Ref] PropertyDescriptor AddExtraInfo([Const] DOMString type);
|
||||
[Value] VectorString GetExtraInfo();
|
||||
[Ref] PropertyDescriptor SetHidden(boolean enable);
|
||||
|
@@ -41,7 +41,9 @@ export const enumerateEffectsMetadata = (
|
||||
const property = properties.get(parameterName);
|
||||
const valueType = property.getType().toLowerCase();
|
||||
const propertyLabel = property.getLabel();
|
||||
const propertyDescription = property.getDescription();
|
||||
const getLabel = () => propertyLabel;
|
||||
const getDescription = () => propertyDescription;
|
||||
|
||||
if (valueType === 'number') {
|
||||
return {
|
||||
@@ -52,6 +54,7 @@ export const enumerateEffectsMetadata = (
|
||||
setValue: (effect: gdEffect, newValue: number) =>
|
||||
effect.setDoubleParameter(parameterName, newValue),
|
||||
getLabel,
|
||||
getDescription,
|
||||
};
|
||||
} else if (valueType === 'resource') {
|
||||
// Resource is a "string" (with a selector in the UI)
|
||||
@@ -65,6 +68,7 @@ export const enumerateEffectsMetadata = (
|
||||
setValue: (effect: gdEffect, newValue: number) =>
|
||||
effect.setStringParameter(parameterName, newValue),
|
||||
getLabel,
|
||||
getDescription,
|
||||
};
|
||||
} else if (valueType === 'color') {
|
||||
return {
|
||||
@@ -75,6 +79,7 @@ export const enumerateEffectsMetadata = (
|
||||
setValue: (effect: gdEffect, newValue: number) =>
|
||||
effect.setStringParameter(parameterName, newValue),
|
||||
getLabel,
|
||||
getDescription,
|
||||
};
|
||||
} else {
|
||||
console.error(
|
||||
|
@@ -34,6 +34,7 @@ export type Instances = Array<Instance>;
|
||||
export type ValueFieldCommonProperties = {|
|
||||
name: string,
|
||||
getLabel?: Instance => string,
|
||||
getDescription?: Instance => string,
|
||||
disabled?: boolean,
|
||||
onEditButtonClick?: Instance => void,
|
||||
onClick?: Instance => void,
|
||||
@@ -177,6 +178,22 @@ const getFieldLabel = (instances: Instances, field: ValueField): any => {
|
||||
return field.name;
|
||||
};
|
||||
|
||||
const getFieldDescription = (
|
||||
instances: Instances,
|
||||
field: ValueField
|
||||
): ?string => {
|
||||
if (!instances[0]) {
|
||||
console.log(
|
||||
'PropertiesEditor._getFieldDescription was called with an empty list of instances (or containing undefined). This is a bug that should be fixed'
|
||||
);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (field.getDescription) return field.getDescription(instances[0]);
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export default class PropertiesEditor extends React.Component<Props, {||}> {
|
||||
_onInstancesModified = (instances: Instances) => {
|
||||
// This properties editor is dealing with fields that are
|
||||
@@ -213,6 +230,7 @@ export default class PropertiesEditor extends React.Component<Props, {||}> {
|
||||
id={field.name}
|
||||
floatingLabelText={getFieldLabel(this.props.instances, field)}
|
||||
floatingLabelFixed
|
||||
helperText={getFieldDescription(this.props.instances, field)}
|
||||
onChange={newValue => {
|
||||
this.props.instances.forEach(i =>
|
||||
setValue(i, parseFloat(newValue) || 0)
|
||||
@@ -231,6 +249,7 @@ export default class PropertiesEditor extends React.Component<Props, {||}> {
|
||||
key={field.name}
|
||||
id={field.name}
|
||||
floatingLabelText={getFieldLabel(this.props.instances, field)}
|
||||
helperText={getFieldDescription(this.props.instances, field)}
|
||||
disableAlpha
|
||||
fullWidth
|
||||
color={hexToRGBColor(getFieldValue(this.props.instances, field))}
|
||||
@@ -255,6 +274,7 @@ export default class PropertiesEditor extends React.Component<Props, {||}> {
|
||||
value={getFieldValue(this.props.instances, field)}
|
||||
floatingLabelText={getFieldLabel(this.props.instances, field)}
|
||||
floatingLabelFixed
|
||||
helperText={getFieldDescription(this.props.instances, field)}
|
||||
multiLine
|
||||
style={styles.field}
|
||||
/>
|
||||
@@ -274,6 +294,7 @@ export default class PropertiesEditor extends React.Component<Props, {||}> {
|
||||
id={field.name}
|
||||
floatingLabelText={getFieldLabel(this.props.instances, field)}
|
||||
floatingLabelFixed
|
||||
helperText={getFieldDescription(this.props.instances, field)}
|
||||
onChange={newValue => {
|
||||
this.props.instances.forEach(i => setValue(i, newValue || ''));
|
||||
this._onInstancesModified(this.props.instances);
|
||||
@@ -315,6 +336,7 @@ export default class PropertiesEditor extends React.Component<Props, {||}> {
|
||||
value={getFieldValue(this.props.instances, field)}
|
||||
key={field.name}
|
||||
floatingLabelText={getFieldLabel(this.props.instances, field)}
|
||||
helperText={getFieldDescription(this.props.instances, field)}
|
||||
onChange={(event, index, newValue: string) => {
|
||||
this.props.instances.forEach(i =>
|
||||
setValue(i, parseFloat(newValue) || 0)
|
||||
@@ -338,6 +360,7 @@ export default class PropertiesEditor extends React.Component<Props, {||}> {
|
||||
)}
|
||||
key={field.name}
|
||||
floatingLabelText={getFieldLabel(this.props.instances, field)}
|
||||
helperText={getFieldDescription(this.props.instances, field)}
|
||||
onChange={(event, index, newValue: string) => {
|
||||
this.props.instances.forEach(i => setValue(i, newValue || ''));
|
||||
this._onInstancesModified(this.props.instances);
|
||||
@@ -395,6 +418,7 @@ export default class PropertiesEditor extends React.Component<Props, {||}> {
|
||||
this._onInstancesModified(this.props.instances);
|
||||
}}
|
||||
floatingLabelText={getFieldLabel(this.props.instances, field)}
|
||||
helperText={getFieldDescription(this.props.instances, field)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@@ -33,6 +33,7 @@ type Props = {|
|
||||
initialResourceName: string,
|
||||
onChange: string => void,
|
||||
floatingLabelText?: React.Node,
|
||||
helperText?: React.Node,
|
||||
hintText?: MessageDescriptor,
|
||||
margin?: 'none' | 'dense',
|
||||
|};
|
||||
@@ -262,6 +263,7 @@ export default class ResourceSelector extends React.Component<Props, State> {
|
||||
renderTextField={() => (
|
||||
<SemiControlledAutoComplete
|
||||
floatingLabelText={this.props.floatingLabelText}
|
||||
helperText={this.props.helperText}
|
||||
hintText={this.props.hintText}
|
||||
openOnFocus
|
||||
dataSource={this.autoCompleteData || []}
|
||||
|
@@ -11,7 +11,7 @@ const styles = {
|
||||
picker: {
|
||||
position: 'absolute',
|
||||
right: '8px',
|
||||
bottom: '12px',
|
||||
top: '26px',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -33,6 +33,7 @@ export default class ColorField extends Component {
|
||||
fullWidth
|
||||
floatingLabelText={this.props.floatingLabelText}
|
||||
floatingLabelFixed
|
||||
helperText={this.props.helperText}
|
||||
type="text"
|
||||
hintText={t`Click to choose`}
|
||||
onClick={this.onClick}
|
||||
|
@@ -31,6 +31,7 @@ type Props = {|
|
||||
margin?: 'none' | 'dense',
|
||||
|
||||
floatingLabelText?: React.Node,
|
||||
helperText?: React.Node,
|
||||
|
||||
// If a hint text is specified, will be shown as an option for the empty
|
||||
// value (""), disabled.
|
||||
@@ -81,6 +82,7 @@ export default class SelectField extends React.Component<Props, {||}> {
|
||||
disabled={props.disabled}
|
||||
fullWidth={props.fullWidth}
|
||||
label={props.floatingLabelText}
|
||||
helperText={props.helperText}
|
||||
value={displayedValue}
|
||||
onChange={
|
||||
onChange
|
||||
|
@@ -124,6 +124,7 @@ type Props = {|
|
||||
errorText?: React.Node,
|
||||
disabled?: boolean,
|
||||
floatingLabelText?: React.Node,
|
||||
helperText?: React.Node,
|
||||
hintText?: MessageDescriptor | string,
|
||||
fullWidth?: boolean,
|
||||
margin?: 'none' | 'dense',
|
||||
@@ -284,7 +285,7 @@ export default class SemiControlledAutoComplete extends React.Component<
|
||||
|
||||
// Error handling:
|
||||
error: !!props.errorText,
|
||||
helperText: props.errorText,
|
||||
helperText: props.errorText || props.helperText,
|
||||
|
||||
// Display:
|
||||
InputLabelProps: getLabelProps({ shrink: true }),
|
||||
|
@@ -32,6 +32,7 @@ type Props = {|
|
||||
floatingLabelText?: React.Node,
|
||||
fullWidth?: boolean,
|
||||
hintText?: React.Node,
|
||||
helperText?: React.Node,
|
||||
id?: string,
|
||||
inputStyle?: Object,
|
||||
max?: number,
|
||||
|
@@ -55,6 +55,7 @@ type Props = {|
|
||||
floatingLabelText?: React.Node,
|
||||
name?: string,
|
||||
hintText?: MessageDescriptor,
|
||||
helperText?: React.Node,
|
||||
id?: string,
|
||||
|
||||
// Keyboard focus:
|
||||
@@ -194,7 +195,7 @@ export default class TextField extends React.Component<Props, {||}> {
|
||||
}
|
||||
// Error handling:
|
||||
error={!!props.errorText}
|
||||
helperText={props.errorText}
|
||||
helperText={props.errorText || props.helperText}
|
||||
disabled={props.disabled}
|
||||
InputLabelProps={{
|
||||
shrink: props.floatingLabelFixed ? true : undefined,
|
||||
|
@@ -67,6 +67,18 @@ export const makeTestExtensions = gd => {
|
||||
new gd.PropertyDescriptor(/* defaultValue= */ '1')
|
||||
.setLabel('Intensity (between 0 and 1)')
|
||||
.setType('number')
|
||||
.setDescription(
|
||||
'Some interesting description about this intensity parameter that can be used by the effect.'
|
||||
)
|
||||
);
|
||||
variousParametersEffectProperties.set(
|
||||
'someColor',
|
||||
new gd.PropertyDescriptor(/* defaultValue= */ '1')
|
||||
.setLabel('Some color')
|
||||
.setType('color')
|
||||
.setDescription(
|
||||
'Some interesting description about this intensity parameter that can be used by the effect.'
|
||||
)
|
||||
);
|
||||
variousParametersEffectProperties.set(
|
||||
'image',
|
||||
@@ -74,6 +86,9 @@ export const makeTestExtensions = gd => {
|
||||
.setLabel('An image resource')
|
||||
.setType('resource')
|
||||
.addExtraInfo('image')
|
||||
.setDescription(
|
||||
'Some interesting description about this image resource that can be used by the effect.'
|
||||
)
|
||||
);
|
||||
|
||||
platform.addNewExtension(extension);
|
||||
|
@@ -949,6 +949,19 @@ storiesOf('UI Building Blocks/ColorField', module)
|
||||
}}
|
||||
onChangeComplete={() => {}}
|
||||
/>
|
||||
<ColorField
|
||||
floatingLabelText="This has a helper text"
|
||||
disableAlpha
|
||||
fullWidth
|
||||
color={{
|
||||
r: 100,
|
||||
g: 100,
|
||||
b: 200,
|
||||
a: 255,
|
||||
}}
|
||||
onChangeComplete={() => {}}
|
||||
helperText="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
||||
/>
|
||||
<ColorField
|
||||
floatingLabelText="This is not full width"
|
||||
disableAlpha
|
||||
|
Reference in New Issue
Block a user