From cd471bfb257da009bdb71cccf6657cac96d52d1c Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Mon, 20 Jan 2020 14:26:17 +0100 Subject: [PATCH] Update delimiter dropdown for manage column modal --- app/assets/images/favicon.ico | Bin 15406 -> 1150 bytes .../checklist_column_type.js | 15 ++++++++- .../columns_initializers/list_column_type.js | 29 +++++++++++++++++- .../javascripts/repository_columns/index.js | 26 +++++++++++++++- .../javascripts/sitewide/dropdown_selector.js | 14 +++++++-- .../stylesheets/repository_columns/index.scss | 24 ++++++++++++++- .../stylesheets/shared/dropdown_selector.scss | 12 ++++++-- .../_checklist.html.erb | 9 +++++- .../manage_column_partials/_list.html.erb | 9 +++++- config/initializers/constants.rb | 8 +++++ config/locales/en.yml | 12 ++++++++ 11 files changed, 147 insertions(+), 11 deletions(-) diff --git a/app/assets/images/favicon.ico b/app/assets/images/favicon.ico index 87f76573c5e2f34b68474344b974196c19ab3316..d483951ee70d65910b838f3ab96ffc75e0efcf4e 100644 GIT binary patch literal 1150 zcmdtf&nv@m9LMp`jQN!s&0@YZqRc@k5?Yd4B&Mc@GLq7Y+J)QVKTt|JIIx3Sjic+# zO>QV9nv^(@9ab)y=li=K%4JRt-s`dN`tJ4a^ZtB3N*VZ=&5CckS}s(|s+4L4uXvMw z&qFEx`)_sN)|%i!06sLbM+1g1g6ys>{Pv<5xgsCKZRUBy^I~Vz)=uCEXDCGpw($uc zaz)+=JIXMH{;fQc`xBWHxkg- zC+kN7Yl!0ta(<^b6MZ9%71=9l$)VT4pA zT{RzhZ9P fZ+iYJli~!k^qVSXWnqHcf*4Fo#mPp$^V0VPT%@0i literal 15406 zcmeI23yd9A8OLV<7ojSxw%y&Cx#h~ELQ@1ogTYreNUNp0cjnftwotVsSdbQt5#u{< zBmpCVC@Q#--TN$r#Sp2Lq!C3RDuqVWEs*%ALa|yzN_hlY`tbL^cjoT7vv=;JW;d10 zN&feoIj`?O-~G;aUSnBZ*0I*?*%ooyy5cy?I?uAKbh`R{#vIEUBk!DZg7Sry^_zK? zbp~~4LW^oX(d#md4B96avd%!!ORX(^@PB|%f(SG6&8!z2WdKE|;c~-%99xeLr zi$&kr26mI)RTyv`>TCv&7Pw?Zl`9$l8pp$0uyQp(32>G>?&)Q@$dM}hRw&uaQP+7kOdSM>? zZBW=u{%5IU%5EvYPGICApK&jl{6Cz>TgYEZxz-~`EPuG)IXI3NfrBLRWXTJxZ!#cfY zcRN`--%p)KChIwW)7S`PMCJdAeC=V(&`^FMW4{YIdkk69pH=qVHH@|A&HTEw=l-)e z*dx1AFy-&yd446g{%4AObhr>()?T1)e1**@f1CD4l#i6M&YjrBZM^?=Mb93L*#G&o z`BngP9}sq>cu`QUdTY^fihg%QW$Rg$r!(9(XwPL#ZEqxdy5)~%=Dry{J`^W=I_2m3 z({GdyZzh|vgVUjVjbVJ}?ewoP-VoUPtCY!qPD{YBx>{jc1Sg#)8b~zof1?4NljuNe zElAEuP(l(C4I~;!G>~W@(ZErv0qw=Lr_5*U_m=#W&p!2Hp^&vb_7&%`Uwvy6>N=m) zl)uD4v-)ONi;XtAx0_`awo2#x^z4%7d;*U5u=n{(upifXzzYGC-o?8-R`gTX2KSxO zZqsD^5$p<}d%!`^DqKK?CqdXw=VW?^wn9mFgW1YH`VbuJ&Jg0BIa7F|>^mRS{iPw~ zRMNYF_Wpv-jy?+Fg3fex&hTdtwo$D2(0|xg;7)Z@98dD~PI2$Gt2pRLcVXz1zs@c1 z2HI;MF@Mg#KNRelrF(IG3j4`%e!X7*jm81zOB=}l1u)OE4zm~kwQ>L634i@>x?gW} zuH2FS$Cmfb<6Lbs+#W7u`qt=dgnp-ldzPPeJatAu&Bl1|XE;ac4=T6Iznl7B1hOwv z?_s(l{*^Ng?h5YWoGjoG8)5eYCV$dwXE|_|E#VOxaU8-;vK(XvJUS zbsGrvtoQ(UF_L%0{6~i7oK(u%OF3`-ioP!i&L>|sb#9~&GPZBP{<@K`(2Rc{<#z&; zyZ(b;f>I>^NceZ<{nRqJZN(n`jsL0lGsc(=`0vN}+^GKu*SiTbj)AhP{HXk#@~Oi_e#pS4 zv>)ydoNIN@VG2TdUAj*$dG^(mZ!7!uGP9g?Gyd{5(eEw7=56sWt~mKjcus)2^<;Uu zp1Fp82<^^HR$x2M&+@2e8Vw{KQf3k(!bWmHvn_I8ciz6ru_9C2fpO~I3DWZ zCTv;rF7NPoT)jyC0se~zM(e)~X~h3_x_?uJW&BSpe~mNtg<2cq%ctsId1kkFvv%ft zp>@nrTY$b5dJ^me>F zm=oOfO|coc)bbj2E}PQ606)7h=k=Ub<~v>Od2g(Kr`o8A@{R%8cZZOF(jKu@=%zy0 zM)8T?TRPW9Pa1P|W7XsxrdxGB)8)mF_sn8Hu5U+z? { + 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'