mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-20 09:08:42 +02:00
N°2847 Add Button component
This commit is contained in:
Stephen Abello
@@ -16,6 +16,7 @@
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
*/
|
||||
|
||||
@import "button";
|
||||
@import "breadcrumbs";
|
||||
@import "quick-create";
|
||||
@import "global-search";
|
||||
|
||||
212
css/backoffice/components/_button.scss
Normal file
212
css/backoffice/components/_button.scss
Normal file
@@ -0,0 +1,212 @@
|
||||
$ibo-button--padding-y: 6px !default;
|
||||
$ibo-button--padding-x: 9px !default;
|
||||
$ibo-button--border: 0 !default;
|
||||
$ibo-button--border-radius: $ibo-border-radius-400 !default;
|
||||
|
||||
$ibo-button--box-shadow-bottom: 0px 2px 0px !default;
|
||||
$ibo-button--box-shadow-top: inset 0px 2px 0px !default;
|
||||
$ibo-button-colors: (
|
||||
'regular': (
|
||||
'primary': (
|
||||
'': (
|
||||
$ibo-color-primary-400,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-primary-400,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-primary-600,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-primary-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-primary-600,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-primary-800 + ',' + $ibo-button--box-shadow-bottom $ibo-color-primary-600,
|
||||
),
|
||||
),
|
||||
'secondary': (
|
||||
'': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-200,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-300 + ',' + $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
|
||||
),
|
||||
),
|
||||
'red': (
|
||||
'': (
|
||||
$ibo-color-red-600,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-red-800,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-red-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-red-800,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-red-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-red-800 + ',' + $ibo-button--box-shadow-bottom $ibo-color-red-700,
|
||||
),
|
||||
),
|
||||
'green': (
|
||||
'': (
|
||||
$ibo-color-green-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-green-900,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-green-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-green-900,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-green-800,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-green-900 + ',' + $ibo-button--box-shadow-bottom $ibo-color-green-800,
|
||||
),
|
||||
),
|
||||
'cyan': (
|
||||
'': (
|
||||
$ibo-color-cyan-500,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-cyan-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-cyan-700,
|
||||
$ibo-color-white-100,
|
||||
$ibo-button--box-shadow-top $ibo-color-cyan-900 + ',' + $ibo-button--box-shadow-bottom $ibo-color-cyan-700,
|
||||
),
|
||||
)
|
||||
),
|
||||
'misc': (
|
||||
'primary': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-primary-600,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-primary-300,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-primary-300,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-primary-300,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-primary-700 + ',' + $ibo-button--box-shadow-bottom $ibo-color-primary-300,
|
||||
),
|
||||
),
|
||||
'secondary': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-secondary-100,
|
||||
$ibo-color-grey-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-secondary-200 + ',' + $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
||||
),
|
||||
),
|
||||
'red': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-red-700,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-red-200,
|
||||
$ibo-color-red-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-red-200,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-red-200,
|
||||
$ibo-color-red-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-red-700 + ',' + $ibo-button--box-shadow-bottom $ibo-color-red-200,
|
||||
),
|
||||
),
|
||||
'green': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-green-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-green-100,
|
||||
$ibo-color-green-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-green-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-green-100,
|
||||
$ibo-color-green-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-green-700 + ',' + $ibo-button--box-shadow-bottom $ibo-color-green-100,
|
||||
),
|
||||
),
|
||||
'cyan': (
|
||||
'': (
|
||||
transparent,
|
||||
$ibo-color-cyan-900,
|
||||
$ibo-button--box-shadow-bottom transparent,
|
||||
),
|
||||
':hover': (
|
||||
$ibo-color-cyan-100,
|
||||
$ibo-color-cyan-900,
|
||||
$ibo-button--box-shadow-bottom $ibo-color-cyan-100,
|
||||
),
|
||||
':active': (
|
||||
$ibo-color-cyan-100,
|
||||
$ibo-color-cyan-900,
|
||||
$ibo-button--box-shadow-top $ibo-color-cyan-800 + ',' + $ibo-button--box-shadow-bottom $ibo-color-cyan-100,
|
||||
),
|
||||
),
|
||||
)
|
||||
)
|
||||
!default;
|
||||
|
||||
@each $sType, $aColors in $ibo-button-colors {
|
||||
@each $sColor, $aPseudoclasses in $aColors{
|
||||
@each $sPseudoclass, $sAttributes in $aPseudoclasses {
|
||||
$bg-color: nth($sAttributes, 1);
|
||||
$font-color: nth($sAttributes, 2);
|
||||
$box-shadow: nth($sAttributes, 3);
|
||||
.ibo-button.ibo-is-#{$sType}.ibo-is-#{$sColor}#{$sPseudoclass} {
|
||||
background-color: $bg-color;
|
||||
color: $font-color;
|
||||
box-shadow: $box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$ibo-button-icon--padding-right: 4px !default;
|
||||
|
||||
.ibo-button{
|
||||
cursor: pointer;
|
||||
@extend %ibo-font-ral-med-150;
|
||||
padding: $ibo-button--padding-y $ibo-button--padding-x;
|
||||
border: 0;
|
||||
border-radius: $ibo-button--border-radius;
|
||||
}
|
||||
.ibo-button-icon{
|
||||
padding-right: $ibo-button-icon--padding-right;
|
||||
}
|
||||
@@ -149,6 +149,7 @@ return array(
|
||||
'Combodo\\iTop\\Application\\TwigBase\\Twig\\Extension' => $baseDir . '/sources/application/TwigBase/Twig/Extension.php',
|
||||
'Combodo\\iTop\\Application\\TwigBase\\Twig\\TwigHelper' => $baseDir . '/sources/application/TwigBase/Twig/TwigHelper.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\Breadcrumbs\\Breadcrumbs' => $baseDir . '/sources/application/UI/Component/Breadcrumbs/Breadcrumbs.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\Button\\Button\\Button' => $baseDir . '/sources/application/UI/Component/Button/Button.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearch' => $baseDir . '/sources/application/UI/Component/GlobalSearch/GlobalSearch.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchFactory' => $baseDir . '/sources/application/UI/Component/GlobalSearch/GlobalSearchFactory.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchHelper' => $baseDir . '/sources/application/UI/Component/GlobalSearch/GlobalSearchHelper.php',
|
||||
|
||||
@@ -379,6 +379,7 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
|
||||
'Combodo\\iTop\\Application\\TwigBase\\Twig\\Extension' => __DIR__ . '/../..' . '/sources/application/TwigBase/Twig/Extension.php',
|
||||
'Combodo\\iTop\\Application\\TwigBase\\Twig\\TwigHelper' => __DIR__ . '/../..' . '/sources/application/TwigBase/Twig/TwigHelper.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\Breadcrumbs\\Breadcrumbs' => __DIR__ . '/../..' . '/sources/application/UI/Component/Breadcrumbs/Breadcrumbs.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\Button\\Button\\Button' => __DIR__ . '/../..' . '/sources/application/UI/Component/Button/Button.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearch' => __DIR__ . '/../..' . '/sources/application/UI/Component/GlobalSearch/GlobalSearch.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/GlobalSearch/GlobalSearchFactory.php',
|
||||
'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchHelper' => __DIR__ . '/../..' . '/sources/application/UI/Component/GlobalSearch/GlobalSearchHelper.php',
|
||||
|
||||
282
sources/application/UI/Component/Button/Button.php
Normal file
282
sources/application/UI/Component/Button/Button.php
Normal file
@@ -0,0 +1,282 @@
|
||||
<?php
|
||||
/**
|
||||
* Copyright (C) 2013-2020 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
|
||||
*/
|
||||
|
||||
namespace Combodo\iTop\Application\UI\Component\Button\Button;
|
||||
|
||||
|
||||
|
||||
use Combodo\iTop\Application\UI\UIBlock;
|
||||
|
||||
/**
|
||||
* Class JsPopoverMenuItem
|
||||
*
|
||||
* @author Stephen Abello <stephen.abello@combodo.com>
|
||||
* @package Combodo\iTop\Application\UI\Component\Button\Button
|
||||
* @since 2.8.0
|
||||
*/
|
||||
class Button extends UIBlock
|
||||
{
|
||||
// Overloaded constants
|
||||
const BLOCK_CODE = 'ibo-button';
|
||||
const HTML_TEMPLATE_REL_PATH = 'components/button/layout';
|
||||
const JS_TEMPLATE_REL_PATH = 'components/button/layout';
|
||||
|
||||
/** @var string $sLabel */
|
||||
protected $sLabel;
|
||||
/** @var string $sType */
|
||||
protected $sType;
|
||||
/** @var string $sName */
|
||||
protected $sName;
|
||||
/** @var string $sValue */
|
||||
protected $sValue;
|
||||
/** @var string $sTooltip */
|
||||
protected $sTooltip;
|
||||
/** @var string $sIconClass */
|
||||
protected $sIconClass;
|
||||
/** @var string $sActionType */
|
||||
protected $sActionType;
|
||||
/** @var string $sColor */
|
||||
protected $sColor;
|
||||
/** @var string $sJsCode */
|
||||
protected $sJsCode;
|
||||
/** @var string $sOnClickJsCode */
|
||||
protected $sOnClickJsCode;
|
||||
|
||||
/**
|
||||
* Button constructor.
|
||||
*
|
||||
* @param string $sId
|
||||
* @param string $sLabel
|
||||
* @param string $sName
|
||||
* @param string $sValue
|
||||
* @param string $sType
|
||||
* @param string $sTooltip
|
||||
* @param string $sIconClass
|
||||
* @param string $sActionType
|
||||
* @param string $sColor
|
||||
* @param string $sJsCode
|
||||
* @param string $sOnClickJsCode
|
||||
*/
|
||||
public function __construct($sId, $sLabel, $sName, $sValue, $sType = '', $sTooltip = '', $sIconClass = '', $sActionType = 'primary', $sColor = 'secondary', $sJsCode = '', $sOnClickJsCode = '')
|
||||
{
|
||||
$this->sLabel = $sLabel;
|
||||
$this->sName = $sName;
|
||||
$this->sValue = $sValue;
|
||||
$this->sType = $sType;
|
||||
$this->sTooltip = $sTooltip;
|
||||
$this->sIconClass = $sIconClass;
|
||||
$this->sActionType = $sActionType;
|
||||
$this->sColor = $sColor;
|
||||
$this->sJsCode = $sJsCode;
|
||||
$this->sOnClickJsCode = $sOnClickJsCode;
|
||||
|
||||
parent::__construct($sId);
|
||||
}
|
||||
|
||||
/**
|
||||
* @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 GetType()
|
||||
{
|
||||
return $this->sType;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $sType
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function SetType(string $sType)
|
||||
{
|
||||
$this->sType = $sType;
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function GetName()
|
||||
{
|
||||
return $this->sName;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $sName
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function SetName(string $sName)
|
||||
{
|
||||
$this->sName = $sName;
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function GetValue()
|
||||
{
|
||||
return $this->sValue;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $sValue
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function SetValue(string $sValue)
|
||||
{
|
||||
$this->sValue = $sValue;
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function GetTooltip()
|
||||
{
|
||||
return $this->sTooltip;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $sTooltip
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function SetTooltip(string $sTooltip)
|
||||
{
|
||||
$this->sTooltip = $sTooltip;
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function GetIconClass()
|
||||
{
|
||||
return $this->sIconClass;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $sIconClass
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function SetIconClass(string $sIconClass)
|
||||
{
|
||||
$this->sIconClass = $sIconClass;
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function GetActionType()
|
||||
{
|
||||
return $this->sActionType;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $sActionType
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function SetActionType(string $sActionType)
|
||||
{
|
||||
$this->sActionType = $sActionType;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function GetColor()
|
||||
{
|
||||
return $this->sColor;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $sColor
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function SetColor(string $sColor)
|
||||
{
|
||||
$this->sColor = $sColor;
|
||||
return $this;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function GetOnClickJsCode()
|
||||
{
|
||||
return $this->sOnClickJsCode;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $sOnClickJsCode
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function SetOnClickJsCode($sOnClickJsCode)
|
||||
{
|
||||
$this->sOnClickJsCode = $sOnClickJsCode;
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function GetJsCode()
|
||||
{
|
||||
return $this->sJsCode;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $sJsCode
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function SetJsCode($sJsCode)
|
||||
{
|
||||
$this->sJsCode = $sJsCode;
|
||||
return $this;
|
||||
}
|
||||
}
|
||||
4
templates/components/button/layout.html.twig
Normal file
4
templates/components/button/layout.html.twig
Normal file
@@ -0,0 +1,4 @@
|
||||
<button id="{{ oUIBlock.GetId() }}" class="ibo-button ibo-is-{{ oUIBlock.ActionType}} ibo-is-{{ oUIBlock.Color }}" type="{{ oUIBlock.Type }}" name="{{ oUIBlock.Name }}" value="{{ oUIBlock.Value }}" >
|
||||
<span class="ibo-button-icon {{ oUIBlock.IconClass }}"></span>
|
||||
{{ oUIBlock.Label }}
|
||||
</button>
|
||||
15
templates/components/button/layout.js.twig
Normal file
15
templates/components/button/layout.js.twig
Normal file
@@ -0,0 +1,15 @@
|
||||
// TODO: We need to find a clean way to launch this script only once the JS scripts are loaded
|
||||
{% if (oUIBlock.GetOnClickJsCode() is not empty) or (oUIBlock.GetJsCode() is not empty) %}
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
setTimeout(function(){
|
||||
{% if oUIBlock.GetOnClickJsCode() is not empty %}
|
||||
$('#{{ oUIBlock.GetId() }}').on('click', function(){
|
||||
{{ oUIBlock.GetOnClickJsCode() }}
|
||||
})
|
||||
{% endif %}
|
||||
{% if oUIBlock.GetJsCode() is not empty %}
|
||||
{{ oUIBlock.GetJsCode() }}
|
||||
{% endif %}
|
||||
}, 500);
|
||||
});
|
||||
{% endif %}
|
||||
Reference in New Issue
Block a user