Step header fixes [SCI-6948] (#4217)

app/assets/stylesheets/my_modules/protocol.scss

@@ -1,11 +1,4 @@
 .task-protocol {
-  .protocol-name {
-    .sci-inline-edit__view.blank,
-    textarea {
-      font-weight: bold;
-    }
-  }
-
   .protocol-step-actions {
     margin-left: -6px;
   }

app/assets/stylesheets/shared/inline_edit.scss

@@ -6,13 +6,16 @@
   grid-template-columns: auto repeat(2, max-content);
   transition: .4s $timing-function-sharp;
 
+  &.editing .sci-inline-edit__content {
+    background-color: $color-white;
+  }
+
   .sci-inline-edit__content {
     border: $border-transparent;
     border-radius: 4px;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    line-height: 1em;
     margin-left: -.25em;
     min-height: 36px;
     padding-left: .25em;
@@ -31,12 +34,10 @@
     textarea {
       background: transparent;
       border: 0;
-      line-height: 1em;
       min-height: 1em;
       outline: none;
       overflow: hidden;
       padding: 0;
-      padding-top: 2px;
       width: 100%;
 
       &:focus {

app/assets/stylesheets/steps/step.scss

@@ -9,12 +9,27 @@
   padding: 8px 24px 8px 0;
 
   .step-header {
-    align-items: center;
+    align-items: flex-start;
     display: flex;
     margin-bottom: 1.2em;
 
+    .step-element-header {
+      border-radius: 4px;
+      flex-basis: 80%;
+
+      .step-name-edit-icon {
+        display: none;
+      }
+
+      &:hover .step-name-edit-icon {
+        cursor: pointer;
+        display: inline-block;
+        margin-right: 16px;
+      }
+
       .step-collapse-link {
         display: inline-block;
+        flex-shrink: 0;
         line-height: 24px;
         text-align: center;
         width: 24px;
@@ -23,25 +38,6 @@
           @include rotate(90deg);
         }
       }
-
-    .step-state {
-      border: 2px solid $color-alto;
-      border-radius: 50%;
-      cursor: pointer;
-      height: 24px;
-      text-align: center;
-      width: 24px;
-
-      &.completed {
-        background: $brand-success;
-        border: 2px solid $brand-success;
-
-        &::after {
-          @include font-awesome;
-          color: $color-white;
-          content: $font-fas-check;
-        }
-      }
     }
 
     .strikethrough {
@@ -67,11 +63,46 @@
       textarea {
         text-decoration: initial;
       }
+
+      .step-state {
+        border: 2px solid $color-alto;
+        border-radius: 50%;
+        cursor: pointer;
+        height: 24px;
+        text-align: center;
+        width: 24px;
+
+        &.completed {
+          background: $brand-success;
+          border: 2px solid $brand-success;
+
+          &::after {
+            @include font-awesome;
+            color: $color-white;
+            content: $font-fas-check;
+          }
+        }
+      }
+
+      .step-position {
+        @include font-main;
+        flex-shrink: 0;
+        font-weight: bold;
+        line-height: 24px;
+        margin: 0 4px;
+      }
+
+      .step-name-container {
+        flex-grow: 1;
+        font-size: 16px;
+        font-weight: bold;
+      }
     }
 
     .step-actions-container {
       display: flex;
       justify-content: flex-end;
+      flex-basis: 20%;
 
       .dropdown-menu {
         white-space: nowrap;
@@ -205,6 +236,11 @@
     }
   }
 
+  .step-controls {
+    display: flex;
+    align-items: center;
+  }
+
   .sci-inline-edit {
     width: 100%;
   }

app/javascript/vue/protocol/step.vue

@@ -5,13 +5,15 @@
        @dragenter.prevent="!showFileModal ? dragingFile = true : null"
        @dragleave.prevent="!showFileModal ? dragingFile = false : null"
        @dragover.prevent
-       :class="{ 'draging-file': dragingFile, 'showing-comments': showCommentsSidebar }"
+       :class="{ 'draging-file': dragingFile, 'showing-comments': showCommentsSidebar, 'editing-name': editingName }"
   >
     <div class="drop-message">
       {{ i18n.t('protocols.steps.drop_message', { position: step.attributes.position }) }}
       <StorageUsage v-if="step.attributes.storage_limit" :step="step"/>
     </div>
-    <div class="step-header step-element-header">
+    <div class="step-header">
+      <div class="step-element-header">
+        <div class="step-controls">
           <div v-if="reorderStepUrl" class="step-element-grip" @click="$emit('reorder')">
             <i class="fas fa-grip-vertical"></i>
           </div>
@@ -22,30 +24,30 @@
               <span class="fas fa-caret-right"></span>
           </a>
           <div v-if="!inRepository" class="step-complete-container">
-        <div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`"
+            <div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`" @click="changeState"></div>
-             @click="changeState"
-             @keyup.enter="changeState"
-             tabindex="0"
-             :title="step.attributes.completed ? i18n.t('protocols.steps.status.uncomplete') : i18n.t('protocols.steps.status.complete')"
-        ></div>
           </div>
           <div class="step-position">
             {{ step.attributes.position + 1 }}.
           </div>
-      <div class="step-name-container" :class="{'strikethrough': step.attributes.completed}">
+        </div>
+        <div class="step-name-container">
           <InlineEdit
             v-if="urls.update_url"
             :value="step.attributes.name"
             :characterLimit="255"
             :allowBlank="false"
             :attributeName="`${i18n.t('Step')} ${i18n.t('name')}`"
-          :editOnload="step.newStep == true"
+            :autofocus="editingName"
+            @editingEnabled="editingName = true"
+            @editingDisabled="editingName = false"
             @update="updateName"
           />
           <span v-else>
             {{ step.attributes.name }}
           </span>
         </div>
+        <i v-if="!editingName" class="step-name-edit-icon fas fa-pen" @click="editingName = true"></i>
+      </div>
       <div class="step-actions-container">
         <div ref="actionsDropdownButton" v-if="urls.update_url"  class="dropdown">
           <button class="btn btn-light dropdown-toggle insert-button" type="button" :id="'stepInserMenu_' + step.id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@@ -205,7 +207,8 @@
         showClipboardPasteModal: false,
         showCommentsSidebar: false,
         dragingFile: false,
-        reordering: false
+        reordering: false,
+        editingName: false
       }
     },
     mixins: [UtilsMixin, AttachmentsMixin],
@@ -226,7 +229,7 @@
       this.loadElements();
     },
     mounted() {
-      $(this.$refs.comments).data('closeCallback', this.closeCommentsSidebar)
+      $(this.$refs.comments).data('closeCallback', this.closeCommentsSidebar);
       $(this.$refs.actionsDropdownButton).on('shown.bs.dropdown hidden.bs.dropdown', this.handleDropdownPosition);
     },
     computed: {