[TASK] Streamline styling of RTE context menu 78/47978/3
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Sat, 30 Apr 2016 13:47:10 +0000 (15:47 +0200)
committerOliver Hader <oliver.hader@typo3.org>
Tue, 3 May 2016 11:09:24 +0000 (13:09 +0200)
The visual appearance of the context menu of the RTE is streamlined with
the non-ExtJS context menus. The "scroller" areas are now larger and
easier to hit.
The shadow which is behind the context menu has been removed.

Resolves: #75992
Releases: master, 7.6
Change-Id: I3b360ce3fa2e9cae68d796e0a612c8f443c0141d
Reviewed-on: https://review.typo3.org/47978
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>
Tested-by: Oliver Hader <oliver.hader@typo3.org>
typo3/sysext/rtehtmlarea/Resources/Public/Css/Skin/htmlarea.css
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/ContextMenu.js

index 6b3f5a9..fced7a3 100644 (file)
 }
 /* Selectors for the ContextMenu plugin */
 .htmlarea-context-menu {
-       background-color:#EFEFF4;
        color:#212424;
        font-family: Verdana, Helvetica, Geneva, Arial, sans-serif;
        font-size:10px;
+       background-color: #FFFFFF;
+       border-color: #D7D7D7;
 }
 .htmlarea-context-menu ul {
        list-style: none;
 }
 .htmlarea-context-menu li {
        margin: 0;
-       padding: 0;
+       padding: 2px 0;
        border-width: 0;
 }
 .htmlarea-context-menu a {
 }
 .htmlarea-context-menu .button {
        background-color: transparent;
-       margin: 0 2px 0 0;
        padding-top: 1px;
 }
 .htmlarea-context-menu .separator {
-       border-top: 1px solid #A2AAB8;
+       border-top: 1px solid #D7D7D7
 }
 .htmlarea-context-menu .hover {
-       background-image: url("../../Images/alt_menu_mainitem_bg.gif");
-       background-repeat: repeat-x;
-       color: white;
-       margin: 0 2px 0 0;
        padding-top: 1px;
        border-color: #A2AAB8;
 }
+.htmlarea-context-menu .x-menu-scroller {
+       background: #F5F5F5;
+       height: 20px;
+       line-height: 20px;
+       position: relative;
+}
+.htmlarea-context-menu .x-menu-scroller.x-menu-scroller-top {
+       border-bottom: 1px solid #D7D7D7;
+}
+.htmlarea-context-menu .x-menu-scroller.x-menu-scroller-bottom {
+       border-top: 1px solid #D7D7D7;
+}
+.htmlarea-context-menu .x-menu-scroller.x-menu-scroller-top:after,
+.htmlarea-context-menu .x-menu-scroller.x-menu-scroller-bottom:after {
+       font-family: 'FontAwesome';
+       font-size: 12px;
+       display: block;
+       position: absolute;
+       margin-left: 50%;
+       top: 0;
+}
+.htmlarea-context-menu .x-menu-scroller.x-menu-scroller-top:after {
+       content: "\f0d8";
+}
+.htmlarea-context-menu .x-menu-scroller.x-menu-scroller-bottom:after {
+       content: "\f0d7";
+}
+.htmlarea-context-menu .x-menu-item-active,
+.htmlarea-context-menu .x-menu-item.hover {
+       background-color: #D7D7D7;
+}
 .htmlarea-context-menu .x-menu-item-icon {
        background-image: url("../../Images/Sprites/actions.png");
        background-repeat: no-repeat;
index 19363ae..dce5904 100644 (file)
@@ -66,6 +66,7 @@ define(['TYPO3/CMS/Rtehtmlarea/HTMLArea/Plugin/Plugin',
                        this.menu = new Ext.menu.Menu(Util.applyIf({
                                cls: 'htmlarea-context-menu',
                                defaultType: 'menuitem',
+                               shadow: false,
                                maxHeight: this.editor.iframe.height - this.editor.document.documentElement.clientHeight,
                                listeners: {
                                        itemClick: {