Add micro-interactions for protocol repository modals [SCI-8091] (#5102)

This commit is contained in:
ajugo 2023-03-14 14:20:03 +01:00 committed by GitHub
parent 47f9fd5c76
commit 917269a8e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 2 deletions

View file

@ -8,6 +8,7 @@
.on('show.bs.modal', function() {
$(`${protocolModal} #protocol_name`).parent().removeClass('error');
$(`${protocolModal} #protocol_name`).val('');
$(this).find('.sci-input-field').focus();
});
let roleSelector = `${protocolModal} #protocol_role_selector`;
@ -22,6 +23,9 @@
});
$(protocolModal)
.on('shown.bs.modal', function() {
$(this).find('.sci-input-field').focus();
})
.on('ajax:error', 'form', function(e, error) {
let msg = error.responseJSON.error;
$(`${protocolModal} #protocol_name`).parent().addClass('error').attr('data-error-text', msg);

View file

@ -14,6 +14,7 @@
let newContainer = $(html).find(targetID).length ? $(html).find(targetID) : $(html);
targetElement.replaceWith(newContainer);
newContainer.find('.selectpicker').selectpicker();
newContainer.find('.new-assignment-user-search').focus();
if (flash) {
HelperModule.flashAlertMsg(flash, 'success');

View file

@ -15,7 +15,11 @@
</div>
<div class="sci-input-container">
<label>{{ i18n.t('protocols.publish_modal.comment')}}</label>
<textarea v-model="protocol.attributes.version_comment" class="sci-input-field" :placeholder="i18n.t('protocols.publish_modal.comment_placeholder')"></textarea>
<textarea ref="textarea"
v-model="protocol.attributes.version_comment"
class="sci-input-field"
:placeholder="i18n.t('protocols.publish_modal.comment_placeholder')">
</textarea>
</div>
</div>
<div class="modal-footer">
@ -40,6 +44,7 @@
$(this.$refs.modal).on('hidden.bs.modal', () => {
this.$emit('cancel');
});
$(this.$refs.textarea).focus();
},
methods: {
confirm() {

View file

@ -13,7 +13,10 @@
<%= form_with(url: create_path, method: :post, remote: true, html: { id: 'new-user-assignment-form', data: { action: 'replace-form', target: '#user_assignments_modal', object_type: assignable.class.to_s.downcase} }) do |f| %>
<div class="modal-body">
<div class="sci-input-container left-icon">
<%= text_field_tag :search_users, '', placeholder: t('.find_people_html'), class: 'sci-input-field', data: { action: 'filter-list', target: 'new-user-assignment-to-project-form' } %>
<%= text_field_tag :search_users, '',
placeholder: t('.find_people_html'),
class: 'sci-input-field new-assignment-user-search',
data: { action: 'filter-list', target: 'new-user-assignment-to-project-form' } %>
<i class="fas fa-search"></i>
</div>
<% if assignable.visibility && assignable.visibility == 'hidden' %>