composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°3648 - Feedback alpha 3.0 : finish relation edition

Browse Source
This commit is contained in:
acognet
2021-02-15 16:50:50 +01:00
parent c1c8fad97e
commit 4c23f1f32b
6 changed files with 79 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
application/ui.extkeywidget.class.inc.php
View File

@@ -138,7 +138,7 @@ class UIExtKeyWidget
$sMessage = Dict::S('UI:Message:EmptyList:UseSearchForm');
$sAttrFieldPrefix = ($this->bSearchMode) ? '' : 'attr_';
$sHTMLValue = "<div class=\"field_input_zone field_input_extkey ibo-input-wrapper ibo-input-select-wrapper\" data-validation=\"untouched\" tabindex=0>";
$sHTMLValue = "<div class=\"field_input_zone field_input_extkey ibo-input-wrapper ibo-input-select-wrapper--with-buttons\" data-attcode=\"".$this->sAttCode."\" data-validation=\"untouched\" tabindex=0>";
$sFilter = addslashes($oAllowedValues->GetFilter()->ToOQL());
if($this->bSearchMode)
{

3
css/backoffice/components/_datatable.scss
View File

@@ -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;
}

5
css/backoffice/components/_field.scss
View File

@@ -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;
}
}
}
}
.mailto, .tel{
white-space:nowrap;
}

54
css/backoffice/components/input/_input-select.scss
View File

@@ -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;
}

37
js/extkeywidget.js
View File

@@ -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('<div style="text-align:center;width:100%;height:24px;vertical-align:middle;"><img src="../images/indicator.gif" /></div>');
sSearchAreaId = '#dr_'+me.id;
$(sSearchAreaId).block();
me.UpdateButtons();

4
templates/base/components/datatable/layout.ready.js.twig
View File

@@ -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;