From fb040bee07292392ba956c19b988100ccdb485cc Mon Sep 17 00:00:00 2001 From: Martin Artnik Date: Thu, 8 Jul 2021 16:10:20 +0200 Subject: [PATCH] Fix styling, functionality issues with invite users modal [SCI-5099] --- .../settings/teams/invite_users_modal.js | 19 +++- app/assets/stylesheets/themes/scinote.scss | 88 ++++++++++++++++--- .../users/invitations_controller.rb | 5 +- app/views/shared/_invite_users_modal.html.erb | 37 +++++--- config/locales/en.yml | 5 ++ 5 files changed, 128 insertions(+), 26 deletions(-) diff --git a/app/assets/javascripts/users/settings/teams/invite_users_modal.js b/app/assets/javascripts/users/settings/teams/invite_users_modal.js index f89a5deff..07eac5717 100644 --- a/app/assets/javascripts/users/settings/teams/invite_users_modal.js +++ b/app/assets/javascripts/users/settings/teams/invite_users_modal.js @@ -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() diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index ab5d80afc..75e7cbc69 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -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; + } } diff --git a/app/controllers/users/invitations_controller.rb b/app/controllers/users/invitations_controller.rb index af3b16aba..59c1216f7 100644 --- a/app/controllers/users/invitations_controller.rb +++ b/app/controllers/users/invitations_controller.rb @@ -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 diff --git a/app/views/shared/_invite_users_modal.html.erb b/app/views/shared/_invite_users_modal.html.erb index c92171852..5e5a96155 100644 --- a/app/views/shared/_invite_users_modal.html.erb +++ b/app/views/shared/_invite_users_modal.html.erb @@ -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)) %>

-
- -

<%= t('invite_users.input_subtitle') %>

-
+ <% if type == 'invite_new_members' %> +

<%= t('invite_users.new_members.description') %>

+

+ <%= t('invite_users.new_members.input_label') %> +

+
+ +

<%= t('invite_users.new_members.input_subtitle') %>

+
+ <% else %> +
+ +

<%= t('invite_users.input_subtitle') %>

+
+ <% 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 %>

@@ -98,11 +111,13 @@ invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))

<%= t('invite_users.select_team_role') %>

- <%= 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" - %> +
+ <%= 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" + %> +
diff --git a/config/locales/en.yml b/config/locales/en.yml index 8afec4aab..48f1e799f 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -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"