diff --git a/app/assets/stylesheets/steps/components/checklist.scss b/app/assets/stylesheets/steps/components/checklist.scss index 093d1f6fe..573b3fbd2 100644 --- a/app/assets/stylesheets/steps/components/checklist.scss +++ b/app/assets/stylesheets/steps/components/checklist.scss @@ -2,6 +2,15 @@ // scss-lint:disable NestingDepth .step-checklist-items { + .sci-inline-edit { + margin-top: 2px; + + .sci-inline-edit__content { + padding-bottom: 7px; + padding-top: 7px; + } + } + .step-element-header { .step-element-name { align-items: flex-start; @@ -26,6 +35,10 @@ .step-checklist-add-item { margin-left: 9px; + + .fas { + margin-right: .5em; + } } .step-checklist-item-ghost { diff --git a/app/javascript/vue/protocol/step_elements/checklistItem.vue b/app/javascript/vue/protocol/step_elements/checklistItem.vue index 0d4dd8dfe..4bd5d94a0 100644 --- a/app/javascript/vue/protocol/step_elements/checklistItem.vue +++ b/app/javascript/vue/protocol/step_elements/checklistItem.vue @@ -19,11 +19,12 @@ :value="checklistItem.attributes.text" :sa_value="checklistItem.attributes.sa_text" :characterLimit="10000" - :placeholder="''" + :placeholder="'Add a checklist item...'" :allowBlank="true" :autofocus="editingText" :attributeName="`${i18n.t('ChecklistItem')} ${i18n.t('name')}`" :multilinePaste="true" + :editOnload="newItem()" :smartAnnotation="true" @editingEnabled="enableTextEdit" @editingDisabled="disableTextEdit" @@ -130,6 +131,9 @@ this.$emit('removeItem', this.checklistItem.attributes.position); } }, + newItem(){ + return this.checklistItem.attributes.text === '' + }, update() { this.$emit('update', this.checklistItem); } diff --git a/app/javascript/vue/shared/inline_edit.vue b/app/javascript/vue/shared/inline_edit.vue index 4510cdffe..1f9e35fed 100644 --- a/app/javascript/vue/shared/inline_edit.vue +++ b/app/javascript/vue/shared/inline_edit.vue @@ -84,7 +84,7 @@ }, methods: { handleAutofocus() { - if (this.autofocus || !this.placeholder && this.isBlank) { + if (this.autofocus || !this.placeholder && this.isBlank || this.editOnload && this.isBlank) { this.enableEdit(); setTimeout(this.focus, 50); }