Inline edit and checklist improvements [SCI-7031] (#4340)

* Inline edit and checklist improvements [SCI-7031]

* Fix smart annotations in inline edit [SCI-7031]

app/assets/stylesheets/shared/inline_edit.scss

@@ -4,20 +4,15 @@
   column-gap: .25em;
   display: grid;
   grid-template-columns: auto repeat(2, max-content);
-  margin-top: .3em;
+  transition: .4s $timing-function-sharp border;
-  transition: .4s $timing-function-sharp;
 
   &.editing .sci-inline-edit__content {
-    background-color: $color-white;
-
     .sci-inline-edit__content {
       padding-top: 0;
     }
   }
 
   .sci-inline-edit__content {
-    border: $border-transparent;
-    border-radius: 4px;
     display: flex;
     flex-direction: column;
     margin-left: -.25em;
@@ -26,7 +21,14 @@
     position: relative;
     width: 100%;
 
+    textarea,
     .sci-inline-edit__view {
+      min-height: 36px;
+      padding: .3em .2em .2em;
+    }
+
+    .sci-inline-edit__view {
+      border: 1px solid transparent;
       cursor: pointer;
       white-space: pre-wrap;
       width: 100%;
@@ -37,12 +39,11 @@
     }
 
     textarea {
-      background: transparent;
+      background-color: $color-white;
-      border: 0;
+      border: 1px solid $brand-focus;
-      min-height: 1em;
+      border-radius: 4px;
       outline: none;
       overflow: hidden;
-      padding: 0;
       width: 100%;
 
       &:focus {
@@ -61,14 +62,16 @@
   }
 
   &.editing {
+    margin-top: 0;
 
     .sci-inline-edit__content {
-      background-color: $color-white;
-      border-color: $brand-focus;
-
       &.error {
         border-color: $brand-danger;
         margin-bottom: 16px;
+
+        textarea {
+          border-color: $brand-danger;
+        }
       }
     }
 

app/assets/stylesheets/steps/components/checklist.scss

@@ -61,7 +61,7 @@
   }
 
   .sci-checkbox-container {
-    margin: 8px 0;
+    margin: 11px 0;
 
     &.disabled {
       pointer-events: none;

app/assets/stylesheets/steps/step.scss

@@ -157,14 +157,10 @@
     padding-left: calc(var(--left-component-padding) * 2);
 
     .step-element-name {
-      .sci-inline-edit__view {
+      .sci-inline-edit__view,
-        margin-bottom: .25em;
+      textarea {
-        padding-top: .25em;
+        padding-bottom: .1em;
-      }
+        padding-top: .5em;
-
-      .sci-inline-edit__content textarea {
-        margin-bottom: .25em;
-        margin-top: .25em;
       }
     }
   }

app/javascript/vue/protocol/step_elements/checklistItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="step-checklist-item" :class="{ 'step-element--locked': !(updateUrl || toggleUrl) }">
+  <div class="step-checklist-item" :class="{ 'step-element--locked': checklistItem.id && !(updateUrl || toggleUrl) }">
     <div class="step-element-header" :class="{ 'locked': locked || editingText, 'editing-name': editingText }">
       <div v-if="reorderChecklistItemUrl" class="step-element-grip step-element-grip--draggable" :class="{ 'step-element-grip--disabled': !draggable }">
         <i class="fas fa-grip-vertical"></i>
@@ -18,7 +18,7 @@
         <div v-else class="sci-checkbox-view-mode"></div>
         <div class="step-checklist-text">
           <InlineEdit
-            :class="{ 'step-element--locked': !updateUrl }"
+            :class="{ 'step-element--locked': checklistItem.id && !updateUrl }"
             :value="checklistItem.attributes.text"
             :sa_value="checklistItem.attributes.sa_text"
             :characterLimit="10000"

app/javascript/vue/shared/inline_edit.vue

@@ -13,7 +13,7 @@
         @blur="handleBlur"
         @keyup.escape="cancelEdit"
       ></textarea>
-      <div v-else @click="enableEdit($event)" class="sci-inline-edit__view" v-html="sa_value || value || placeholder" :class="{ 'blank': isBlank }"></div>
+      <div v-else @click="enableEdit($event)" class="sci-inline-edit__view" v-html="(smartAnnotation ? sa_value : value) || placeholder" :class="{ 'blank': isBlank }"></div>
       <div v-if="editing && error" class="sci-inline-edit__error">
         {{ error }}
       </div>
@@ -52,6 +52,7 @@
     data() {
       return {
         editing: false,
+        dirty: false,
         newValue: ''
       }
     },
@@ -142,6 +143,8 @@
         this.$emit('editingDisabled');
       },
       handlePaste(e) {
+        this.dirty = true;
+
         if (!this.multilinePaste) return;
         let lines = (e.originalEvent || e).clipboardData.getData('text/plain').split(/[\n\r]/);
         lines = lines.filter((l) => l).map((l) => l.trim());
@@ -152,6 +155,7 @@
         }
       },
       handleInput() {
+        this.dirty = true;
         if (!this.allowNewLine) {
           this.newValue = this.newValue.replace(/^[\n\r]+|[\n\r]+$/g, '');
         }
@@ -162,6 +166,8 @@
           this.cancelEdit();
         } else if (e.key == 'Enter' && this.saveOnEnter) {
           this.update();
+        } else {
+          this.dirty = true;
         }
       },
       resize() {
@@ -171,9 +177,14 @@
         this.$refs.input.style.height = (this.$refs.input.scrollHeight) + "px";
       },
       update() {
+        if (!this.dirty && !this.isBlank) {
+          this.editing = false;
+          return;
+        }
+
         setTimeout(() => {
           if(this.error) return;
-          if(!this.editing) return;
+          if(!this.$refs.input) return;
           this.newValue = this.$refs.input.value // Fix for smart annotation
           this.newValue = this.newValue.trim();
           this.editing = false;