composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-16 22:08:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°8955 New UIBlocks for setup

Browse Source
This commit is contained in:
Timothee
2026-01-12 09:47:36 +01:00
parent f0629724ea
commit 8bacd62467
15 changed files with 355 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
css/backoffice/blocks-integrations/_all.scss
View File

@@ -22,4 +22,5 @@
@import "medallion-with-blocklist";
@import "field-badge-within-datatable";
@import "jquery-blockui-within-dialog";
@import "jquery-blockui-within-datatable";
@import "jquery-blockui-within-datatable";
@import "badge-with-badge";

10
css/backoffice/blocks-integrations/_badge-with-badge.scss Normal file
View File

@@ -0,0 +1,10 @@
/*
* @copyright Copyright (C) 2010-2024 Combodo SAS
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-badge--spacing-left--with-same-block: $ibo-spacing-200 !default;
.ibo-badge + .ibo-badge {
margin-left: $ibo-badge--spacing-left--with-same-block;
}

3
css/backoffice/components/_all.scss
View File

@@ -33,4 +33,5 @@
@import "field-badge";
@import "file-select";
@import "medallion-icon";
@import "toast";
@import "toast";
@import "badge";

39
css/backoffice/components/_badge.scss Normal file
View File

@@ -0,0 +1,39 @@
$ibo-badge--padding-x : $ibo-spacing-200 !default;
$ibo-badge--padding-y : $ibo-spacing-100 !default;
$ibo-badge--border-radius : $ibo-border-radius-400 !default;
$ibo-badge-colors: (
'primary': ($ibo-color-primary-100, $ibo-color-primary-900),
'secondary': ($ibo-color-secondary-100, $ibo-color-secondary-900),
'neutral': ($ibo-color-secondary-100, $ibo-color-secondary-900),
'information': ($ibo-color-information-100, $ibo-color-information-900),
'success': ($ibo-color-success-100, $ibo-color-success-900),
'failure': ($ibo-color-danger-100, $ibo-color-danger-900),
'warning': ($ibo-color-warning-100,$ibo-color-warning-900),
'danger': ($ibo-color-danger-100,$ibo-color-danger-900),
'grey' : ($ibo-color-grey-100, $ibo-color-grey-900),
'blue-grey': ($ibo-color-blue-grey-100, $ibo-color-blue-grey-900),
'blue': ($ibo-color-blue-100, $ibo-color-blue-900),
'cyan': ($ibo-color-cyan-100, $ibo-color-cyan-900),
'green': ($ibo-color-green-100, $ibo-color-green-900),
'orange' : ($ibo-color-orange-100, $ibo-color-orange-900),
'red': ($ibo-color-red-100, $ibo-color-red-900),
'pink': ($ibo-color-pink-100, $ibo-color-pink-900),
) !default;
.ibo-badge {
padding : $ibo-badge--padding-y $ibo-badge--padding-x;
border-radius : $ibo-badge--border-radius;
@extend %ibo-font-ral-med-50;
@each $sColor, $aColorValues in $ibo-badge-colors {
$bg-color: nth($aColorValues, 1);
$text-color: nth($aColorValues, 2);
&.ibo-is-#{$sColor} {
background-color: $bg-color;
color: $text-color;
}
}
}

1
css/backoffice/layout/_all.scss
View File

@@ -15,3 +15,4 @@
@import "wizard-container/wizard-container";
@import "object/all";
@import "activity-panel/all";
@import "extension/all";

1
css/backoffice/layout/extension/_all.scss Normal file
View File

@@ -0,0 +1 @@
@import "extension-details";

13
css/backoffice/layout/extension/_extension-details.scss Normal file
View File

@@ -0,0 +1,13 @@
.ibo-extension-details{
display:flex;
flex-direction : row;
justify-content: space-between;
align-items: center;
width:300px;
}
.ibo-extension-details--information{
flex-grow:1;
display:flex;
flex-direction : column;
}

3
lib/composer/autoload_classmap.php
View File

@@ -156,6 +156,8 @@ 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\\BadgeUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Component/Badge/BadgeUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Breadcrumbs\\Breadcrumbs' => $baseDir . '/sources/Application/UI/Base/Component/Breadcrumbs/Breadcrumbs.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroup' => $baseDir . '/sources/Application/UI/Base/Component/ButtonGroup/ButtonGroup.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroupUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Component/ButtonGroup/ButtonGroupUIBlockFactory.php',
@@ -268,6 +270,7 @@ return array(
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardColumn' => $baseDir . '/sources/Application/UI/Base/Layout/Dashboard/DashboardColumn.php',
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardLayout' => $baseDir . '/sources/Application/UI/Base/Layout/Dashboard/DashboardLayout.php',
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardRow' => $baseDir . '/sources/Application/UI/Base/Layout/Dashboard/DashboardRow.php',
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Extension\\ExtensionDetails' => $baseDir . '/sources/Application/UI/Base/Layout/Extension/ExtensionDetails.php',
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\Column\\Column' => $baseDir . '/sources/Application/UI/Base/Layout/MultiColumn/Column/Column.php',
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\Column\\ColumnUIBlockFactory' => $baseDir . '/sources/Application/UI/Base/Layout/MultiColumn/Column/ColumnUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\MultiColumn' => $baseDir . '/sources/Application/UI/Base/Layout/MultiColumn/MultiColumn.php',

3
lib/composer/autoload_static.php
View File

@@ -537,6 +537,8 @@ class ComposerStaticInit7f81b4a2a468a061c306af5e447a9a9f
'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\\BadgeUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Badge/BadgeUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\Breadcrumbs\\Breadcrumbs' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/Breadcrumbs/Breadcrumbs.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroup' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/ButtonGroup/ButtonGroup.php',
'Combodo\\iTop\\Application\\UI\\Base\\Component\\ButtonGroup\\ButtonGroupUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Component/ButtonGroup/ButtonGroupUIBlockFactory.php',
@@ -649,6 +651,7 @@ class ComposerStaticInit7f81b4a2a468a061c306af5e447a9a9f
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardColumn' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Dashboard/DashboardColumn.php',
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardLayout' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Dashboard/DashboardLayout.php',
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Dashboard\\DashboardRow' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Dashboard/DashboardRow.php',
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\Extension\\ExtensionDetails' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/Extension/ExtensionDetails.php',
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\Column\\Column' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/MultiColumn/Column/Column.php',
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\Column\\ColumnUIBlockFactory' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/MultiColumn/Column/ColumnUIBlockFactory.php',
'Combodo\\iTop\\Application\\UI\\Base\\Layout\\MultiColumn\\MultiColumn' => __DIR__ . '/../..' . '/sources/Application/UI/Base/Layout/MultiColumn/MultiColumn.php',

94
sources/Application/UI/Base/Component/Badge/Badge.php Normal file
View File

@@ -0,0 +1,94 @@
<?php
namespace Combodo\iTop\Application\UI\Base\Component\Badge;
use Combodo\iTop\Application\UI\Base\UIBlock;
class Badge extends UIBlock{
public const BLOCK_CODE = 'ibo-badge';
public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/badge/layout';
/** @var string ENUM_COLOR_SCHEME_NEUTRAL */
public const ENUM_COLOR_SCHEME_NEUTRAL = 'neutral';
/** @var string ENUM_COLOR_SCHEME_VALIDATION */
public const ENUM_COLOR_SCHEME_VALIDATION = 'success';
/** @var string ENUM_COLOR_SCHEME_DESTRUCTIVE */
public const ENUM_COLOR_SCHEME_DESTRUCTIVE = 'danger';
/** @var string ENUM_COLOR_SCHEME_PRIMARY */
public const ENUM_COLOR_SCHEME_PRIMARY = 'primary';
/** @var string ENUM_COLOR_SCHEME_SECONDARY */
public const ENUM_COLOR_SCHEME_SECONDARY = 'secondary';
/** @var string ENUM_COLOR_SCHEME_GREEN */
public const ENUM_COLOR_SCHEME_GREEN = 'green';
/** @var string ENUM_COLOR_SCHEME_RED */
public const ENUM_COLOR_SCHEME_RED = 'red';
/** @var string ENUM_COLOR_SCHEME_CYAN */
public const ENUM_COLOR_SCHEME_CYAN = 'cyan';
/** @var string DEFAULT_COLOR_SCHEME */
public const DEFAULT_COLOR_SCHEME = self::ENUM_COLOR_SCHEME_NEUTRAL;
private string $sLabel;
private string $sColor;
private string $sTooltip;
public function __construct(string $sLabel, string $sColor = self::DEFAULT_COLOR_SCHEME,string $sTooltip = '', string $sId = null)
{
parent::__construct($sId);
$this->sLabel = $sLabel;
$this->sColor = $sColor;
$this->sTooltip = $sTooltip;
}
/**
* @return string
*/
public function GetTooltip(): string {
return $this->sTooltip;
}
/**
* @param string $sTooltip
*/
public function SetTooltip(string $sTooltip) {
$this->sTooltip = $sTooltip;
return $this;
}
/**
* @return string
*/
public function GetLabel(): string
{
return $this->sLabel;
}
/**
* @param string $sLabel
*
* @return $this
*/
public function SetLabel(string $sLabel)
{
$this->sLabel = $sLabel;
return $this;
}
/**
* @return string
*/
public function GetColor(): string
{
return $this->sColor;
}
/**
* @param string $sColor
*
* @return $this
*/
public function SetColor(string $sColor)
{
$this->sColor = $sColor;
return $this;
}
}

20
sources/Application/UI/Base/Component/Badge/BadgeUIBlockFactory.php Normal file
View File

@@ -0,0 +1,20 @@
<?php
namespace Combodo\iTop\Application\UI\Base\Component\Badge;
use Combodo\iTop\Application\UI\Base\AbstractUIBlockFactory;
use Dict;
use utils;
class BadgeUIBlockFactory extends AbstractUIBlockFactory
{
/** @inheritDoc */
public const TWIG_TAG_NAME = 'UIBadge';
/** @inheritDoc */
public const UI_BLOCK_CLASS_NAME = Badge::class;
public static function MakeNeutral(string $sLabel, string $sTooltip = '', ?string $sId = null)
{
return new Badge($sLabel, Badge::ENUM_COLOR_SCHEME_NEUTRAL,$sTooltip, $sId);
}
}

124
sources/Application/UI/Base/Layout/Extension/ExtensionDetails.php Normal file
View File

@@ -0,0 +1,124 @@
<?php
namespace Combodo\iTop\Application\UI\Base\Layout\Extension;
use Combodo\iTop\Application\UI\Base\Component\Input\Toggler;
use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
class ExtensionDetails extends UIContentBlock {
public const BLOCK_CODE = 'ibo-extension-details';
public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/extension/extension-details/layout';
protected string $sCode;
protected string $sLabel;
protected array $aMetaData;
protected string $sDescription;
protected Toggler $oToggler;
protected array $aBadges;
public function __construct(string $sCode, string $sLabel, string $sDescription = '', array $aMetaData = [], string $sId = null) {
parent::__construct($sId);
$this->sCode = $sCode;
$this->sLabel = $sLabel;
$this->sDescription = $sDescription;
$this->aMetaData = $aMetaData;
$this->InitializeToggler();
}
/**
* @return string
*/
public function GetCode(): string {
return $this->sCode;
}
/**
* @param string $sCode
*/
public function SetCode(string $sCode) {
$this->sCode = $sCode;
return $this;
}
/**
* @return string
*/
public function GetLabel(): string {
return $this->sLabel;
}
/**
* @param string $sLabel
*/
public function SetLabel(string $sLabel) {
$this->sLabel = $sLabel;
return $this;
}
/**
* @return array
*/
public function GetMetaData(): array {
return $this->aMetaData;
}
/**
* @param array $aMetaData
*/
public function SetMetaData(array $aMetaData) {
$this->aMetaData = $aMetaData;
return $this;
}
/**
* @return string
*/
public function GetDescription(): string {
return $this->sDescription;
}
/**
* @param string $sDescription
*/
public function SetDescription(string $sDescription) {
$this->sDescription = $sDescription;
return $this;
}
/**
* @return \Combodo\iTop\Application\UI\Base\Component\Input\Toggler
*/
public function GetToggler(): Toggler {
return $this->oToggler;
}
/**
* @param \Combodo\iTop\Application\UI\Base\Component\Input\Toggler $oToggler
*/
public function SetToggler(Toggler $oToggler) {
$this->oToggler = $oToggler;
return $this;
}
/**
* @return array
*/
public function GetBadges(): array {
return $this->aBadges;
}
/**
* @param array $aBadges
*/
public function SetBadges(array $aBadges) {
$this->aBadges = $aBadges;
return $this;
}
protected function InitializeToggler(){
$this->oToggler = new Toggler();
$this->oToggler->SetName('ExtensionToggler');
}
}

8
templates/base/components/badge/layout.html.twig Normal file
View File

@@ -0,0 +1,8 @@
<span id="{{ oUIBlock.GetId() }}"
class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }} ibo-is-{{ oUIBlock.GetColor() }}"
{% if oUIBlock.GetTooltip() is not empty %}
data-tooltip-content="{{ oUIBlock.GetTooltip() }}"
{% endif %}
>
{{ oUIBlock.GetLabel() }}
</span>

23
templates/base/layouts/extension/extension-details/layout.html.twig Normal file
View File

@@ -0,0 +1,23 @@
{# @copyright Copyright (C) 2010-2024 Combodo SAS #}
{# @license http://opensource.org/licenses/AGPL-3.0 #}
<div class="{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" data-role="ibo-extension-details">
<div class="ibo-extension-details--information">
<div class="ibo-extension-details--information--label">
{{ oUIBlock.GetLabel() }}
</div>
<div class="ibo-extension-details--information--metadata">
{% for sMetaData in oUIBlock.GetMetaData() %}
<span>{{ sMetaData }}</span>
{% endfor %}
</div>
<div class="ibo-extension-details--information--description">
{{ oUIBlock.GetDescription() }}
</div>
</div>
<div class="ibo-extension-details--actions">
{{ render_block(oUIBlock.GetToggler(), {aPage: aPage}) }}
<span>...</span>
</div>
</div>

12
tests/manual-visual-tests/Backoffice/RenderAllUiBlocks.php
View File

@@ -23,6 +23,8 @@
namespace Combodo\iTop\Test\VisualTest\Backoffice;
use Combodo\iTop\Application\UI\Base\Component\Alert\AlertUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\Badge\Badge;
use Combodo\iTop\Application\UI\Base\Component\Badge\BadgeUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\Button\Button;
use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\ButtonGroup\ButtonGroup;
@@ -39,6 +41,7 @@ use Combodo\iTop\Application\UI\Base\Component\Panel\PanelUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\Pill\PillFactory;
use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
use Combodo\iTop\Application\UI\Base\Component\Title\TitleUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Layout\Extension\ExtensionDetails;
use Combodo\iTop\Application\UI\Base\Layout\Object\ObjectFactory;
use Combodo\iTop\Application\UI\Base\Layout\PageContent\PageContentFactory;
use Combodo\iTop\Application\UI\Base\Layout\UIContentBlockUIBlockFactory;
@@ -579,4 +582,13 @@ $oPage->AddUiBlock($oSimpleSetBlockOql);
$oSimpleSetBlockOql2 = SetUIBlockFactory::MakeForOQL('SetOql2', 'Location', 'SELECT Location', null, [], null, 'OqlSet2');
$oPage->AddUiBlock($oSimpleSetBlockOql2);
$oSampleBadge = new Badge('badge red',Badge::ENUM_COLOR_SCHEME_RED,'Tooltip');
$oPage->AddUiBlock($oSampleBadge);
$oSampleBadgeNeutral = BadgeUIBlockFactory::MakeNeutral('badge neutral','Tooltip');
$oPage->AddUiBlock($oSampleBadgeNeutral);
$oExtensionDetail = new ExtensionDetails('itop-sample', 'My extension', 'This is for test only');
$oPage->AddUiBlock($oExtensionDetail);
$oPage->output();