Fix legacy inline editing [SCI-9274]

app/assets/javascripts/shared/inline_editing.js

@@ -1,10 +1,10 @@
 /* eslint no-unused-vars: ["error", { "varsIgnorePattern": "initInlineEditing" }]*/
 /* global SmartAnnotation HelperModule I18n */
 
-var inlineEditing = (function() {
+let inlineEditing = (function() {
   const SIDEBAR_ITEM_TYPES = ['project', 'experiment', 'my_module', 'repository'];
 
-  var editBlocks = '.inline-init-handler';
+  const editBlocks = '.inline-init-handler';
 
   function appendAfterLabel(container) {
     if (container.data('label-after')) {
@@ -114,8 +114,8 @@ var inlineEditing = (function() {
         if (!error) error = response.responseJSON.errors[fieldToUpdate];
         container.addClass('error');
         if (error) container.find('.error-block').html(error.join(', '));
-        inputField(container).removeClass('border-sn-science-blue');
-        inputField(container).addClass('border-sn-delete-red');
+        inputField(container).removeClass('!border-b-sn-science-blue');
+        inputField(container).addClass('!border-b-sn-delete-red');
         inputField(container).focus();
         container.data('disabled', false);
         $('.tooltip').hide();
@@ -148,6 +148,9 @@ var inlineEditing = (function() {
         $(editBlocks).click();
       }
     })
+    .on('blur', `${editBlocks} textarea, ${editBlocks} input`, function(e) {
+      saveAllEditFields();
+    })
     .on('click', editBlocks, function(e) {
     // 'A' mean that, if we click on <a></a> element we will not go in edit mode
       var container = $(this);
@@ -168,8 +171,8 @@ var inlineEditing = (function() {
           .scrollTop(container.offsetTop);
         $('.tooltip').hide();
       }
-      inputField(container).removeClass('border-sn-delete-red');
-      inputField(container).addClass('border-sn-science-blue');
+      inputField(container).removeClass('!border-b-sn-delete-red');
+      inputField(container).addClass('!border-b-sn-science-blue');
       e.stopPropagation();
       return true;
     })

app/assets/stylesheets/partials/_inline_editing.scss

@@ -29,7 +29,7 @@
   }
 
   .error-block {
-    bottom: 3px;
+    bottom: 1px;
     color: $brand-danger;
     display: none;
     font-size: 11px;
@@ -47,23 +47,21 @@
     .input-field {
       font-size: 16px;
       line-height: 20px;
-      padding-bottom: 10px;
-      padding-top: 0;
+      outline: none;
+      padding-bottom: .5rem;
     }
   }
 
   .view-mode {
     border: 1px solid transparent;
     cursor: url("/images/icon_small/edit.svg") 0 16, auto;
-    line-height: 26px;
-    margin-left: -5px;
-    min-height: 30px;
+    height: 2rem;
+    min-height: 1.5rem;
     overflow: hidden;
-    padding: 2px 4px;
     padding-right: 36px;
     text-overflow: ellipsis;
     white-space: nowrap;
-    width: calc(100% - 32px);
+    width: 100%;
 
     &:empty:not(:focus):before {
       color: $color-silver-chalice;
@@ -73,12 +71,13 @@
   }
 
   input {
+    border: 1px solid transparent;
     cursor: initial;
     display: block;
-    margin-left: -5px;
-    padding: 2px 4px;
+    height: 2rem;
+    padding-left: 0;
     padding-right: 36px;
-    width: calc(100% - 32px);
+    width: 100%;
 
     &::placeholder {
       color: $color-silver-chalice;

app/assets/stylesheets/shared/content_pane.scss

@@ -38,7 +38,7 @@
         display: flex;
         flex-grow: 1;
         margin: 0;
-        max-width: calc(100% - 2rem);
+        max-width: calc(100% - 2.5rem);
       }
 
       .name-readonly-placeholder {

app/views/repositories/show.html.erb

@@ -31,7 +31,7 @@
           </h1>
           <% if @repository.shared_with_anybody? %>
             <% team_name = @repository.team == current_team ? t('repositories.show.your_team') : @repository.team.name %>
-            <div class="repository-subtitle"><%= t('repositories.show.subtitle', team_name: team_name) %></div>
+            <div class="repository-subtitle mt-0.5"><%= t('repositories.show.subtitle', team_name: team_name) %></div>
           <% end %>
         </div>
       <% end %>

app/views/shared/_inline_editing.html.erb

@@ -9,7 +9,7 @@
   data-placeholder='<%= config[:placeholder] %>'
 >
   <div class="view-mode" data-placeholder="<%= config[:placeholder] %>" tabindex=0><%= initial_value %></div>
-  <input placeholder="<%= config[:placeholder] %>" class="hidden input-field outline-none p-0 pb-2 border-0 border-solid border-b w-full break-words border-sn-science-blue caret-black bg-transparent" type="text" value="<%= initial_value %>" disabled/>
+  <input placeholder="<%= config[:placeholder] %>" class="hidden input-field" type="text" value="<%= initial_value %>" disabled/>
   <div class="button-container hidden">
     <span class="save-button"><i class="sn-icon sn-icon-check"></i></span>
     <span class="cancel-button"><i class="sn-icon sn-icon-close"></i></span>