[TASK] Style pagetree icons 63/34463/2
authorBenjamin Mack <benni@typo3.org>
Sat, 22 Nov 2014 10:20:28 +0000 (11:20 +0100)
committerFrank Nägler <typo3@naegler.net>
Sun, 23 Nov 2014 17:43:41 +0000 (18:43 +0100)
In order to streamline the icons
in the pagetree as well, another
signal is introduced to change
items when only CSS classes
are built within IconUtility.

For the topbar of the pagetree
certain hover states are
removed and streamlined.

Releases: master
Resolves: #63137
Change-Id: Id273cbf0f86a27eafe1a75d6611643703b4290ee
Reviewed-on: http://review.typo3.org/34463
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Frank Nägler <typo3@naegler.net>
Tested-by: Frank Nägler <typo3@naegler.net>
typo3/js/extjs/components/pagetree/javascript/contextmenu.js
typo3/sysext/backend/Classes/Utility/IconUtility.php
typo3/sysext/t3skin/Classes/Slot/IconStyleModifier.php
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_pagetree.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
typo3/sysext/t3skin/ext_localconf.php

index 44eea13..6ebe9f8 100644 (file)
@@ -160,7 +160,7 @@ TYPO3.Components.PageTree.ContextMenu = Ext.extend(Ext.menu.Menu, {
                                        component.itemTpl = Ext.menu.Item.prototype.itemTpl = new Ext.XTemplate(
                                                '<a id="{id}" class="{cls}" hidefocus="true" unselectable="on" href="{href}">',
                                                        '<span class="{hrefTarget}">',
-                                                               '<img src="{icon}" class="x-menu-item-icon {iconCls}" unselectable="on" />',
+                                                               '<span class="x-menu-item-icon" unselectable="on"><span class="{iconCls}"></span></span>',
                                                        '</span>',
                                                        '<span class="x-menu-item-text">{text}</span>',
                                                '</a>'
index cab997c..dc269be 100644 (file)
@@ -1017,6 +1017,7 @@ class IconUtility {
                        // Will be something like "t3-icon-document-new"
                        $cssClasses .= ' ' . ($baseCssClass . '-' . substr($iconName, (strlen($parts[0]) + 1)));
                }
+               static::emitBuildSpriteIconClassesSignal($iconName, $cssClasses);
                return $cssClasses;
        }
 
@@ -1054,6 +1055,17 @@ class IconUtility {
        }
 
        /**
+        * Emits a signal right after the CSS classes are built. This is useful if somebody only
+        * fetches the CSS classes via IconUtility and not the whole sprite span tag.
+        *
+        * @param string $iconName The name of the icon
+        * @param string $cssClasses the CSS classes to be used as a string
+        */
+       static protected function emitBuildSpriteIconClassesSignal($iconName, &$cssClasses) {
+               static::getSignalSlotDispatcher()->dispatch('TYPO3\\CMS\\Backend\\Utility\\IconUtility', 'buildSpriteIconClasses', array($iconName, &$cssClasses));
+       }
+
+       /**
         * Get the SignalSlot dispatcher
         *
         * @return \TYPO3\CMS\Extbase\SignalSlot\Dispatcher
index 89a56d8..b1b4aa0 100644 (file)
@@ -135,4 +135,16 @@ class IconStyleModifier {
                return array($tagAttributes, $innerHtml, $tagName);
        }
 
+       /**
+        * returns the old class name if modified, otherwise the replaced fa icon
+        *
+        * @param string $iconName
+        * @param string $cssClasses
+        * @return string
+        */
+       public function buildSpriteIconClasses($iconName, &$cssClasses) {
+               if (isset($this->flatSpriteIconName[$cssClasses])) {
+                       $cssClasses = 't3-icon fa ' . $this->flatSpriteIconName[$cssClasses];
+               }
+       }
 }
index 4a6d895..4c03d5c 100644 (file)
@@ -279,17 +279,7 @@ Top Panel
        }
 }
 
-#typo3-pagetree-topPanel .x-btn-click,
-#typo3-pagetree-topPanel .x-btn-over {
-       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAWCAIAAACKUbHAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD9JREFUCB19wdERAUAARDEv23+FmsGZG38Sz0sfKoXEppDKyldyxBzzM1eObWYMM5Zr/ipEWRm9UXnr0OVxvQAaNAkk1SzJpgAAAABJRU5ErkJggg==");
-       *background-image: url("../../../../images/backgrounds/docheader-pagetree-button-hover.png");
-}
-
-#typo3-pagetree-topPanel .x-btn-pressed {
-       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAWCAIAAABlk9r+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADtJREFUCB0FwYENADAMw6Ap/79cPFhV7b333ltVDdWqWLkaxYABc7AL5nDj7gw0cMMxxCCrXLtTVmhV+SoifU9efLPxAAAAAElFTkSuQmCC");
-       *background-image: url("../../../../images/backgrounds/docheader-pagetree-button.png");
-}
-
+#typo3-pagetree-topPanel .x-btn-icon:hover,
 #typo3-pagetree-topPanel .x-btn-pressed,
 #typo3-pagetree-topPanel .x-btn-over,
 #typo3-pagetree-topPanel .x-btn-click {
@@ -297,6 +287,15 @@ Top Panel
        top: 0;
        left: 0;
        background-repeat: repeat-x;
+       background-image: none;
+       background-color: transparent;
+}
+
+
+#typo3-pagetree-topPanel button,
+#typo3-pagetree-topPanel button:hover {
+       background-color: transparent;
+       color: #000000;
 }
 
 #typo3-pagetree-topPanel button:focus {
@@ -330,19 +329,11 @@ Top Panel
        line-height: 18px;
 }
 
-#typo3-pagetree-topPanel-item-newNode .x-btn-over {
-       background: inherit;
-}
 
 #typo3-pagetree-topPanel-item-newNode button {
        cursor: move;
 }
 
-#typo3-pagetree-topPanel-button-refresh,
-#typo3-pagetree-topPanel-button-refresh.x-btn-over {
-       background: inherit;
-}
-
 #typo3-pagetree-topPanel {
        .x-toolbar-left {
                height: 20px;
index 6f4e299..803250b 100644 (file)
@@ -7493,15 +7493,7 @@ Top Panel
   width: 16px;
   border: none;
 }
-#typo3-pagetree-topPanel .x-btn-click,
-#typo3-pagetree-topPanel .x-btn-over {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAWCAIAAACKUbHAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD9JREFUCB19wdERAUAARDEv23+FmsGZG38Sz0sfKoXEppDKyldyxBzzM1eObWYMM5Zr/ipEWRm9UXnr0OVxvQAaNAkk1SzJpgAAAABJRU5ErkJggg==");
-  *background-image: url("../../../../images/backgrounds/docheader-pagetree-button-hover.png");
-}
-#typo3-pagetree-topPanel .x-btn-pressed {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAWCAIAAABlk9r+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADtJREFUCB0FwYENADAMw6Ap/79cPFhV7b333ltVDdWqWLkaxYABc7AL5nDj7gw0cMMxxCCrXLtTVmhV+SoifU9efLPxAAAAAElFTkSuQmCC");
-  *background-image: url("../../../../images/backgrounds/docheader-pagetree-button.png");
-}
+#typo3-pagetree-topPanel .x-btn-icon:hover,
 #typo3-pagetree-topPanel .x-btn-pressed,
 #typo3-pagetree-topPanel .x-btn-over,
 #typo3-pagetree-topPanel .x-btn-click {
@@ -7509,6 +7501,13 @@ Top Panel
   top: 0;
   left: 0;
   background-repeat: repeat-x;
+  background-image: none;
+  background-color: transparent;
+}
+#typo3-pagetree-topPanel button,
+#typo3-pagetree-topPanel button:hover {
+  background-color: transparent;
+  color: #000000;
 }
 #typo3-pagetree-topPanel button:focus {
   outline: none;
@@ -7534,16 +7533,9 @@ Top Panel
   color: #a2aab8;
   line-height: 18px;
 }
-#typo3-pagetree-topPanel-item-newNode .x-btn-over {
-  background: inherit;
-}
 #typo3-pagetree-topPanel-item-newNode button {
   cursor: move;
 }
-#typo3-pagetree-topPanel-button-refresh,
-#typo3-pagetree-topPanel-button-refresh.x-btn-over {
-  background: inherit;
-}
 #typo3-pagetree-topPanel .x-toolbar-left {
   height: 20px;
   padding-left: 12px;
index fac6356..856a532 100644 (file)
@@ -11,4 +11,11 @@ defined('TYPO3_MODE') or die();
        'buildSpriteHtmlIconTag',
        'TYPO3\\CMS\\T3skin\\Slot\\IconStyleModifier',
        'buildSpriteHtmlIconTag'
-);
\ No newline at end of file
+);
+\TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Extbase\SignalSlot\Dispatcher::class)->connect(
+       'TYPO3\\CMS\\Backend\\Utility\\IconUtility',
+       'buildSpriteIconClasses',
+       'TYPO3\\CMS\\T3skin\\Slot\\IconStyleModifier',
+       'buildSpriteIconClasses'
+);
+