N°3581 - Dashlet: Rename Badge block to Pill as it can contain just a simple text and to avoid confusion with the DashletBadge

This commit is contained in:
Molkobain
2021-03-17 18:36:16 +01:00
parent 8ce2e43780
commit ca2c66733c
9 changed files with 143 additions and 116 deletions

View File

@@ -6,11 +6,11 @@
use Combodo\iTop\Application\Search\SearchForm;
use Combodo\iTop\Application\UI\Base\Component\Alert\AlertUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\Badge\BadgeFactory;
use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletFactory;
use Combodo\iTop\Application\UI\Base\Component\DataTable\DataTableUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\Html\Html;
use Combodo\iTop\Application\UI\Base\Component\Pill\PillFactory;
use Combodo\iTop\Application\UI\Base\Component\Toolbar\ToolbarUIBlockFactory;
use Combodo\iTop\Application\UI\Base\iUIBlock;
use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
@@ -1016,12 +1016,12 @@ JS
$oBlock = new UIContentBlockWithJSRefreshCallback(null, ["ibo-dashlet-header-dynamic--container"]);
foreach ($aStateLabels as $sStateValue => $sStateLabel) {
$aCount = $aCounts[$sStateValue];
$oBadge = BadgeFactory::MakeForState($sClass, $sStateValue);
$oBadge = PillFactory::MakeForState($sClass, $sStateValue);
$sHyperlink = $aCount['link'];
$sCountLabel = $aCount['label'];
$sColor = $oBadge->GetColor();
$oBadge->AddHtml("<a class=\"ibo-dashlet-header-dynamic--count ibo-badge-is-{$sColor}\" href=\"$sHyperlink\">$sCountLabel</a>");
$oBadge->AddHtml("<span class=\"ibo-dashlet-header-dynamic--label ibo-badge-is-{$sColor}\">$sStateLabel</span>");
$oBadge->AddHtml("<a class=\"ibo-dashlet-header-dynamic--count ibo-pill-is-{$sColor}\" href=\"$sHyperlink\">$sCountLabel</a>");
$oBadge->AddHtml("<span class=\"ibo-dashlet-header-dynamic--label ibo-pill-is-{$sColor}\">$sStateLabel</span>");
$oBlock->AddSubBlock($oBadge);
}
$aExtraParams['query_params'] = $this->m_oFilter->GetInternalParams();

View File

@@ -4,7 +4,6 @@
*/
@import "alert";
@import "badge";
@import "button";
@import "breadcrumbs";
@import "collapsible-section";
@@ -17,6 +16,7 @@
@import "modal";
@import "dashlet/all";
@import "input/all";
@import "pill";
@import "prop";
@import "title";

View File

@@ -1,99 +0,0 @@
/*!
* Copyright (C) 2013-2021 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
*/
/* SCSS variables */
$ibo-badge--margin: 4px 8px !default;
$ibo-badge--padding: 6px 10px !default;
$ibo-badge--border-radius: $ibo-border-radius-300 !default;
$ibo-badge-new-state-primary-color: $ibo-color-blue-100 !default;
$ibo-badge-new-state-secondary-color: $ibo-color-blue-900 !default;
$ibo-badge-neutral-state-primary-color: $ibo-color-blue-100 !default;
$ibo-badge-neutral-state-secondary-color: $ibo-color-blue-900 !default;
$ibo-badge-waiting-state-primary-color: $ibo-color-orange-100 !default;
$ibo-badge-waiting-state-secondary-color: $ibo-color-orange-800 !default;
$ibo-badge-success-state-primary-color: $ibo-color-green-100 !default;
$ibo-badge-success-state-secondary-color: $ibo-color-green-900 !default;
$ibo-badge-failure-state-primary-color: $ibo-color-red-100 !default;
$ibo-badge-failure-state-secondary-color: $ibo-color-red-800 !default;
$ibo-badge-frozen-state-primary-color: $ibo-color-grey-100 !default;
$ibo-badge-frozen-state-secondary-color: $ibo-color-grey-700 !default;
/* - For basic badge */
$ibo-badge-active-state-primary-color: $ibo-color-green-100 !default;
$ibo-badge-active-state-secondary-color: $ibo-color-green-900 !default;
$ibo-badge-inactive-state-primary-color: $ibo-color-orange-100 !default;
$ibo-badge-inactive-state-secondary-color: $ibo-color-orange-800 !default;
$ibo-badge-states-colors: (
'new': (
'primary-color': $ibo-badge-new-state-primary-color,
'secondary-color': $ibo-badge-new-state-secondary-color,
),
'neutral': (
'primary-color': $ibo-badge-neutral-state-primary-color,
'secondary-color': $ibo-badge-neutral-state-secondary-color,
),
'waiting': (
'primary-color': $ibo-badge-waiting-state-primary-color,
'secondary-color': $ibo-badge-waiting-state-secondary-color,
),
'success': (
'primary-color': $ibo-badge-success-state-primary-color,
'secondary-color': $ibo-badge-success-state-secondary-color,
),
'failure': (
'primary-color': $ibo-badge-failure-state-primary-color,
'secondary-color': $ibo-badge-failure-state-secondary-color,
),
'frozen': (
'primary-color': $ibo-badge-frozen-state-primary-color,
'secondary-color': $ibo-badge-frozen-state-secondary-color,
),
'active': (
'primary-color': $ibo-badge-active-state-primary-color,
'secondary-color': $ibo-badge-active-state-secondary-color,
),
'inactive': (
'primary-color': $ibo-badge-inactive-state-primary-color,
'secondary-color': $ibo-badge-inactive-state-secondary-color,
),
);
@each $sType, $aColors in $ibo-badge-states-colors {
.ibo-badge-is-#{$sType} {
color: map-get($aColors, 'secondary-color');
background-color: map-get($aColors, 'primary-color');
}
}
/* Rules */
.ibo-badge {
display: flex;
flex-direction: row;
align-items: center;
margin: $ibo-badge--margin;
padding: $ibo-badge--padding;
border-radius: $ibo-badge--border-radius;
}

View File

@@ -0,0 +1,99 @@
/*!
* Copyright (C) 2013-2021 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
*/
/* SCSS variables */
$ibo-pill--margin: 4px 8px !default;
$ibo-pill--padding: 6px 10px !default;
$ibo-pill--border-radius: $ibo-border-radius-300 !default;
$ibo-pill-new-state-primary-color: $ibo-color-blue-100 !default;
$ibo-pill-new-state-secondary-color: $ibo-color-blue-900 !default;
$ibo-pill-neutral-state-primary-color: $ibo-color-blue-100 !default;
$ibo-pill-neutral-state-secondary-color: $ibo-color-blue-900 !default;
$ibo-pill-waiting-state-primary-color: $ibo-color-orange-100 !default;
$ibo-pill-waiting-state-secondary-color: $ibo-color-orange-800 !default;
$ibo-pill-success-state-primary-color: $ibo-color-green-100 !default;
$ibo-pill-success-state-secondary-color: $ibo-color-green-900 !default;
$ibo-pill-failure-state-primary-color: $ibo-color-red-100 !default;
$ibo-pill-failure-state-secondary-color: $ibo-color-red-800 !default;
$ibo-pill-frozen-state-primary-color: $ibo-color-grey-100 !default;
$ibo-pill-frozen-state-secondary-color: $ibo-color-grey-700 !default;
/* - For basic badge */
$ibo-pill-active-state-primary-color: $ibo-color-green-100 !default;
$ibo-pill-active-state-secondary-color: $ibo-color-green-900 !default;
$ibo-pill-inactive-state-primary-color: $ibo-color-orange-100 !default;
$ibo-pill-inactive-state-secondary-color: $ibo-color-orange-800 !default;
$ibo-pill-states-colors: (
'new': (
'primary-color': $ibo-pill-new-state-primary-color,
'secondary-color': $ibo-pill-new-state-secondary-color,
),
'neutral': (
'primary-color': $ibo-pill-neutral-state-primary-color,
'secondary-color': $ibo-pill-neutral-state-secondary-color,
),
'waiting': (
'primary-color': $ibo-pill-waiting-state-primary-color,
'secondary-color': $ibo-pill-waiting-state-secondary-color,
),
'success': (
'primary-color': $ibo-pill-success-state-primary-color,
'secondary-color': $ibo-pill-success-state-secondary-color,
),
'failure': (
'primary-color': $ibo-pill-failure-state-primary-color,
'secondary-color': $ibo-pill-failure-state-secondary-color,
),
'frozen': (
'primary-color': $ibo-pill-frozen-state-primary-color,
'secondary-color': $ibo-pill-frozen-state-secondary-color,
),
'active': (
'primary-color': $ibo-pill-active-state-primary-color,
'secondary-color': $ibo-pill-active-state-secondary-color,
),
'inactive': (
'primary-color': $ibo-pill-inactive-state-primary-color,
'secondary-color': $ibo-pill-inactive-state-secondary-color,
),
);
@each $sType, $aColors in $ibo-pill-states-colors {
.ibo-pill-is-#{$sType} {
color: map-get($aColors, 'secondary-color');
background-color: map-get($aColors, 'primary-color');
}
}
/* Rules */
.ibo-pill {
display: flex;
flex-direction: row;
align-items: center;
margin: $ibo-pill--margin;
padding: $ibo-pill--padding;
border-radius: $ibo-pill--border-radius;
}

View File

@@ -157,8 +157,6 @@ return array(
'Combodo\\iTop\\Application\\UI\\Base\\AbstractUIBlockFactory' => $baseDir . '/sources/application/UI/Base/AbstractUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\Alert' => $baseDir . '/sources/application/UI/Base/Component/Alert/Alert.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\AlertUIBlockFactory' => $baseDir . '/sources/application/UI/Base/Component/Alert/AlertUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Badge\\Badge' => $baseDir . '/sources/application/UI/Base/Component/Badge/Badge.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Badge\\BadgeFactory' => $baseDir . '/sources/application/UI/Base/Component/Badge/BadgeFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Breadcrumbs\\Breadcrumbs' => $baseDir . '/sources/application/UI/Base/Component/Breadcrumbs/Breadcrumbs.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\Button' => $baseDir . '/sources/application/UI/Base/Component/Button/Button.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonUIBlockFactory' => $baseDir . '/sources/application/UI/Base/Component/Button/ButtonUIBlockFactory.php',
@@ -202,6 +200,8 @@ return array(
'Combodo\\iTop\\Application\\UI\\Base\\Component\\MedallionIcon\\MedallionIcon' => $baseDir . '/sources/application/UI/Base/Component/MedallionIcon/MedallionIcon.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Panel\\Panel' => $baseDir . '/sources/application/UI/Base/Component/Panel/Panel.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Panel\\PanelUIBlockFactory' => $baseDir . '/sources/application/UI/Base/Component/Panel/PanelUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Pill\\Pill' => $baseDir . '/sources/application/UI/Base/Component/Pill/Pill.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Pill\\PillFactory' => $baseDir . '/sources/application/UI/Base/Component/Pill/PillFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\PopoverMenu\\NewsroomMenu\\NewsroomMenu' => $baseDir . '/sources/application/UI/Base/Component/PopoverMenu/NewsroomMenu/NewsroomMenu.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\PopoverMenu\\NewsroomMenu\\NewsroomMenuFactory' => $baseDir . '/sources/application/UI/Base/Component/PopoverMenu/NewsroomMenu/NewsroomMenuFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\PopoverMenu\\PopoverMenu' => $baseDir . '/sources/application/UI/Base/Component/PopoverMenu/PopoverMenu.php',

View File

@@ -387,8 +387,6 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
'Combodo\\iTop\\Application\\UI\\Base\\AbstractUIBlockFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/AbstractUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\Alert' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Alert/Alert.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Alert\\AlertUIBlockFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Alert/AlertUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Badge\\Badge' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Badge/Badge.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Badge\\BadgeFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Badge/BadgeFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Breadcrumbs\\Breadcrumbs' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Breadcrumbs/Breadcrumbs.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\Button' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Button/Button.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Button\\ButtonUIBlockFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Button/ButtonUIBlockFactory.php',
@@ -432,6 +430,8 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
'Combodo\\iTop\\Application\\UI\\Base\\Component\\MedallionIcon\\MedallionIcon' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/MedallionIcon/MedallionIcon.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Panel\\Panel' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Panel/Panel.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Panel\\PanelUIBlockFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Panel/PanelUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Pill\\Pill' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Pill/Pill.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Pill\\PillFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/Pill/PillFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\PopoverMenu\\NewsroomMenu\\NewsroomMenu' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/PopoverMenu/NewsroomMenu/NewsroomMenu.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\PopoverMenu\\NewsroomMenu\\NewsroomMenuFactory' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/PopoverMenu/NewsroomMenu/NewsroomMenuFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\PopoverMenu\\PopoverMenu' => __DIR__ . '/../..' . '/sources/application/UI/Base/Component/PopoverMenu/PopoverMenu.php',

View File

@@ -5,19 +5,27 @@
*/
namespace Combodo\iTop\Application\UI\Base\Component\Badge;
namespace Combodo\iTop\Application\UI\Base\Component\Pill;
use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
class Badge extends UIContentBlock
/**
* Class Pill
*
* @internal
* @author Eric Espie <eric.espie@combodo.com>
* @since 3.0.0
* @package Combodo\iTop\Application\UI\Base\Component\Pill
*/
class Pill extends UIContentBlock
{
/** @var string */
protected $sColor;
public function __construct(string $sColor)
{
parent::__construct(null, ["ibo-badge ibo-badge-is-{$sColor}"]);
parent::__construct(null, ["ibo-pill ibo-pill-is-{$sColor}"]);
$this->SetColor($sColor);
}
@@ -32,11 +40,12 @@ class Badge extends UIContentBlock
/**
* @param string $sColor
*
* @return Badge
* @return Pill
*/
public function SetColor(string $sColor): Badge
public function SetColor(string $sColor): Pill
{
$this->sColor = $sColor;
return $this;
}
}

View File

@@ -5,18 +5,27 @@
*/
namespace Combodo\iTop\Application\UI\Base\Component\Badge;
namespace Combodo\iTop\Application\UI\Base\Component\Pill;
use Combodo\iTop\Application\UI\Helper\UIHelper;
class BadgeFactory
/**
* Class PillFactory
*
* @internal
* @author Eric Espie <eric.espie@combodo.com>
* @since 3.0.0
* @package Combodo\iTop\Application\UI\Base\Component\Pill
*/
class PillFactory
{
public static function MakeForState(string $sClass, string $sStateCode)
{
$sColor = UIHelper::GetColorFromStatus($sClass, $sStateCode);
return new Badge($sColor);
return new Pill($sColor);
}
}

View File

@@ -11,6 +11,15 @@ namespace Combodo\iTop\Application\UI\Helper;
use MetaModel;
// TODO 3.0.0: Delete this class as it is only a temporary helper while code is being reworked.
/**
* Class UIHelper
*
* @internal
* @author Eric Espie <eric.espie@combodo.com>
* @package Combodo\iTop\Application\UI\Helper
* @since 3.0.0
*/
class UIHelper
{
public static function GetColorFromStatus(string $sClass, ?string $sStateCode): string