N°4408 Fix inputs flickering when widgets are loading

This commit is contained in:
Stephen Abello
2021-11-04 10:49:17 +01:00
parent fe82f54066
commit aba0d4144c
8 changed files with 17 additions and 4 deletions

View File

@@ -260,7 +260,7 @@ class UIExtKeyWidget
array_push($aOptions, $aOption);
}
$sInputType = CmdbAbstractObject::ENUM_INPUT_TYPE_DROPDOWN_DECORATED;
$sHTMLValue .= "<select title=\"$sHelpText\" name=\"{$sAttrFieldPrefix}{$sFieldName}\" id=\"$this->iId\" tabindex=\"0\"></select>";
$sHTMLValue .= "<select class=\"ibo-input-select-placeholder\" title=\"$sHelpText\" name=\"{$sAttrFieldPrefix}{$sFieldName}\" id=\"$this->iId\" tabindex=\"0\"></select>";
$sJsonOptions = str_replace("'", "\'", str_replace('\\', '\\\\', json_encode($aOptions)));
$oPage->add_ready_script(
<<<EOF
@@ -538,7 +538,7 @@ JS
$sHTMLValue .= "<option value=\"\">$sDisplayValue</option>\n";
}
} else {
$sHTMLValue .= "<select title=\"$sHelpText\" name=\"{$sAttrFieldPrefix}{$sFieldName}\" id=\"$this->iId\">\n";
$sHTMLValue .= "<select class=\"ibo-input-select-placeholder\" title=\"$sHelpText\" name=\"{$sAttrFieldPrefix}{$sFieldName}\" id=\"$this->iId\">\n";
$sHTMLValue .= "<option value=\"\">".Dict::S('UI:SelectOne')."</option>\n";
}

View File

@@ -65,7 +65,7 @@ class UIHTMLEditorWidget
$sHelpText = $this->m_sHelpText;
$sValidationField = $this->m_sValidationField;
$sHtmlValue = "<div class=\"field_input_zone field_input_html ibo-input-wrapper\"><textarea class=\"htmlEditor\" title=\"$sHelpText\" name=\"attr_{$this->m_sFieldPrefix}{$sCode}\" rows=\"10\" cols=\"10\" id=\"$iId\">$sValue</textarea></div>$sValidationField";
$sHtmlValue = "<div class=\"field_input_zone field_input_html ibo-input-wrapper\"><textarea class=\"htmlEditor ibo-input-richtext-placeholder\" title=\"$sHelpText\" name=\"attr_{$this->m_sFieldPrefix}{$sCode}\" id=\"$iId\">$sValue</textarea></div>$sValidationField";
// Replace the text area with CKEditor
// To change the default settings of the editor,

View File

@@ -9,6 +9,7 @@
@import "input-datetime";
@import "input-duration";
@import "input-image";
@import "input-richtext";
@import "input-select";
@import "input-select-icon";
@import "input-string";

View File

@@ -0,0 +1,4 @@
.ibo-input-richtext-placeholder{
height: 200px;
width: 100%;
}

View File

@@ -218,3 +218,9 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
.ibo-input-select--autocomplete-item-txt {
@extend %ibo-text-truncated-with-ellipsis;
}
/* Use "select" in order to avoid stylizing selectize wrapper that copy select classes*/
select.ibo-input-select-placeholder{
@extend .ibo-input;
@extend .ibo-input-select;
}

View File

@@ -196,6 +196,7 @@ EOF
$oBlock->AddDataAttribute("input-type","Combodo\\iTop\\Form\\Field\\SelectObjectField\\Select");
$sEditType = 'select';
$oSelect = SelectUIBlockFactory::MakeForSelect("",$this->oField->GetGlobalId());
$oSelect->AddCSSClass('ibo-input-select-placeholder');
$oBlock->AddSubBlock(UIContentBlockUIBlockFactory::MakeStandard(null,['ibo-input-field-wrapper'])->AddSubBlock($oSelect));
$oSelect->AddOption(SelectOptionUIBlockFactory::MakeForSelectOption('',Dict::S('UI:SelectOne'), false ));
while ($oObject = $oSet->Fetch())

View File

@@ -123,6 +123,7 @@ class ConsoleSimpleFieldRenderer extends FieldRenderer
// Some additional stuff if we are displaying it with a rich editor
if ($bRichEditor)
{
$oText->AddCSSClass('ibo-input-select-placeholder');
$aConfig = utils::GetCkeditorPref();
$aConfig['extraPlugins'] = 'codesnippet';
$sJsConfig = json_encode($aConfig);

View File

@@ -1,4 +1,4 @@
{% extends "base/components/input/layout.html.twig" %}
{% block iboInput %}
<textarea id="{{ oUIBlock.GetId() }}" class="htmlEditor" name="{{ oUIBlock.GetName() }}" ></textarea>
<textarea id="{{ oUIBlock.GetId() }}" class="htmlEditor ibo-input-richtext-placeholder" name="{{ oUIBlock.GetName() }}" ></textarea>
{% endblock %}