[FEATURE] Add spinning feature for icons 05/42905/7
authorFrank Nägler <frank.naegler@typo3.org>
Fri, 28 Aug 2015 10:20:58 +0000 (12:20 +0200)
committerMarkus Klein <markus.klein@typo3.org>
Mon, 31 Aug 2015 09:43:58 +0000 (11:43 +0200)
Resolves: #69389
Releases: master
Change-Id: Ife062222cf5fc57aa65d5873e4dbf625df10f6d1
Reviewed-on: http://review.typo3.org/42905
Reviewed-by: Daniel Goerz <ervaude@gmail.com>
Tested-by: Daniel Goerz <ervaude@gmail.com>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
Build/Resources/Public/Less/Component/icon.less
typo3/sysext/core/Classes/Imaging/Icon.php
typo3/sysext/core/Classes/Imaging/IconFactory.php
typo3/sysext/core/Documentation/Changelog/master/Feature-69389-AddSpinningFeatureForIcon.rst [new file with mode: 0644]
typo3/sysext/core/Tests/Unit/Imaging/IconFactoryTest.php
typo3/sysext/core/Tests/Unit/Imaging/IconRegistryTest.php
typo3/sysext/t3skin/Resources/Public/Css/backend.css

index 56040a4..c8c4191 100644 (file)
 }
 
 //
 }
 
 //
+// 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
 //
 .icon-size(@identifier; @size) {
 // Variants
 //
 .icon-size(@identifier; @size) {
index 28650eb..18464e2 100644 (file)
@@ -61,6 +61,12 @@ class Icon {
        protected $size = '';
 
        /**
        protected $size = '';
 
        /**
+        * Flag to indicate if the icon has a spinning animation
+        * @var bool
+        */
+       protected $spinning = FALSE;
+
+       /**
         * @var Dimension
         */
        protected $dimension;
         * @var Dimension
         */
        protected $dimension;
@@ -130,6 +136,20 @@ class Icon {
        }
 
        /**
        }
 
        /**
+        * @return boolean
+        */
+       public function isSpinning() {
+               return $this->spinning;
+       }
+
+       /**
+        * @param boolean $spinning
+        */
+       public function setSpinning($spinning) {
+               $this->spinning = $spinning;
+       }
+
+       /**
         * @return Dimension
         */
        public function getDimension() {
         * @return Dimension
         */
        public function getDimension() {
@@ -164,8 +184,16 @@ class Icon {
         * @return string
         */
        protected function wrappedIcon() {
         * @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 = 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>';
                $markup[] = '   <span class="icon-markup">';
                $markup[] = $this->getMarkup();
                $markup[] = '   </span>';
index a596932..5407183 100644 (file)
@@ -14,7 +14,6 @@ namespace TYPO3\CMS\Core\Imaging;
  * The TYPO3 project - inspiring people to share!
  */
 
  * The TYPO3 project - inspiring people to share!
  */
 
-use TYPO3\CMS\Core\SingletonInterface;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 
 /**
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 
 /**
@@ -47,8 +46,8 @@ class IconFactory {
                        $identifier = $this->iconRegistry->getDefaultIconIdentifier();
                }
 
                        $identifier = $this->iconRegistry->getDefaultIconIdentifier();
                }
 
-               $icon = $this->createIcon($identifier, $size, $overlayIdentifier);
                $iconConfiguration = $this->iconRegistry->getIconConfigurationByIdentifier($identifier);
                $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']);
                /** @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 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
         */
         * @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));
                }
                $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;
        }
 }
                return $icon;
        }
 }
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Feature-69389-AddSpinningFeatureForIcon.rst b/typo3/sysext/core/Documentation/Changelog/master/Feature-69389-AddSpinningFeatureForIcon.rst
new file mode 100644 (file)
index 0000000..fff8456
--- /dev/null
@@ -0,0 +1,27 @@
+===============================================
+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.
index 16378b8..f4da1fb 100644 (file)
@@ -41,6 +41,11 @@ class IconFactoryTest extends \TYPO3\CMS\Core\Tests\UnitTestCase {
        protected $registeredIconIdentifier = 'actions-document-close';
 
        /**
        protected $registeredIconIdentifier = 'actions-document-close';
 
        /**
+        * @var string
+        */
+       protected $registeredSpinningIconIdentifier = 'spinning-icon';
+
+       /**
         * @var \TYPO3\CMS\Core\Imaging\IconRegistry
         */
        protected $iconRegistryMock;
         * @var \TYPO3\CMS\Core\Imaging\IconRegistry
         */
        protected $iconRegistryMock;
@@ -148,6 +153,22 @@ class IconFactoryTest extends \TYPO3\CMS\Core\Tests\UnitTestCase {
 
        /**
         * @test
 
        /**
         * @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
         * @param string $size
         */
         * @dataProvider differentSizesDataProvider
         * @param string $size
         */
index d719ebb..3a0dde8 100644 (file)
@@ -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'])));
        }
                // 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());
+       }
 }
 }
index 59a0453..1cbc42b 100644 (file)
@@ -7786,6 +7786,30 @@ button.close {
   width: 60%;
   text-align: center;
 }
   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;
 .icon-size-small {
   height: 16px;
   width: 16px;