diff --git a/typo3/js/extjs/components/pagetree/javascript/contextmenu.js b/typo3/js/extjs/components/pagetree/javascript/contextmenu.js
index 44eea13667cc7302c6d0e2623319da06c726c740..6ebe9f8298b30cf5060c229405f56ff8cdddffd0 100644
--- a/typo3/js/extjs/components/pagetree/javascript/contextmenu.js
+++ b/typo3/js/extjs/components/pagetree/javascript/contextmenu.js
@@ -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>'
diff --git a/typo3/sysext/backend/Classes/Utility/IconUtility.php b/typo3/sysext/backend/Classes/Utility/IconUtility.php
index cab997c7d473f6bbbdfb33da9e4a86ab6ac2b3c3..dc269be6eef1e55ab9e594b820ff5153599a45af 100644
--- a/typo3/sysext/backend/Classes/Utility/IconUtility.php
+++ b/typo3/sysext/backend/Classes/Utility/IconUtility.php
@@ -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;
}
@@ -1053,6 +1054,17 @@ class IconUtility {
return static::getSignalSlotDispatcher()->dispatch('TYPO3\\CMS\\Backend\\Utility\\IconUtility', 'buildSpriteHtmlIconTag', array($tagAttributes, $innerHtml, $tagName));
}
+ /**
+ * 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
*
diff --git a/typo3/sysext/t3skin/Classes/Slot/IconStyleModifier.php b/typo3/sysext/t3skin/Classes/Slot/IconStyleModifier.php
index 89a56d8d1936088fc907f8825aa1c7350e550cbe..b1b4aa0e855a1a5228cfe1be2fad40b45e9ad867 100644
--- a/typo3/sysext/t3skin/Classes/Slot/IconStyleModifier.php
+++ b/typo3/sysext/t3skin/Classes/Slot/IconStyleModifier.php
@@ -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];
+ }
+ }
}
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_pagetree.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_pagetree.less
index 4a6d8955e29f0476c410c06b4e571b2c1c97b83c..4c03d5cd04e2c869ad0eefaa7b7347d04c54ee30 100644
--- a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_pagetree.less
+++ b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_pagetree.less
@@ -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;
diff --git a/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css b/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
index 6f4e2992dd8aa05c69796d1ea27275f318a86220..803250bd91b1b9bd142c29715698d36d5fb82b01 100644
--- a/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
+++ b/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
@@ -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;
diff --git a/typo3/sysext/t3skin/ext_localconf.php b/typo3/sysext/t3skin/ext_localconf.php
index fac6356e3b86ef33ee8f0013a56dc878076d019e..856a5328476a3e62ccd61c77590ce997fbbec6b9 100644
--- a/typo3/sysext/t3skin/ext_localconf.php
+++ b/typo3/sysext/t3skin/ext_localconf.php
@@ -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'
+);
+