diff --git a/app/assets/images/favicon.ico b/app/assets/images/favicon.ico index 87f76573c..d483951ee 100644 Binary files a/app/assets/images/favicon.ico and b/app/assets/images/favicon.ico differ diff --git a/app/assets/javascripts/repository_columns/columns_initializers/checklist_column_type.js b/app/assets/javascripts/repository_columns/columns_initializers/checklist_column_type.js index 05421454f..b4051ddf4 100644 --- a/app/assets/javascripts/repository_columns/columns_initializers/checklist_column_type.js +++ b/app/assets/javascripts/repository_columns/columns_initializers/checklist_column_type.js @@ -1,4 +1,4 @@ -/* global GLOBAL_CONSTANTS dropdownSelector RepositoryListColumnType */ +/* global GLOBAL_CONSTANTS dropdownSelector RepositoryListColumnType I18n */ var RepositoryChecklistColumnType = (function() { var manageModal = '#manage-repository-column'; @@ -15,6 +15,12 @@ var RepositoryChecklistColumnType = (function() { }); } + function initUpdatePlaceholder(delimiter) { + var value = delimiter.value; + var placeholder = I18n.t('libraries.manange_modal_column.checklist_type.items_placeholders.' + value); + $(itemsTextarea).attr('placeholder', placeholder); + } + function initDropdownItemsTextArea() { var $manageModal = $(manageModal); var columnNameInput = '#repository-column-name'; @@ -42,6 +48,7 @@ var RepositoryChecklistColumnType = (function() { dropdownOptions ); initChecklistDropdown(); + initUpdatePlaceholder(this); }) .on('columnModal::partialLoadedForRepositoryChecklistValue', function() { RepositoryListColumnType.refreshPreviewDropdownList( @@ -72,6 +79,12 @@ var RepositoryChecklistColumnType = (function() { repositoryColumnParams.repository_checklist_items_attributes = options; repositoryColumnParams.metadata = { delimiter: $(delimiterDropdown).data('used-delimiter') }; return repositoryColumnParams; + }, + initChecklistDropdown: () => { + initChecklistDropdown(); + }, + initChecklistPlaceholder: () => { + initUpdatePlaceholder($(delimiterDropdown)[0]); } }; }()); diff --git a/app/assets/javascripts/repository_columns/columns_initializers/list_column_type.js b/app/assets/javascripts/repository_columns/columns_initializers/list_column_type.js index 3de9129e9..7142e02a5 100644 --- a/app/assets/javascripts/repository_columns/columns_initializers/list_column_type.js +++ b/app/assets/javascripts/repository_columns/columns_initializers/list_column_type.js @@ -1,4 +1,4 @@ -/* global GLOBAL_CONSTANTS */ +/* global GLOBAL_CONSTANTS dropdownSelector I18n */ /* eslint-disable no-unused-vars */ var RepositoryListColumnType = (function() { var manageModal = '#manage-repository-column'; @@ -7,6 +7,21 @@ var RepositoryListColumnType = (function() { var previewContainer = '.list-column-type .dropdown-preview'; var dropdownOptions = '.list-column-type #dropdown-options'; + function initListDropdown() { + dropdownSelector.init(previewContainer + ' .preview-select', { + noEmptyOption: true, + singleSelect: true, + selectAppearance: 'simple', + closeOnSelect: true + }); + } + + function initUpdatePlaceholder(delimiter) { + var value = delimiter.value; + var placeholder = I18n.t('libraries.manange_modal_column.list_type.items_placeholders.' + value); + $(itemsTextarea).attr('placeholder', placeholder); + } + function onlyUnique(value, index, self) { return self.indexOf(value) === index; } @@ -113,15 +128,18 @@ var RepositoryListColumnType = (function() { delimiterDropdown, dropdownOptions ); + initListDropdown(); $('.changing-existing-list-items-warning').removeClass('hidden'); }) .on('change', delimiterDropdown, function() { + initUpdatePlaceholder(this); refreshPreviewDropdownList( previewContainer, itemsTextarea, delimiterDropdown, dropdownOptions ); + initListDropdown(); }) .on('columnModal::partialLoadedForRepositoryListValue', function() { refreshPreviewDropdownList( @@ -130,6 +148,7 @@ var RepositoryListColumnType = (function() { delimiterDropdown, dropdownOptions ); + initListDropdown(); }) .on('keyup change', columnNameInput, function() { $manageModal.find(previewContainer).find('.preview-label').html($manageModal.find(columnNameInput).val()); @@ -155,6 +174,14 @@ var RepositoryListColumnType = (function() { refreshPreviewDropdownList: (preview, textarea, delimiter, dropdown) => { refreshPreviewDropdownList(preview, textarea, delimiter, dropdown); + }, + + initListDropdown: () => { + initListDropdown(); + }, + + initListPlaceholder: () => { + initUpdatePlaceholder($(delimiterDropdown)[0]); } }; }()); diff --git a/app/assets/javascripts/repository_columns/index.js b/app/assets/javascripts/repository_columns/index.js index bedf651a9..c9ec99681 100644 --- a/app/assets/javascripts/repository_columns/index.js +++ b/app/assets/javascripts/repository_columns/index.js @@ -149,6 +149,20 @@ var RepositoryColumns = (function() { var button = $(this); var modalUrl = button.data('modal-url'); var columnType; + var delimiterOptionsRender = function(data) { + return `${data.params.icon}${data.label}`; + }; + var delimiterDropdownConfig = { + singleSelect: true, + noEmptyOption: true, + selectAppearance: 'simple', + closeOnSelect: true, + optionClass: 'delimiter-icon-dropdown', + optionLabel: delimiterOptionsRender, + tagClass: 'delimiter-icon-dropdown', + tagLabel: delimiterOptionsRender, + disableSearch: true + }; $.get(modalUrl, (data) => { $manageModal.find('.modal-content').html(data.html) .find('#repository-column-name') @@ -159,8 +173,18 @@ var RepositoryColumns = (function() { singleSelect: true, closeOnSelect: true, optionClass: 'custom-option', - selectAppearance: 'simple' + selectAppearance: 'simple', + disableSearch: true }); + + dropdownSelector.init('.list-column-type .delimiter', delimiterDropdownConfig); + RepositoryListColumnType.initListDropdown(); + RepositoryListColumnType.initListPlaceholder(); + + dropdownSelector.init('.checklist-column-type .delimiter', delimiterDropdownConfig); + RepositoryChecklistColumnType.initChecklistDropdown(); + RepositoryChecklistColumnType.initChecklistPlaceholder(); + $manageModal .trigger('columnModal::partialLoadedFor' + columnType); diff --git a/app/assets/javascripts/sitewide/dropdown_selector.js b/app/assets/javascripts/sitewide/dropdown_selector.js index c276e8109..8e7500908 100644 --- a/app/assets/javascripts/sitewide/dropdown_selector.js +++ b/app/assets/javascripts/sitewide/dropdown_selector.js @@ -40,6 +40,7 @@ singleSelect: boolean, // disable multiple select. default 'false' selectAppearance: string, // 'tag' or 'simple'. Default 'tag' closeOnSelect: boolean, // Close dropdown after select + disableSearch: boolean, // Disable search } @@ -153,6 +154,9 @@ var dropdownSelector = (function() { // Read option to JSON function convertOptionToJson(option) { + if (option === undefined) { + return { label: '', value: '', params: {} }; + } return { label: option.innerHTML, value: option.value, @@ -424,6 +428,11 @@ var dropdownSelector = (function() { dropdownContainer.addClass('simple-mode'); } + // Disable search + if (config.disableSearch) { + dropdownContainer.addClass('disable-search'); + } + // initialization keyboard controll initKeyboardControl(dropdownContainer); @@ -615,7 +624,7 @@ var dropdownSelector = (function() { // Add new tag before search field var tag = $(`