Implement inline edit design changes for legacy inline edit (PET titles, etc.)

This commit is contained in:
Giga Chubinidze 2023-09-07 03:56:42 +04:00
parent 8188826125
commit c071eb4c16
3 changed files with 8 additions and 17 deletions

View file

@ -114,6 +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).focus();
container.data('disabled', false);
$('.tooltip').hide();
@ -166,6 +168,8 @@ var inlineEditing = (function() {
.scrollTop(container.offsetTop);
$('.tooltip').hide();
}
inputField(container).removeClass('border-sn-delete-red')
inputField(container).addClass('border-sn-science-blue')
e.stopPropagation();
return true;
})

View file

@ -52,19 +52,9 @@
}
}
&:hover input,
&:hover .view-mode {
border: 1px solid $color-silver;
border-radius: 3px;
&:disabled {
border: 1px solid $color-gainsboro;
}
}
.view-mode {
border: 1px solid transparent;
cursor: pointer;
cursor: url("/images/icon_small/edit.svg") 0 16, auto;
line-height: 26px;
margin-left: -5px;
min-height: 30px;
@ -83,11 +73,8 @@
}
input {
border: 1px solid $color-silver;
border-radius: $border-radius-default;
cursor: pointer;
cursor: initial;
display: block;
line-height: 26px;
margin-left: -5px;
padding: 2px 4px;
padding-right: 36px;

View file

@ -9,8 +9,8 @@
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" type="text" value="<%= initial_value %>" disabled/>
<div class="button-container">
<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/>
<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>
</div>