From 5cb53c774c235def8ff4e32419f789a2138817b4 Mon Sep 17 00:00:00 2001
From: artoscinote <85488244+artoscinote@users.noreply.github.com>
Date: Mon, 11 Jul 2022 10:45:25 +0200
Subject: [PATCH] Step header fixes [SCI-6948] (#4217)

---
 .../stylesheets/my_modules/protocol.scss      |  7 --
 .../stylesheets/shared/inline_edit.scss       |  7 +-
 app/assets/stylesheets/steps/step.scss        | 82 +++++++++++++------
 app/javascript/vue/protocol/step.vue          | 77 ++++++++---------
 4 files changed, 103 insertions(+), 70 deletions(-)

diff --git a/app/assets/stylesheets/my_modules/protocol.scss b/app/assets/stylesheets/my_modules/protocol.scss
index 60a79a1d3..36eda451b 100644
--- a/app/assets/stylesheets/my_modules/protocol.scss
+++ b/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;
   }
diff --git a/app/assets/stylesheets/shared/inline_edit.scss b/app/assets/stylesheets/shared/inline_edit.scss
index 958d585e4..b34fcb9e7 100644
--- a/app/assets/stylesheets/shared/inline_edit.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss
index fd1f42669..4d4628851 100644
--- a/app/assets/stylesheets/steps/step.scss
+++ b/app/assets/stylesheets/steps/step.scss
@@ -9,37 +9,33 @@
   padding: 8px 24px 8px 0;
 
   .step-header {
-    align-items: center;
+    align-items: flex-start;
     display: flex;
     margin-bottom: 1.2em;
 
-    .step-collapse-link {
-      display: inline-block;
-      line-height: 24px;
-      text-align: center;
-      width: 24px;
+    .step-element-header {
+      border-radius: 4px;
+      flex-basis: 80%;
 
-      &:not(.collapsed) {
-        @include rotate(90deg);
+      .step-name-edit-icon {
+        display: none;
       }
-    }
 
-    .step-state {
-      border: 2px solid $color-alto;
-      border-radius: 50%;
-      cursor: pointer;
-      height: 24px;
-      text-align: center;
-      width: 24px;
+      &:hover .step-name-edit-icon {
+        cursor: pointer;
+        display: inline-block;
+        margin-right: 16px;
+      }
 
-      &.completed {
-        background: $brand-success;
-        border: 2px solid $brand-success;
+      .step-collapse-link {
+        display: inline-block;
+        flex-shrink: 0;
+        line-height: 24px;
+        text-align: center;
+        width: 24px;
 
-        &::after {
-          @include font-awesome;
-          color: $color-white;
-          content: $font-fas-check;
+        &:not(.collapsed) {
+          @include rotate(90deg);
         }
       }
     }
@@ -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%;
   }
diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index 22f5900d2..4078b639f 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@@ -5,46 +5,48 @@
        @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 v-if="reorderStepUrl" class="step-element-grip" @click="$emit('reorder')">
-        <i class="fas fa-grip-vertical"></i>
-      </div>
-      <a class="step-collapse-link"
-         :href="'#stepBody' + step.id"
-         data-toggle="collapse"
-         data-remote="true">
-          <span class="fas fa-caret-right"></span>
-      </a>
-      <div v-if="!inRepository" class="step-complete-container">
-        <div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`"
-             @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}">
-        <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"
-          @update="updateName"
-        />
-        <span v-else>
-          {{ step.attributes.name }}
-        </span>
+    <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>
+          <a class="step-collapse-link"
+            :href="'#stepBody' + step.id"
+            data-toggle="collapse"
+            data-remote="true">
+              <span class="fas fa-caret-right"></span>
+          </a>
+          <div v-if="!inRepository" class="step-complete-container">
+            <div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`" @click="changeState"></div>
+          </div>
+          <div class="step-position">
+            {{ step.attributes.position + 1 }}.
+          </div>
+        </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')}`"
+            :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">
@@ -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: {