N°2847 - FieldSet, MultiColumn, Tab for object details CSS

2026-03-05 00:54:12 +01:00 · 2020-09-24 10:45:14 +02:00
parent 7bf473d2a3
commit ecd5a7aadf
13 changed files with 168 additions and 54 deletions
--- a/application/cmdbabstract.class.inc.php
+++ b/application/cmdbabstract.class.inc.php
@@ -17,8 +17,10 @@
 * You should have received a copy of the GNU Affero General Public License
 */

+use Combodo\iTop\Application\UI\Component\Alert\AlertFactory;
 use Combodo\iTop\Application\UI\Component\Field\Field;
 use Combodo\iTop\Application\UI\Component\FieldSet\FieldSet;
+use Combodo\iTop\Application\UI\Component\Title\TitleFactory;
 use Combodo\iTop\Application\UI\Layout\Column\Column;
 use Combodo\iTop\Application\UI\Layout\MultiColumn\MultiColumn;

@@ -215,46 +217,51 @@ EOF
 		// Standard Header with name, actions menu and history block
 		//

-		if (!$oPage->IsPrintableVersion())
-		{
+		if (!$oPage->IsPrintableVersion()) {
 			// Is there a message for this object ??
-			$aMessages = array();
-			$aRanks = array();
-			if (MetaModel::GetConfig()->Get('concurrent_lock_enabled'))
-			{
+			$aMessages = [];
+			$aRanks = [];
+			if (MetaModel::GetConfig()->Get('concurrent_lock_enabled')) {
 				$aLockInfo = iTopOwnershipLock::IsLocked(get_class($this), $this->GetKey());
-				if ($aLockInfo['locked'])
-				{
+				if ($aLockInfo['locked']) {
 					$aRanks[] = 0;
 					$sName = $aLockInfo['owner']->GetName();
-					if ($aLockInfo['owner']->Get('contactid') != 0)
-					{
+					if ($aLockInfo['owner']->Get('contactid') != 0) {
 						$sName .= ' ('.$aLockInfo['owner']->Get('contactid_friendlyname').')';
 					}
 					$aResult['message'] = Dict::Format('UI:CurrentObjectIsLockedBy_User', $sName);
-					$aMessages[] = "<div class=\"header_message message_error\">".Dict::Format('UI:CurrentObjectIsLockedBy_User',
-							$sName)."</div>";
+					$aMessages[] = AlertFactory::MakeForDanger('', Dict::Format('UI:CurrentObjectIsLockedBy_User', $sName));
 				}
 			}
 			$sMessageKey = get_class($this).'::'.$this->GetKey();
 			if (array_key_exists('obj_messages', $_SESSION) && array_key_exists($sMessageKey,
-					$_SESSION['obj_messages']))
-			{
-				foreach($_SESSION['obj_messages'][$sMessageKey] as $sMessageId => $aMessageData)
-				{
-					$sMsgClass = 'message_'.$aMessageData['severity'];
-					if(!in_array("<div class=\"header_message $sMsgClass\">".$aMessageData['message']."</div>",$aMessages))
-					{
-						$aMessages[] = "<div class=\"header_message $sMsgClass\">".$aMessageData['message']."</div>";
+					$_SESSION['obj_messages'])) {
+				$aReadMessages = [];
+				foreach ($_SESSION['obj_messages'][$sMessageKey] as $sMessageId => $aMessageData) {
+					if (!in_array($aMessageData['message'], $aReadMessages)) {
+						$aReadMessages[] = $aMessageData['message'];
 						$aRanks[] = $aMessageData['rank'];
+						switch ($aMessageData['severity']) {
+							case 'info':
+								$aMessages[] = AlertFactory::MakeForInformation('', $aMessageData['message']);
+								break;
+							case 'ok':
+								$aMessages[] = AlertFactory::MakeForSuccess('', $aMessageData['message']);
+								break;
+							case 'warning':
+								$aMessages[] = AlertFactory::MakeForWarning('', $aMessageData['message']);
+								break;
+							case 'error':
+								$aMessages[] = AlertFactory::MakeForDanger('', $aMessageData['message']);
+								break;
+						}
 					}
 				}
 				unset($_SESSION['obj_messages'][$sMessageKey]);
 			}
 			array_multisort($aRanks, $aMessages);
-			foreach($aMessages as $sMessage)
-			{
-				$oPage->add($sMessage);
+			foreach ($aMessages as $oMessage) {
+				$oPage->AddUiBlock($oMessage);
 			}
 		}

@@ -364,14 +371,11 @@ EOF
 			}
 		}

-		if ($this->IsArchived())
-		{
+		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())
-		{
+		} 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>";
@@ -380,28 +384,13 @@ EOF
 		$sObjectIcon = $this->GetIcon();
 		$sClassName = MetaModel::GetName(get_class($this));
 		$sObjectName = $this->GetName();
-		if (count($aIcons) > 0)
-		{
+		if (count($aIcons) > 0) {
 			$sTags = '<div class="tags">'.implode('&nbsp;', $aIcons).'</div>';
-		}
-		else
-		{
+		} else {
 			$sTags = '';
 		}

-		$oPage->add(
-			<<<EOF
-<div class="page_header">
-   <div class="object-details-header">
-      <div class ="object-icon">$sObjectIcon</div>
-      <div class ="object-infos">
-		  <h1 class="object-name">$sClassName: <span class="hilite">$sObjectName</span></h1>
-		  $sTags
-      </div>
-   </div>
-</div>
-EOF
-		);
+		$oPage->AddUiBlock(TitleFactory::MakeForObjectDetails($sClassName, $sObjectName, $sObjectIcon));
 	}

 	/**
--- a/css/backoffice/components/_tabcontainer.scss
+++ b/css/backoffice/components/_tabcontainer.scss
@@ -4,8 +4,11 @@
 */

 .ibo-tab-container {
-  //border: 1px solid $ibo-color-grey-400;
-  //border-radius: 5px;
+
+}
+
+.ibo-tab-container-header {
+  background: $ibo-color-grey-100;
 }

 .ibo-tab-header {
--- a/css/backoffice/components/_title.scss
+++ b/css/backoffice/components/_title.scss
@@ -2,3 +2,26 @@
 * copyright   Copyright (C) 2010-2020 Combodo SARL
 * license     http://opensource.org/licenses/AGPL-3.0
 */
+
+.ibo-title {
+
+  color: $ibo-color-grey-900;
+
+  .ibo-title--icon {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .ibo-title--content {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .ibo-title--emphasis {
+
+  }
+
+  .ibo-title--for-object-details {
+    @extend %ibo-font-ral-med-350;
+  }
+}
--- a/lib/composer/autoload_classmap.php
+++ b/lib/composer/autoload_classmap.php
@@ -183,6 +183,7 @@ return array(
    'Combodo\\iTop\\Application\\UI\\Component\\QuickCreate\\QuickCreateHelper' => $baseDir . '/sources/application/UI/Component/QuickCreate/QuickCreateHelper.php',
    'Combodo\\iTop\\Application\\UI\\Component\\Title\\Title' => $baseDir . '/sources/application/UI/Component/Title/Title.php',
    'Combodo\\iTop\\Application\\UI\\Component\\Title\\TitleFactory' => $baseDir . '/sources/application/UI/Component/Title/TitleFactory.php',
+    'Combodo\\iTop\\Application\\UI\\Component\\Title\\TitleForObjectDetails' => $baseDir . '/sources/application/UI/Component/Title/TitleForObjectDetails.php',
    'Combodo\\iTop\\Application\\UI\\Layout\\ActivityPanel\\ActivityEntry\\ActivityEntry' => $baseDir . '/sources/application/UI/Layout/ActivityPanel/ActivityEntry/ActivityEntry.php',
    'Combodo\\iTop\\Application\\UI\\Layout\\ActivityPanel\\ActivityEntry\\ActivityEntryFactory' => $baseDir . '/sources/application/UI/Layout/ActivityPanel/ActivityEntry/ActivityEntryFactory.php',
    'Combodo\\iTop\\Application\\UI\\Layout\\ActivityPanel\\ActivityEntry\\CMDBChangeOp\\CMDBChangeOpAttachmentAddedFactory' => $baseDir . '/sources/application/UI/Layout/ActivityPanel/ActivityEntry/CMDBChangeOp/CMDBChangeOpAttachmentAddedFactory.php',
--- a/lib/composer/autoload_static.php
+++ b/lib/composer/autoload_static.php
@@ -413,6 +413,7 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
        'Combodo\\iTop\\Application\\UI\\Component\\QuickCreate\\QuickCreateHelper' => __DIR__ . '/../..' . '/sources/application/UI/Component/QuickCreate/QuickCreateHelper.php',
        'Combodo\\iTop\\Application\\UI\\Component\\Title\\Title' => __DIR__ . '/../..' . '/sources/application/UI/Component/Title/Title.php',
        'Combodo\\iTop\\Application\\UI\\Component\\Title\\TitleFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/Title/TitleFactory.php',
+        'Combodo\\iTop\\Application\\UI\\Component\\Title\\TitleForObjectDetails' => __DIR__ . '/../..' . '/sources/application/UI/Component/Title/TitleForObjectDetails.php',
        'Combodo\\iTop\\Application\\UI\\Layout\\ActivityPanel\\ActivityEntry\\ActivityEntry' => __DIR__ . '/../..' . '/sources/application/UI/Layout/ActivityPanel/ActivityEntry/ActivityEntry.php',
        'Combodo\\iTop\\Application\\UI\\Layout\\ActivityPanel\\ActivityEntry\\ActivityEntryFactory' => __DIR__ . '/../..' . '/sources/application/UI/Layout/ActivityPanel/ActivityEntry/ActivityEntryFactory.php',
        'Combodo\\iTop\\Application\\UI\\Layout\\ActivityPanel\\ActivityEntry\\CMDBChangeOp\\CMDBChangeOpAttachmentAddedFactory' => __DIR__ . '/../..' . '/sources/application/UI/Layout/ActivityPanel/ActivityEntry/CMDBChangeOp/CMDBChangeOpAttachmentAddedFactory.php',
--- a/sources/application/UI/Component/Title/Title.php
+++ b/sources/application/UI/Component/Title/Title.php
@@ -25,12 +25,15 @@ class Title extends UIBlock
 	protected $sTitle;
 	/** @var int */
 	protected $iLevel;
+	/** @var string */
+	protected $sIconHtml;

 	public function __construct(string $sTitle = '', int $iLevel = 1, ?string $sId = null)
 	{
 		parent::__construct($sId);
 		$this->sTitle = $sTitle;
 		$this->iLevel = $iLevel;
+		$this->sIconHtml = null;
 	}

 	/**
@@ -48,4 +51,21 @@ class Title extends UIBlock
 	{
 		return $this->iLevel;
 	}
+
+	public function SetIcon(string $sIconHtml): self
+	{
+		$this->sIconHtml = $sIconHtml;
+		return $this;
+	}
+
+	public function GetIcon(): string
+	{
+		return $this->sIconHtml;
+	}
+
+	public function HasIcon(): string
+	{
+		return !is_null($this->sIconHtml);
+	}
+
 }
--- a/sources/application/UI/Component/Title/TitleFactory.php
+++ b/sources/application/UI/Component/Title/TitleFactory.php
@@ -15,4 +15,12 @@ class TitleFactory
 	{
 		return new Title($sTitle, 1, $sId);
 	}
+
+	public static function MakeForObjectDetails(string $sClassName, string $sObjectName, string $sIconHtml, ?string $sId = null)
+	{
+		$oTitle = new TitleForObjectDetails($sClassName, $sObjectName, $sId);
+		$oTitle->SetIcon($sIconHtml);
+
+		return $oTitle;
+	}
 }
--- a/sources/application/UI/Component/Title/TitleForObjectDetails.php
+++ b/sources/application/UI/Component/Title/TitleForObjectDetails.php
@@ -0,0 +1,44 @@
+<?php
+/**
+ * @copyright   Copyright (C) 2010-2020 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+
+namespace Combodo\iTop\Application\UI\Component\Title;
+
+
+class TitleForObjectDetails extends Title
+{
+	public const HTML_TEMPLATE_REL_PATH = 'components/title/titleforobjectdetails';
+
+	/** @var string */
+	protected $sClassName;
+	/** @var string */
+	protected $sObjectName;
+
+	public function __construct(string $sClassName, string $sObjectName, ?string $sId = null)
+	{
+		parent::__construct('', 2, $sId);
+		$this->sClassName = $sClassName;
+		$this->sObjectName = $sObjectName;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetClassName(): string
+	{
+		return $this->sClassName;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetObjectName(): string
+	{
+		return $this->sObjectName;
+	}
+
+
+}
--- a/sources/application/WebPage/iTopWebPage.php
+++ b/sources/application/WebPage/iTopWebPage.php
@@ -19,6 +19,7 @@


 use Combodo\iTop\Application\TwigBase\Twig\TwigHelper;
+use Combodo\iTop\Application\UI\Component\Panel\Panel;
 use Combodo\iTop\Application\UI\iUIBlock;
 use Combodo\iTop\Application\UI\Layout\NavigationMenu\NavigationMenuFactory;
 use Combodo\iTop\Application\UI\Layout\PageContent\PageContent;
@@ -1229,7 +1230,11 @@ EOF;
 	 */
 	public function AddTabContainer($sTabContainer, $sPrefix = '')
 	{
-		$this->AddUiBlock($this->m_oTabs->AddTabContainer($sTabContainer, $sPrefix));
+		$oPanel = new Panel('');
+		// TODO 2.8.0 Change color according to object
+		$oPanel->SetColor(Panel::ENUM_COLOR_BLUE);
+		$oPanel->AddSubBlock($this->m_oTabs->AddTabContainer($sTabContainer, $sPrefix));
+		$this->AddUiBlock($oPanel);
 	}

 	/**
--- a/templates/components/html/layout.html.twig
+++ b/templates/components/html/layout.html.twig
@@ -1,3 +1 @@
-{% apply spaceless %}
-    {{ oUIBlock.GetHtml()|raw }}
-{% endapply %}
+{{ oUIBlock.GetHtml()|raw }}
--- a/templates/components/title/layout.html.twig
+++ b/templates/components/title/layout.html.twig
@@ -1 +1,16 @@
-<h{{ oUIBlock.GetLevel() }} class="ibo-preferences--title title is-size-{{ oUIBlock.GetLevel() + 2 }}">{{ oUIBlock.GetTitle() }}</h{{ oUIBlock.GetLevel() }}>
+{% apply spaceless %}
+    <div class="ibo-title">
+        {% if oUIBlock.HasIcon() %}
+            <div class="ibo-title--icon">
+                {{ oUIBlock.GetIcon()|raw }}
+            </div>
+        {% endif %}
+        <div class="ibo-title--content">
+            {% block iboPageTitleText %}
+                <h{{ oUIBlock.GetLevel() }} class="ibo-title--text title is-size-{{ oUIBlock.GetLevel() + 2 }}">
+                    {{ oUIBlock.GetTitle()|raw }}
+                </h{{ oUIBlock.GetLevel() }}>
+            {% endblock %}
+        </div>
+    </div>
+{% endapply %}
--- a/templates/components/title/titleforobjectdetails.html.twig
+++ b/templates/components/title/titleforobjectdetails.html.twig
@@ -0,0 +1,7 @@
+{# @copyright   Copyright (C) 2010-2020 Combodo SARL #}
+{# @license     http://opensource.org/licenses/AGPL-3.0 #}
+{% extends 'components/title/layout.html.twig' %}
+
+{% block iboPageTitleText %}
+    <h1 class="ibo-title--for-object-details">{{ oUIBlock.GetClassName() }} <span class="ibo-title--emphasis">{{ oUIBlock.GetObjectName()|raw }}</span></h1>
+{% endblock %}
--- a/templates/layouts/tabcontainer/layout.html.twig
+++ b/templates/layouts/tabcontainer/layout.html.twig
@@ -3,7 +3,7 @@
 {% block iboTabContainer %}
    <div class="ibo-tab-container-spinner"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
    <!-- tabs -->
-    <div id="tabbedContent_{$sPrefix}{$container_index}" class="ibo-tab-container light" style="display: none;">
+    <div id="tabbedContent_{$sPrefix}{$container_index}" class="ibo-tab-container" style="display: none;">
        <ul class="ibo-tab-container-header">
            {% for oTab in oUIBlock.GetSubBlocks() %}
                {% if oTab.GetType() == 'ajax' %}