diff --git a/css/backoffice/components/input/_input-select-icon.scss b/css/backoffice/components/input/_input-select-icon.scss index e497bb9be..5f9ae39cc 100644 --- a/css/backoffice/components/input/_input-select-icon.scss +++ b/css/backoffice/components/input/_input-select-icon.scss @@ -76,6 +76,7 @@ $ibo-input-select-icon--menu--icon--margin-right: 10px !default; display: flex; column-gap: 5px; + align-items: center; > img{ width: 32px; diff --git a/dictionaries/en.dictionary.itop.ui.php b/dictionaries/en.dictionary.itop.ui.php index 681e2c8ab..4d550d244 100644 --- a/dictionaries/en.dictionary.itop.ui.php +++ b/dictionaries/en.dictionary.itop.ui.php @@ -469,6 +469,7 @@ Dict::Add('EN US', 'English', 'English', [ 'UI:UserPref:DoNotShowAgain' => 'Do not show again', 'UI:InputFile:NoFileSelected' => 'No File Selected', 'UI:InputFile:SelectFile' => 'Select a file', + 'UI:InputFile:SelectImage' => 'Select an image', 'UI:SearchToggle' => 'Search', 'UI:ClickToCreateNew' => 'Create a %1$s', diff --git a/js/forms/choices_element.js b/js/forms/choices_element.js index 54099c1cb..76cf8031f 100644 --- a/js/forms/choices_element.js +++ b/js/forms/choices_element.js @@ -3,13 +3,21 @@ */ TomSelect.define('image_renderer', function(options) { this.settings.render.option = function(data, escape) { - return `
-${data.text}${escape(data.text)} + const image = data['$option'].dataset['image']; + if(image === ''){ + return `
${escape(data.text)}
`; + } + else return `
+ ${escape(data.text)}${escape(data.text)}
`; }; this.settings.render.item = function(data, escape) { - return `
-${data.text}${escape(data.text)} + const image = data['$option'].dataset['image']; + if(image === ''){ + return `
${escape(data.text)}
`; + } + else return `
+ ${escape(data.text)}${escape(data.text)}
`; }; }); @@ -53,7 +61,7 @@ class ChoicesElement extends HTMLSelectElement { }; if (this.getAttribute('data-tom-select-disable-auto-complete')) { - options.controlInput = null; + // options.controlInput = null; } if (this.getAttribute('data-tom-select-max-items-selected') && this.getAttribute('data-tom-select-max-items-selected') !== '') { options.maxItems = parseInt(this.getAttribute('data-tom-select-max-items-selected')); diff --git a/sources/Forms/Block/Base/ChoiceImageFormBlock.php b/sources/Forms/Block/Base/ChoiceImageFormBlock.php index 9c6a46b04..9511d08eb 100644 --- a/sources/Forms/Block/Base/ChoiceImageFormBlock.php +++ b/sources/Forms/Block/Base/ChoiceImageFormBlock.php @@ -29,10 +29,12 @@ class ChoiceImageFormBlock extends ChoiceFormBlock [ 'name' => 'image_renderer', 'options' => [ - 'images_resource_path' => utils::GetAbsoluteUrlAppRoot().'/env-production/', ], ], ]); + + $oOptionsRegister->SetOption('choice_attr'); + $oOptionsRegister->SetOption('placeholder', 'UI:InputFile:SelectImage'); } } diff --git a/sources/PropertyType/ValueType/Leaf/ValueTypeClass.php b/sources/PropertyType/ValueType/Leaf/ValueTypeClass.php index 99a637661..003fe442a 100644 --- a/sources/PropertyType/ValueType/Leaf/ValueTypeClass.php +++ b/sources/PropertyType/ValueType/Leaf/ValueTypeClass.php @@ -8,9 +8,8 @@ namespace Combodo\iTop\PropertyType\ValueType\Leaf; use Combodo\iTop\DesignElement; -use Combodo\iTop\Forms\Block\Base\ChoiceFormBlock; +use Combodo\iTop\Forms\Block\Base\ChoiceImageFormBlock; use Combodo\iTop\PropertyType\ValueType\Branch\AbstractBranchValueType; -use Combodo\iTop\PropertyType\ValueType\Branch\ValueTypePropertyTree; use Combodo\iTop\Service\DependencyInjection\ServiceLocator; use utils; @@ -23,7 +22,7 @@ class ValueTypeClass extends AbstractLeafValueType public function GetFormBlockClass(): string { - return ChoiceFormBlock::class; + return ChoiceImageFormBlock::class; } public function InitFromDomNode(DesignElement $oDomNode, ?AbstractBranchValueType $oParent = null): void @@ -35,18 +34,25 @@ class ValueTypeClass extends AbstractLeafValueType $oModelReflection = ServiceLocator::GetInstance()->get('ModelReflection'); $sChoices = "[\n"; + $sChoicesAttImages = "[\n"; $aClasses = $oModelReflection->GetClasses($sCategories, true); sort($aClasses); foreach ($aClasses as $sClass) { $sValue = utils::QuoteForPHP($sClass); + $sClassIcon = utils::QuoteForPHP($oModelReflection->GetClassIcon($sClass, false)); $sChoices .= << $sValue, - +PHP; + $sChoicesAttImages .= << ["data-image" => $sClassIcon], PHP; } $sChoices .= "\t\t\t]"; + $sChoicesAttImages .= "\t\t\t]"; $this->aFormBlockOptionsForPHP['choices'] = $sChoices; + + $this->aFormBlockOptionsForPHP['choice_attr'] = $sChoicesAttImages; } } diff --git a/sources/PropertyType/ValueType/Leaf/ValueTypeIcon.php b/sources/PropertyType/ValueType/Leaf/ValueTypeIcon.php index a8be82d2c..41c21e3e2 100644 --- a/sources/PropertyType/ValueType/Leaf/ValueTypeIcon.php +++ b/sources/PropertyType/ValueType/Leaf/ValueTypeIcon.php @@ -33,16 +33,26 @@ class ValueTypeIcon extends AbstractLeafValueType $oModelReflection = ServiceLocator::GetInstance()->get('ModelReflection'); $sChoices = "[\n"; + $sChoicesAttImages = "[\n"; $aIcons = $oModelReflection->GetAvailableIcons(); foreach ($aIcons as $aIcon) { - $sValue = utils::QuoteForPHP($aIcon['label']); + $sLabel = utils::QuoteForPHP($aIcon['label']); + $sIcon = utils::QuoteForPHP($aIcon['icon']); $sCode = utils::QuoteForPHP($aIcon['value']); $sChoices .= << $sCode,\n +$sLabel => $sCode,\n +PHP; + $sChoicesAttImages .= << ["data-image" => $sIcon], PHP; } $sChoices .= "\t\t\t]"; + $sChoicesAttImages .= "\t\t\t]"; $this->aFormBlockOptionsForPHP['choices'] = $sChoices; + + $this->aFormBlockOptionsForPHP['choice_attr'] = $sChoicesAttImages; + + $this->aFormBlockOptionsForPHP['required'] = 'false'; } }