From bb01db251b000a7c6128cc5f0ce2e8b73f0f7f61 Mon Sep 17 00:00:00 2001
From: Andreas Fernandez <a.fernandez@scripting-base.de>
Date: Sat, 30 Apr 2016 15:47:10 +0200
Subject: [PATCH] [TASK] Streamline styling of RTE context menu
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>
---
.../Resources/Public/Css/Skin/htmlarea.css | 43 +++++++++++++++----
.../Public/JavaScript/Plugins/ContextMenu.js | 1 +
2 files changed, 36 insertions(+), 8 deletions(-)
diff --git a/typo3/sysext/rtehtmlarea/Resources/Public/Css/Skin/htmlarea.css b/typo3/sysext/rtehtmlarea/Resources/Public/Css/Skin/htmlarea.css
index 6b3f5a950ed2..fced7a34ad2f 100644
--- a/typo3/sysext/rtehtmlarea/Resources/Public/Css/Skin/htmlarea.css
+++ b/typo3/sysext/rtehtmlarea/Resources/Public/Css/Skin/htmlarea.css
@@ -356,10 +356,11 @@
}
/* 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;
@@ -367,7 +368,7 @@
}
.htmlarea-context-menu li {
margin: 0;
- padding: 0;
+ padding: 2px 0;
border-width: 0;
}
.htmlarea-context-menu a {
@@ -375,20 +376,46 @@
}
.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;
diff --git a/typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/ContextMenu.js b/typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/ContextMenu.js
index 19363aed3f0e..dce590474c77 100644
--- a/typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/ContextMenu.js
+++ b/typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/ContextMenu.js
@@ -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: {
--
GitLab