diff --git a/css/backoffice/components/_all.scss b/css/backoffice/components/_all.scss index e9060c1da..ce70c8ea3 100644 --- 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"; diff --git a/css/backoffice/components/_panel.scss b/css/backoffice/components/_panel.scss new file mode 100644 index 000000000..32f8f51de --- /dev/null +++ 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; +} diff --git a/css/backoffice/utils/variables/_color.scss b/css/backoffice/utils/variables/_color.scss index 60701a21e..466d522ab 100644 --- 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}; -} \ No newline at end of file +} + +$ibo-colors: ('grey', 'red', 'orange', 'green', 'blue-grey', 'blue', 'cyan', 'pink', 'primary', 'seconday') \ No newline at end of file diff --git a/lib/composer/autoload_classmap.php b/lib/composer/autoload_classmap.php index fcdcb2ecf..ea7a04939 100644 --- 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', diff --git a/lib/composer/autoload_real.php b/lib/composer/autoload_real.php index e8c595bf1..ac16a9508 100644 --- 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) { diff --git a/lib/composer/autoload_static.php b/lib/composer/autoload_static.php index 763b6b18e..c2c60501e 100644 --- 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', diff --git a/sources/application/UI/Component/Panel/Panel.php b/sources/application/UI/Component/Panel/Panel.php new file mode 100644 index 000000000..9e8bbbd57 --- /dev/null +++ b/sources/application/UI/Component/Panel/Panel.php @@ -0,0 +1,127 @@ + + * @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; + } + +} \ No newline at end of file diff --git a/templates/components/panel/layout.html.twig b/templates/components/panel/layout.html.twig new file mode 100644 index 000000000..70ba6bd16 --- /dev/null +++ b/templates/components/panel/layout.html.twig @@ -0,0 +1,6 @@ +
+
{{ oUIBlock.GetTitle() }}
+
+ {% for oSubBlock in oUIBlock.GetSubBlocks() %}{{ render_block(oSubBlock, {aPage: aPage}) }}{% endfor %} +
+
\ No newline at end of file