diff --git a/application/ui.extkeywidget.class.inc.php b/application/ui.extkeywidget.class.inc.php index bad00c8db..289e0711e 100644 --- a/application/ui.extkeywidget.class.inc.php +++ b/application/ui.extkeywidget.class.inc.php @@ -138,7 +138,7 @@ class UIExtKeyWidget $sMessage = Dict::S('UI:Message:EmptyList:UseSearchForm'); $sAttrFieldPrefix = ($this->bSearchMode) ? '' : 'attr_'; - $sHTMLValue = "
"; + $sHTMLValue = "
sAttCode."\" data-validation=\"untouched\" tabindex=0>"; $sFilter = addslashes($oAllowedValues->GetFilter()->ToOQL()); if($this->bSearchMode) { diff --git a/css/backoffice/components/_datatable.scss b/css/backoffice/components/_datatable.scss index a85a340ad..ecb49bd87 100644 --- a/css/backoffice/components/_datatable.scss +++ b/css/backoffice/components/_datatable.scss @@ -45,6 +45,7 @@ $ibo-datatable--sorting--opacity: 0.3 !default; $ibo-datatable--sorting--right: 1em !default; $ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top 0px $ibo-panel--body--padding-bottom !default; +$ibo-datatable--selection-validation-buttons-toolbar--margin-top: 10px !default; .ibo-datatable { padding-bottom: $ibo-datatable--padding-y; @@ -55,7 +56,6 @@ $ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top 0px $ibo-pane padding-right: $ibo-datatable-cell-row--padding-x; padding-left: $ibo-datatable-cell-row--padding-x; @extend %ibo-font-ral-med-100; - a { color: $ibo-datatable-cell-row--link--color; } @@ -177,4 +177,5 @@ $ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top 0px $ibo-pane // For cancel / OK / next... selection validation buttons .ibo-datatable--selection-validation-buttons-toolbar { clear: both; + margin-top: $ibo-datatable--selection-validation-buttons-toolbar--margin-top; } \ No newline at end of file diff --git a/css/backoffice/components/_field.scss b/css/backoffice/components/_field.scss index ddca6f500..4d4c186d8 100644 --- a/css/backoffice/components/_field.scss +++ b/css/backoffice/components/_field.scss @@ -129,4 +129,7 @@ $ibo-field--value--padding-bottom--is-fullscreen: $ibo-field--label--padding-y-- padding: $ibo-field--value--padding-top--is-fullscreen $ibo-field--value--padding-x--is-fullscreen $ibo-field--value--padding-bottom--is-fullscreen $ibo-field--value--padding-x--is-fullscreen; } } -} \ No newline at end of file +} +.mailto, .tel{ + white-space:nowrap; +} diff --git a/css/backoffice/components/input/_input-select.scss b/css/backoffice/components/input/_input-select.scss index 139fd1bab..81076b907 100644 --- a/css/backoffice/components/input/_input-select.scss +++ b/css/backoffice/components/input/_input-select.scss @@ -1,3 +1,7 @@ +$ibo-input-select--value--min-midth: 50px; + +$ibo-input-select-autocomplete--value--min-midth: 150px; +$ibo-input-select-selectize--value--min-midth: 150px; $ibo-input-select-selectize--value--height: 100% !default; $ibo-input-select-selectize--value--line-height: $ibo-input--height !default; @@ -12,21 +16,23 @@ $ibo-input-select-wrapper--after--color: $ibo-color-grey-900 !default; $ibo-input-select--action-button--height: 28px !default; $ibo-input-select--action-button--width: 23px !default; -$ibo-input-select--action-button--margin-top: 1px !default; +$ibo-input-select--action-button--margin-top: 0px !default; $ibo-input-select--action-button--margin-right: 20px !default; $ibo-input-select--action-button--background-color: inherit !default; $ibo-input-select--action-button--color: $ibo-color-grey-800 !default; $ibo-input-select--action-button--padding-x: 2px !default; -$ibo-input-select--action-button--padding-y: 6px !default; +$ibo-input-select--action-button--padding-y: 0px !default; $ibo-input-select--action-button--padding-left: 5px !default; .ibo-input-select{ appearance: none; display: inline-block; + min-width: $ibo-input-select--value--min-midth; &.ibo-input-selectize{ padding-right:0; padding-left:0; + min-width: $ibo-input-select-selectize--value--min-midth !important; input{ border-width: 0px; border-color: white; @@ -40,11 +46,21 @@ $ibo-input-select--action-button--padding-left: 5px !default; } } } - +.ibo-input-select-autocomplete{ + min-width: $ibo-input-select-autocomplete--value--min-midth !important; +} +.ibo-input-selectize { + min-width: $ibo-input-select-selectize--value--min-midth !important; + >div{ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} .ibo-input-select-wrapper{ position:relative; } -.ibo-input-select-wrapper .selectize-control +.ibo-input-select-wrapper--with-buttons .selectize-control { display: inline-block; width: $ibo-input-select-wrapper--width; @@ -64,9 +80,35 @@ $ibo-input-select--action-button--padding-left: 5px !default; color: $ibo-input-select-wrapper--after--color; pointer-events: none; } +.ibo-input-select-wrapper--with-buttons{ + position:relative; + display:flex; + >.selectize-control{ + + } +} +.ibo-input-select-container{ +display: flex; +} +.ibo-input-select-wrapper--with-buttons::after{ + position: static; + content: "\f0d7"; + font-family: "Font Awesome 5 Free"; + font-weight: 600; + + height: $ibo-input-select-wrapper--after--height; + margin-left: $ibo-input-select-wrapper--after--margin-left; + margin-top: $ibo-input-select-wrapper--after--margin-top; + padding-top: $ibo-input-select-wrapper--after--padding-top; + + background-color: $ibo-input-select-wrapper--after--background-color; + color: $ibo-input-select-wrapper--after--color; + pointer-events: none; + z-index: 100; +} .ibo-input-select--action-buttons{ position: absolute; - display: initial; + display: flex; height: $ibo-input-select--action-button--height; margin-top: $ibo-input-select--action-button--margin-top; margin-right: $ibo-input-select--action-button--margin-right; @@ -76,6 +118,8 @@ $ibo-input-select--action-button--padding-left: 5px !default; color: $ibo-input-select--action-button--color; padding: $ibo-input-select--action-button--padding-y $ibo-input-select--action-button--padding-x; text-align: right; + bottom:0; + top:0; right:0; } diff --git a/js/extkeywidget.js b/js/extkeywidget.js index 42fd4dc92..6bcf616c8 100644 --- a/js/extkeywidget.js +++ b/js/extkeywidget.js @@ -15,24 +15,29 @@ * * You should have received a copy of the GNU Affero General Public License */ -var KEY_BACKSPACE = 8; -var KEY_RETURN = 13; -Selectize.define('custom_itop', function(options) { +/* +* Plugin to change the behaviour of enter and backspace buttons +* if the inputText is null when iti push on enter, the field is put to null +* when we push on backspace, it clean the input text, in order to autocmplete +* */ +Selectize.define('custom_itop', function(aOptions) { + var KEY_BACKSPACE = 8; + var KEY_RETURN = 13; var self = this; - options.text = options.text || function(option) { - return option[this.settings.labelField]; + aOptions.text = aOptions.text || function(aOptions) { + return aOptions[this.settings.labelField]; }; this.onKeyDown = (function() { var original = self.onKeyDown; return function(e) { - var index, option; + var iIndex; switch (e.keyCode) { case KEY_BACKSPACE: if (e.keyCode === KEY_BACKSPACE && this.$control_input.val() === '' && !this.$activeItems.length) { - index = this.caretPos-1; - if (index >= 0 && index < this.items.length) { + iIndex = this.caretPos-1; + if (iIndex >= 0 && iIndex < this.items.length) { this.clear(true); e.preventDefault(); return; @@ -43,14 +48,12 @@ Selectize.define('custom_itop', function(options) { //case nothing selected ->delete selection if (!self.$activeOption || self.currentResults.query == "") { self.deleteSelection(e); - //if(self.getOption("") != "undefined"){ - self.setValue(""); - //} + self.setValue(""); return; } } } - return original.apply(this, arguments); + return original.apply(this); }; })(); }); @@ -78,6 +81,7 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper // make sure that the form is clean $('#'+this.id+'_btnRemove').prop('disabled', true); $('#'+this.id+'_linksToRemove').val(''); + } this.AddSelectize = function (options, initValue) { let $select = $('#'+me.id).selectize({ @@ -117,6 +121,9 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper }); let $selectize = $select[0].selectize; // This stores the selectize object to a variable (with name 'selectize') $selectize.setValue(initValue, true); + var iPaddingRight = $('#'+this.id).parent().find('.ibo-input-select--action-buttons')[0].childElementCount*20+15; + $('#'+this.id).parent().find('.ibo-input-select').css('padding-right',iPaddingRight); + } this.AddAutocomplete = function(iMinChars, sWizHelperJSON) { @@ -171,7 +178,6 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper autoFocus: true, minLength: iMinChars, focus: function (event, ui) { - // $('#label_$this->iId').val( ui.item.label ); return false; }, select: function (event, ui) { @@ -214,6 +220,8 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper $('#label_'+me.id).autocomplete("search"); } }); + var iPaddingRight = $('#'+this.id).parent().find('.ibo-input-select--action-buttons')[0].childElementCount*20+15; + $('#'+this.id).parent().find('.ibo-input-select').css('padding-right',iPaddingRight); }; this.StopPendingRequest = function () { @@ -359,8 +367,7 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper theMap.operation = 'searchObjectsToSelect'; // Override what is defined in the form itself theMap.sAttCode = me.sAttCode, - sSearchAreaId = '#dr_'+me.id; - //$(sSearchAreaId).html('
'); + sSearchAreaId = '#dr_'+me.id; $(sSearchAreaId).block(); me.UpdateButtons(); diff --git a/templates/base/components/datatable/layout.ready.js.twig b/templates/base/components/datatable/layout.ready.js.twig index d03ffd49d..3ad9ebec2 100644 --- a/templates/base/components/datatable/layout.ready.js.twig +++ b/templates/base/components/datatable/layout.ready.js.twig @@ -42,7 +42,7 @@ else { maxHeight{{ sListId }} = maxHeight{{ sListId }} -50; } -console.warn('#{{ oUIBlock.GetId() }}'); + var oTable{{ sListId }} = $('#{{ oUIBlock.GetId() }}').DataTable({ language: { processing: "{{ 'UI:Datatables:Language:Processing'|dict_s }}", @@ -95,8 +95,6 @@ var oTable{{ sListId }} = $('#{{ oUIBlock.GetId() }}').DataTable({ } }, drawCallback: function () { - console.warn('la'); - console.warn($(this).closest('.ibo-panel--body').find('[name=selectionMode]').val()); if ($(this).closest('.ibo-panel--body').find('[name=selectionMode]').val() === "negative") { $(this).closest('.dataTables_wrapper').find('.checkAll')[0].checked = true;