N.678 Data synchro: a line break or '<' in the description breaks the synchronized objects edition form.

git-svn-id: http://svn.code.sf.net/p/itop/code/trunk@4589 a333f486-631f-4898-b8df-5754b55c2be0

application/cmdbabstract.class.inc.php

@@ -1,5 +1,5 @@
 <?php
-// Copyright (C) 2010-2016 Combodo SARL
+// Copyright (C) 2010-2017 Combodo SARL
 //
 //   This file is part of iTop.
 //
@@ -21,7 +21,7 @@
  * Abstract class that implements some common and useful methods for displaying
  * the objects
  *
- * @copyright   Copyright (C) 2010-2016 Combodo SARL
+ * @copyright   Copyright (C) 2010-2017 Combodo SARL
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
@@ -655,16 +655,19 @@ EOF
 									if ($iFlags & (OPT_ATT_READONLY|OPT_ATT_SLAVE))
 									{
 										// Check if the attribute is not read-only because of a synchro...
-										$aReasons = array();
-										$sSynchroIcon = '';
 										if ($iFlags & OPT_ATT_SLAVE)
 										{
+											$aReasons = array();
 											$iSynchroFlags = $this->GetSynchroReplicaFlags($sAttCode, $aReasons);
 											$sSynchroIcon = "&nbsp;<img id=\"synchro_$sInputId\" src=\"../images/transp-lock.png\" style=\"vertical-align:middle\"/>";
 											$sTip = '';
 											foreach($aReasons as $aRow)
 											{
-												$sTip .= "<p>Synchronized with {$aRow['name']} - {$aRow['description']}</p>";
+												$sDescription = htmlentities($aRow['description'], ENT_QUOTES, 'UTF-8');
+												$sDescription = str_replace(array("\r\n", "\n"), "<br/>", $sDescription);
+												$sTip .= "<div class='synchro-source'>";
+												$sTip .= "<div class='synchro-source-title'>Synchronized with {$aRow['name']}</div>";
+												$sTip .= "<div class='synchro-source-description'>$sDescription</div>";
 											}
 											$sTip = addslashes($sTip);
 											$oPage->add_ready_script("$('#synchro_$sInputId').qtip( { content: '$sTip', show: 'mouseover', hide: 'mouseout', style: { name: 'dark', tip: 'leftTop' }, position: { corner: { target: 'rightMiddle', tooltip: 'leftTop' }} } );");
@@ -3509,18 +3512,21 @@ EOF
 			if ((!$bEditMode) || ($iFlags & (OPT_ATT_READONLY|OPT_ATT_SLAVE)))
 			{
 				// Check if the attribute is not read-only because of a synchro...
-				$aReasons = array();
 				$sSynchroIcon = '';
 				if ($iFlags & OPT_ATT_SLAVE)
 				{
+					$aReasons = array();
 					$iSynchroFlags = $this->GetSynchroReplicaFlags($sAttCode, $aReasons);
 					$sSynchroIcon = "&nbsp;<img id=\"synchro_$sInputId\" src=\"../images/transp-lock.png\" style=\"vertical-align:middle\"/>";
 					$sTip = '';
 					foreach($aReasons as $aRow)
 					{
-						$sTip .= "<p>Synchronized with {$aRow['name']} - {$aRow['description']}</p>";
+						$sDescription = htmlentities($aRow['description'], ENT_QUOTES, 'UTF-8');
+						$sDescription = str_replace(array("\r\n", "\n"), "<br/>", $sDescription);
+						$sTip .= "<div class='synchro-source'>";
+						$sTip .= "<div class='synchro-source-title'>Synchronized with {$aRow['name']}</div>";
+						$sTip .= "<div class='synchro-source-description'>$sDescription</div>";
 					}
-					$sTip = addslashes($sTip);
 					$oPage->add_ready_script("$('#synchro_$sInputId').qtip( { content: '$sTip', show: 'mouseover', hide: 'mouseout', style: { name: 'dark', tip: 'leftTop' }, position: { corner: { target: 'rightMiddle', tooltip: 'leftTop' }} } );");
 				}
 

application/template.class.inc.php

@@ -1,5 +1,5 @@
 <?php
-// Copyright (C) 2010-2012 Combodo SARL
+// Copyright (C) 2010-2017 Combodo SARL
 //
 //   This file is part of iTop.
 //
@@ -20,7 +20,7 @@
 /**
  * Class DisplayTemplate
  *
- * @copyright   Copyright (C) 2010-2012 Combodo SARL
+ * @copyright   Copyright (C) 2010-2017 Combodo SARL
  * @license     http://opensource.org/licenses/AGPL-3.0
  */
 
@@ -353,11 +353,15 @@ class ObjectDetailsTemplate extends DisplayTemplate
 						if ($iFlags & OPT_ATT_SLAVE)
 						{
 							$iSynchroFlags = $this->m_oObj->GetSynchroReplicaFlags($sAttCode, $aReasons);
-							$sSynchroIcon = "&nbsp;<img id=\"synchro_$sInputId\" src=\"../images/transp-lock.png\" style=\"vertical-align:middle\"/>";
+							$sSynchroIcon = "&nbsp;<img id=\"synchro_$iInputId\" src=\"../images/transp-lock.png\" style=\"vertical-align:middle\"/>";
 							$sTip = '';
 							foreach($aReasons as $aRow)
 							{
-								$sTip .= "<p>Synchronized with {$aRow['name']} - {$aRow['description']}</p>";
+								$sDescription = htmlentities($aRow['description'], ENT_QUOTES, 'UTF-8');
+								$sDescription = str_replace(array("\r\n", "\n"), "<br/>", $sDescription);
+								$sTip .= "<div class='synchro-source'>";
+								$sTip .= "<div class='synchro-source-title'>Synchronized with {$aRow['name']}</div>";
+								$sTip .= "<div class='synchro-source-description'>$sDescription</div>";
 							}
 							$oPage->add_ready_script("$('#synchro_$iInputId').qtip( { content: '$sTip', show: 'mouseover', hide: 'mouseout', style: { name: 'dark', tip: 'leftTop' }, position: { corner: { target: 'rightMiddle', tooltip: 'leftTop' }} } );");
 						}

css/light-grey.css

@@ -292,13 +292,13 @@ td a.mailto, td a.mailto:visited {
   text-decoration: none;
   color: #000;
   padding-left: 20px;
-  background: url(../images/mail.png?v=v2.3.0b) no-repeat left;
+  background: url(../images/mail.png?v=v2.3.0) no-repeat left;
 }
 td a.mailto:hover {
   text-decoration: underline;
   color: #e87c1e;
   padding-left: 20px;
-  background: url(../images/mail.png?v=v2.3.0b) no-repeat left;
+  background: url(../images/mail.png?v=v2.3.0) no-repeat left;
 }
 a.small_action {
   font-family: Tahoma, Verdana, Arial, Helvetica;
@@ -316,10 +316,10 @@ a.small_action {
   padding-left: 5px;
   padding-top: 2px;
   padding-bottom: 2px;
-  background: #e87c1e url(../images/actions_left.png?v=v2.3.0b) no-repeat left;
+  background: #e87c1e url(../images/actions_left.png?v=v2.3.0) no-repeat left;
 }
 .actions_details span {
-  background: url(../images/actions_right.png?v=v2.3.0b) no-repeat right;
+  background: url(../images/actions_right.png?v=v2.3.0) no-repeat right;
   color: #fff;
   font-weight: bold;
   padding-top: 2px;
@@ -493,7 +493,7 @@ div.actions_menu > ul {
   nowidth: 70px;
   padding-left: 5px;
   /* Nasty work-around for IE... en attendant mieux */
-  background: #e87c1e url(../images/actions_left.png?v=v2.3.0b) no-repeat top left;
+  background: #e87c1e url(../images/actions_left.png?v=v2.3.0) no-repeat top left;
   cursor: pointer;
   margin: 0;
 }
@@ -505,7 +505,7 @@ div.actions_menu > ul > li {
   height: 17px;
   padding-right: 16px;
   padding-left: 4px;
-  background: url(../images/actions_right.png?v=v2.3.0b) no-repeat top right transparent;
+  background: url(../images/actions_right.png?v=v2.3.0) no-repeat top right transparent;
   font-weight: bold;
   color: #fff;
   vertical-align: middle;
@@ -648,7 +648,7 @@ td a.dp-choose-date, a.dp-choose-date, td a.dp-choose-date:hover, a.dp-choose-da
   display: block;
   text-indent: -2000px;
   overflow: hidden;
-  background: url(../images/calendar.png?v=v2.3.0b) no-repeat;
+  background: url(../images/calendar.png?v=v2.3.0) no-repeat;
 }
 td a.dp-choose-date.dp-disabled, a.dp-choose-date.dp-disabled {
   background-position: 0 -20px;
@@ -739,19 +739,19 @@ div.HRDrawer {
 }
 /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
 table.listResults tr.odd td.truncated, table.listResults tr td.truncated, .wizContainer table.listResults tr.odd td.truncated, .wizContainer table.listResults tr td.truncated {
-  background: url(../images/truncated.png?v=v2.3.0b) bottom repeat-x;
+  background: url(../images/truncated.png?v=v2.3.0) bottom repeat-x;
 }
 /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
 table.listResults tr.even td.truncated, .wizContainer table.listResults tr.even td.truncated {
-  background: #f9f9f1 url(../images/truncated.png?v=v2.3.0b) bottom repeat-x;
+  background: #f9f9f1 url(../images/truncated.png?v=v2.3.0) bottom repeat-x;
 }
 /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
 table.listResults tr.even td.hover.truncated, .wizContainer table.listResults tr.even td.hover.truncated {
-  background: #fdf5d0 url(../images/truncated.png?v=v2.3.0b) bottom repeat-x;
+  background: #fdf5d0 url(../images/truncated.png?v=v2.3.0) bottom repeat-x;
 }
 /* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */
 table.listResults tr.odd td.hover.truncated, table.listResults tr td.hover.truncated, .wizContainer table.listResults tr.odd td.hover.truncated, .wizContainer table.listResults tr td.hover.truncated {
-  background: #fdf5d0 url(../images/truncated.png?v=v2.3.0b) bottom repeat-x;
+  background: #fdf5d0 url(../images/truncated.png?v=v2.3.0) bottom repeat-x;
 }
 table.listResults.truncated {
   border-bottom: 0;
@@ -859,7 +859,7 @@ div#logo {
 div#logo div {
   height: 88px;
   width: 244px;
-  background: url(../images/itop-logo-2.png?v=v2.3.0b) left no-repeat;
+  background: url(../images/itop-logo-2.png?v=v2.3.0) left no-repeat;
 }
 #left-pane .ui-layout-north {
   overflow: hidden;
@@ -908,7 +908,7 @@ div#logo div {
 }
 #global-search-image {
   vertical-align: middle;
-  background: url(../images/search.png?v=v2.3.0b) center center no-repeat;
+  background: url(../images/search.png?v=v2.3.0) center center no-repeat;
   display: inline-block;
   width: 28px;
   height: 30px;
@@ -937,7 +937,7 @@ span.ui-icon {
   margin: 0 2px;
 }
 .ui-layout-button-pin-down {
-  background: url(../images/splitter-bkg.png?v=v2.3.0b) transparent;
+  background: url(../images/splitter-bkg.png?v=v2.3.0) transparent;
   width: 16px;
   background-position: -144px -144px;
 }
@@ -1148,7 +1148,7 @@ img.prev, img.first, img.next, img.last {
 }
 div.actions_button {
   float: right;
-  background: #e87c1e url("../images/actions_left.png?v=v2.3.0b") no-repeat scroll left top;
+  background: #e87c1e url("../images/actions_left.png?v=v2.3.0") no-repeat scroll left top;
   padding-left: 5px;
   margin-top: 0;
   margin-right: 10px;
@@ -1156,7 +1156,7 @@ div.actions_button {
   vertical-align: middle;
 }
 div.actions_button a, .actions_button a:hover, .actions_button a:visited {
-  background: #e87c1e url(../images/actions_bkg.png?v=v2.3.0b) no-repeat scroll right top;
+  background: #e87c1e url(../images/actions_bkg.png?v=v2.3.0) no-repeat scroll right top;
   color: #fff;
   padding-right: 8px;
   cursor: pointer;
@@ -1180,10 +1180,10 @@ select#org_id {
   cursor: not-allowed;
 }
 .dragHover {
-  background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.3.0b);
+  background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.3.0);
 }
 .edit_mode .dashlet {
-  background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.3.0b);
+  background: url(./ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png?v=v2.3.0);
   padding: 5px;
   margin: 0;
   position: relative;
@@ -1215,7 +1215,7 @@ table.prop_table {
   top: 0;
   right: 0;
   z-index: 10;
-  background: transparent url(../images/delete.png?v=v2.3.0b) no-repeat center;
+  background: transparent url(../images/delete.png?v=v2.3.0) no-repeat center;
 }
 td.prop_value {
   text-align: left;
@@ -1409,17 +1409,17 @@ a.summary, a.summary:hover {
 }
 .message_info {
   border: 1px solid #993;
-  background: url(../images/info-mini.png?v=v2.3.0b) 1em 1em no-repeat #ffc;
+  background: url(../images/info-mini.png?v=v2.3.0) 1em 1em no-repeat #ffc;
   padding-left: 3em;
 }
 .message_ok {
   border: 1px solid #393;
-  background: url(../images/ok.png?v=v2.3.0b) 1em 1em no-repeat #cfc;
+  background: url(../images/ok.png?v=v2.3.0) 1em 1em no-repeat #cfc;
   padding-left: 3em;
 }
 .message_error {
   border: 1px solid #933;
-  background: url(../images/error.png?v=v2.3.0b) 1em 1em no-repeat #fcc;
+  background: url(../images/error.png?v=v2.3.0) 1em 1em no-repeat #fcc;
   padding-left: 3em;
 }
 .fg-menu a img {
@@ -1547,18 +1547,18 @@ div.explain-printable {
 }
 #hiddeable_chapters .ui-tabs .ui-tabs-nav li.hideable-chapter span {
   padding-left: 20px;
-  background: url(../images/eye-open-555.png?v=v2.3.0b) 2px center no-repeat;
+  background: url(../images/eye-open-555.png?v=v2.3.0) 2px center no-repeat;
 }
 #hiddeable_chapters .ui-tabs .ui-tabs-nav li.hideable-chapter.strikethrough span {
   text-decoration: line-through;
-  background: url(../images/eye-closed-555.png?v=v2.3.0b) 2px center no-repeat;
+  background: url(../images/eye-closed-555.png?v=v2.3.0) 2px center no-repeat;
 }
 .printable-version legend {
   padding-left: 26px;
-  background: #1c94c4 url(../images/eye-open-fff.png?v=v2.3.0b) 8px center no-repeat;
+  background: #1c94c4 url(../images/eye-open-fff.png?v=v2.3.0) 8px center no-repeat;
 }
 .printable-version .strikethrough legend {
-  background: #1c94c4 url(../images/eye-closed-fff.png?v=v2.3.0b) 8px center no-repeat;
+  background: #1c94c4 url(../images/eye-closed-fff.png?v=v2.3.0) 8px center no-repeat;
 }
 .printable-version fieldset.strikethrough span {
   display: none;
@@ -1577,7 +1577,7 @@ span.refresh-button {
   width: 21px;
   height: 18px;
   cursor: pointer;
-  background: transparent url(../images/refresh-fff.png?v=v2.3.0b) left center no-repeat;
+  background: transparent url(../images/refresh-fff.png?v=v2.3.0) left center no-repeat;
 }
 .case-log-history-entry {
   display: block;
@@ -1705,7 +1705,7 @@ span.refresh-button {
 #itop-breadcrumb .breadcrumb-item a::after {
   content: '';
   position: absolute;
-  background-image: url(../images/breadcrumb-separator.png?v=v2.3.0b);
+  background-image: url(../images/breadcrumb-separator.png?v=v2.3.0);
   background-repeat: no-repeat;
   width: 8px;
   height: 16px;
@@ -1746,3 +1746,20 @@ span.refresh-button {
 .mfp-close {
   cursor: pointer !important;
 }
+.qtip-content {
+  font-size: 12px;
+}
+.qtip-content p:first-child {
+  margin-top: 0px;
+}
+.qtip-content p:last-child {
+  margin-bottom: 0px;
+}
+.synchro-source-title {
+  font-weight: bolder;
+}
+.synchro-source-description {
+  font-size: smaller;
+  margin-top: 3px;
+  margin-bottom: 1px;
+}

css/light-grey.scss

@@ -1869,3 +1869,23 @@ span.refresh-button {
 .mfp-close {
 	cursor: pointer !important;
 }
+
+.qtip-content {
+	font-size: 12px;
+}
+.qtip-content p:first-child {
+	margin-top: 0px;
+}
+.qtip-content p:last-child {
+	margin-bottom: 0px;
+}
+.synchro-source {
+}
+.synchro-source-title {
+	font-weight: bolder;
+}
+.synchro-source-description {
+	font-size: smaller;
+	margin-top: 3px;
+	margin-bottom: 1px;
+}