composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-21 09:38:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 - Alert & Panel: Improve factories, add color schemes, add visual tests

Browse Source
This commit is contained in:
Molkobain
2020-08-26 17:44:20 +02:00
parent 3b0ca9d771
commit 8bdaec0129
9 changed files with 317 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
css/backoffice/components/_alert.scss
View File

@@ -11,15 +11,16 @@ $ibo-alert-colors: (
'primary': ($ibo-color-primary-200, $ibo-color-primary-700, $ibo-color-primary-900),
'secondary': ($ibo-color-secondary-200, $ibo-color-secondary-700, $ibo-color-secondary-900),
'neutral': ($ibo-color-secondary-200, $ibo-color-secondary-700, $ibo-color-secondary-900),
'success': ($ibo-color-success-200, $ibo-color-success-700, $ibo-color-success-900),
'information': ($ibo-color-information-200, $ibo-color-information-700, $ibo-color-information-900),
'success': ($ibo-color-success-100, $ibo-color-success-700, $ibo-color-success-900),
'failure': ($ibo-color-danger-200, $ibo-color-danger-700, $ibo-color-danger-900),
'warning': ($ibo-color-warning-200, $ibo-color-warning-700, $ibo-color-warning-900),
'danger': ($ibo-color-danger-200, $ibo-color-danger-700, $ibo-color-danger-900),
'failure': ($ibo-color-danger-200, $ibo-color-danger-700, $ibo-color-danger-900),
'grey' : ($ibo-color-grey-200, $ibo-color-grey-700, $ibo-color-grey-900),
'blue-grey': ($ibo-color-blue-grey-200, $ibo-color-blue-grey-700, $ibo-color-blue-grey-900),
'blue': ($ibo-color-blue-200, $ibo-color-blue-700, $ibo-color-blue-900),
'cyan': ($ibo-color-cyan-100, $ibo-color-blue-700, $ibo-color-cyan-900),
'green': ($ibo-color-green-200, $ibo-color-green-700, $ibo-color-green-900),
'green': ($ibo-color-green-100, $ibo-color-green-700, $ibo-color-green-900),
'orange' : ($ibo-color-orange-200, $ibo-color-orange-700, $ibo-color-orange-900),
'red': ($ibo-color-red-200, $ibo-color-red-700, $ibo-color-red-900),
'pink': ($ibo-color-pink-200, $ibo-color-pink-700, $ibo-color-pink-900),

29
css/backoffice/components/_panel.scss
View File

@@ -1,17 +1,20 @@
$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,
'success': $ibo-color-success-600,
'warning': $ibo-color-warning-600,
'danger': $ibo-color-danger-600,
'primary': $ibo-color-primary-600,
'secondary': $ibo-color-secondary-600,
'neutral': $ibo-color-grey-600,
'information': $ibo-color-information-600,
'success': $ibo-color-success-600,
'failure': $ibo-color-danger-600,
'warning': $ibo-color-warning-600,
'danger': $ibo-color-danger-600,
'grey' : $ibo-color-grey-600,
'blue-grey': $ibo-color-blue-grey-600,
'blue': $ibo-color-blue-600,
'cyan': $ibo-color-cyan-600,
'green': $ibo-color-green-600,
'orange' : $ibo-color-orange-600,
'red': $ibo-color-red-600,
'pink': $ibo-color-pink-600,
) !default;
$ibo-panel--highlight--width: 100% !default;

1
lib/composer/autoload_classmap.php
View File

@@ -158,6 +158,7 @@ return array(
'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchHelper' => $baseDir . '/sources/application/UI/Component/GlobalSearch/GlobalSearchHelper.php',
'Combodo\\iTop\\Application\\UI\\Component\\Html\\Html' => $baseDir . '/sources/application/UI/Component/Html/Html.php',
'Combodo\\iTop\\Application\\UI\\Component\\Panel\\Panel' => $baseDir . '/sources/application/UI/Component/Panel/Panel.php',
'Combodo\\iTop\\Application\\UI\\Component\\Panel\\PanelFactory' => $baseDir . '/sources/application/UI/Component/Panel/PanelFactory.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',

1
lib/composer/autoload_static.php
View File

@@ -388,6 +388,7 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchHelper' => __DIR__ . '/../..' . '/sources/application/UI/Component/GlobalSearch/GlobalSearchHelper.php',
'Combodo\\iTop\\Application\\UI\\Component\\Html\\Html' => __DIR__ . '/../..' . '/sources/application/UI/Component/Html/Html.php',
'Combodo\\iTop\\Application\\UI\\Component\\Panel\\Panel' => __DIR__ . '/../..' . '/sources/application/UI/Component/Panel/Panel.php',
'Combodo\\iTop\\Application\\UI\\Component\\Panel\\PanelFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/Panel/PanelFactory.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',

6
sources/application/UI/Component/Alert/Alert.php
View File

@@ -44,14 +44,16 @@ class Alert extends UIBlock
/** @var string ENUM_COLOR_NEUTRAL */
const ENUM_COLOR_NEUTRAL = 'neutral';
/** @var string ENUM_COLOR_INFORMATION */
const ENUM_COLOR_INFORMATION = 'information';
/** @var string ENUM_COLOR_SUCCESS */
const ENUM_COLOR_SUCCESS = 'success';
/** @var string ENUM_COLOR_FAILURE */
const ENUM_COLOR_FAILURE = 'failure';
/** @var string ENUM_COLOR_WARNING */
const ENUM_COLOR_WARNING = 'warning';
/** @var string ENUM_COLOR_DANGER */
const ENUM_COLOR_DANGER = 'danger';
/** @var string ENUM_COLOR_FAILURE */
const ENUM_COLOR_FAILURE = 'failure';
/** @var string ENUM_COLOR_GREY */
const ENUM_COLOR_GREY = 'grey';

16
sources/application/UI/Component/Alert/AlertFactory.php
View File

@@ -19,9 +19,6 @@
namespace Combodo\iTop\Application\UI\Component\Alert;
use Combodo\iTop\Application\UI\Component\Alert\Alert;
/**
* Class AlertFactory
*
@@ -45,6 +42,19 @@ class AlertFactory
return new Alert($sTitle, $sContent, Alert::ENUM_COLOR_NEUTRAL);
}
/**
* Make an Alert component for informational messages
*
* @param string $sTitle
* @param string $sContent The raw HTML content, must be already sanitized
*
* @return \Combodo\iTop\Application\UI\Component\Alert\Alert
*/
public static function MakeForInformation($sTitle, $sContent)
{
return new Alert($sTitle, $sContent, Alert::ENUM_COLOR_INFORMATION);
}
/**
* Make an Alert component for successful messages
*

102
sources/application/UI/Component/Panel/Panel.php
View File

@@ -35,7 +35,46 @@ class Panel extends UIBlock
const BLOCK_CODE = 'ibo-panel';
const HTML_TEMPLATE_REL_PATH = 'components/panel/layout';
const JS_TEMPLATE_REL_PATH = 'components/panel/layout';
// Specific constants
/** @var string ENUM_COLOR_PRIMARY */
const ENUM_COLOR_PRIMARY = 'primary';
/** @var string ENUM_COLOR_SECONDARY */
const ENUM_COLOR_SECONDARY = 'secondary';
/** @var string ENUM_COLOR_NEUTRAL */
const ENUM_COLOR_NEUTRAL = 'neutral';
/** @var string ENUM_COLOR_INFORMATION */
const ENUM_COLOR_INFORMATION = 'information';
/** @var string ENUM_COLOR_SUCCESS */
const ENUM_COLOR_SUCCESS = 'success';
/** @var string ENUM_COLOR_FAILURE */
const ENUM_COLOR_FAILURE = 'failure';
/** @var string ENUM_COLOR_WARNING */
const ENUM_COLOR_WARNING = 'warning';
/** @var string ENUM_COLOR_DANGER */
const ENUM_COLOR_DANGER = 'danger';
/** @var string ENUM_COLOR_GREY */
const ENUM_COLOR_GREY = 'grey';
/** @var string ENUM_COLOR_BLUEGREY */
const ENUM_COLOR_BLUEGREY = 'blue-grey';
/** @var string ENUM_COLOR_BLUE */
const ENUM_COLOR_BLUE = 'blue';
/** @var string ENUM_COLOR_CYAN */
const ENUM_COLOR_CYAN = 'cyan';
/** @var string ENUM_COLOR_GREEN */
const ENUM_COLOR_GREEN = 'green';
/** @var string ENUM_COLOR_ORANGE */
const ENUM_COLOR_ORANGE = 'orange';
/** @var string ENUM_COLOR_RED */
const ENUM_COLOR_RED = 'red';
/** @var string ENUM_COLOR_PINK */
const ENUM_COLOR_PINK = 'pink';
/** @var string DEFAULT_COLOR */
const DEFAULT_COLOR = self::ENUM_COLOR_NEUTRAL;
/** @var string $sTitle */
protected $sTitle;
/** @var array $aSubBlocks */
@@ -47,11 +86,11 @@ class Panel extends UIBlock
* Panel constructor.
*
* @param string $sTitle
* @param array $aSubBlocks
* @param \Combodo\iTop\Application\UI\iUIBlock[] $aSubBlocks
* @param string $sColor
* @param string|null $sId
*/
public function __construct($sTitle = '', $aSubBlocks = [], $sColor = 'secondary', $sId = null)
public function __construct($sTitle = '', $aSubBlocks = [], $sColor = self::DEFAULT_COLOR, $sId = null)
{
$this->sTitle = $sTitle;
$this->aSubBlocks = $aSubBlocks;
@@ -74,6 +113,7 @@ class Panel extends UIBlock
public function SetTitle($sTitle)
{
$this->sTitle = $sTitle;
return $this;
}
@@ -84,24 +124,53 @@ class Panel extends UIBlock
{
return $this->aSubBlocks;
}
/**
* @param \Combodo\iTop\Application\UI\UIBlock $oSubBlock
* @return $this
*/
public function AddSubBlock($oSubBlock)
{
$this->aSubBlocks[] = $oSubBlock;
return $this;
}
/**
* @param array $aSubBlocks
* Set all sub blocks at once, replacing all existing ones
*
* @param \Combodo\iTop\Application\UI\iUIBlock[] $aSubBlocks
*
* @return $this
*/
public function SetSubBlocks($aSubBlocks)
{
$this->aSubBlocks = $aSubBlocks;
foreach ($aSubBlocks as $oSubBlock)
{
$this->AddSubBlock($oSubBlock);
}
return $this;
}
/**
* Add $oSubBlock, replacing any block with the same ID
*
* @param \Combodo\iTop\Application\UI\iUIBlock $oSubBlock
*
* @return $this
*/
public function AddSubBlock($oSubBlock)
{
$this->aSubBlocks[$oSubBlock->GetId()] = $oSubBlock;
return $this;
}
/**
* Remove the sub block identified by $sId.
* Note that if no sub block matches the ID, it proceeds silently.
*
* @param string $sId ID of the sub block to remove
*
* @return $this
*/
public function RemoveSubBlock($sId)
{
if (array_key_exists($sId, $this->aSubBlocks))
{
unset($this->aSubBlocks[$sId]);
}
return $this;
}
@@ -122,5 +191,4 @@ class Panel extends UIBlock
$this->sColor = $sColor;
return $this;
}
}

151
sources/application/UI/Component/Panel/PanelFactory.php Normal file
View File

@@ -0,0 +1,151 @@
<?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;
/**
* Class PanelFactory
*
* @internal
* @author Guillaume Lajarige <guillaume.lajarige@combodo.com>
* @package Combodo\iTop\Application\UI\Component\Panel
* @since 2.8.0
*/
class PanelFactory
{
/**
* Make a basis Panel component
*
* @param string $sTitle
*
* @return \Combodo\iTop\Application\UI\Component\Panel\Panel
*/
public static function MakeNeutral($sTitle)
{
$oPanel = new Panel($sTitle);
$oPanel->SetColor(Panel::ENUM_COLOR_NEUTRAL);
return $oPanel;
}
/**
* Make a Panel component for informational messages
*
* @param string $sTitle
*
* @return \Combodo\iTop\Application\UI\Component\Panel\Panel
*/
public static function MakeForInformation($sTitle)
{
$oPanel = new Panel($sTitle);
$oPanel->SetColor(Panel::ENUM_COLOR_INFORMATION);
return $oPanel;
}
/**
* Make a Panel component for successful messages
*
* @param string $sTitle
*
* @return \Combodo\iTop\Application\UI\Component\Panel\Panel
*/
public static function MakeForSuccess($sTitle)
{
$oPanel = new Panel($sTitle);
$oPanel->SetColor(Panel::ENUM_COLOR_SUCCESS);
return $oPanel;
}
/**
* Make a Panel component for warning messages
*
* @param string $sTitle
*
* @return \Combodo\iTop\Application\UI\Component\Panel\Panel
*/
public static function MakeForWarning($sTitle)
{
$oPanel = new Panel($sTitle);
$oPanel->SetColor(Panel::ENUM_COLOR_WARNING);
return $oPanel;
}
/**
* Make a Panel component for danger messages
*
* @param string $sTitle
*
* @return \Combodo\iTop\Application\UI\Component\Panel\Panel
*/
public static function MakeForDanger($sTitle)
{
$oPanel = new Panel($sTitle);
$oPanel->SetColor(Panel::ENUM_COLOR_DANGER);
return $oPanel;
}
/**
* Make a Panel component for failure messages
*
* @param string $sTitle
*
* @return \Combodo\iTop\Application\UI\Component\Panel\Panel
*/
public static function MakeForFailure($sTitle)
{
$oPanel = new Panel($sTitle);
$oPanel->SetColor(Panel::ENUM_COLOR_FAILURE);
return $oPanel;
}
/**
* Make a Panel component with primary color scheme
*
* @param string $sTitle
*
* @return \Combodo\iTop\Application\UI\Component\Panel\Panel
*/
public static function MakeWithBrandingPrimaryColor($sTitle)
{
$oPanel = new Panel($sTitle);
$oPanel->SetColor(Panel::ENUM_COLOR_PRIMARY);
return $oPanel;
}
/**
* Make a Panel component with secondary color scheme
*
* @param string $sTitle
*
* @return \Combodo\iTop\Application\UI\Component\Panel\Panel
*/
public static function MakeWithBrandingSecondaryColor($sTitle)
{
$oPanel = new Panel($sTitle);
$oPanel->SetColor(Panel::ENUM_COLOR_SECONDARY);
return $oPanel;
}
}

42
test/VisualTest/Backoffice/RenderAllUiBlocks.php
View File

@@ -22,6 +22,7 @@ namespace Combodo\iTop\Test\VisualTest\Backoffice;
use Combodo\iTop\Application\UI\Component\Alert\AlertFactory;
use Combodo\iTop\Application\UI\Component\Button\ButtonFactory;
use Combodo\iTop\Application\UI\Component\Html\Html;
use Combodo\iTop\Application\UI\Component\Panel\PanelFactory;
use Combodo\iTop\Application\UI\Layout\PageContent\PageContentFactory;
use iTopWebPage;
@@ -39,6 +40,7 @@ $sContent = <<<HTML
HTML;
$oPageContentLayout->AddMainBlock(AlertFactory::MakeNeutral('Neutral alert', $sContent));
$oPageContentLayout->AddMainBlock(AlertFactory::MakeForInformation('Alert for information', $sContent));
$oPageContentLayout->AddMainBlock(AlertFactory::MakeForSuccess('Alert for success', $sContent));
$oPageContentLayout->AddMainBlock(AlertFactory::MakeForWarning('Alert for warning', $sContent));
$oPageContentLayout->AddMainBlock(AlertFactory::MakeForDanger('Alert for danger', $sContent));
@@ -62,5 +64,45 @@ $oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeDestructiveAc
$oPageContentLayout->AddMainBlock(new Html('<hr/>'));
// Panels
$aSubBlocks = [
new Html('<div>Panel body, can contain anything from simple text to rich text, forms, images, <a href="#">links</a>, graphs or tables.</div>'),
new Html('<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>'),
];
$oPanel = PanelFactory::MakeNeutral('Neutral alert');
$oPanel->SetSubBlocks($aSubBlocks);
$oPageContentLayout->AddMainBlock($oPanel);
$oPanel = PanelFactory::MakeForInformation('Alert for information');
$oPanel->SetSubBlocks($aSubBlocks);
$oPageContentLayout->AddMainBlock($oPanel);
$oPanel = PanelFactory::MakeForSuccess('Alert for success');
$oPanel->SetSubBlocks($aSubBlocks);
$oPageContentLayout->AddMainBlock($oPanel);
$oPanel = PanelFactory::MakeForWarning('Alert for warning');
$oPanel->SetSubBlocks($aSubBlocks);
$oPageContentLayout->AddMainBlock($oPanel);
$oPanel = PanelFactory::MakeForDanger('Alert for danger');
$oPanel->SetSubBlocks($aSubBlocks);
$oPageContentLayout->AddMainBlock($oPanel);
$oPanel = PanelFactory::MakeForFailure('Alert for failure');
$oPanel->SetSubBlocks($aSubBlocks);
$oPageContentLayout->AddMainBlock($oPanel);
$oPanel = PanelFactory::MakeWithBrandingPrimaryColor('Alert with branding primary color');
$oPanel->SetSubBlocks($aSubBlocks);
$oPageContentLayout->AddMainBlock($oPanel);
$oPanel = PanelFactory::MakeWithBrandingSecondaryColor('Alert with branding secondary color');
$oPanel->SetSubBlocks($aSubBlocks);
$oPageContentLayout->AddMainBlock($oPanel);
$oPageContentLayout->AddMainBlock(new Html('<hr/>'));
$oPage->output();