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

Add features to Spinner block

Browse Source
This commit is contained in:
Stephen Abello
2023-04-14 11:09:21 +02:00
parent 95f0e97b5e
commit 16e27ef189
5 changed files with 180 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@
@import "input/all";
@import "pill";
@import "prop";
@import "spinner";
@import "title";
@import "datatable/all";
@import "form";

61
css/backoffice/components/_spinner.scss Normal file
View File

@@ -0,0 +1,61 @@
/*
* @copyright Copyright (C) 2010-2023 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-spinner--is-small-medium-large--icon--color: $ibo-color-grey-600 !default;
$ibo-spinner--is-small-medium-large--description--color: $ibo-color-grey-800 !default;
$ibo-spinner--is-small--description--margin-top: $ibo-spacing-200 !default;
$ibo-spinner--is-medium--description--margin-top: $ibo-spacing-300 !default;
$ibo-spinner--is-large--description--margin-top: $ibo-spacing-500 !default;
.ibo-spinner{
&.ibo-is-inline{
display: inline-block;
>*{
display: inline-block;
}
}
&.ibo-is-small, &.ibo-is-medium, &.ibo-is-large{
display: flex;
flex-direction: column;
>.ibo-spinner--icon{
align-self: center;
color: $ibo-spinner--is-small-medium-large--icon--color;
}
>.ibo-spinner--description{
align-self: center;
color: $ibo-spinner--is-small-medium-large--description--color;
}
}
&.ibo-is-small{
>.ibo-spinner--icon{
@extend %ibo-font-size-250;
}
>.ibo-spinner--description{
margin-top: $ibo-spinner--is-small--description--margin-top;
@extend %ibo-font-size-150;
}
}
&.ibo-is-medium{
>.ibo-spinner--icon{
@extend %ibo-font-size-500;
}
>.ibo-spinner--description{
margin-top: $ibo-spinner--is-medium--description--margin-top;
@extend %ibo-font-size-250;
}
}
&.ibo-is-large{
>.ibo-spinner--icon{
@extend %ibo-font-size-550;
}
>.ibo-spinner--description{
margin-top: $ibo-spinner--is-large--description--margin-top;
@extend %ibo-font-size-400;
}
}
}

64
sources/Application/UI/Base/Component/Spinner/Spinner.php
View File

@@ -19,9 +19,71 @@ class Spinner extends UIBlock
// Overloaded constants
public const BLOCK_CODE = 'ibo-spinner';
public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/spinner/layout';
/* @var string Display size for inline element, rather small */
public const ENUM_SPINNER_SIZE_INLINE = 'inline';
/* @var string Display size for small element, displayed in a column */
public const ENUM_SPINNER_SIZE_SMALL = 'small';
/* @var string Display size for medium element, displayed in a column */
public const ENUM_SPINNER_SIZE_MEDIUM = 'medium';
public function __construct(?string $sId = null)
/* @var string Display size for large element, displayed in a column */
public const ENUM_SPINNER_SIZE_LARGE = 'large';
/* @var string Default display size */
public const ENUM_SPINNER_SIZE_DEFAULT = self::ENUM_SPINNER_SIZE_INLINE;
/* @var string */
private $sDescription = '';
/* @var string */
private $sSize = self::ENUM_SPINNER_SIZE_DEFAULT;
public function __construct(?string $sId = null, $sDescription = '')
{
parent::__construct($sId);
$this->sDescription = $sDescription;
}
/**
* @return string
*/
public function GetDescription(): string
{
return $this->sDescription;
}
/**
* @param string $sDescription
* @return $this
*/
public function SetDescription($sDescription)
{
$this->sDescription = $sDescription;
return $this;
}
/**
* @return bool
*/
public function HasDescription(): bool
{
return $this->sDescription !== '';
}
/**
* @return string
*/
public function GetSize(): string
{
return $this->sSize;
}
/**
* @param string $sSize
* @return $this
*/
public function SetSize(string $sSize)
{
$this->sSize = $sSize;
return $this;
}
}

45
sources/Application/UI/Base/Component/Spinner/SpinnerUIBlockFactory.php
View File

@@ -35,4 +35,49 @@ class SpinnerUIBlockFactory extends AbstractUIBlockFactory
{
return new Spinner($sId);
}
/**
* @api
*
* @param string|null $sId
* @param string $sDescription
*
* @return \Combodo\iTop\Application\UI\Base\Component\Spinner\Spinner
*/
public static function MakeSmall(?string $sId = null, string $sDescription = '')
{
$oSpinner = new Spinner($sId, $sDescription);
$oSpinner->SetSize(Spinner::ENUM_SPINNER_SIZE_SMALL);
return $oSpinner;
}
/**
* @api
*
* @param string|null $sId
* @param string $sDescription
*
* @return \Combodo\iTop\Application\UI\Base\Component\Spinner\Spinner
*/
public static function MakeMedium(?string $sId = null, string $sDescription = '')
{
$oSpinner = new Spinner($sId, $sDescription);
$oSpinner->SetSize(Spinner::ENUM_SPINNER_SIZE_MEDIUM);
return $oSpinner;
}
/**
* @api
*
* @param string|null $sId
* @param string $sDescription
*
* @return \Combodo\iTop\Application\UI\Base\Component\Spinner\Spinner
*/
public static function MakeLarge(?string $sId = null, string $sDescription = '')
{
$oSpinner = new Spinner($sId, $sDescription);
$oSpinner->SetSize(Spinner::ENUM_SPINNER_SIZE_LARGE);
return $oSpinner;
}
}

11
templates/base/components/spinner/layout.html.twig
View File

@@ -1,5 +1,14 @@
{# @copyright Copyright (C) 2010-2023 Combodo SARL #}
{# @license http://opensource.org/licenses/AGPL-3.0 #}
{% apply spaceless %}
<i id="{{ oUIBlock.GetId() }}" class="fas fa-sync-alt fa-spin {% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %} {{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }} {{ oUIBlock.GetAdditionalCSSClassesAsString() }}" aria-hidden="true"></i>
<div id="{{ oUIBlock.GetId() }}" class="ibo-spinner ibo-is-{{ oUIBlock.GetSize() }}
{% if oUIBlock.IsHidden() %}ibo-is-hidden{% endif %}
{{ oUIBlock.GetBlocksInheritanceCSSClassesAsString() }}
{{ oUIBlock.GetAdditionalCSSClassesAsString() }}"
data-role="ibo-spinner">
<i class="ibo-spinner--icon fas fa-sync-alt fa-spin" aria-hidden="true"></i>
{% if oUIBlock.HasDescription() %}
<div class="ibo-spinner--description"> {{ oUIBlock.GetDescription() }} </div>
{% endif %}
<div>
{% endapply %}