From eb708e4226ec008d3da979bfe186a80e49e37acd Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Fri, 6 Dec 2019 16:14:16 +0100 Subject: [PATCH] Update dropdown for column type selection --- .../javascripts/repository_columns/index.js | 10 +++++- .../javascripts/sitewide/dropdown_selector.js | 31 ++++++++++++++++--- .../stylesheets/repository_columns/index.scss | 6 ++++ .../stylesheets/shared/dropdown_selector.scss | 6 ++++ .../_manage_column_modal_content.html.erb | 31 +++++++++++-------- 5 files changed, 65 insertions(+), 19 deletions(-) diff --git a/app/assets/javascripts/repository_columns/index.js b/app/assets/javascripts/repository_columns/index.js index b7fd98625..1f27e5b93 100644 --- a/app/assets/javascripts/repository_columns/index.js +++ b/app/assets/javascripts/repository_columns/index.js @@ -1,4 +1,5 @@ -/* global I18n HelperModule animateSpinner RepositoryListColumnType RepositoryStatusColumnType */ +/* global I18n HelperModule animateSpinner RepositoryListColumnType */ +/* global RepositoryStatusColumnType dropdownSelector */ /* eslint-disable no-restricted-globals */ var RepositoryColumns = (function() { var manageModal = '#manage-repository-column'; @@ -177,6 +178,13 @@ var RepositoryColumns = (function() { .find('#repository-column-name') .focus(); columnType = $('#repository-column-data-type').val(); + dropdownSelector.init('#repository-column-data-type', { + noEmptyOption: true, + singleSelect: true, + closeOnSelect: true, + optionClass: 'custom-option', + selectAppearance: 'simple' + }); $manageModal .trigger('columnModal::partialLoadedFor' + columnType); diff --git a/app/assets/javascripts/sitewide/dropdown_selector.js b/app/assets/javascripts/sitewide/dropdown_selector.js index af6a66158..08d30a4d6 100644 --- a/app/assets/javascripts/sitewide/dropdown_selector.js +++ b/app/assets/javascripts/sitewide/dropdown_selector.js @@ -223,11 +223,17 @@ var dropdownSelector = (function() { if (pressedKey === 38) { if (selectedOption.prev('.dropdown-option').length) { - selectedOption.removeClass('highlight').prev('.dropdown-option').addClass('highlight'); + selectedOption.removeClass('highlight').prev().addClass('highlight'); + } + if (selectedOption.prev('.delimiter').length) { + selectedOption.removeClass('highlight').prev().prev().addClass('highlight'); } } else if (pressedKey === 40) { if (selectedOption.next('.dropdown-option').length) { - selectedOption.removeClass('highlight').next('.dropdown-option').addClass('highlight'); + selectedOption.removeClass('highlight').next().addClass('highlight'); + } + if (selectedOption.next('.delimiter').length) { + selectedOption.removeClass('highlight').next().next().addClass('highlight'); } } }); @@ -436,6 +442,11 @@ var dropdownSelector = (function() { `); } + // Draw delimiter object + function drawDelimiter() { + return $('
'); + } + // Draw group object function drawGroup(group) { return $(` @@ -452,13 +463,14 @@ var dropdownSelector = (function() { if (selector.data('config').singleSelect) { $container.find('.dropdown-option').removeClass('select'); updateCurrentData($container, []); + selector.val($(this).data('value')).change(); } $(this).toggleClass('select'); saveData(selector, $container); } // Remove placeholder from option container - container.find('.dropdown-group, .dropdown-option, .empty-dropdown').remove(); + container.find('.dropdown-group, .dropdown-option, .empty-dropdown, .delimiter').remove(); if (!data) return; if (data.length > 0) { @@ -495,7 +507,12 @@ var dropdownSelector = (function() { } else { // For simple options we only draw them $.each(data, function(oi, option) { - var optionElement = drawOption(selector, option); + var optionElement; + if (option.delimiter) { + drawDelimiter().appendTo(container.find('.dropdown-container')); + return; + } + optionElement = drawOption(selector, option); optionElement.click(clickOption); optionElement.appendTo(container.find('.dropdown-container')); }); @@ -701,7 +718,11 @@ var dropdownSelector = (function() { } else { options = filterOptions(selector, container, selector.find('option')); $.each(options, function(oi, option) { - result.push({ label: option.innerHTML, value: option.value }); + result.push({ + label: option.innerHTML, + value: option.value, + delimiter: option.dataset.delimiter + }); }); } return result; diff --git a/app/assets/stylesheets/repository_columns/index.scss b/app/assets/stylesheets/repository_columns/index.scss index 0ffce53a5..cc0766fca 100644 --- a/app/assets/stylesheets/repository_columns/index.scss +++ b/app/assets/stylesheets/repository_columns/index.scss @@ -16,5 +16,11 @@ position: relative; top: -2px; } + + #repository-column-data-type + .dropdown-selector-container { + .custom-option { + padding: 0 25px; + } + } } diff --git a/app/assets/stylesheets/shared/dropdown_selector.scss b/app/assets/stylesheets/shared/dropdown_selector.scss index 437dec97a..e4a27b23a 100644 --- a/app/assets/stylesheets/shared/dropdown_selector.scss +++ b/app/assets/stylesheets/shared/dropdown_selector.scss @@ -119,6 +119,12 @@ text-align: center; } + .delimiter { + background: $color-alto; + height: 1px; + margin: 5px 16px; + } + .dropdown-select-all { background: $color-white; border: 0; diff --git a/app/views/repository_columns/_manage_column_modal_content.html.erb b/app/views/repository_columns/_manage_column_modal_content.html.erb index 79fd36737..772583cca 100644 --- a/app/views/repository_columns/_manage_column_modal_content.html.erb +++ b/app/views/repository_columns/_manage_column_modal_content.html.erb @@ -30,25 +30,13 @@