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

application/displayblock.class.inc.php

@@ -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("<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-badge-is-{$sColor}\">$sStateLabel</span>");
+			$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();

css/backoffice/components/_all.scss

@@ -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";

css/backoffice/components/_badge.scss

@@ -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;
-}

css/backoffice/components/_pill.scss

@@ -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;
+}

lib/composer/autoload_classmap.php

@@ -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',

lib/composer/autoload_static.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',

sources/application/UI/Base/Component/Pill/Pill.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;
 	}
 }

sources/application/UI/Base/Component/Pill/PillFactory.php

@@ -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);
 	}
 
 }

sources/application/UI/Helper/UIHelper.php

@@ -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