From d661c8b54e0b484770e79429dca9d32b0abc59f6 Mon Sep 17 00:00:00 2001 From: Kevin Papst Date: Wed, 25 Sep 2019 18:34:25 +0200 Subject: [PATCH] fix closing search dropdown (#1142) * using a different library for javascript selects, fixing the closing search dropdown * fix closing dropdown for daterangepicker * added missing search button for mobile on customer page * fix meta fields with same names than existing columns --- assets/app.js | 17 +++++- assets/js/plugins/KimaiFormSelect.js | 14 +++-- assets/js/plugins/KimaiToolbar.js | 50 ++++++----------- assets/sass/admin-lte.scss | 10 ++++ assets/sass/app.scss | 2 +- assets/sass/selectpicker.scss | 23 ++++++++ assets/sass/variables.scss | 2 + package.json | 3 +- public/build/0.2372f97a.js | 1 - public/build/0.a87622f3.js | 1 + public/build/{1.eec3372c.js => 1.c1bee41f.js} | 0 public/build/2.7be60d8d.js | 1 + public/build/2.ad3e2792.js | 1 - public/build/app.3295d6f6.js | 1 - public/build/app.58c329bf.css | 1 - public/build/app.67d3e582.css | 1 + public/build/app.a361daf0.js | 1 + ...dar.8bb56227.css => calendar.36ef2a02.css} | 0 public/build/calendar.8464f183.js | 1 - public/build/calendar.c55aa90f.js | 1 + .../{chart.a0ca6955.js => chart.0af3f813.js} | 0 public/build/entrypoints.json | 46 ++++++++-------- public/build/manifest.json | 18 +++--- ...untime.f02eb7c9.js => runtime.4ee6be68.js} | 0 src/DependencyInjection/Configuration.php | 2 +- src/Form/Toolbar/AbstractToolbarForm.php | 30 +++------- src/Form/Toolbar/ActivityToolbarForm.php | 1 - src/Form/Toolbar/ExportToolbarForm.php | 5 -- src/Form/Toolbar/InvoiceToolbarForm.php | 6 -- src/Form/Type/TagsSelectType.php | 55 +++++++++++++++++++ src/Repository/Query/TagFormTypeQuery.php | 32 +++++++++++ src/Repository/TagRepository.php | 11 ++++ templates/activity/index.html.twig | 4 +- templates/customer/actions.html.twig | 3 +- templates/customer/index.html.twig | 4 +- templates/project/index.html.twig | 4 +- templates/timesheet-team/index.html.twig | 4 +- templates/timesheet/index.html.twig | 6 +- templates/user/index.html.twig | 4 +- .../SystemConfigurationControllerTest.php | 2 +- .../DependencyInjection/AppExtensionTest.php | 4 +- .../DependencyInjection/ConfigurationTest.php | 2 +- tests/Event/ConfigureMainMenuEventTest.php | 36 ++++++++++++ tests/Event/SystemConfigurationEventTest.php | 37 +++++++++++++ .../Event/UserPreferenceDisplayEventTest.php | 34 ++++++++++++ .../Repository/Query/TagFormTypeQueryTest.php | 29 ++++++++++ yarn.lock | 15 +++-- 47 files changed, 389 insertions(+), 136 deletions(-) create mode 100644 assets/sass/admin-lte.scss create mode 100644 assets/sass/selectpicker.scss delete mode 100644 public/build/0.2372f97a.js create mode 100644 public/build/0.a87622f3.js rename public/build/{1.eec3372c.js => 1.c1bee41f.js} (100%) create mode 100644 public/build/2.7be60d8d.js delete mode 100644 public/build/2.ad3e2792.js delete mode 100644 public/build/app.3295d6f6.js delete mode 100644 public/build/app.58c329bf.css create mode 100644 public/build/app.67d3e582.css create mode 100644 public/build/app.a361daf0.js rename public/build/{calendar.8bb56227.css => calendar.36ef2a02.css} (100%) delete mode 100644 public/build/calendar.8464f183.js create mode 100644 public/build/calendar.c55aa90f.js rename public/build/{chart.a0ca6955.js => chart.0af3f813.js} (100%) rename public/build/{runtime.f02eb7c9.js => runtime.4ee6be68.js} (100%) create mode 100644 src/Form/Type/TagsSelectType.php create mode 100644 src/Repository/Query/TagFormTypeQuery.php create mode 100644 tests/Event/ConfigureMainMenuEventTest.php create mode 100644 tests/Event/SystemConfigurationEventTest.php create mode 100644 tests/Event/UserPreferenceDisplayEventTest.php create mode 100644 tests/Repository/Query/TagFormTypeQueryTest.php diff --git a/assets/app.js b/assets/app.js index 61545143..b0da188a 100644 --- a/assets/app.js +++ b/assets/app.js @@ -11,7 +11,20 @@ global.$ = global.jQuery = $; require('bootstrap-sass'); require('jquery-slimscroll'); -require('bootstrap-select'); +require('select2'); +require('select2/dist/js/i18n/ar'); +require('select2/dist/js/i18n/cs'); +require('select2/dist/js/i18n/de'); +require('select2/dist/js/i18n/es'); +require('select2/dist/js/i18n/fr'); +require('select2/dist/js/i18n/hu'); +require('select2/dist/js/i18n/it'); +require('select2/dist/js/i18n/ja'); +require('select2/dist/js/i18n/ko'); +require('select2/dist/js/i18n/pt-BR'); +require('select2/dist/js/i18n/ru'); +require('select2/dist/js/i18n/sk'); +require('select2/dist/js/i18n/sv'); const Moment = require('moment'); global.moment = Moment; @@ -32,7 +45,7 @@ require('moment/locale/sv'); require('daterangepicker'); // ------ AdminLTE framework ------ -require('../vendor/kevinpapst/adminlte-bundle/Resources/assets/admin-lte.scss'); +require('./sass/admin-lte.scss'); require('admin-lte/dist/css/AdminLTE.min.css'); require('admin-lte/dist/css/skins/_all-skins.css'); require('../vendor/kevinpapst/adminlte-bundle/Resources/assets/admin-lte-extensions.scss'); diff --git a/assets/js/plugins/KimaiFormSelect.js b/assets/js/plugins/KimaiFormSelect.js index 083562f7..363a723f 100644 --- a/assets/js/plugins/KimaiFormSelect.js +++ b/assets/js/plugins/KimaiFormSelect.js @@ -26,13 +26,19 @@ export default class KimaiFormSelect extends KimaiPlugin { activateSelectPicker(selector, container) { let options = {}; if (container !== undefined) { - options = {container: container}; + options = { + dropdownParent: $(container), + }; } - jQuery(selector + ' ' + this.selector).selectpicker(options); + options = {...options, ...{ + language: this.getContainer().getConfiguration().get('locale'), + theme: "bootstrap" + }}; + jQuery(selector + ' ' + this.selector).select2(options); } destroySelectPicker(selector) { - jQuery(selector + ' ' + this.selector).selectpicker('destroy'); + jQuery(selector + ' ' + this.selector).select2('destroy'); } updateOptions(selectIdentifier, data) { @@ -71,7 +77,7 @@ export default class KimaiFormSelect extends KimaiPlugin { // if the beta test kimai.theme.select_type is active, this will tell the selects to refresh if (select.hasClass('selectpicker')) { - select.selectpicker('refresh'); + select.trigger('change.select2'); } } } diff --git a/assets/js/plugins/KimaiToolbar.js b/assets/js/plugins/KimaiToolbar.js index f6746f1d..f799e315 100644 --- a/assets/js/plugins/KimaiToolbar.js +++ b/assets/js/plugins/KimaiToolbar.js @@ -35,43 +35,25 @@ export default class KimaiToolbar extends KimaiPlugin { this._registerSearchButtons(formSelector); jQuery('body') - // prevent that the dropdown closes, when a form input is changed - eg. a select option was clicked + // prevent that the dropdown closes, when a form input is changed - eg. a select option was clicked .on('click', formSelector + ' .dropdown-menu', function (event) { - const parent = jQuery(event.target).parents('.bootstrap-select'); - if (parent.length === 0) { - event.stopPropagation(); - jQuery(".bootstrap-select").removeClass("open"); - } - }) - // trying to emulate the normal behaviour fo the bootstrap-select, as using its default implementation - // leads to closing the surrounding dropdown menu - .on('click', formSelector + ' .bootstrap-select', function (event) { - const current = jQuery(this); - if (current.hasClass("open")){ - jQuery(".bootstrap-select").removeClass("open"); - } else { - jQuery(".bootstrap-select").not('.bs-container').each(function(index, element) { - var tmp = jQuery(element); - if (tmp.is(current)) { - return; - } - if (tmp.hasClass('open')) { - tmp.removeClass("open"); - // the shown dropdown list will not be closed, using toggle hides all other lists BUT closes the containing search-dropdown - // tmp.find('select.selectpicker').selectpicker('toggle'); - } - }); - current.addClass("open"); - } event.stopPropagation(); }) - // close bootstrap-select if a click happened outside (and none of the other clickHandler were called) - // if the click happened inside a bootstrap-select, we ignore this - .on('click', function(event) { - const parent = jQuery(event.target).parents('.bootstrap-select'); - if (parent.length === 0) { - jQuery(".bootstrap-select").removeClass("open"); - } + // prevent that a click into the search field will close the dropdown + .on('click', '.select2-search__field', function (event) { + event.stopPropagation(); + }) + // prevent that the dropdown closes when a optgroup header is clicked + .on('click', '.select2-results__group', function (event) { + event.stopPropagation(); + }) + // prevent that a click into a daterangepicker will close the dropdown + .on('click', '.daterangepicker', function (event) { + event.stopPropagation(); + }) + // prevent that clicks in the dropdown elements, but outside of elements will close the dropdown (eg border besides the search field) + .on('click', '.select2-container', function (event) { + event.stopPropagation(); }) ; diff --git a/assets/sass/admin-lte.scss b/assets/sass/admin-lte.scss new file mode 100644 index 00000000..aacead1d --- /dev/null +++ b/assets/sass/admin-lte.scss @@ -0,0 +1,10 @@ + +$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; +$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/"; + +@import '~bootstrap-sass/assets/stylesheets/bootstrap'; +@import '~@fortawesome/fontawesome-free/scss/fontawesome'; +@import '~@fortawesome/fontawesome-free/scss/regular'; +@import '~@fortawesome/fontawesome-free/scss/solid'; +@import '~@fortawesome/fontawesome-free/scss/brands'; +@import '~daterangepicker/daterangepicker.css'; diff --git a/assets/sass/app.scss b/assets/sass/app.scss index 17ba8023..fa057c4f 100644 --- a/assets/sass/app.scss +++ b/assets/sass/app.scss @@ -5,7 +5,6 @@ * file that was distributed with this source code. */ -@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables"; @import 'variables'; @import 'error-page'; @import 'print'; @@ -24,3 +23,4 @@ @import 'skins'; @import 'sweetalert'; @import 'autocomplete'; +@import 'selectpicker'; diff --git a/assets/sass/selectpicker.scss b/assets/sass/selectpicker.scss new file mode 100644 index 00000000..eb8fdc7f --- /dev/null +++ b/assets/sass/selectpicker.scss @@ -0,0 +1,23 @@ +@import '~select2/dist/css/select2.min.css'; +@import '~select2-bootstrap-theme/dist/select2-bootstrap.min.css'; + +/* some labels were placed incorrect due to a margin-top: -4px */ +.select2-container .select2-selection--single .select2-selection__rendered { + margin-top: 0; +} +/* make sure the border looks like all other form elements */ +.select2-container--bootstrap .select2-selection { + border-radius: 0; +} +/* placeholder in multi-selects were cut off */ +.select2-search.select2-search--inline .select2-search__field { + width: 100% !important; +} +/* make sure that elements are padded, to allow visual difference to global activities */ +.select2-container--bootstrap .select2-results__options.select2-results__options--nested li.select2-results__option { + padding-left: 30px; +} +/* empty