composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°2847 Add disabled state for Button component

Browse Source
This commit is contained in:
Stephen Abello
2020-09-10 15:26:17 +02:00
parent 580e8ffa08
commit 163c1ebc91
4 changed files with 97 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
css/backoffice/components/_button.scss
View File

@@ -23,6 +23,11 @@ $ibo-button-colors: (
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
'primary': (
'': (
@@ -40,6 +45,11 @@ $ibo-button-colors: (
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-primary-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-primary-600,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
'secondary': (
'': (
@@ -57,6 +67,11 @@ $ibo-button-colors: (
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
'red': (
'': (
@@ -74,6 +89,11 @@ $ibo-button-colors: (
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-red-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-700,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
'green': (
'': (
@@ -91,6 +111,11 @@ $ibo-button-colors: (
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-green-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-800,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
'cyan': (
'': (
@@ -108,6 +133,11 @@ $ibo-button-colors: (
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-700,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
)
),
'alternative': (
@@ -127,6 +157,11 @@ $ibo-button-colors: (
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
'primary': (
'': (
@@ -144,6 +179,11 @@ $ibo-button-colors: (
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-primary-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-primary-300,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
'secondary': (
'': (
@@ -161,6 +201,11 @@ $ibo-button-colors: (
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
'red': (
'': (
@@ -178,6 +223,11 @@ $ibo-button-colors: (
$ibo-color-red-900,
$ibo-button--box-shadow-top $ibo-color-red-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-200,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
'green': (
'': (
@@ -195,6 +245,11 @@ $ibo-button-colors: (
$ibo-color-green-900,
$ibo-button--box-shadow-top $ibo-color-green-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-100,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
'cyan': (
'': (
@@ -212,6 +267,11 @@ $ibo-button-colors: (
$ibo-color-cyan-900,
$ibo-button--box-shadow-top $ibo-color-cyan-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-100,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
)
) !default;

20
sources/application/UI/Component/Button/Button.php
View File

@@ -88,6 +88,8 @@ class Button extends UIBlock
protected $sActionType;
/** @var string $sColor */
protected $sColor;
/** @var bool $bIsDisabled */
protected $bIsDisabled;
/** @var string $sJsCode */
protected $sJsCode;
/** @var string $sOnClickJsCode */
@@ -124,6 +126,7 @@ class Button extends UIBlock
$this->sColor = $sColor;
$this->sJsCode = $sJsCode;
$this->sOnClickJsCode = $sOnClickJsCode;
$this->bIsDisabled = false;
parent::__construct($sId);
}
@@ -281,7 +284,24 @@ class Button extends UIBlock
return $this;
}
/**
* @return bool
*/
public function IsDisabled()
{
return $this->bIsDisabled;
}
/**
* @param bool $bIsDisabled
*
* @return $this
*/
public function SetIsDisabled(bool $bIsDisabled)
{
$this->bIsDisabled = $bIsDisabled;
return $this;
}
/**
* @return string
*/

8
templates/components/button/layout.html.twig
View File

@@ -1,4 +1,10 @@
<button id="{{ oUIBlock.GetId() }}" class="ibo-button ibo-is-{{ oUIBlock.GetActionType()}} ibo-is-{{ oUIBlock.GetColor() }}" type="{{ oUIBlock.GetType() }}" name="{{ oUIBlock.GetName() }}" value="{{ oUIBlock.GetValue() }}">
<button id="{{ oUIBlock.GetId() }}"
class="ibo-button ibo-is-{{ oUIBlock.GetActionType()}} ibo-is-{{ oUIBlock.GetColor() }}"
type="{{ oUIBlock.GetType() }}"
name="{{ oUIBlock.GetName() }}"
value="{{ oUIBlock.GetValue() }}"
{% if oUIBlock.IsDisabled() is same as(true) %} disabled {% endif %}
>
{% if oUIBlock.GetIconClass() is not empty %}
<span class="ibo-button-icon {{ oUIBlock.GetIconClass() }}"></span>
{% endif %}

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

@@ -57,15 +57,25 @@ $oPageContentLayout->AddMainBlock(new Html('<hr/>'));
// Buttons
//////////
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeNeutral('Neutral', 'neutral'));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeNeutral('Neutral', 'neutral')->SetIsDisabled(true));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForPrimaryAction('Primary'));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForPrimaryAction('Primary')->SetIsDisabled(true));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForSecondaryAction('Secondary'));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForSecondaryAction('Secondary')->SetIsDisabled(true));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForValidationAction('Validation'));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForValidationAction('Validation')->SetIsDisabled(true));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForDestructiveAction('Destructive'));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForDestructiveAction('Destructive')->SetIsDisabled(true));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeAlternativeNeutral('Alt. neutral', 'alt-neutral'));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeAlternativeNeutral('Alt. neutral', 'alt-neutral')->SetIsDisabled(true));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativePrimaryAction('Alt. primary'));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativePrimaryAction('Alt. primary')->SetIsDisabled(true));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeSecondaryAction('Alt. secondary'));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeSecondaryAction('Alt. secondary')->SetIsDisabled(true));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeValidationAction('Alt. validation'));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeValidationAction('Alt. validation')->SetIsDisabled(true));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeDestructiveAction('Alt. destructive'));
$oPageContentLayout->AddMainBlock(ButtonFactory::MakeForAlternativeDestructiveAction('Alt. destructive')->SetIsDisabled(true));
$oPageContentLayout->AddMainBlock(new Html('<hr/>'));