N°2844 N°3570 Bring back Synchronized, Obsolete and Archived tags next to object name

application/cmdbabstract.class.inc.php

@@ -376,24 +376,24 @@ EOF
 					$sTaskUrl = $aMasterSources[$oCreatorTask->GetKey()]['url'];
 					if (!$bCanBeDeletedByUser)
 					{
-						$sTip = "<p>".Dict::Format('Core:Synchro:TheObjectCannotBeDeletedByUser_Source',
-								$sTaskUrl)."</p>";
+						$sTip = "<div>".Dict::Format('Core:Synchro:TheObjectCannotBeDeletedByUser_Source',
+								$sTaskUrl)."</div>";
 					}
 					else
 					{
-						$sTip = "<p>".Dict::Format('Core:Synchro:TheObjectWasCreatedBy_Source', $sTaskUrl)."</p>";
+						$sTip = "<div>".Dict::Format('Core:Synchro:TheObjectWasCreatedBy_Source', $sTaskUrl)."</div>";
 					}
 					if ($bCanBeDeletedByTask)
 					{
-						$sTip .= "<p>".Dict::Format('Core:Synchro:TheObjectCanBeDeletedBy_Source', $sTaskUrl)."</p>";
+						$sTip .= "<div>".Dict::Format('Core:Synchro:TheObjectCanBeDeletedBy_Source', $sTaskUrl)."</div>";
 					}
 				}
 				else
 				{
-					$sTip = "<p>".Dict::S('Core:Synchro:ThisObjectIsSynchronized')."</p>";
+					$sTip = "<div>".Dict::S('Core:Synchro:ThisObjectIsSynchronized')."</div>";
 				}
 
-				$sTip .= "<p><b>".Dict::S('Core:Synchro:ListOfDataSources')."</b></p>";
+				$sTip .= "<div><b>".Dict::S('Core:Synchro:ListOfDataSources')."</b></div>";
 				foreach($aMasterSources as $aStruct)
 				{
 					// Formatting last synchro date
@@ -403,34 +403,27 @@ EOF
 
 					$oDataSource = $aStruct['datasource'];
 					$sLink = $aStruct['url'];
-					$sTip .= "<p style=\"white-space:nowrap\">".$oDataSource->GetIcon(true,
-							'style="vertical-align:middle"')."&nbsp;$sLink<br/>";
-					$sTip .= Dict::S('Core:Synchro:LastSynchro').'<br/>'.$sLastSynchro."</p>";
+					$sTip .= "<div>".$oDataSource->GetIcon(true, '')."$sLink</div>";
+					$sTip .= Dict::S('Core:Synchro:LastSynchro').'<div>'.$sLastSynchro."</div>";
 				}
-				$sTip = utils::HtmlEntities($sTip);
-				$sLabel = htmlentities(Dict::S('Tag:Synchronized'), ENT_QUOTES, 'UTF-8');
+				$sLabel = Dict::S('Tag:Synchronized');
 				$sSynchroTagId = 'synchro_icon-'.$this->GetKey();
-				$aIcons[] = '<div class="tag" id="'.$sSynchroTagId.'" data-tooltip-content="'.$sTip.'" data-tooltip-html-enabled="true"><span class="object-synchronized fas fa-lock fa-1x"></span>'.$sLabel.'</div>';
+				$aIcons[$sSynchroTagId] = ['title' => $sTip, 'cssClasses' => 'ibo-title--object-tags--synchronized', 'iconCssClasses' => 'fas fa-lock', 'label' => $sLabel];
 			}
 		}
 
+			$sLabel = Dict::S('Tag:Archived');
+			$sTitle = Dict::S('Tag:Archived+');
+			$aIcons['archive'] = ['title' => $sTitle, 'cssClasses' => 'ibo-title--object-tags--archived', 'iconCssClasses' => 'fas fa-archive', 'label' => $sLabel];
 		if ($this->IsArchived()) {
-			$sLabel = htmlentities(Dict::S('Tag:Archived'), ENT_QUOTES, 'UTF-8');
-			$sTitle = htmlentities(Dict::S('Tag:Archived+'), ENT_QUOTES, 'UTF-8');
-			$aIcons[] = "<div class=\"tag\" title=\"$sTitle\"><span class=\"object-archived fas fa-archive fa-1x\">&nbsp;</span>&nbsp;$sLabel</div>";
 		} elseif ($this->IsObsolete()) {
-			$sLabel = htmlentities(Dict::S('Tag:Obsolete'), ENT_QUOTES, 'UTF-8');
-			$sTitle = htmlentities(Dict::S('Tag:Obsolete+'), ENT_QUOTES, 'UTF-8');
-			$aIcons[] = "<div class=\"tag\" title=\"$sTitle\"><span class=\"object-obsolete fas fa-eye-slash fa-1x\">&nbsp;</span>&nbsp;$sLabel</div>";
+
 		}
+			$sLabel = Dict::S('Tag:Obsolete');
+			$sTitle = Dict::S('Tag:Obsolete+');
+			$aIcons['obsolete'] = ['title' => $sTitle, 'cssClasses' => 'ibo-title--object-tags--obsolete', 'iconCssClasses' => 'ibo- fas fa-eye-slash', 'label' => $sLabel];
 
-//		if (count($aIcons) > 0) {
-//			$sTags = '<div class="tags">'.implode('&nbsp;', $aIcons).'</div>';
-//		} else {
-//			$sTags = '';
-//		}
-
-		$oPage->AddUiBlock(TitleUIBlockFactory::MakeForObjectDetails($this));
+		$oPage->AddUiBlock(TitleUIBlockFactory::MakeForObjectDetails($this, $aIcons));
 	}
 
 	/**

css/backoffice/components/_title.scss

@@ -19,6 +19,17 @@ $ibo-title--status-dot--size: 10px !default;
 $ibo-title--status-dot--spacing: 8px !default;
 $ibo-title--status-dot--border-radius: $ibo-border-radius-full !default;
 
+$ibo-title--object-tags--margin-left: 12px !default;
+$ibo-title--object-tags--color: $ibo-color-grey-900 !default;
+
+$ibo-title--object-tags--icon--margin-right: 6px !default;
+$ibo-title--object-tags--icon--color: $ibo-color-grey-700 !default;
+
+$ibo-title--object-tags--separator-dot--background-color: $ibo-color-grey-800 !default;
+$ibo-title--object-tags--separator-dot--diameter: 5px !default;
+$ibo-title--object-tags--separator-dot--margin-right: 12px !default;
+$ibo-title--object-tags--separator-dot--border-radius: $ibo-border-radius-full !default;
+
 .ibo-title {
   @extend %ibo-baseline-centered-content;
 
@@ -58,6 +69,7 @@ $ibo-title--status-dot--border-radius: $ibo-border-radius-full !default;
   margin-bottom: 2px;
   @extend %ibo-baseline-centered-content;
   @extend %ibo-font-ral-nor-150;
+  flex-wrap: wrap;
 }
 
 .ibo-title--status {
@@ -121,4 +133,23 @@ $ibo-title--status-dot--border-radius: $ibo-border-radius-full !default;
 	border: 3px solid ;
 	margin:0;
 	padding:0;
+}
+
+.ibo-title--object-tags {
+  margin-left: $ibo-title--object-tags--margin-left;
+  color: $ibo-title--object-tags--color;
+}
+.ibo-title--object-tags > i {
+  margin-right: $ibo-title--object-tags--icon--margin-right;
+  color: $ibo-title--object-tags--icon--color;
+}
+.ibo-title--object-tags ~ .ibo-title--object-tags::before,  .ibo-title--object-class ~ .ibo-title--object-tags::before{
+  content: " ";
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: $ibo-title--object-tags--separator-dot--margin-right;
+  width: $ibo-title--object-tags--separator-dot--diameter;
+  height: $ibo-title--object-tags--separator-dot--diameter;
+  border-radius: $ibo-title--object-tags--separator-dot--border-radius;
+  background-color: $ibo-title--object-tags--separator-dot--background-color;
 }

sources/application/UI/Base/Component/Title/TitleForObjectDetails.php

@@ -19,6 +19,7 @@ class TitleForObjectDetails extends Title
 	protected $sStatusCode;
 	protected $sStatusLabel;
 	protected $sStatusColor;
+	protected $aTags;
 
 	public function __construct(string $sClassName, string $sObjectName, ?string $sId = null)
 	{
@@ -28,6 +29,7 @@ class TitleForObjectDetails extends Title
 		$this->sStatusCode = null;
 		$this->sStatusLabel = null;
 		$this->sStatusColor = null;
+		$this->aTags = [];
 	}
 
 	/**
@@ -69,4 +71,26 @@ class TitleForObjectDetails extends Title
 	{
 		return $this->sStatusColor;
 	}
+
+	/**
+	 * @return array
+	 */
+	public function GetTags(): array
+	{
+		return $this->aTags;
+	}
+
+	/**
+	 * @param array $aTags
+	 * 
+	 * @return $this
+	 */
+	public function SetTags(array $aTags)
+	{
+		$this->aTags = $aTags;
+		return $this;
+	}
+		
+
+	
 }

sources/application/UI/Base/Component/Title/TitleUIBlockFactory.php

@@ -34,7 +34,7 @@ class TitleUIBlockFactory extends AbstractUIBlockFactory
 		return $oTitle;
 	}
 
-	public static function MakeForObjectDetails(DBObject $oObject, ?string $sId = null)
+	public static function MakeForObjectDetails(DBObject $oObject, array $aIcons = [], ?string $sId = null)
 	{
 		// TODO 3.0.0: Refactor all of this
 		$sObjClass = get_class($oObject);
@@ -77,6 +77,7 @@ class TitleUIBlockFactory extends AbstractUIBlockFactory
 				$oTitle->SetStatus($sStatusAttCode, $sStatusLabel, $sStatusColor);
 			}
 		}
+		$oTitle->SetTags($aIcons);
 
 		return $oTitle;
 	}

templates/base/components/title/titleforobjectdetails.html.twig

@@ -12,5 +12,8 @@
             </span>
         {% endif %}
         <span class="ibo-title--object-class">{{ oUIBlock.GetClassName() }}</span>
+        {% for tag, tagValues in oUIBlock.GetTags() %}
+            <span id="{{ tag }}" class="ibo-title--object-tags {{ tagValues.cssClasses }}" data-tooltip-content="{{ tagValues.title }}" data-tooltip-html-enabled="true"><i class="{{ tagValues.iconCssClasses }}"></i>{{ tagValues.label }}</span>
+        {% endfor %}
     </div>
 {% endblock %}