N°4283 - Textarea: Make sure to use monospace font for code

- CSV import is now using monospace font
- Simplify SCSS code

Note: TextArea and all input UIBlocks need to be reworked as they are not properly organized, see comment in _input-text.scss

application/cmdbabstract.class.inc.php

@@ -2197,6 +2197,7 @@ HTML;
 
 					if ($oAttDef->GetEditClass() == 'OQLExpression') {
 						$aTextareaCssClasses[] = 'ibo-query-oql';
+						$aTextareaCssClasses[] = 'ibo-is-code';
 						// N°3227 button to open predefined queries dialog
 						$sPredefinedBtnId = 'predef_btn_'.$sFieldPrefix.$sAttCode.$sNameSuffix;
 						$sSearchQueryLbl = Dict::S('UI:Edit:SearchQuery');

application/dashlet.class.inc.php

@@ -1009,6 +1009,7 @@ HTML;
 		$oField = new DesignerLongTextField('query', Dict::S('UI:DashletObjectList:Prop-Query'), $this->aProperties['query']);
 		$oField->SetMandatory();
 		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
 		$oForm->AddField($oField);
 
 		$oField = new DesignerBooleanField('menu', Dict::S('UI:DashletObjectList:Prop-Menu'), $this->aProperties['menu']);
@@ -1046,6 +1047,7 @@ HTML;
 		$oField = new DesignerHiddenField('query', Dict::S('UI:DashletObjectList:Prop-Query'), $sOQL);
 		$oField->SetMandatory();
 		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
 		$oForm->AddField($oField);
 
 		$oField = new DesignerBooleanField('menu', Dict::S('UI:DashletObjectList:Prop-Menu'), $this->aProperties['menu']);
@@ -1396,6 +1398,7 @@ abstract class DashletGroupBy extends Dashlet
 		$oField = new DesignerLongTextField('query', Dict::S('UI:DashletGroupBy:Prop-Query'), $this->aProperties['query']);
 		$oField->SetMandatory();
 		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
 		$oForm->AddField($oField);
 
 		try {
@@ -1653,6 +1656,7 @@ abstract class DashletGroupBy extends Dashlet
 		$oField = new DesignerHiddenField('query', Dict::S('UI:DashletGroupBy:Prop-Query'), $sOQL);
 		$oField->SetMandatory();
 		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
 		$oForm->AddField($oField);
 
 		if (!is_null($sOQL)) {
@@ -2226,6 +2230,7 @@ class DashletHeaderDynamic extends Dashlet
 		$oField = new DesignerLongTextField('query', Dict::S('UI:DashletHeaderDynamic:Prop-Query'), $this->aProperties['query']);
 		$oField->SetMandatory();
 		$oField->AddCSSClass("ibo-query-oql");
+		$oField->AddCSSClass("ibo-is-code");
 		$oForm->AddField($oField);
 
 		try

application/query.class.inc.php

@@ -126,7 +126,7 @@ class QueryOQL extends Query
 	function DisplayBareProperties(WebPage $oPage, $bEditMode = false, $sPrefix = '', $aExtraParams = array())
 	{
 		$aFieldsMap = parent::DisplayBareProperties($oPage, $bEditMode, $sPrefix, $aExtraParams);
-		$oPage->add_script("$('[name=\"attr_oql\"]').addClass('ibo-query-oql'); $('[data-attribute-code=\"oql\"]').addClass('ibo-query-oql');");
+		$oPage->add_script("$('[name=\"attr_oql\"]').addClass('ibo-query-oql ibo-is-code'); $('[data-attribute-code=\"oql\"]').addClass('ibo-query-oql ibo-is-code');");
 
 		if (!$bEditMode) {
 			$sFields = trim($this->Get('fields'));

css/backoffice/components/input/_input-text.scss

@@ -12,13 +12,17 @@ $ibo-input-text--padding-y: 10px !default;
   width: $ibo-input-text--width;
   min-height: $ibo-input-text--min-height;
   padding: $ibo-input-text--padding-y $ibo-input-text--padding-x;
+
+  &.ibo-is-code {
+    @extend %ibo-font-code-150;
+    /* Note: There is a mic-mac in the inputs SCSS partials / PHP classes / TWIG templates. All base style should be defined in a common ancestor (AbstractInput) which should have its own BLOCK_CODE and SCSS partial; which is not the case right now.
+     * We should correct this later as now is too close to the RC to make such changes.
+     */
+    background-color: $ibo-input--background-color;
+  }
 }
 
 .ibo-input-text--export {
   width: 100%;
   min-height: 15em;
-}
-
-.ibo-query-oql, .ibo-query-oql > :not(.ibo-field--label) {
-  @extend %ibo-font-code-150;
 }

pages/csvimport.php

@@ -1515,6 +1515,7 @@ EOF
 
 		$sCSVData = utils::ReadParam('csvdata', '', false, utils::ENUM_SANITIZATION_FILTER_STRING);
 		$oTextarea = new TextArea('csvdata', $sCSVData, '', 120, 30);
+		$oTextarea->AddCSSClasses(['ibo-input-text', 'ibo-is-code']);
 		$oFieldPaste = FieldUIBlockFactory::MakeFromObject(Dict::S('UI:CSVImport:PasteData'), $oTextarea);
 		$oFormPaste->AddSubBlock($oFieldPaste);
 

pages/run_query.php

@@ -174,7 +174,7 @@ try
 
 	//--- Query textarea
 	$oQueryTextArea = new TextArea('expression', utils::EscapeHtml($sExpression), 'expression', 120, 8);
-	$oQueryTextArea->AddCSSClass('ibo-query-oql');
+	$oQueryTextArea->AddCSSClasses(['ibo-query-oql', 'ibo-is-code']);
 	$oQueryForm->AddSubBlock($oQueryTextArea);
 
 	$oP->add_linked_script(utils::GetAbsoluteUrlAppRoot()."/js/jquery.hotkeys.js");

webservices/export-v2.php

@@ -132,7 +132,7 @@ function DisplayExpressionForm(WebPage $oP, $sAction, $sExpression = '', $sExcep
 	$oFieldQuery = FieldUIBlockFactory::MakeStandard('<input type="radio" name="query_mode" value="oql" id="radio_oql" checked><label for="radio_oql">'.Dict::S('Core:BulkExportLabelOQLExpression').'</label>');
 	$oTextArea = new TextArea('expression', htmlentities($sExpression, ENT_QUOTES, 'UTF-8'), "textarea_oql", 70, 8);
 	$oTextArea->SetPlaceholder(Dict::S('Core:BulkExportQueryPlaceholder'));
-	$oTextArea->AddCSSClass("ibo-query-oql");
+	$oTextArea->AddCSSClasses(["ibo-query-oql", "ibo-is-code"]);
 	$oFieldQuery->AddSubBlock($oTextArea);
 	$oForm->AddSubBlock($oFieldQuery);
 	if (!empty($sExceptionMessage)) {