Merge pull request #3445 from artoscinote/ma_SCI_5898

Fixed UX issues in user invites modal [SCI-5898]

app/assets/javascripts/sitewide/dropdown_selector.js

@@ -48,10 +48,12 @@
 
 
 */
+
 var dropdownSelector = (function() {
   // /////////////////////
   // Support functions //
   // ////////////////////
+  const MAX_DROPDOWN_HEIGHT = 320;
 
   // Change direction of dropdown depends of container position
   function updateDropdownDirection(selector, container) {
@@ -77,13 +79,15 @@ var dropdownSelector = (function() {
 
     if ((modalContainerBottom + bottomSpace) < bottomTreshold) {
       container.addClass('inverse');
-      container.find('.dropdown-container').css('max-height', `${(containerPosition - 122 + maxHeight)}px`)
+      maxHeight = Math.min(containerPosition - 122 + maxHeight, MAX_DROPDOWN_HEIGHT);
+      container.find('.dropdown-container').css('max-height', `${maxHeight}px`)
         .css('margin-bottom', `${(containerPosition * -1)}px`)
         .css('left', `${containerPositionLeft}px`)
         .css('width', `${containerWidth}px`);
     } else {
       container.removeClass('inverse');
-      container.find('.dropdown-container').css('max-height', `${(bottomSpace - 32 + maxHeight)}px`)
+      maxHeight = Math.min(bottomSpace - 32 + maxHeight, MAX_DROPDOWN_HEIGHT);
+      container.find('.dropdown-container').css('max-height', `${maxHeight}px`)
         .css('width', `${containerWidth}px`)
         .css('left', `${containerPositionLeft}px`)
         .css('margin-top', `${(bottomSpace * -1)}px`);
@@ -254,8 +258,8 @@ var dropdownSelector = (function() {
     updateTags(selector, container, { select: true });
   }
 
-  // intialization keyboard control
-  function initKeyboardControl(container) {
+  // initialize keyboard control
+  function initKeyboardControl(selector, container) {
     container.find('.search-field').keydown(function(e) {
       var dropdownContainer = container.find('.dropdown-container');
       var pressedKey = e.keyCode;
@@ -265,20 +269,22 @@ var dropdownSelector = (function() {
         dropdownContainer.find('.dropdown-option').first().addClass('highlight');
       }
 
-      if (pressedKey === 38) {
+      if (pressedKey === 38) { // arrow up
         if (selectedOption.prev('.dropdown-option').length) {
           selectedOption.removeClass('highlight').prev().addClass('highlight');
         }
         if (selectedOption.prev('.delimiter').length) {
           selectedOption.removeClass('highlight').prev().prev().addClass('highlight');
         }
-      } else if (pressedKey === 40) {
+      } else if (pressedKey === 40) { // arrow down
         if (selectedOption.next('.dropdown-option').length) {
           selectedOption.removeClass('highlight').next().addClass('highlight');
         }
         if (selectedOption.next('.delimiter').length) {
           selectedOption.removeClass('highlight').next().next().addClass('highlight');
         }
+      } else if (pressedKey === 8 && e.target.value === '') { // backspace
+        deleteTag(selector, container, container.find('.ds-tags .fa-times').last());
       }
     });
   }
@@ -485,10 +491,10 @@ var dropdownSelector = (function() {
       dropdownContainer.addClass('disable-search');
     }
 
-    // initialization keyboard controll
-    initKeyboardControl(dropdownContainer);
+    // initialization keyboard control
+    initKeyboardControl(selector, dropdownContainer);
 
-    // In some case dropdown position not correclty calculated
+    // In some case dropdown position not correctly calculated
     updateDropdownDirection(selectElement, dropdownContainer);
   }
 
@@ -663,6 +669,25 @@ var dropdownSelector = (function() {
     updateTags(selector, container, { select: true });
   }
 
+  function deleteTag(selector, container, target) {
+    var tagLabel = target.prev();
+
+    // Start delete animation
+    target.parent().addClass('closing');
+
+    // Add timeout for deleting animation
+    setTimeout(() => {
+      if (selector.data('combine-tags')) {
+        // if we use combine-tags options we simply clear all values
+        container.find('.data-field').val('[]');
+        updateTags(selector, container);
+      } else {
+        // Or delete specific one
+        deleteValue(selector, container, tagLabel.data('ds-tag-id'), tagLabel.data('ds-tag-group'));
+      }
+    }, 350);
+  }
+
   // Refresh tags in input field
   function updateTags(selector, container, config = {}) {
     var selectedOptions = getCurrentData(container);
@@ -696,22 +721,8 @@ var dropdownSelector = (function() {
 
       // Now we need add delete action to tag
       tag.find('.fa-times').click(function(e) {
-        var tagLabel = $(this).prev();
-        var toDelete;
         e.stopPropagation();
-        // Start delete animation
-        $(this).parent().addClass('closing');
-        // Add timeout for deleting animation
-        setTimeout(() => {
-          if (selector.data('combine-tags')) {
-            // if we use combine-tags optons we simply clear all values
-            container.find('.data-field').val('[]');
-            updateTags(selector, container);
-          } else {
-            // Or delete specific one
-            deleteValue(selector, container, tagLabel.data('ds-tag-id'), tagLabel.data('ds-tag-group'));
-          }
-        }, 350);
+        deleteTag(selector, container, $(this));
       });
     }
 

app/assets/javascripts/users/settings/teams/invite_users_modal.js

@@ -61,6 +61,14 @@
       }
     });
 
+    dropdownSelector.init('#role', {
+      noEmptyOption: true,
+      singleSelect: true,
+      closeOnSelect: true,
+      selectAppearance: 'simple',
+      disableSearch: true
+    });
+
     modal.off('show.bs.modal').on('show.bs.modal', function() {
       // This cannot be scoped outside this function
       // because it is generated via JS
@@ -121,7 +129,7 @@
         var data = {
           emails: dropdownSelector.getValues(emailsInput),
           team_ids: dropdownSelector.getValues(teamsInput),
-          role: roleInput.val(),
+          role: dropdownSelector.getValues(roleInput),
           'g-recaptcha-response': $('#recaptcha-invite-modal').val()
         };
 

app/assets/stylesheets/projects.scss

@@ -514,12 +514,14 @@ li.module-hover {
       }
     }
 
-    .users-dropdown-list {
+    .dropdown-option.users-dropdown-list {
+      padding: 8px 10px;
+
       .item-avatar {
         border-radius: 50%;
-        height: 20px;
-        margin: 0 .5em 0 0;
-        width: 20px;
+        height: 32px;
+        margin: 0 16px 0 0;
+        width: 32px;
       }
     }
   }

app/assets/stylesheets/settings/teams.scss

@@ -189,14 +189,15 @@
       }
     }
 
-    .users-dropdown-list {
+    .dropdown-option.users-dropdown-list {
       border-top: 1px solid $color-gainsboro;
+      padding: 8px 10px;
 
       .item-avatar {
         border-radius: 50%;
-        height: 20px;
-        margin: 0 .5em 0 0;
-        width: 20px;
+        height: 32px;
+        margin: 0 16px 0 0;
+        width: 32px;
       }
 
       .item-email {

app/assets/stylesheets/shared/dropdown_selector.scss

@@ -18,7 +18,6 @@
 
 .dropdown-selector-container {
   display: inline-block;
-  float: left;
   position: relative;
   width: 100%;
 
@@ -104,7 +103,6 @@
       .tag-label {
         display: inline-block;
         margin-right: 5px;
-        margin-top: 1px;
         max-width: 240px;
         overflow: hidden;
         text-align: left;
@@ -115,6 +113,12 @@
         &[data-ds-tag-id=""] {
           opacity: .7;
         }
+
+        .item-avatar {
+          height: 16px;
+          margin-right: 8px;
+          width: 16px;
+        }
       }
 
       .fas {

app/assets/stylesheets/themes/scinote.scss

@@ -133,6 +133,10 @@ body {
   }
 }
 
+.modal-header h4 {
+  font-size: 18px;
+}
+
 .jumbotron {
   background-color: inherit;
 }
@@ -1349,14 +1353,7 @@ body > .loading-overlay {
     margin-top: 20px;
   }
 
-  h4 {
-    font-size: 14px;
-    margin-bottom: 5px;
-  }
-
   .select-container--with-blank {
-    overflow: hidden;
-
     .search-field::placeholder {
       color: $color-black;
       opacity: 1;

app/javascript/src/config/locales/messages.js

@@ -44,7 +44,7 @@ export default {
       info_label: "Info"
     },
     invite_users: {
-      modal_title: "Invite users to team {team}",
+      modal_title: "Invite members to {team}",
       input_text: "Invite more people to team {team} and start using SciNote.",
       input_help:
         "Input one or multiple emails, confirm each email with ENTER key.",

config/locales/en.yml

@@ -2204,7 +2204,7 @@ en:
 
   invite_users:
     to_team:
-      title: "Invite users to team %{team}"
+      title: "Invite members to %{team}"
       heading: "Invite more people to team %{team} and start using SciNote."
     no_team:
       title: "Invite users to SciNote"