Finalize inline edit field [SCI-6782]

.scss-lint.yml

@@ -163,7 +163,7 @@ linters:
     max_depth: 3
 
   SelectorFormat:
-    enabled: true
+    enabled: false
     convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
 
   Shorthand:

app/assets/stylesheets/shared/inline_edit.scss

@@ -1,66 +1,67 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
 .sci-inline-edit {
-  display: flex;
+  column-gap: .25em;
+  display: grid;
+  grid-template-columns: auto repeat(2, max-content);
+  transition: .4s $timing-function-sharp;
 
-  &.editing {
+  .sci-inline-edit__content {
-    margin-top: -0.5em;
+    border: $border-transparent;
-  }
+    display: flex;
-}
+    flex-direction: column;
-
+    justify-content: center;
-.sci-inline-edit__content {
+    line-height: 1em;
-  width: 100%;
+    margin-left: -.25em;
-
-  span {
-    cursor: pointer;
-
-    &.blank {
-      color: $color-silver-chalice;
-    }
-  }
-
-  textarea {
-    border: 1px solid;
-    border-color: $brand-focus;
-    border-radius: 4px;
-    height: 36px;
     min-height: 36px;
-    outline: none;
+    padding-left: .25em;
-    overflow: hidden;
-    padding: 0.5em 1em;
     width: 100%;
 
-    &:focus {
+    .sci-inline-edit__view {
+      cursor: pointer;
+      width: 100%;
+
+      &.blank {
+        color: $color-silver-chalice;
+      }
+    }
+
+    textarea {
+      background: transparent;
+      border: 0;
+      line-height: 1em;
+      min-height: 1em;
       outline: none;
+      overflow: hidden;
+      padding: 0;
+      padding-top: 2px;
+      width: 100%;
+
+      &:focus {
+        outline: none;
+      }
+
+      &.error {
+        border-color: $brand-danger;
+      }
     }
 
-    &.error {
+    .sci-inline-edit__error {
-      border-color: $brand-danger;
+      color: $brand-danger;
+      font-size: .8em;
     }
   }
 
-  .sci-inline-edit__error {
+  &:hover {
-    color: $brand-danger;
+    .sci-inline-edit__content {
-    font-size: .8em;
+      border: $border-default;
+    }
+  }
+
+  &.editing {
+
+    .sci-inline-edit__content {
+      border-color: $brand-focus;
+    }
   }
 }
-
-.sci-inline-edit__controls {
-  display: flex;
-  justify-content: space-between;
-  margin-left: 8px;
-  width: 76px;
-}
-
-.sci-inline-edit__control {
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  height: 36px;
-  line-height: 36px;
-  text-align: center;
-  width: 36px;
-}
-
-.sci-inline-edit__save {
-  background: $brand-primary;
-  color: $color-white;
-}

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

@@ -1,47 +1,43 @@
-.step-checklist-container {
+// scss-lint:disable SelectorDepth
-  .step-element-name {
+// scss-lint:disable NestingDepth
-    align-items: flex-start;
-    display: flex;
-
-    .sci-checkbox-container {
-      margin-right: 8px;
-      margin-top: 4px;
-    }
-
-    .step-checklist-text {
-      width: 100%;
-    }
-
-    &.done .step-checklist-text {
-      text-decoration: line-through;
-    }
-
-    &:hover.done .step-checklist-text {
-      text-decoration: none;
-    }
-  }
-
-  .step-checklist-add-item {
-    margin-left: 9px;
-    margin-top: 2px;
-  }
-}
 
 .step-checklist-items {
+  .step-element-header {
+    .step-element-name {
+      align-items: flex-start;
+      column-gap: .5em;
+      display: grid;
+      font-weight: normal;
+      grid-template-columns: max-content auto;
+
+      .step-checklist-text {
+        width: 100%;
+      }
+
+      &.done .step-checklist-text {
+        text-decoration: line-through;
+      }
+
+      &:hover.done .step-checklist-text {
+        text-decoration: none;
+      }
+
+      .step-checklist-add-item {
+        margin-left: 9px;
+        margin-top: 2px;
+      }
+    }
+  }
+
   .step-checklist-item-ghost {
     border: 1px solid $brand-primary;
   }
 
-  .sci-checkbox-container.disabled {
+  .sci-checkbox-container {
-    pointer-events: none;
+    margin: 10px 0;
-  }
 
-  .sci-inline-edit {
+    &.disabled {
-    font-weight: normal;
+      pointer-events: none;
-
-    textarea {
-      padding-left: 4px;
-      margin-left: -5px;
     }
   }
 }

app/assets/stylesheets/steps/step.scss

@@ -45,6 +45,7 @@
 
     .step-position {
       @include font-main;
+      flex-shrink: 0;
       line-height: 24px;
       margin: 0 4px;
     }
@@ -173,7 +174,6 @@
   min-height: 40px;
   padding: 0 0 0 8px;
   position: relative;
-  padding: 8px;
 
   &.editing-name {
     .step-element-controls {
@@ -205,14 +205,7 @@
     display: flex;
     margin-left: auto;
     position: absolute;
-    right: 4px;
+    right: 0;
-    top: 4px;
-
-    .btn {
-      height: 32px;
-      width: 32px;
-      padding: 0;
-    }
 
     .fas {
       font-size: 14px;

app/javascript/vue/shared/inline_edit.vue

@@ -13,19 +13,19 @@
         @paste="handlePaste"
         @blur="handleBlur"
       ></textarea>
-      <span v-else @click="enableEdit" :class="{ 'blank': isBlank }">{{ value || placeholder }}</span>
+      <div v-else @click="enableEdit" class="sci-inline-edit__view" :class="{ 'blank': isBlank }">{{ value || placeholder }}</div>
       <div v-if="editing && error" class="sci-inline-edit__error">
         {{ error }}
       </div>
     </div>
-    <div v-if="editing" class="sci-inline-edit__controls">
+    <template v-if="editing">
-      <div class="sci-inline-edit__control sci-inline-edit__save" @click="update">
+      <div class="sci-inline-edit__control btn btn-primary icon-btn" @click="update">
         <i class="fas fa-check"></i>
       </div>
-      <div class="sci-inline-edit__control sci-inline-edit__cancel" @click="cancelEdit">
+      <div class="sci-inline-edit__control btn btn-light icon-btn" @click="cancelEdit">
         <i class="fas fa-times"></i>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -92,9 +92,9 @@
         }
       },
       focus() {
-        if (!this.$refs.input) return;
-
         this.$nextTick(() => {
+          if (!this.$refs.input) return;
+
           this.$refs.input.focus();
           this.resize();
         });