From fb3136b64680e565151212eb81c10084dde5701d Mon Sep 17 00:00:00 2001
From: Benjamin Mack <benni@typo3.org>
Date: Sat, 22 Nov 2014 11:20:28 +0100
Subject: [PATCH] [TASK] Style pagetree icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
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>
---
.../pagetree/javascript/contextmenu.js | 2 +-
.../backend/Classes/Utility/IconUtility.php | 12 ++++++++
.../t3skin/Classes/Slot/IconStyleModifier.php | 12 ++++++++
.../Styles/TYPO3/_element_pagetree.less | 29 +++++++------------
.../Resources/Public/Css/visual/t3skin.css | 24 +++++----------
typo3/sysext/t3skin/ext_localconf.php | 9 +++++-
6 files changed, 51 insertions(+), 37 deletions(-)
diff --git a/typo3/js/extjs/components/pagetree/javascript/contextmenu.js b/typo3/js/extjs/components/pagetree/javascript/contextmenu.js
index 44eea13667cc..6ebe9f8298b3 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 cab997c7d473..dc269be6eef1 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 89a56d8d1936..b1b4aa0e855a 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 4a6d8955e29f..4c03d5cd04e2 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 6f4e2992dd8a..803250bd91b1 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 fac6356e3b86..856a5328476a 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'
+);
+
--
GitLab