From 4fa6f85c2e8b0291eb28efbb0bde924f1a713069 Mon Sep 17 00:00:00 2001
From: Guillaume Lajarige <guillaume.lajarige@combodo.com>
Date: Wed, 27 Dec 2017 15:51:50 +0000
Subject: [PATCH] =?UTF-8?q?N=C2=B01217=20Console=20UI=20improvements=20in?=
 =?UTF-8?q?=20object=20forms.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Columns size optimization.
- Tooltip on (none empty) String attribute so long value can be seen without scrolling to the end of the input.
- OQL attribute displayed as Text/HTML attributes.

SVN:trunk[5170]
---
 application/cmdbabstract.class.inc.php | 39 +++++++++++++++++++++++---
 css/light-grey.css                     |  4 +--
 css/light-grey.scss                    |  4 +--
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/application/cmdbabstract.class.inc.php b/application/cmdbabstract.class.inc.php
index a9df7b23d..490ac95ef 100644
--- a/application/cmdbabstract.class.inc.php
+++ b/application/cmdbabstract.class.inc.php
@@ -1,5 +1,5 @@
 <?php
-// Copyright (C) 2010-2017 Combodo SARL
+// Copyright (C) 2010-2018 Combodo SARL
 //
 //   This file is part of iTop.
 //
@@ -626,6 +626,8 @@ EOF
 			$aDetails[$sTab] = array();
             $aTableStyles[] = 'vertical-align:top';
             $aTableClasses = array();
+			$aColStyles[] = 'vertical-align:top';
+			$aColClasses = array();
 
             ksort($aCols);
 			$iColCount = count($aCols);
@@ -633,6 +635,8 @@ EOF
             {
 	            $aTableClasses[] = 'n-cols-details';
 	            $aTableClasses[] = $iColCount.'-cols-details';
+
+	            $aColStyles[] = 'width:'.floor(100/$iColCount).'%';
             }
             else
             {
@@ -643,7 +647,7 @@ EOF
 			$oPage->add('<table style="'.implode('; ', $aTableStyles).'" class="'.implode(' ', $aTableClasses).'" data-mode="'.$sEditMode.'"><tr>');
 			foreach($aCols as $sColIndex => $aFieldsets)
 			{
-				$oPage->add('<td style="vertical-align:top">');
+				$oPage->add('<td style="'.implode('; ', $aColStyles).'" class="'.implode(' ', $aColClasses).'">');
 				//$aDetails[$sTab][$sColIndex] = array();
 				$sLabel = '';
 				$sPreviousLabel = '';
@@ -745,7 +749,8 @@ EOF
 
                             // Checking how the field should be rendered
                             // Note: For view mode, this is done in cmdbAbstractObject::GetFieldAsHtml()
-                            if(in_array($oAttDef->GetEditClass(), array('Text', 'HTML', 'CaseLog', 'CustomFields')))
+							// Note 2: Shouldn't this be a property of the AttDef instead an array that we have to maintain?
+                            if(in_array($oAttDef->GetEditClass(), array('Text', 'HTML', 'CaseLog', 'CustomFields', 'OQLExpression')))
                             {
                                 $val['layout'] = 'large';
                             }
@@ -2157,6 +2162,31 @@ EOF
 						$sHTMLValue = "<div class=\"field_input_zone field_input_string\"><input title=\"$sHelpText\" type=\"text\" maxlength=\"$iFieldSize\" name=\"attr_{$sFieldPrefix}{$sAttCode}{$sNameSuffix}\" value=\"".htmlentities($sDisplayValue, ENT_QUOTES, 'UTF-8')."\" id=\"$iId\"/></div>{$sValidationSpan}{$sReloadSpan}";
 						$aEventsList[] ='keyup';
 						$aEventsList[] ='change';
+
+						// Adding tooltip so we can read the whole value when its very long (eg. URL)
+						if(!empty($sDisplayValue))
+						{
+							$oPage->add_ready_script(
+<<<EOF
+								$('#{$iId}').qtip( { content: $('#{$iId}').val(), show: 'mouseover', hide: 'mouseout', style: { name: 'dark', tip: 'bottomLeft' }, position: { corner: { target: 'topLeft', tooltip: 'bottomLeft' }, adjust: { y: -15}} } );
+								
+								$('#{$iId}').bind('keyup', function(evt, sFormId){ 
+									var oQTipAPI = $(this).qtip('api');
+									
+									if($(this).val() === '')
+									{
+										oQTipAPI.hide();
+										oQTipAPI.disable(true); 
+									}
+									else
+									{
+										oQTipAPI.disable(false); 
+									}
+									oQTipAPI.updateContent($(this).val());
+								});
+EOF
+							);
+						}
 					}
 				break;
 			}
@@ -2825,7 +2855,8 @@ EOF
 
             // Checking how the field should be rendered
             // Note: For edit mode, this is done in self::GetBareProperties()
-            if(in_array($oAttDef->GetEditClass(), array('Text', 'HTML', 'CaseLog', 'CustomFields')))
+			// Note 2: Shouldn't this be a AttDef property instead of an array to maintain?
+            if(in_array($oAttDef->GetEditClass(), array('Text', 'HTML', 'CaseLog', 'CustomFields', 'OQLExpression')))
             {
                 $retVal['layout'] = 'large';
             }
diff --git a/css/light-grey.css b/css/light-grey.css
index 02e106335..5618b374b 100644
--- a/css/light-grey.css
+++ b/css/light-grey.css
@@ -1167,7 +1167,7 @@ span.form_validation {
 }
 /* Helper classes for object details display. */
 .one-col-details {
-  min-width: 300px;
+  min-width: 400px;
   max-width: 600px;
 }
 .n-cols-details {
@@ -1380,7 +1380,7 @@ fieldset .details > .field_container {
   /* On a single column, field labels can take more width but they are limited so it doesn't feel weird when all labels are short */
 }
 .one-col-details .details .field_container.field_small div.field_label {
-  width: 145px;
+  width: 160px;
 }
 /* This is extracted from the ".details > .field_container ..." because of the fullscreen option (element is moved at the end of the body */
 .field_input_text {
diff --git a/css/light-grey.scss b/css/light-grey.scss
index 78ce31528..ecc5f101e 100644
--- a/css/light-grey.scss
+++ b/css/light-grey.scss
@@ -1266,7 +1266,7 @@ span.form_validation {
 
 /* Helper classes for object details display. */
 .one-col-details {
-	min-width: 300px;
+	min-width: 400px;
 	max-width: 600px;
 }
 .n-cols-details {
@@ -1536,7 +1536,7 @@ fieldset .details>.field_container {
 .one-col-details .details .field_container.field_small {
 	div.field_label {
 		/* On a single column, field labels can take more width but they are limited so it doesn't feel weird when all labels are short */
-		width: 145px;
+		width: 160px;
 	}
 }
 /* This is extracted from the ".details > .field_container ..." because of the fullscreen option (element is moved at the end of the body */