N°2847 - Rework of Panel block

- Add 2 separate content areas (main and toolbar)
- Improve HTML template with header
- Prepare ObjectDetails block based on a panel

css/backoffice/components/_panel.scss

@@ -20,9 +20,9 @@
 $ibo-panel--spacing-top: 24px !default;
 
 $ibo-panel--highlight--width: 100% !default;
-$ibo-panel--highlight--height: 5px !default;
+$ibo-panel--highlight--height: 8px !default;
 $ibo-panel--highlight--border-radius: $ibo-border-radius-400 $ibo-border-radius-400 0 0 !default;
-$ibo-panel--highlight--padding-bottom: 5px !default;
+$ibo-panel--highlight--padding-bottom: $ibo-panel--highlight--height !default;
 
 $ibo-panel--title--color: $ibo-color-grey-900 !default;
 

css/backoffice/layout/_all.scss

@@ -21,6 +21,7 @@
 @import "content";
 @import "multi-column/multi-column";
 @import "multi-column/column";
+@import "object-details";
 @import "activity-panel/activity-panel";
 @import "activity-panel/activity-entry";
 @import "activity-panel/caselog-entry";

css/backoffice/layout/_object-details.scss

@@ -0,0 +1,20 @@
+/*!
+ * @copyright   Copyright (C) 2010-2020 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+$ibo-object-details--body--padding-top: $ibo-panel--highlight--height !default;
+$ibo-object-details--tabs-list--margin-x: -1 * $ibo-panel--body--padding-x !default;
+
+.ibo-object-details.ibo-panel {
+	> .ibo-panel--body {
+		padding-top: $ibo-object-details--body--padding-top;
+
+		> .ibo-tab-container {
+			> .ibo-tab-container--tabs-list{
+				margin-left: $ibo-object-details--tabs-list--margin-x;
+				margin-right: $ibo-object-details--tabs-list--margin-x;
+			}
+		}
+	}
+}

sources/application/UI/Component/Panel/Panel.php

@@ -20,7 +20,11 @@
 namespace Combodo\iTop\Application\UI\Component\Panel;
 
 
+use Combodo\iTop\Application\UI\Component\Html\Html;
+use Combodo\iTop\Application\UI\iUIBlock;
+use Combodo\iTop\Application\UI\Layout\iUIContentBlock;
 use Combodo\iTop\Application\UI\Layout\UIContentBlock;
+use Combodo\iTop\Application\UI\tUIContentAreas;
 
 /**
  * Class Panel
@@ -31,6 +35,8 @@ use Combodo\iTop\Application\UI\Layout\UIContentBlock;
  */
 class Panel extends UIContentBlock
 {
+	use tUIContentAreas;
+
 	// Overloaded constants
 	public const BLOCK_CODE = 'ibo-panel';
 	public const HTML_TEMPLATE_REL_PATH = 'components/panel/layout';
@@ -71,6 +77,11 @@ class Panel extends UIContentBlock
 	/** @var string ENUM_COLOR_PINK */
 	public const ENUM_COLOR_PINK = 'pink';
 
+	/** @var string ENUM_CONTENT_AREA_MAIN The main content area (panel body) */
+	public const ENUM_CONTENT_AREA_MAIN = 'main';
+	/** @var string ENUM_CONTENT_AREA_TOOLBAR The toolbar content area (for actions) */
+	public const ENUM_CONTENT_AREA_TOOLBAR = 'toolbar';
+
 	/** @var string DEFAULT_COLOR */
 	public const DEFAULT_COLOR = self::ENUM_COLOR_NEUTRAL;
 
@@ -91,10 +102,12 @@ class Panel extends UIContentBlock
 	 */
 	public function __construct(string $sTitle = '', array $aSubBlocks = [], string $sColor = self::DEFAULT_COLOR, ?string $sId = null)
 	{
+		parent::__construct($sId);
 		$this->sTitle = $sTitle;
 		$this->aSubBlocks = $aSubBlocks;
 		$this->sColor = $sColor;
-		parent::__construct($sId);
+		$this->SetMainBlocks([]);
+		$this->SetToolBlocks([]);
 	}
 
 	/**
@@ -136,4 +149,209 @@ class Panel extends UIContentBlock
 
 		return $this;
 	}
+
+	//----------------------
+	// Specific content area
+	//----------------------
+
+	/**
+	 * Set all main blocks at once.
+	 *
+	 * @param \Combodo\iTop\Application\UI\iUIBlock[] $aBlocks
+	 *
+	 * @return $this
+	 */
+	public function SetMainBlocks(array $aBlocks) {
+		$this->SetContentAreaBlocks(static::ENUM_CONTENT_AREA_MAIN, $aBlocks);
+
+		return $this;
+	}
+
+	/**
+	 * Return all the main blocks
+	 *
+	 * @return \Combodo\iTop\Application\UI\iUIBlock[]
+	 * @throws \Exception
+	 */
+	public function GetMainBlocks(): array {
+		return $this->GetContentAreaBlocks(static::ENUM_CONTENT_AREA_MAIN);
+	}
+
+	/**
+	 * Add the $oBlock to the main blocks.
+	 * Note that if a block with the same ID already exists, it will be replaced.
+	 *
+	 * @param \Combodo\iTop\Application\UI\iUIBlock $oBlock
+	 *
+	 * @return $this
+	 */
+	public function AddMainBlock(iUIBlock $oBlock) {
+		$this->AddBlockToContentArea(static::ENUM_CONTENT_AREA_MAIN, $oBlock);
+
+		return $this;
+	}
+
+	/**
+	 * Remove the main block identified by $sBlockId.
+	 * Note that if no block with that ID exists, it will proceed silently.
+	 *
+	 * @param string $sBlockId
+	 *
+	 * @return $this
+	 */
+	public function RemoveMainBlock(string $sBlockId) {
+		$this->RemoveBlockFromContentArea(static::ENUM_CONTENT_AREA_MAIN, $sBlockId);
+
+		return $this;
+	}
+
+	/**
+	 * Set all toolbar blocks at once.
+	 *
+	 * @param \Combodo\iTop\Application\UI\iUIBlock[] $aBlocks
+	 *
+	 * @return $this
+	 */
+	public function SetToolBlocks(array $aBlocks) {
+		$this->SetContentAreaBlocks(static::ENUM_CONTENT_AREA_TOOLBAR, $aBlocks);
+
+		return $this;
+	}
+
+	/**
+	 * Return all the toolbar blocks
+	 *
+	 * @return \Combodo\iTop\Application\UI\iUIBlock[]
+	 * @throws \Exception
+	 */
+	public function GetToolbarBlocks(): array {
+		return $this->GetContentAreaBlocks(static::ENUM_CONTENT_AREA_TOOLBAR);
+	}
+
+	/**
+	 * Add the $oBlock to the toolbar blocks.
+	 * Note that if a block with the same ID already exists, it will be replaced.
+	 *
+	 * @param \Combodo\iTop\Application\UI\iUIBlock $oBlock
+	 *
+	 * @return $this
+	 */
+	public function AddToolbarBlock(iUIBlock $oBlock) {
+		$this->AddBlockToContentArea(static::ENUM_CONTENT_AREA_TOOLBAR, $oBlock);
+
+		return $this;
+	}
+
+	/**
+	 * Remove the toolbar block identified by $sBlockId.
+	 * Note that if no block with that ID exists, it will proceed silently.
+	 *
+	 * @param string $sBlockId
+	 *
+	 * @return $this
+	 */
+	public function RemoveToolbarBlock(string $sBlockId) {
+		$this->RemoveBlockFromContentArea(static::ENUM_CONTENT_AREA_TOOLBAR, $sBlockId);
+
+		return $this;
+	}
+
+	//-------------------------------
+	// iUIContentBlock implementation
+	//-------------------------------
+
+	/**
+	 * @inheritDoc
+	 */
+	public function AddHtml(string $sHtml) {
+		$oBlock = new Html($sHtml);
+		$this->AddMainBlock($oBlock);
+
+		return $this;
+	}
+
+	/**
+	 * Add the $oSubBlock directly in the main area
+	 *
+	 * @inheritDoc
+	 */
+	public function AddSubBlock(iUIBlock $oSubBlock) {
+		$this->AddMainBlock($oSubBlock);
+
+		return $this;
+	}
+
+	/**
+	 * Remove a specified subBlock from all the areas
+	 *
+	 * @param string $sId
+	 *
+	 * @return $this
+	 */
+	public function RemoveSubBlock(string $sId) {
+		foreach ($this->GetContentAreas() as $oContentArea) {
+			$oContentArea->RemoveSubBlock($sId);
+		}
+
+		return $this;
+	}
+
+	/**
+	 * Check if the specified subBlock is within one of all the areas
+	 *
+	 * @param string $sId
+	 *
+	 * @return bool
+	 */
+	public function HasSubBlock(string $sId): bool {
+		foreach ($this->GetContentAreas() as $oContentArea) {
+			if ($oContentArea->HasSubBlock($sId)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Get a specific subBlock within all the areas
+	 *
+	 * @inheritDoc
+	 */
+	public function GetSubBlock(string $sId): ?iUIBlock {
+		foreach ($this->GetContentAreas() as $oContentArea) {
+			$oSubBlock = $oContentArea->GetSubBlock($sId);
+			if (!is_null($oSubBlock)) {
+				return $oSubBlock;
+			}
+		}
+
+		return null;
+	}
+
+	/**
+	 * Set the MAIN AREA subBlocks
+	 *
+	 * @inheritDoc
+	 * @return $this|\Combodo\iTop\Application\UI\Layout\iUIContentBlock
+	 */
+	public function SetSubBlocks(array $aSubBlocks): iUIContentBlock {
+		$this->SetMainBlocks($aSubBlocks);
+
+		return $this;
+	}
+
+	/**
+	 * Get ALL the blocks in all the areas
+	 *
+	 * @inheritDoc
+	 */
+	public function GetSubBlocks(): array {
+		$aSubBlocks = [];
+		foreach ($this->GetContentAreas() as $oContentArea) {
+			$aSubBlocks = array_merge($aSubBlocks, $oContentArea->GetSubBlocks());
+		}
+
+		return $aSubBlocks;
+	}
 }

sources/application/UI/Layout/Object/ObjectDetails.php

@@ -0,0 +1,17 @@
+<?php
+/*
+ * @copyright   Copyright (C) 2010-2020 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\UI\Layout\Object;
+
+
+use Combodo\iTop\Application\UI\Component\Panel\Panel;
+
+class ObjectDetails extends Panel
+{
+	// Overloaded constants
+	public const BLOCK_CODE = 'ibo-object-details';
+	public const HTML_TEMPLATE_REL_PATH = 'components/object/object-details/layout';
+}

sources/application/WebPage/iTopWebPage.php

@@ -19,7 +19,7 @@
 
 
 use Combodo\iTop\Application\TwigBase\Twig\TwigHelper;
-use Combodo\iTop\Application\UI\Component\Panel\Panel;
+use Combodo\iTop\Application\UI\Component\Panel\PanelFactory;
 use Combodo\iTop\Application\UI\iUIBlock;
 use Combodo\iTop\Application\UI\Layout\iUIContentBlock;
 use Combodo\iTop\Application\UI\Layout\NavigationMenu\NavigationMenuFactory;
@@ -1179,15 +1179,12 @@ EOF;
 	 */
 	public function AddTabContainer($sTabContainer, $sPrefix = '', iUIContentBlock $oParentBlock = null)
 	{
-		$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));
-		if (!is_null($oParentBlock)) {
-			$oParentBlock->AddSubBlock($oPanel);
-		} else {
-			$this->AddUiBlock($oPanel);
+		if(is_null($oParentBlock)) {
+			$oParentBlock = PanelFactory::MakeNeutral('');
+			$this->AddUiBlock($oParentBlock);
 		}
+
+		$oParentBlock->AddSubBlock($this->m_oTabs->AddTabContainer($sTabContainer, $sPrefix));
 	}
 
 	/**

templates/components/panel/layout.html.twig

@@ -1,6 +1,25 @@
-<div id="{{ oUIBlock.GetId() }}" class="ibo-panel ibo-is-{{ oUIBlock.GetColor() }}">
-    <div class="ibo-panel--title"> {{ oUIBlock.GetTitle() }}</div>
-    <div class="ibo-panel--body">
-        {% for oSubBlock in oUIBlock.GetSubBlocks() %}{{ render_block(oSubBlock, {aPage: aPage}) }}{% endfor %}
+{# @copyright   Copyright (C) 2010-2020 Combodo SARL #}
+{# @license     http://opensource.org/licenses/AGPL-3.0 #}
+{% apply spaceless %}
+    <div id="{{ oUIBlock.GetId() }}" class="ibo-panel ibo-is-{{ oUIBlock.GetColor() }}">
+        <div class="ibo-panel--header">
+            {% block iboPanelHeader %}
+                <div class="ibo-panel--title">{% block iboPanelTitle %}{{ oUIBlock.GetTitle() }}{% endblock %}</div>
+                <div class="ibo-panel--toolbar">
+                    {% block iboPanelToolbar %}
+                        {% for oToolbarBlock in oUIBlock.GetToolbarBlocks() %}
+                            {{ render_block(oToolbarBlock, {aPage: aPage}) }}
+                        {% endfor %}
+                    {% endblock %}
+                </div>
+            {% endblock %}
+        </div>
+        <div class="ibo-panel--body">
+            {% block iboPanelBody %}
+                {% for oMainBlock in oUIBlock.GetMainBlocks() %}
+                    {{ render_block(oMainBlock, {aPage: aPage}) }}
+                {% endfor %}
+            {% endblock %}
+        </div>
     </div>
-</div>
+{% endapply %}

templates/components/panel/object-details.html.twig

@@ -0,0 +1,10 @@
+{# @copyright   Copyright (C) 2010-2020 Combodo SARL #}
+{# @license     http://opensource.org/licenses/AGPL-3.0 #}
+{% extends 'components/panel/layout.html.twig' %}
+
+{% block iboPanelHeader %}
+    <div class="ibo-panel--medallion">{% block iboPanelMedallion %}MED.{% endblock %}</div>
+    {{ parent() }}
+{% endblock %}
+
+{% block iboPanelTitle %}{{ oUIBlock.GetTitle() }}{% endblock %}