mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-02-28 09:43:01 +08:00
Fix styling, functionality issues with invite users modal [SCI-5099]
This commit is contained in:
Martin Artnik
parent
4934b4eb8e
commit
fb040bee07
5 changed files with 128 additions and 26 deletions
|
|
@ -26,11 +26,24 @@
|
|||
var teamSelectorDropdown = modal.find('[data-role=team-selector-dropdown]');
|
||||
var teamSelectorDropdown2 = $();
|
||||
var emailsInput = modal.find('.emails-input');
|
||||
var emailTagsInput = modal.find('.email-tags-input');
|
||||
var teamsInput = modal.find('.teams-input');
|
||||
var roleInput = modal.find('.role-input');
|
||||
var recaptchaErrorMsgDiv = modal.find('#recaptcha-error-msg');
|
||||
var recaptchaErrorText = modal.find('#recaptcha-error-msg>span');
|
||||
|
||||
emailTagsInput.tagsinput({
|
||||
maxTags: modal.data('max-tags')
|
||||
});
|
||||
|
||||
emailTagsInput.on('change', function(e) {
|
||||
if (emailTagsInput.val()) {
|
||||
inviteBtn.removeAttr('disabled');
|
||||
} else {
|
||||
inviteBtn.attr('disabled', 'disabled');
|
||||
}
|
||||
});
|
||||
|
||||
dropdownSelector.init(emailsInput, {
|
||||
delimiter: true,
|
||||
optionClass: 'users-dropdown-list',
|
||||
|
|
@ -84,6 +97,10 @@
|
|||
inviteBtn.hide();
|
||||
inviteWithRoleDiv.show();
|
||||
break;
|
||||
case 'invite_new_members':
|
||||
inviteBtn.show();
|
||||
inviteWithRoleDiv.hide();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
@ -115,7 +132,7 @@
|
|||
// Click action
|
||||
modal.find('[data-action=invite]').off('click').on('click', function() {
|
||||
var data = {
|
||||
emails: dropdownSelector.getValues(emailsInput),
|
||||
emails: dropdownSelector.getValues(emailsInput) || emailTagsInput.val(),
|
||||
team_ids: dropdownSelector.getValues(teamsInput),
|
||||
role: roleInput.val(),
|
||||
'g-recaptcha-response': $('#recaptcha-invite-modal').val()
|
||||
|
|
|
|||
|
|
@ -1320,6 +1320,29 @@ body > .loading-overlay {
|
|||
.bootstrap-tagsinput {
|
||||
min-width: 450px;
|
||||
width: 100%;
|
||||
border-color: $color-silver-chalice;
|
||||
|
||||
.tag {
|
||||
color: $color-black;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 13px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
[data-role="remove"] {
|
||||
margin-left: 4px;
|
||||
|
||||
&::after {
|
||||
content: "\f00d";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
padding: 0px 2px;
|
||||
font-weight: 900;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.results-container .alert {
|
||||
|
|
@ -1343,13 +1366,31 @@ body > .loading-overlay {
|
|||
}
|
||||
}
|
||||
|
||||
.dropdown-selector-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.g-recaptcha {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tag.label.label-info {
|
||||
background-color: $color-concrete;
|
||||
}
|
||||
|
||||
.select-container--with-blank {
|
||||
input.search-field::placeholder {
|
||||
color: $color-black;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input.search-field:focus::placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Disable textarea resizing throughout application
|
||||
|
|
@ -1493,13 +1534,34 @@ a.disabled-with-click-events {
|
|||
}
|
||||
|
||||
.form-select {
|
||||
border: 1px solid $color-silver-chalice;
|
||||
border-radius: 4px;
|
||||
color: $color-emperor;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
min-height: 36px;
|
||||
outline: 0;
|
||||
padding: 8px 42px 3px 3px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
select {
|
||||
border: 1px solid $color-silver-chalice;
|
||||
border-radius: 4px;
|
||||
color: $color-emperor;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
min-height: 36px;
|
||||
outline: 0;
|
||||
padding: 8px 42px 3px 3px;
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
content: "\f0d7";
|
||||
color: $color-silver-chalice;
|
||||
padding: 12px 8px;
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
top: -6px;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -165,7 +165,10 @@ module Users
|
|||
.joins(:user_teams)
|
||||
.where('user_teams.role': UserTeam.roles[:admin])
|
||||
.distinct
|
||||
.select { |team| can_invite_team_users?(team) }
|
||||
|
||||
teams = teams.where('name ILIKE ?', "%#{params[:query]}%") if params[:query].present?
|
||||
|
||||
teams.select { |team| can_invite_team_users?(team) }
|
||||
|
||||
render json: teams.map { |t| { value: t.id, label: t.name } }.to_json
|
||||
end
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
text_title ||= nil
|
||||
text_invite_heading ||= nil
|
||||
invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))
|
||||
invite_with_team_selector = type.in?(%w(invite_new_members invite_with_team_selector invite_with_team_selector_and_role))
|
||||
%>
|
||||
<div
|
||||
class="modal modal-invite-users"
|
||||
|
|
@ -71,13 +72,25 @@ invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))
|
|||
<% end %>
|
||||
</p>
|
||||
|
||||
<div class="user-selector">
|
||||
<select class="emails-input" multiple data-role="tags-input" name="emails[]">
|
||||
</select>
|
||||
<h4><%= t('invite_users.input_subtitle') %></h4>
|
||||
</div>
|
||||
<% if type == 'invite_new_members' %>
|
||||
<p><%= t('invite_users.new_members.description') %></p>
|
||||
<h4 class="heading">
|
||||
<span><%= t('invite_users.new_members.input_label') %></span>
|
||||
</h4>
|
||||
<div class="emails-selector" >
|
||||
<select class="email-tags-input" multiple data-role="tags-input" name="emails[]">
|
||||
</select>
|
||||
<p><small><%= t('invite_users.new_members.input_subtitle') %></small></p>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="user-selector">
|
||||
<select class="emails-input" multiple data-role="tags-input" name="emails[]">
|
||||
</select>
|
||||
<h4><%= t('invite_users.input_subtitle') %></h4>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if current_user && type.in?(['invite_with_team_selector', 'invite_with_team_selector_and_role']) %>
|
||||
<% if current_user && invite_with_team_selector %>
|
||||
<% # Only allow inviting to teams where user is admin %>
|
||||
<div class="team-selector">
|
||||
<h4 class="heading">
|
||||
|
|
@ -98,11 +111,13 @@ invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))
|
|||
<h4 class="heading">
|
||||
<span><%= t('invite_users.select_team_role') %></span>
|
||||
</h4>
|
||||
<%= select_tag "role",
|
||||
options_for_select(UserTeam.roles.keys
|
||||
.map { |k| [k.humanize + (k == 'normal_user' ? " (#{t('invite_users.default')})" : ''), k] }, 'normal_user'),
|
||||
disabled: true, class: "role-input from-control form-select"
|
||||
%>
|
||||
<div class="form-select">
|
||||
<%= select_tag "role",
|
||||
options_for_select(UserTeam.roles.keys
|
||||
.map { |k| [k.humanize + (k == 'normal_user' ? " (#{t('invite_users.default')})" : ''), k] }, 'normal_user'),
|
||||
disabled: true, class: "role-input from-control"
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2209,6 +2209,11 @@ en:
|
|||
no_team:
|
||||
title: "Invite users to SciNote"
|
||||
heading: "Invite more people to start using SciNote."
|
||||
new_members:
|
||||
description: "Invite people to your organization to start using SciNote"
|
||||
input_placeholder: "jsmith@someemail.com"
|
||||
input_label: "New member emails"
|
||||
input_subtitle: "You can enter one or more emails. To confirm each one press the ENTER key."
|
||||
input_subtitle: "You can enter one or more emails. To confirm each one press the ENTER key."
|
||||
invite_to_team_heading: "Invite users to my team:"
|
||||
invite_btn: "Invite members"
|
||||
|
|
|
|||
Loading…
Reference in a new issue