Commit d942f72e authored by Frank Nägler's avatar Frank Nägler Committed by Markus Klein
Browse files

[FEATURE] Add spinning feature for icons

Resolves: #69389
Releases: master
Change-Id: Ife062222cf5fc57aa65d5873e4dbf625df10f6d1
Reviewed-on: http://review.typo3.org/42905

Reviewed-by: default avatarDaniel Goerz <ervaude@gmail.com>
Tested-by: default avatarDaniel Goerz <ervaude@gmail.com>
Reviewed-by: Markus Klein's avatarMarkus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein's avatarMarkus Klein <markus.klein@typo3.org>
parent 304440e5
......@@ -63,6 +63,36 @@
text-align: center;
}
//
// Icon Animation
//
.icon-spin {
.icon-markup {
-webkit-animation: icon-spin 2s infinite linear;
animation: icon-spin 2s infinite linear;
}
}
@-webkit-keyframes icon-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes icon-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
//
// Variants
//
......
......@@ -60,6 +60,12 @@ class Icon {
*/
protected $size = '';
/**
* Flag to indicate if the icon has a spinning animation
* @var bool
*/
protected $spinning = FALSE;
/**
* @var Dimension
*/
......@@ -129,6 +135,20 @@ class Icon {
$this->dimension = GeneralUtility::makeInstance(Dimension::class, $size);
}
/**
* @return boolean
*/
public function isSpinning() {
return $this->spinning;
}
/**
* @param boolean $spinning
*/
public function setSpinning($spinning) {
$this->spinning = $spinning;
}
/**
* @return Dimension
*/
......@@ -164,8 +184,16 @@ class Icon {
* @return string
*/
protected function wrappedIcon() {
$classes = array();
$classes[] = 'icon';
$classes[] = 'icon-size-' . $this->size;
$classes[] = 'icon-' . $this->getIdentifier();
if ($this->isSpinning()) {
$classes[] = 'icon-spin';
}
$markup = array();
$markup[] = '<span class="icon icon-size-' . $this->size . ' icon-' . htmlspecialchars($this->getIdentifier()) . '">';
$markup[] = '<span class="' . htmlspecialchars(implode(' ', $classes)) . '">';
$markup[] = ' <span class="icon-markup">';
$markup[] = $this->getMarkup();
$markup[] = ' </span>';
......
......@@ -14,7 +14,6 @@ namespace TYPO3\CMS\Core\Imaging;
* The TYPO3 project - inspiring people to share!
*/
use TYPO3\CMS\Core\SingletonInterface;
use TYPO3\CMS\Core\Utility\GeneralUtility;
/**
......@@ -47,8 +46,8 @@ class IconFactory {
$identifier = $this->iconRegistry->getDefaultIconIdentifier();
}
$icon = $this->createIcon($identifier, $size, $overlayIdentifier);
$iconConfiguration = $this->iconRegistry->getIconConfigurationByIdentifier($identifier);
$icon = $this->createIcon($identifier, $size, $overlayIdentifier, $iconConfiguration);
/** @var IconProviderInterface $iconProvider */
$iconProvider = GeneralUtility::makeInstance($iconConfiguration['provider']);
$iconProvider->prepareIconMarkup($icon, $iconConfiguration['options']);
......@@ -61,15 +60,19 @@ class IconFactory {
* @param string $identifier
* @param string $size "large" "small" or "default", see the constants of the Icon class
* @param string $overlayIdentifier
* @param array $iconConfiguration the icon configuration array
* @return Icon
*/
protected function createIcon($identifier, $size, $overlayIdentifier = NULL) {
protected function createIcon($identifier, $size, $overlayIdentifier = NULL, array $iconConfiguration) {
$icon = GeneralUtility::makeInstance(Icon::class);
$icon->setIdentifier($identifier);
$icon->setSize($size);
if ($overlayIdentifier !== NULL) {
$icon->setOverlayIcon($this->getIcon($overlayIdentifier, Icon::SIZE_OVERLAY));
}
if (!empty($iconConfiguration['options']['spinning'])) {
$icon->setSpinning(TRUE);
}
return $icon;
}
}
===============================================
Feature: #69389 - Add spinning feature for icon
===============================================
Description
===========
The Icon API has now a support for spinning icons. While registering an icon a new property ``spinning`` is available:
.. code-block:: php
$iconRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Imaging\IconRegistry::class);
$iconRegistry->registerIcon(
'my-spinning-icon',
\TYPO3\CMS\Core\Imaging\IconProvider\FontawesomeIconProvider::class,
array(
'name' => 'times',
'spinning' => TRUE
)
);
Impact
======
Icons can now be animated.
......@@ -40,6 +40,11 @@ class IconFactoryTest extends \TYPO3\CMS\Core\Tests\UnitTestCase {
*/
protected $registeredIconIdentifier = 'actions-document-close';
/**
* @var string
*/
protected $registeredSpinningIconIdentifier = 'spinning-icon';
/**
* @var \TYPO3\CMS\Core\Imaging\IconRegistry
*/
......@@ -146,6 +151,22 @@ class IconFactoryTest extends \TYPO3\CMS\Core\Tests\UnitTestCase {
$this->subject->getIcon($this->notRegisteredIconIdentifier, $size['input'])->render());
}
/**
* @test
*/
public function getIconReturnsCorrectMarkupIfIconIsRegisteredAsSpinningIcon() {
$this->iconRegistryMock->getIconConfigurationByIdentifier($this->registeredSpinningIconIdentifier)->willReturn([
'provider' => FontawesomeIconProvider::class,
'options' => array(
'name' => 'times-circle',
'additionalClasses' => 'fa-fw',
'spinning' => TRUE
)
]);
$this->assertContains('<span class="icon icon-size-default icon-' . $this->registeredSpinningIconIdentifier . ' icon-spin">',
$this->subject->getIcon($this->registeredSpinningIconIdentifier)->render());
}
/**
* @test
* @dataProvider differentSizesDataProvider
......
......@@ -106,4 +106,11 @@ class IconRegistryTest extends \TYPO3\CMS\Core\Tests\UnitTestCase {
// the provider must implement the IconProviderInterface
$this->assertTrue(in_array(IconProviderInterface::class, class_implements($result['provider'])));
}
/**
* @test
*/
public function getAllRegisteredIconIdentifiersReturnsAnArrayWithIconIdentiefiers() {
$this->assertInternalType('array', $this->subject->getAllRegisteredIconIdentifiers());
}
}
......@@ -7786,6 +7786,30 @@ button.close {
width: 60%;
text-align: center;
}
.icon-spin .icon-markup {
-webkit-animation: icon-spin 2s infinite linear;
animation: icon-spin 2s infinite linear;
}
@-webkit-keyframes icon-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes icon-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.icon-size-small {
height: 16px;
width: 16px;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment