diff --git a/src/pretix/static/pretixcontrol/js/ui/main.js b/src/pretix/static/pretixcontrol/js/ui/main.js index b8f31d7283..38d7edc5ca 100644 --- a/src/pretix/static/pretixcontrol/js/ui/main.js +++ b/src/pretix/static/pretixcontrol/js/ui/main.js @@ -446,6 +446,15 @@ let form_handlers = function (el) { }) }) + function addClearButton($input) { + var $btn = $("").insertAfter($input).on('click', function(e) { + $input.val('').trigger('input').trigger('change'); e.preventDefault() + }).toggle($input.val() !== '') + $input.on('input', function() { + $btn.toggle($input.val() !== '') + }) + } + el.find('div.scrolling-choice:not(.no-search)').each(function () { if ($(this).find('input[type=text]').length > 0) { return @@ -453,6 +462,7 @@ let form_handlers = function (el) { let $menu = $('
').addClass('choice-options-menu') let $inp_search = $('').addClass('form-control').attr('type', 'text').attr('placeholder', gettext('Search query')) $menu.append($inp_search) + addClearButton($inp_search) $(this).prepend($menu) $inp_search.on('keyup change', function (e) { @@ -481,6 +491,7 @@ let form_handlers = function (el) { $menu.append($lbl_tgl) } $(this).prepend($menu) + addClearButton($inp_search) $(this).find('.choice-options-none').click(function (e) { $(this).closest('.scrolling-multiple-choice').find('input[type=checkbox]:not(.menu-checkbox)').prop('checked', false) diff --git a/src/pretix/static/pretixcontrol/scss/_forms.scss b/src/pretix/static/pretixcontrol/scss/_forms.scss index dfffbee25d..f23026b6b5 100644 --- a/src/pretix/static/pretixcontrol/scss/_forms.scss +++ b/src/pretix/static/pretixcontrol/scss/_forms.scss @@ -417,6 +417,8 @@ div.scrolling-multiple-choice, div.scrolling-choice { } } } +.clear-input-button { width: 2em; margin-left: -3em; margin-right: 1em; height: 2em; background: transparent; border: 0; color: #aaa; } +.clear-input-button:hover { color: #777; } .team-permission-groups { border: 1px solid $input-border; border-radius: $input-border-radius;