From f55761a4918d78b6293a7b01b519e17c8e49154d Mon Sep 17 00:00:00 2001 From: Martin Artnik Date: Mon, 19 Jul 2021 15:42:26 +0200 Subject: [PATCH] Invite member search design fixes [SCI-5892] --- .../javascripts/sitewide/dropdown_selector.js | 55 +++++++++++-------- app/assets/stylesheets/projects.scss | 10 ++-- app/assets/stylesheets/settings/teams.scss | 9 +-- .../stylesheets/shared/dropdown_selector.scss | 8 ++- 4 files changed, 49 insertions(+), 33 deletions(-) diff --git a/app/assets/javascripts/sitewide/dropdown_selector.js b/app/assets/javascripts/sitewide/dropdown_selector.js index 51cac3ab1..6c470fa6c 100644 --- a/app/assets/javascripts/sitewide/dropdown_selector.js +++ b/app/assets/javascripts/sitewide/dropdown_selector.js @@ -77,13 +77,13 @@ var dropdownSelector = (function() { if ((modalContainerBottom + bottomSpace) < bottomTreshold) { container.addClass('inverse'); - container.find('.dropdown-container').css('max-height', `${(containerPosition - 122 + maxHeight)}px`) + container.find('.dropdown-container') .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`) + container.find('.dropdown-container') .css('width', `${containerWidth}px`) .css('left', `${containerPositionLeft}px`) .css('margin-top', `${(bottomSpace * -1)}px`); @@ -254,8 +254,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 +265,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 +487,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 +665,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 +717,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)); }); } diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss index 9648f569f..93ffbb266 100644 --- a/app/assets/stylesheets/projects.scss +++ b/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; } } } diff --git a/app/assets/stylesheets/settings/teams.scss b/app/assets/stylesheets/settings/teams.scss index b62739149..3f610a944 100644 --- a/app/assets/stylesheets/settings/teams.scss +++ b/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 { diff --git a/app/assets/stylesheets/shared/dropdown_selector.scss b/app/assets/stylesheets/shared/dropdown_selector.scss index 31fda90b6..6acc4a19c 100644 --- a/app/assets/stylesheets/shared/dropdown_selector.scss +++ b/app/assets/stylesheets/shared/dropdown_selector.scss @@ -103,7 +103,6 @@ .tag-label { display: inline-block; margin-right: 5px; - margin-top: 1px; max-width: 240px; overflow: hidden; text-align: left; @@ -114,6 +113,12 @@ &[data-ds-tag-id=""] { opacity: .7; } + + .item-avatar { + height: 16px; + margin-right: 8px; + width: 16px; + } } .fas { @@ -134,6 +139,7 @@ bottom: calc(100% - 30px); box-shadow: $flyout-shadow; display: none; + max-height: 320px; overflow: hidden; position: fixed; transition: .2s;