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 = $(`
${label} @@ -740,7 +749,8 @@ var dropdownSelector = (function() { result.push({ label: option.innerHTML, value: option.value, - delimiter: option.dataset.delimiter + delimiter: option.dataset.delimiter, + params: JSON.parse(option.dataset.params || '{}') }); }); } diff --git a/app/assets/stylesheets/repository_columns/index.scss b/app/assets/stylesheets/repository_columns/index.scss index b498e8bdf..24c9f47c9 100644 --- a/app/assets/stylesheets/repository_columns/index.scss +++ b/app/assets/stylesheets/repository_columns/index.scss @@ -44,12 +44,34 @@ .form-control { font-size: 14px; - height: 30px; } #items-textarea { height: 120px; } + + .dropdown-selector-container { + .delimiter-icon-dropdown { + + .tag-label { + align-items: center; + display: flex; + } + + .icon { + background: $color-concrete; + border-radius: $border-radius-default; + display: inline-block; + font-size: 20px; + font-weight: bold; + line-height: 24px; + margin-right: 5px; + text-align: center; + transition: .3s; + width: 24px; + } + } + } } .modal-footer { diff --git a/app/assets/stylesheets/shared/dropdown_selector.scss b/app/assets/stylesheets/shared/dropdown_selector.scss index 510284f50..690ac4206 100644 --- a/app/assets/stylesheets/shared/dropdown_selector.scss +++ b/app/assets/stylesheets/shared/dropdown_selector.scss @@ -244,7 +244,7 @@ .ds-simple { .tag-label { - overflow: hiddens; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @@ -296,7 +296,7 @@ } } - &.simple-mode { + &.simple-mode:not(.disable-search) { .search-field { display: block; line-height: 14px; @@ -307,13 +307,19 @@ } .ds-simple { - color: $color-silver-chalice; font-size: 12px; line-height: 14px; + opacity: .6; } } } + &.disable-search { + .search-field { + display: none; + } + } + &.disabled { .input-field { diff --git a/app/views/repository_columns/manage_column_partials/_checklist.html.erb b/app/views/repository_columns/manage_column_partials/_checklist.html.erb index cfa36aecf..b9ce67294 100644 --- a/app/views/repository_columns/manage_column_partials/_checklist.html.erb +++ b/app/views/repository_columns/manage_column_partials/_checklist.html.erb @@ -10,7 +10,14 @@ <%= t('libraries.manange_modal_column.list_type.delimiter_label') %>
- <%= select_tag('delimiter', options_for_select(delimiters, selected_delimiter), class: 'form-control delimiter', disabled: !column.new_record?) %> +
diff --git a/app/views/repository_columns/manage_column_partials/_list.html.erb b/app/views/repository_columns/manage_column_partials/_list.html.erb index 58f05982e..2abad602d 100644 --- a/app/views/repository_columns/manage_column_partials/_list.html.erb +++ b/app/views/repository_columns/manage_column_partials/_list.html.erb @@ -10,7 +10,14 @@ <%= t('libraries.manange_modal_column.list_type.delimiter_label') %>
- <%= select_tag('delimiter', options_for_select(delimiters, selected_delimiter), class: 'form-control delimiter', disabled: !column.new_record?) %> +
diff --git a/config/initializers/constants.rb b/config/initializers/constants.rb index ba1a3e832..62bbc50cc 100644 --- a/config/initializers/constants.rb +++ b/config/initializers/constants.rb @@ -989,6 +989,14 @@ class Constants space: ' ' }.freeze + REPOSITORY_LIST_ITEMS_DELIMITERS_ICON_MAP = { + auto: "*", + return: "↵", + comma: ',', + semicolon: ';', + space: '⎵' + }.freeze + IMPORT_REPOSITORY_ITEMS_LIMIT = 2000 # Very basic regex to check for validity of emails diff --git a/config/locales/en.yml b/config/locales/en.yml index 039119a4f..ced1365e0 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1198,6 +1198,12 @@ en: space: "Space" semicolon: "Semicolon" comma: "Comma" + items_placeholders: + auto: "Enter dropdown list options..." + return: "Enter dropdown list options one per line:\nDropdown list option 1\nDropdown list option 2\n..." + comma: "Enter dropdown list options, separated by commas..." + semicolon: "Enter dropdown list options, separated by semicolons..." + space: "Enter dropdown list options, separated by space..." status_type: status_options_label: "Status options" add_status_label: "Add status option" @@ -1209,6 +1215,12 @@ en: multiple_options: 'options' all_options: 'All options' checklist_items: 'Checklist items' + items_placeholders: + auto: "Enter checklist items..." + return: "Enter checklist items one per line:\nChecklist item 1\nChecklist item 2\n..." + comma: "Enter checklist items, separated by commas..." + semicolon: "Enter checklist items, separated by semicolons..." + space: "Enter checklist items, separated by space..." repository_columns: head_title: '%{repository} | Manage Columns'