Add optional description to effect properties

This commit is contained in:
Florian Rival
2019-12-21 00:55:13 +01:00
committed by Florian Rival
parent 977dc27bd0
commit ec9a629124
13 changed files with 73 additions and 3 deletions

View File

@@ -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;
}

View File

@@ -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:

View File

@@ -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);

View File

@@ -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(

View File

@@ -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)}
/>
);
};

View File

@@ -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 || []}

View File

@@ -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}

View File

@@ -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

View File

@@ -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 }),

View File

@@ -32,6 +32,7 @@ type Props = {|
floatingLabelText?: React.Node,
fullWidth?: boolean,
hintText?: React.Node,
helperText?: React.Node,
id?: string,
inputStyle?: Object,
max?: number,

View File

@@ -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,

View File

@@ -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);

View File

@@ -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