Fix label templates, inline edit, checklist and step [SCI-8792] (#5766)

* Fix label templates, inline edit, checklist and step [SCI-8792]

* Add mouse selection to protocol name on task and protocol desc.

* Fix css hound suggestions

app/assets/stylesheets/label_templates/show.scss

@@ -8,7 +8,7 @@
 
   .title-row {
     @include font-h1;
-    align-items: end;
+    align-items: flex-start;
     background: $color-white;
     border-bottom: $border-tertiary;
     display: flex;
@@ -18,9 +18,8 @@
 
     .label-template-icon {
       flex-shrink: 0;
-      margin-bottom: auto;
       margin-right: 5px;
-      margin-top: 13px;
+      margin-top: 2px;
       width: 32px;
     }
 

app/assets/stylesheets/protocols/tinymce_editor.scss

@@ -46,6 +46,12 @@
 
     .tinymce-view {
       border-color: transparent;
+      padding: .1em 0;
+
+      &:hover {
+        border: 1px solid $color-silver;
+        border-radius: 3px;
+      }
     }
   }
 

app/assets/stylesheets/repository/repository_print_label_modal.scss

@@ -83,6 +83,8 @@
     display: flex;
 
     img {
+      background: var(--sn-white);
+      border-radius: 3px;
       margin-right: .25em;
     }
   }

app/assets/stylesheets/shared/inline_edit.scss

@@ -1,9 +1,8 @@
 // scss-lint:disable SelectorDepth
 // scss-lint:disable NestingDepth
 .sci-inline-edit {
-  column-gap: .25em;
+  align-items: flex-start;
-  display: grid;
+  display: flex;
-  grid-template-columns: auto repeat(2, max-content);
   transition: .4s $timing-function-sharp border;
 
   &.editing .sci-inline-edit__content {
@@ -16,15 +15,17 @@
     display: flex;
     flex-direction: column;
     margin-left: -.25em;
-    min-height: 36px;
+    margin-right: .5rem;
+    min-height: 30px;
     padding-left: .25em;
     position: relative;
     width: 100%;
 
     textarea,
     .sci-inline-edit__view {
-      min-height: 36px;
+      line-height: 26px;
-      padding: .3em .2em .2em;
+      min-height: 30px;
+      padding: .1em .2em;
     }
 
     .sci-inline-edit__view {
@@ -36,6 +37,11 @@
       &.blank {
         color: $color-silver-chalice;
       }
+
+      &.hover-border:hover {
+        border: 1px solid $color-silver;
+        border-radius: 3px;
+      }
     }
 
     textarea {
@@ -76,6 +82,10 @@
     }
 
     .sci-inline-edit__control {
+      margin: 0 .25em;
+      max-height: 30px;
+      max-width: 30px;
+
       &.btn-disabled {
         background: $color-silver-chalice;
         color: $color-concrete;

app/assets/stylesheets/shared_styles/elements/input_fields.scss

@@ -38,10 +38,8 @@
   }
 
   .sn-icon {
-    line-height: 36px;
     position: absolute;
     text-align: center;
-    bottom: 0;
     width: 25px;
   }
 
@@ -70,7 +68,6 @@
     &::after {
       @include font-awesome;
       top: 0;
-      line-height: 36px;
       position: absolute;
       right: 5px;
       text-align: center;

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

@@ -3,11 +3,12 @@
 
 .step-checklist-items {
   .sci-inline-edit {
-    margin-top: 2px;
+    margin-top: 5px;
 
     .sci-inline-edit__content {
       margin-bottom: 7px;
       margin-left: 0;
+      margin-right: .5em;
     }
   }
 
@@ -40,7 +41,7 @@
     border-radius: 50%;
     height: 4px;
     margin-right: .5em;
-    margin-top: 1.3em;
+    margin-top: 1em;
     width: 4px;
   }
 

app/assets/stylesheets/steps/step.scss

@@ -6,7 +6,7 @@
 .step-container {
   --left-component-padding: 2rem;
   border: $border-transparent;
-  margin: 6px 0 6px -1.5em;
+  margin: 6px 0 6px -1em;
   padding: 8px 24px 8px 0;
 
   .step-header {
@@ -15,11 +15,12 @@
     margin-bottom: 1.2em;
 
     .step-element-header {
-      align-items: center;
+      align-items: baseline;
       border-radius: 4px;
       display: flex;
       flex-basis: 80%;
       position: relative;
+      padding-top: .4em;
 
       .step-name-edit-icon {
         background: linear-gradient(90deg,
@@ -63,6 +64,7 @@
     }
 
     .step-name-container {
+      align-self: baseline;
       flex-grow: 1;
       font-size: 16px;
       font-weight: bold;
@@ -73,12 +75,14 @@
     }
 
     .step-state {
+      align-self: center;
       border: 1px solid $color-alto;
       border-radius: 50%;
       cursor: pointer;
       height: 24px;
       text-align: center;
       width: 24px;
+      margin-bottom: -.5em;
 
       &:hover {
         border-color: $brand-success;
@@ -154,7 +158,7 @@
 
     .step-timestamp {
       position: relative;
-      margin-left: 30px;
+      margin-left: 40px;
       bottom: 17px;
       width: 356px;
       height: 15px;
@@ -166,19 +170,10 @@
       order: 0;
       flex-grow: 0;
     }
-
-    .step-element-name {
-      .sci-inline-edit__view,
-      textarea {
-        padding-bottom: .1em;
-        padding-top: .5em;
-      }
-    }
   }
 
   .step-element-grip-placeholder {
-    height: 24px;
+    width: 42px;
-    width: 28px;
   }
 
   .comments-counter {
@@ -269,7 +264,7 @@
 }
 
 .step-element-header {
-  align-items: flex-start;
+  align-items: baseline;
   border-radius: 4px;
   display: flex;
   min-height: 40px;
@@ -284,7 +279,7 @@
 
   .step-controls {
     display: flex;
-    align-items: center;
+    align-items: baseline;
     min-height: 35px;
   }
 
@@ -304,12 +299,10 @@
   }
 
   .step-element-controls {
-    background: linear-gradient(
+    background: linear-gradient(90deg,
-      90deg,
+        transparent,
-      transparent,
+        $color-concrete 15%,
-      $color-concrete 15%,
+        $color-concrete 100%);
-      $color-concrete 100%
-    );
     display: flex;
     margin-left: auto;
     position: absolute;
@@ -339,7 +332,6 @@
 .step-element-grip {
   color: $color-silver-chalice;
   cursor: pointer;
-  margin: auto;
   padding: .5em;
 
   &.step-element-grip--draggable {

app/javascript/vue/label_template/container.vue

@@ -12,6 +12,7 @@
           :attributeName="i18n.t('label_templates.show.name_error_prefix')"
           :autofocus="editingName"
           :editOnload="newLabel"
+          :customClasses="['hover-border']"
           @editingEnabled="editingName = true"
           @editingDisabled="editingName = false"
           @update="updateName"
@@ -34,6 +35,7 @@
           :attributeName="i18n.t('label_templates.show.description_error_prefix')"
           :placeholder="i18n.t('label_templates.show.description_placeholder')"
           :autofocus="editingDescription"
+          :customClasses="['hover-border']"
           @editingEnabled="editingDescription = true"
           @editingDisabled="editingDescription = false"
           @update="updateDescription"

app/javascript/vue/protocol/container.vue

@@ -45,6 +45,7 @@
             :placeholder="i18n.t('my_modules.protocols.protocol_status_bar.enter_name')"
             :allowBlank="!inRepository"
             :attributeName="`${i18n.t('Protocol')} ${i18n.t('name')}`"
+            :customClasses="['hover-border']"
             @update="updateName"
           />
           <span v-else>

app/javascript/vue/repository_print_modal/container.vue

@@ -254,7 +254,7 @@
       templateOption(option) {
         return `
           <div class="label-template-option" data-toggle="tooltip" data-placement="right" title="${option.params.description}">
-            <img src="${option.params.icon}"></img>
+            <img src="${option.params.icon}" style=""></img>
             ${option.label}
           </div>
         `

app/javascript/vue/shared/inline_edit.vue

@@ -14,7 +14,7 @@
         @keyup.escape="cancelEdit"
       ></textarea>
       <div v-else-if="smartAnnotation" @click="enableEdit($event)" class="sci-inline-edit__view" v-html="sa_value || placeholder" :class="{ 'blank': isBlank }"></div>
-      <div v-else @click="enableEdit($event)" class="sci-inline-edit__view" :class="{ 'blank': isBlank }">{{newValue || placeholder}}</div>
+      <div v-else @click="enableEdit($event)" class="sci-inline-edit__view" :class="[isBlank ? 'blank' : '', ...customClasses]">{{newValue || placeholder}}</div>
       <div v-if="editing && error" class="sci-inline-edit__error">
         {{ error }}
       </div>
@@ -49,7 +49,8 @@
       multilinePaste: { type: Boolean, default: false },
       smartAnnotation: { type: Boolean, default: false },
       editOnload: { type: Boolean, default: false },
-      defaultValue: { type: String, default: '' }
+      defaultValue: { type: String, default: '' },
+      customClasses: { type: Array, default: [] }
     },
     data() {
       return {