Make panels collapsible

css/backoffice/components/_panel.scss

@@ -35,6 +35,10 @@ $ibo-panel--body--border-radius: $ibo-border-radius-500 !default;
 $ibo-panel--body--border-size: 1px !default;
 $ibo-panel--body--border-color: $ibo-color-grey-400 !default;
 
+$ibo-panel--collapsible-toggler--margin-right: 8px !default;
+$ibo-panel--collapsible-toggler--font-size: $ibo-font-size-250 !default;
+$ibo-panel--collapsible-toggler--color: $ibo-color-grey-700 !default;
+
 $ibo-panel-colors: (
 		'primary': $ibo-color-primary-600,
 		'secondary': $ibo-color-secondary-600,
@@ -82,7 +86,8 @@ $ibo-panel-colors: (
 }
 
 .ibo-panel--title {
-	color: $ibo-panel--title--color;
+  display: inline-block;
+  color: $ibo-panel--title--color;
 	@extend %ibo-font-ral-med-250;
 	flex-grow: 1;
 
@@ -123,3 +128,31 @@ $ibo-panel-colors: (
 
 	@extend %ibo-font-ral-nor-200;
 }
+
+.ibo-panel--collapsible-toggler{
+  display: inline-block;
+  margin-right: $ibo-panel--collapsible-toggler--margin-right;
+  font-size: $ibo-panel--collapsible-toggler--font-size;
+  color: $ibo-panel--collapsible-toggler--color;
+  cursor: pointer;
+}
+
+.ibo-panel--collapsible-toggler--opened{
+  display: block;
+}
+
+.ibo-panel--collapsible-toggler--closed{
+  display: none;
+}
+
+.ibo-panel:not(.ibo-is-opened) {
+  .ibo-panel--collapsible-toggler--closed{
+    display: block;
+  }
+  .ibo-panel--collapsible-toggler--opened{
+    display: none;
+  }
+  .ibo-panel--body{
+    display: none;
+  }
+}

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

@@ -40,6 +40,7 @@ class Panel extends UIContentBlock
 	// Overloaded constants
 	public const BLOCK_CODE = 'ibo-panel';
 	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/panel/layout';
+	public const DEFAULT_JS_TEMPLATE_REL_PATH = 'base/components/panel/layout';
 
 	// Specific constants
 	/** @var string ENUM_COLOR_PRIMARY */
@@ -91,6 +92,8 @@ class Panel extends UIContentBlock
 	protected $sColor;
 	/** @var string $sSubTitle */
 	protected $sSubTitle;
+	/** @var bool $bIsCollapsible */
+	protected $bIsCollapsible;
 
 	/**
 	 * Panel constructor.
@@ -108,6 +111,7 @@ class Panel extends UIContentBlock
 		$this->sColor = $sColor;
 		$this->SetMainBlocks([]);
 		$this->SetToolBlocks([]);
+		$this->bIsCollapsible = false;
 	}
 
 	/**
@@ -170,6 +174,27 @@ class Panel extends UIContentBlock
 		return $this;
 	}
 
+	/**
+	 * @return bool
+	 */
+	public function isIsCollapsible(): bool
+	{
+		return $this->bIsCollapsible;
+	}
+
+	/**
+	 * @param bool $bIsCollapsible
+	 *
+	 * @return $this
+	 */
+	public function SetIsCollapsible(bool $bIsCollapsible)
+	{
+		$this->bIsCollapsible = $bIsCollapsible;
+		return $this;
+	}
+	
+	
+
 	//----------------------
 	// Specific content area
 	//----------------------

templates/base/components/panel/layout.html.twig

@@ -1,10 +1,14 @@
 {# @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() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" {% block iboPanelMetaData %}{% endblock %}>
+    <div id="{{ oUIBlock.GetId() }}" class="ibo-panel ibo-is-{{ oUIBlock.GetColor() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %} ibo-is-opened" {% block iboPanelMetaData %}{% endblock %}>
         <div class="ibo-panel--header">
             {% block iboPanelHeader %}
                 <div class="ibo-panel--header-left">
+                    {% if oUIBlock.isCollapsible() %}<div class="ibo-panel--collapsible-toggler" data-role="ibo-panel--collapsible-toggler">
+                        <i class="fas fa-caret-right ibo-panel--collapsible-toggler--closed"></i>
+                        <i class="fas fa-caret-down ibo-panel--collapsible-toggler--opened"></i>
+                    </div>{% endif %}
                     {% block iboPanelHeaderLeft %}
                         <div class="ibo-panel--title">{% block iboPanelTitle %}{{ oUIBlock.GetTitle()|raw }}{% endblock %}</div>
                         {% if oUIBlock.GetSubTitle() is not null %}

templates/base/components/panel/layout.js.twig

@@ -0,0 +1,5 @@
+{% if oUIBlock.isCollapsible() %}
+    $('#{{ oUIBlock.GetId() }}').find('[data-role="ibo-panel--collapsible-toggler"]').on('click', function(){
+        $('#{{ oUIBlock.GetId() }}').toggleClass('ibo-is-opened');
+    });
+{% endif %}