[FEATURE] Monochrome action icons (FontAwesome) 85/33285/4
authorFelix Kopp <felix-source@phorax.com>
Sun, 12 Oct 2014 23:07:23 +0000 (01:07 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Wed, 15 Oct 2014 21:24:49 +0000 (23:24 +0200)
Slot for IconUtility to hook into sprite icon generation.
Delivers monochrome action icons.

"Action icons start actions right with the first click."
Documentation for Iconography in #62158.

Related: #62158
Resolves: #49955
Release: master
Change-Id: I24b1a160b983d690567ad5ba015c6bf13af4f403
Reviewed-on: http://review.typo3.org/33285
Reviewed-by: Ingo Pfennigstorf <i.pfennigstorf@gmail.com>
Tested-by: Ingo Pfennigstorf <i.pfennigstorf@gmail.com>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/t3skin/Classes/Slot/IconUtility.php [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less
typo3/sysext/t3skin/Resources/Private/Styles/font-awesome/variables.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3kin.css
typo3/sysext/t3skin/ext_localconf.php

diff --git a/typo3/sysext/t3skin/Classes/Slot/IconUtility.php b/typo3/sysext/t3skin/Classes/Slot/IconUtility.php
new file mode 100644 (file)
index 0000000..ba80764
--- /dev/null
@@ -0,0 +1,111 @@
+<?php
+namespace TYPO3\CMS\T3skin\Slot;
+
+/**
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/**
+ * Slot for IconUtility
+ */
+class IconUtility {
+
+       static public $flatSpriteIconName = array(
+               't3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-close' => 'fa-close',
+               't3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-history-open' => 'fa-history',
+               't3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-info' => 'fa-info-circle',
+               't3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-move' => 'fa-arrows',
+               't3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-new' => 'fa-plus-square',
+               't3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-open' => 'fa-pencil',
+               't3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-save' => 'fa-save',
+               't3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-view' => 'fa-desktop',
+               't3-icon t3-icon-actions t3-icon-actions-edit t3-icon-edit-add' => 'fa-plus-circle',
+               't3-icon t3-icon-actions t3-icon-actions-edit t3-icon-edit-copy' => 'fa-copy',
+               't3-icon t3-icon-actions t3-icon-actions-edit t3-icon-edit-cut' => 'fa-cut',
+               't3-icon t3-icon-actions t3-icon-actions-edit t3-icon-edit-delete' => 'fa-trash',
+               't3-icon t3-icon-actions t3-icon-actions-edit t3-icon-edit-hide' => 'fa-eye',
+               't3-icon t3-icon-actions t3-icon-actions-edit t3-icon-edit-paste' => 'fa-paste',
+               't3-icon t3-icon-actions t3-icon-actions-edit t3-icon-edit-pick-date' => 'fa-calendar',
+               't3-icon t3-icon-actions t3-icon-actions-edit t3-icon-edit-rename' => 'fa-quote-right',
+               't3-icon t3-icon-actions t3-icon-actions-edit t3-icon-edit-undo' => 'fa-undo',
+               't3-icon t3-icon-actions t3-icon-actions-edit t3-icon-edit-unhide' => 'fa-eye-slash',
+               't3-icon t3-icon-actions t3-icon-actions-edit t3-icon-edit-upload' => 'fa-upload',
+               't3-icon t3-icon-actions t3-icon-actions-move t3-icon-move-down t3-btn t3-btn-moveoption-down' => 'fa-caret-down',
+               't3-icon t3-icon-actions t3-icon-actions-move t3-icon-move-down' => 'fa-arrow-down',
+               't3-icon t3-icon-actions t3-icon-actions-move t3-icon-move-left' => 'fa-arrow-left',
+               't3-icon t3-icon-actions t3-icon-actions-move t3-icon-move-right' => 'fa-arrow-right',
+               't3-icon t3-icon-actions t3-icon-actions-move t3-icon-move-up t3-btn t3-btn-moveoption-up' => 'fa-caret-up',
+               't3-icon t3-icon-actions t3-icon-actions-move t3-icon-move-up' => 'fa-arrow-up',
+               't3-icon t3-icon-actions t3-icon-actions-page t3-icon-page-move' => 'fa-arrows',
+               't3-icon t3-icon-actions t3-icon-actions-page t3-icon-page-new' => 'fa-plus-square',
+               't3-icon t3-icon-actions t3-icon-actions-page t3-icon-page-open' => 'fa-pencil',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-backend-user-emulate' => 'fa-sign-in',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-backend-user-switch' => 'fa-sign-out',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-cache-clear' => 'fa-bolt',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-extension-configure' => 'fa-gear',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-extension-download ' => 'fa-cloud-download',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-extension-download' => 'fa-download',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-extension-install' => 'fa-plus-circle',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-extension-sqldump' => 'fa-database',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-extension-uninstall' => 'fa-minus-square',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-help-open' => 'fa-question-circle',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-refresh' => 'fa-refresh',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-shortcut-new' => 'fa-star',
+               't3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-tree-search-open' => 'fa-search',
+               't3-icon t3-icon-actions t3-icon-actions-view t3-icon-view-go-back' => 'fa-angle-double-left',
+               't3-icon t3-icon-actions t3-icon-actions-view t3-icon-view-go-forward' => 'fa-angle-double-right',
+               't3-icon t3-icon-actions t3-icon-actions-view t3-icon-view-go-up' => 'fa-level-up',
+               't3-icon t3-icon-actions t3-icon-actions-view t3-icon-view-paging-first' => 'fa-step-backward',
+               't3-icon t3-icon-actions t3-icon-actions-view t3-icon-view-paging-last' => 'fa-step-forward',
+               't3-icon t3-icon-actions t3-icon-actions-view t3-icon-view-paging-next' => 'fa-arrow-right',
+               't3-icon t3-icon-actions t3-icon-actions-view t3-icon-view-paging-previous' => 'fa-arrow-left',
+               't3-icon t3-icon-actions t3-icon-actions-view t3-icon-view-table-expand' => 'fa-angle-double-right',
+               't3-icon t3-icon-actions t3-icon-actions-window t3-icon-window-open' => 'fa-arrows-alt',
+               't3-icon t3-icon-actions t3-icon-system-extension-import' => 'fa-cloud-download',
+               't3-icon t3-icon-actions t3-icon-system-extension-import' => 'fa-cloud-download',
+               't3-icon t3-icon-apps t3-icon-apps-toolbar t3-icon-toolbar-menu-cache' => 'fa-bolt',
+               't3-icon t3-icon-apps t3-icon-apps-toolbar t3-icon-toolbar-menu-opendocs' => 'fa-file',
+               't3-icon t3-icon-apps t3-icon-apps-toolbar t3-icon-toolbar-menu-search' => 'fa-search',
+               't3-icon t3-icon-apps t3-icon-apps-toolbar t3-icon-toolbar-menu-shortcut' => 'fa-star',
+               't3-icon t3-icon-apps t3-icon-apps-toolbar t3-icon-toolbar-menu-workspace' => 'fa-th-large',
+               't3-icon t3-icon-extensions t3-icon-extensions-extensionmanager t3-icon-extensionmanager-update-script' => 'fa-refresh',
+               't3-icon t3-icon-extensions t3-icon-extensions-scheduler t3-icon-scheduler-run-task' => 'fa-play-circle',
+               't3-icon t3-icon-mimetypes t3-icon-mimetypes-pdf t3-icon-pdf' => 'fa-file-pdf-o',
+               't3-icon t3-icon-mimetypes t3-icon-mimetypes-text t3-icon-text-html' => 'fa-file-html-o',
+               't3-icon t3-icon-mimetypes t3-icon-mimetypes-word t3-icon-word' => 'fa-file-world-o',
+               't3-icon t3-icon-status t3-icon-status-dialog t3-icon-dialog-error' => 'fa-exclamation-triangle',
+               't3-icon t3-icon-status t3-icon-status-dialog t3-icon-dialog-information' => 'fa-info-circle',
+               't3-icon t3-icon-status t3-icon-status-status t3-icon-status-locked' => 'fa-lock',
+               't3-icon t3-icon-status t3-icon-status-status t3-icon-status-permission-denied' => 'fa-minus-square',
+               't3-icon t3-icon-status t3-icon-status-status t3-icon-status-permission-granted' => 'fa-check-circle-o',
+               't3-icon t3-icon-status t3-icon-status-status t3-icon-status-readonly' => 'fa-lock',
+               't3-icon t3-icon-status t3-icon-status-warning t3-icon-warning-lock' => 'fa-lock'
+       );
+
+       /**
+        * Hook to manipulate IconUtility html output code
+        *
+        * @param array $tagAttributes
+        * @param null $innerHtml
+        * @param null $tagName
+        * @return array
+        */
+       public function buildSpriteHtmlIconTag(array $tagAttributes, $innerHtml, $tagName) {
+               $class = self::$flatSpriteIconName[$tagAttributes['class']];
+               if ($class) {
+                       $tagAttributes['class'] = 't3-icon fa ' . $class;
+               }
+
+               return array($tagAttributes, $innerHtml, $tagName);
+       }
+
+}
\ No newline at end of file
index ad517e9..f7c48ae 100644 (file)
@@ -87,11 +87,13 @@ Topbar
                                        padding-bottom: 4px;
                                        padding-top: 2px;
                                        text-align: center;
+                                       color: #fff;
                                }
 
                                .toolbar-item-active {
                                        background-image: url('../../../../icons/gfx/toolbar_item_active_bg.png');
                                        height: 25px;
+                                       color: #000;
                                }
 
                                .toolbar-item-menu {
@@ -245,7 +247,6 @@ Username inside the toolbar
 - - - - - - - - - - - - - - - - - - - - - */
 
 #username {
-       color: #ffffff;
        font-weight: bold;
        margin-right: 12px;
 
index 0d5a03a..3106a5b 100644 (file)
@@ -9,6 +9,11 @@
 @fa-inverse:          #fff;
 @fa-li-width:         (30em / 14);
 
+.t3-icon.fa {
+       background: none;
+       font-size: 14px;
+}
+
 @fa-var-adjust: "\f042";
 @fa-var-adn: "\f170";
 @fa-var-align-center: "\f037";
index f1da894..47082ce 100644 (file)
@@ -5474,6 +5474,10 @@ button.close {
  *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  */
+.t3-icon.fa {
+  background: none;
+  font-size: 14px;
+}
 /* FONT PATH
  * -------------------------- */
 @font-face {
@@ -10649,10 +10653,12 @@ Topbar
   padding-bottom: 4px;
   padding-top: 2px;
   text-align: center;
+  color: #fff;
 }
 #typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar .toolbar-item-active {
   background-image: url('../../../../icons/gfx/toolbar_item_active_bg.png');
   height: 25px;
+  color: #000;
 }
 #typo3-topbar #typo3-top-container .typo3-top-toolbar #typo3-toolbar .toolbar-item-menu {
   background-color: #f9f9f9;
@@ -10773,7 +10779,6 @@ Shortcuts menu
 Username inside the toolbar
 - - - - - - - - - - - - - - - - - - - - - */
 #username {
-  color: #ffffff;
   font-weight: bold;
   margin-right: 12px;
 }
index db510b8..8cc7d21 100644 (file)
@@ -5,4 +5,11 @@ defined('TYPO3_MODE') or die();
        RTE.default.skin = EXT:' . $_EXTKEY . '/rtehtmlarea/htmlarea.css
        RTE.default.FE.skin = EXT:' . $_EXTKEY . '/rtehtmlarea/htmlarea.css
 ');
-$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['typo3/template.php']['preStartPageHook']['TYPO3\\CMS\\T3skin\\Hook\\StyleGenerationHook'] = 'TYPO3\\CMS\\T3skin\\Hook\\StyleGenerationHook->preStartPageHook';
\ No newline at end of file
+$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['typo3/template.php']['preStartPageHook']['TYPO3\\CMS\\T3skin\\Hook\\StyleGenerationHook'] = 'TYPO3\\CMS\\T3skin\\Hook\\StyleGenerationHook->preStartPageHook';
+
+\TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Extbase\\SignalSlot\\Dispatcher')->connect(
+       'TYPO3\\CMS\\Backend\\Utility\\IconUtility',
+       'buildSpriteHtmlIconTag',
+       'TYPO3\\CMS\\T3skin\\Slot\\IconUtility',
+       'buildSpriteHtmlIconTag'
+);
\ No newline at end of file