mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-13 07:24:13 +01:00
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:
@@ -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();
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
99
css/backoffice/components/_pill.scss
Normal file
99
css/backoffice/components/_pill.scss
Normal 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;
|
||||
}
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user