diff --git a/src/article/manuscript/ManuscriptPackage.js b/src/article/manuscript/ManuscriptPackage.js index d6d3cdbb3..e01a0c7ea 100644 --- a/src/article/manuscript/ManuscriptPackage.js +++ b/src/article/manuscript/ManuscriptPackage.js @@ -359,6 +359,7 @@ export default { config.addLabel('add-action', 'Add') config.addLabel('enter-url-placeholder', 'Enter url') config.addLabel('enter-keyword', 'Enter keyword') + config.addLabel('enter-keywords', 'Click to add keywords') // Icons config.addIcon('create-unordered-list', { 'fontawesome': 'fa-list-ul' }) diff --git a/src/article/metadata/MetadataPackage.js b/src/article/metadata/MetadataPackage.js index c79e413b6..bae369168 100644 --- a/src/article/metadata/MetadataPackage.js +++ b/src/article/metadata/MetadataPackage.js @@ -380,6 +380,8 @@ export default { config.addLabel('empty-figure-metadata', 'No fields specified') config.addLabel('open-link', 'Open Link') config.addLabel('enter-keyword', 'Enter keyword') + config.addLabel('enter-keywords', 'Click to add keywords') + // Icons config.addIcon('input-error', { 'fontawesome': 'fa-exclamation-circle' }) config.addIcon('input-loading', { 'fontawesome': 'fa-spinner fa-spin' }) diff --git a/src/article/shared/CustomMetadataFieldComponent.js b/src/article/shared/CustomMetadataFieldComponent.js index a0ffb4baa..5f1e4b12a 100644 --- a/src/article/shared/CustomMetadataFieldComponent.js +++ b/src/article/shared/CustomMetadataFieldComponent.js @@ -17,7 +17,7 @@ export default class CustomMetadataFieldComponent extends NodeComponent { this._renderValue($$, 'name', { placeholder: this.getLabel('enter-custom-field-name') }).addClass('se-field-name'), $$(KeywordInput, { model: valuesModel, - placeholder: this.getLabel('enter-keyword'), + placeholder: this.getLabel('enter-keywords'), overlayId: valuesModel.id }).addClass('se-field-values') ) diff --git a/src/kit/ui/KeywordInput.js b/src/kit/ui/KeywordInput.js index f822b755b..bb0c5225b 100644 --- a/src/kit/ui/KeywordInput.js +++ b/src/kit/ui/KeywordInput.js @@ -17,12 +17,13 @@ export default class KeywordInput extends OverlayMixin(Component) { const values = model.getValue() const isEmpty = values.length === 0 const isExpanded = this.state.isExpanded + const label = isEmpty ? this.props.placeholder : values.join(', ') const el = $$('div').addClass('sc-keyword-input') if (isEmpty) el.addClass('sm-empty') el.addClass(isExpanded ? 'sm-expanded' : 'sm-collapsed') el.append( - $$('div').addClass('se-label').text(values.join(', ')) + $$('div').addClass('se-label').text(label) .on('click', this._onClick) ) if (isExpanded) { @@ -38,8 +39,9 @@ export default class KeywordInput extends OverlayMixin(Component) { } _renderEditor ($$) { - const { model, placeholder } = this.props + const model = this.props.model const values = model.getValue() + const placeholder = this.getLabel('enter-keyword') const Button = this.getComponent('button') const Input = this.getComponent('input')