N°2847 Add panel component

2026-04-18 16:18:47 +02:00 · 2020-08-17 17:01:03 +02:00
parent 223b063c60
commit 9516e7f023
8 changed files with 197 additions and 1 deletions
--- a/css/backoffice/components/_all.scss
+++ b/css/backoffice/components/_all.scss
@@ -20,6 +20,7 @@
@import "breadcrumbs";
@import "quick-create";
@import "global-search";
+@import "panel";
@import "popover-menu/popover-menu";
@import "popover-menu/popover-menu-item";
@import "newsroom-menu";
--- a/css/backoffice/components/_panel.scss
+++ b/css/backoffice/components/_panel.scss
@@ -0,0 +1,55 @@
+$ibo-panel-colors: (
+        'grey' : $ibo-color-grey-600,
+        'red': $ibo-color-red-600,
+        'orange' : $ibo-color-orange-600,
+        'green': $ibo-color-green-600,
+        'blue-grey': $ibo-color-blue-grey-600,
+        'blue': $ibo-color-blue-600,
+        'cyan': $ibo-color-cyan-600,
+        'pink': $ibo-color-pink-600,
+        'primary': $ibo-color-primary-600,
+        'seconday': $ibo-color-secondary-600,
+) !default;
+
+$ibo-panel--highlight--width: 100% !default;
+$ibo-panel--highlight--height: 5px !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--title--color: $ibo-color-grey-900 !default;
+
+$ibo-panel--body--background-color: $ibo-color-white-100 !default;
+$ibo-panel--body--padding-y: 15px !default;
+$ibo-panel--body--padding-x: 10px !default;
+$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;
+
+@each $sColor, $sColorValue in $ibo-panel-colors{
+  .ibo-panel.ibo-is-#{$sColor} > .ibo-panel--body::before{
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    
+    background-color: $sColorValue;
+    content: "";
+    
+    width: $ibo-panel--highlight--width;
+    height: $ibo-panel--highlight--height;
+    border-radius: $ibo-panel--highlight--border-radius;
+    padding-bottom: $ibo-panel--highlight--padding-bottom;
+  }
+}
+
+.ibo-panel--title{
+  color: $ibo-panel--title--color;
+  @extend %ibo-font-ral-med-350;
+}
+.ibo-panel--body{
+  position: relative;
+  padding: $ibo-panel--body--padding-y $ibo-panel--body--padding-x;
+  border-radius: $ibo-panel--body--border-radius;
+  border: solid $ibo-panel--body--border-size $ibo-panel--body--border-color;
+  background-color: $ibo-panel--body--background-color;
+}
--- a/css/backoffice/utils/variables/_color.scss
+++ b/css/backoffice/utils/variables/_color.scss
@@ -305,4 +305,6 @@ $ibo-color-secondary-900: $ibo-color-grey-900 !default;
 	--ibo-color-secondary-700: #{$ibo-color-secondary-700};
 	--ibo-color-secondary-800: #{$ibo-color-secondary-800};
 	--ibo-color-secondary-900: #{$ibo-color-secondary-900};
-}
+}
+
+$ibo-colors: ('grey', 'red', 'orange', 'green', 'blue-grey', 'blue', 'cyan', 'pink', 'primary', 'seconday')
--- a/lib/composer/autoload_classmap.php
+++ b/lib/composer/autoload_classmap.php
@@ -153,6 +153,7 @@ return array(
    'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearch' => $baseDir . '/sources/application/UI/Component/GlobalSearch/GlobalSearch.php',
    'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchFactory' => $baseDir . '/sources/application/UI/Component/GlobalSearch/GlobalSearchFactory.php',
    'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchHelper' => $baseDir . '/sources/application/UI/Component/GlobalSearch/GlobalSearchHelper.php',
+    'Combodo\\iTop\\Application\\UI\\Component\\Panel\\Panel\\Panel' => $baseDir . '/sources/application/UI/Component/Panel/Panel.php',
    'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\NewsroomMenu\\NewsroomMenu' => $baseDir . '/sources/application/UI/Component/PopoverMenu/NewsroomMenu/NewsroomMenu.php',
    'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\NewsroomMenu\\NewsroomMenuFactory' => $baseDir . '/sources/application/UI/Component/PopoverMenu/NewsroomMenu/NewsroomMenuFactory.php',
    'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenu' => $baseDir . '/sources/application/UI/Component/PopoverMenu/PopoverMenu.php',
--- a/lib/composer/autoload_real.php
+++ b/lib/composer/autoload_real.php
@@ -13,6 +13,9 @@ class ComposerAutoloaderInit0018331147de7601e7552f7da8e3bb8b
        }
    }

+    /**
+     * @return \Composer\Autoload\ClassLoader
+     */
    public static function getLoader()
    {
        if (null !== self::$loader) {
--- a/lib/composer/autoload_static.php
+++ b/lib/composer/autoload_static.php
@@ -383,6 +383,7 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
        'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearch' => __DIR__ . '/../..' . '/sources/application/UI/Component/GlobalSearch/GlobalSearch.php',
        'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/GlobalSearch/GlobalSearchFactory.php',
        'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchHelper' => __DIR__ . '/../..' . '/sources/application/UI/Component/GlobalSearch/GlobalSearchHelper.php',
+        'Combodo\\iTop\\Application\\UI\\Component\\Panel\\Panel\\Panel' => __DIR__ . '/../..' . '/sources/application/UI/Component/Panel/Panel.php',
        'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\NewsroomMenu\\NewsroomMenu' => __DIR__ . '/../..' . '/sources/application/UI/Component/PopoverMenu/NewsroomMenu/NewsroomMenu.php',
        'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\NewsroomMenu\\NewsroomMenuFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/PopoverMenu/NewsroomMenu/NewsroomMenuFactory.php',
        'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\PopoverMenu' => __DIR__ . '/../..' . '/sources/application/UI/Component/PopoverMenu/PopoverMenu.php',
--- a/sources/application/UI/Component/Panel/Panel.php
+++ b/sources/application/UI/Component/Panel/Panel.php
@@ -0,0 +1,127 @@
+<?php
+/**
+ * Copyright (C) 2013-2020 Combodo SARL
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+namespace Combodo\iTop\Application\UI\Component\Panel\Panel;
+
+
+
+use Combodo\iTop\Application\UI\UIBlock;
+
+/**
+ * Class Panel
+ *
+ * @author Stephen Abello <stephen.abello@combodo.com>
+ * @package Combodo\iTop\Application\UI\Component\Panel\Panel
+ * @since 2.8.0
+ */
+class Panel extends UIBlock
+{
+	// Overloaded constants
+	const BLOCK_CODE = 'ibo-panel';
+	const HTML_TEMPLATE_REL_PATH = 'components/panel/layout';
+	const JS_TEMPLATE_REL_PATH = 'components/panel/layout';
+	
+	/** @var string $sTitle */
+	protected $sTitle;
+	/** @var array $aSubBlocks */
+	protected $aSubBlocks;
+	/** @var string $sColor */
+	protected $sColor;
+
+	/**
+	 * Panel constructor.
+	 *
+	 * @param string $sId
+	 * @param string $sTitle
+	 * @param array $aSubBlocks
+	 * @param string $sColor
+	 */
+	public function __construct($sId, $sTitle = '', $aSubBlocks = [], $sColor = 'secondary')
+	{
+		$this->sTitle = $sTitle;
+		$this->aSubBlocks = $aSubBlocks;
+		$this->sColor = $sColor;
+		parent::__construct($sId);
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetTitle()
+	{
+		return $this->sTitle;
+	}
+
+	/**
+	 * @param string $sTitle
+	 * @return $this
+	 */
+	public function SetTitle($sTitle)
+	{
+		$this->sTitle = $sTitle;
+		return $this;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function GetSubBlocks()
+	{
+		return $this->aSubBlocks;
+	}
+	
+	/**
+	 * @param \Combodo\iTop\Application\UI\UIBlock $oSubBlock
+	 * @return $this
+	 */
+	public function AddSubBlock($oSubBlock)
+	{
+		$this->aSubBlocks[] = $oSubBlock;
+		return $this;
+	}
+	
+	/**
+	 * @param array $aSubBlocks
+	 * @return $this
+	 */
+	public function SetSubBlocks($aSubBlocks)
+	{
+		$this->aSubBlocks = $aSubBlocks;
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetColor()
+	{
+		return $this->sColor;
+	}
+
+	/**
+	 * @param string $sColor
+	 * @return $this
+	 */
+	public function SetColor($sColor)
+	{
+		$this->sColor = $sColor;
+		return $this;
+	}
+	
+}
--- a/templates/components/panel/layout.html.twig
+++ b/templates/components/panel/layout.html.twig
@@ -0,0 +1,6 @@
+<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 %}
+    </div>
+</div>