Merge branch 'develop' into ai-sci-6970-step-rearranging-fixes

app/assets/stylesheets/steps/step.scss

@@ -17,15 +17,20 @@
     .step-element-header {
       border-radius: 4px;
       flex-basis: 80%;
+      position: relative;
 
       .step-name-edit-icon {
         display: none;
+        position: absolute;
+        right: -8px;
+        top: -6px;
       }
 
       &:hover .step-name-edit-icon {
         cursor: pointer;
         display: inline-block;
         margin-right: 16px;
+        margin-top: 16px;
       }
 
       .step-collapse-link {
@@ -223,7 +228,7 @@
 }
 
 .step-element-header {
-  align-items: center;
+  align-items: flex-start;
   display: flex;
   min-height: 40px;
   position: relative;

app/javascript/vue/protocol/modals/delete_element.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="modal" @keydown.esc="cancel" class="modal" id="modalDestroyProtocolContent" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-sm" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

app/javascript/vue/protocol/modals/delete_step.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="modal" @keydown.esc="cancel" class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-sm" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

app/javascript/vue/protocol/step.vue

@@ -96,7 +96,7 @@
         <div v-if="urls.update_url" class="step-actions-container">
           <div class="dropdown">
             <button class="btn btn-light dropdown-toggle insert-button" type="button" :id="'stepInserMenu_' + step.id" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="true">
-              <i class="fas fa-ellipsis-v"></i>
+              <i class="fas fa-ellipsis-h"></i>
             </button>
             <ul class="dropdown-menu dropdown-menu-right insert-element-dropdown" :aria-labelledby="'stepInserMenu_' + step.id">
               <li class="title">

app/javascript/vue/protocol/step_elements/checklist.vue

@@ -174,8 +174,7 @@
           });
         } else {
           // create item, then append next one
-          this.postItem(item);
-          this.addItem();
+          this.postItem(item, this.addItem);
         }
         this.update();
       },

app/javascript/vue/protocol/step_elements/text.vue

@@ -17,12 +17,14 @@
       :value="element.attributes.orderable.text"
       :value_html="element.attributes.orderable.text_view"
       :placeholder="element.attributes.orderable.placeholder"
+      :inEditMode="inEditMode"
       :updateUrl="element.attributes.orderable.urls.update_url"
       :objectType="'StepText'"
       :objectId="element.attributes.orderable.id"
       :fieldName="'step_text[text]'"
       :lastUpdated="element.attributes.orderable.updated_at"
       :characterLimit="100000"
+      :inEditMode="isNew"
       @update="update"
       @editingDisabled="disableEditMode"
       @editingEnabled="enableEditMode"

app/javascript/vue/shared/tinymce.vue

@@ -106,6 +106,11 @@
         return false
       }
     },
+    mounted() {
+      if (this.inEditMode) {
+        this.initTinymce();
+      }
+    },
     methods: {
       initTinymce() {
         let textArea = `#${this.objectType}_textarea_${this.objectId}`;
@@ -126,7 +131,7 @@
       initCharacterCount() {
         this.characterCount = $(this.editorInstance.getContent()).text().length
 
-        this.editorInstance.on('input', (e) => {
+        this.editorInstance.on('input paste', (e) => {
           this.characterCount = e.currentTarget.innerText.length
         });