implement new action attribute color, to specify a color for the caption, instead of the default color

api/js/egw_action/EgwMenuShoelace.ts

@@ -20,6 +20,10 @@ export class EgwMenuShoelace extends LitElement
 					font-weight: var(--sl-font-weight-bold, bold);
 				}
 
+				.custom-color::part(label) {
+					--color: var(--color);
+				}
+
 				sl-menu-item::part(base) {
 					height: 1.6em;
 					line-height: var(--sl-line-height-dense);
@@ -33,7 +37,7 @@ export class EgwMenuShoelace extends LitElement
 
 				et2-image {
 					line-height: normal;
-					width: 1.5em;
+					width: 1.3em;
 				}
 			`
 		]
@@ -84,10 +88,10 @@ export class EgwMenuShoelace extends LitElement
 		if(this.popup == null)
 		{
 			this.popup = Object.assign(document.createElement("sl-popup"), {
-				placement: "top",
+				placement: "bottom-start",
 				autoSize: "vertical",
 				flip: true,
-				flipFallbackPlacements: "right bottom",
+				flipFallbackPlacements: "top-start",
 				flipFallbackStrategy: "initial",
 				shift: true
 			});
@@ -101,8 +105,8 @@ export class EgwMenuShoelace extends LitElement
 				return {
 					x: _x,
 					y: _y,
-					width: menu.clientWidth,
+					width: 0, //menu.clientWidth,
-					height: menu.clientHeight,
+					height: 0, //menu.clientHeight,
 					top: _y,
 					left: _x,
 					right: _x,
@@ -193,7 +197,7 @@ export class EgwMenuShoelace extends LitElement
             >
                 ${item.iconUrl ? html`
                     <et2-image slot="prefix" src="${item.iconUrl}"></et2-image>` : nothing}
-                ${item.caption}
+				<span style="color: ${item.color || nothing}">${item.caption}</span>
                 ${item.shortcutCaption ? html`<span slot="suffix"
                                                     class="keyboard_shortcut">
 					${item.shortcutCaption}

api/js/egw_action/EgwPopupAction.ts

@@ -23,6 +23,7 @@ export class EgwPopupAction extends EgwAction {
     shortcut = null;
     singleClick = false;
     private isChecked: EgwFnct;
+    color = null;
 
     constructor(_id, _handler, _caption, _icon, _onExecute, _allowOnMultiple) {
         super(_id, _handler, _caption, _icon, _onExecute, _allowOnMultiple)
@@ -110,6 +111,10 @@ export class EgwPopupAction extends EgwAction {
         }
     };
 
+    set_color (_value)
+    {
+        this.color = _value;
+    }
 }
 
 /**

api/js/egw_action/EgwPopupActionImplementation.ts

@@ -378,7 +378,7 @@ export class EgwPopupActionImplementation implements EgwActionImplementation {
                     firstElem = false;
 
                     const item:egwMenuItem = _menu.addItem(link.actionObj.id, link.actionObj.caption,
-                        link.actionObj.iconUrl);
+                        link.actionObj.iconUrl, undefined, link.actionObj.color);
                     item.default= link.actionObj["default"];
 
                     // As this code is also used when a drag-drop popup menu is built,

api/js/egw_action/egw_menu.ts

@@ -23,22 +23,6 @@ import {
 //may be closed when another menu opens
 export var _egw_active_menu: egwMenu = null;
 
-/**
- * Internal function which generates a menu item with the given parameters as used
- * in e.g. the egwMenu.addItem function.
- */
-//TODO Icons: write PHP GD script which is capable of generating the menu icons in various states (disabled, highlighted)
-function _egwGenMenuItem(_parent = null, _id = "", _caption = "", _iconUrl = "", _onClick = null)
-{
-	//Create a menu item with no parent (null) and set the given parameters
-	const item: egwMenuItem = new egwMenuItem(_parent, _id);
-	item.set_caption(_caption);
-	item.set_iconUrl(_iconUrl);
-	item.set_onClick(_onClick);
-
-	return item;
-}
-
 /**
  * Internal function which parses the given menu tree in _elements and adds the
  * elements to the given parent.
@@ -237,13 +221,14 @@ export class egwMenu
 	 * 	menu item. It may be false, null or "" if you don't want an icon to be displayed.
 	 * @param {function} _onClick is the JS function which is being executed when the
 	 * 	menu item is clicked.
+	 * @param {string|null} _color color
 	 * @returns {egwMenuItem} the newly generated menu item, which had been appended to the
 	 * 	menu item list.
 	 */
-	public addItem(_id, _caption, _iconUrl, _onClick): egwMenuItem
+	public addItem(_id, _caption, _iconUrl, _onClick, _color): egwMenuItem
 	{
 		//Append the item to the list
-		const item: egwMenuItem = new egwMenuItem(this, _id, _caption, _iconUrl, _onClick);
+		const item: egwMenuItem = new egwMenuItem(this, _id, _caption, _iconUrl, _onClick, _color);
 		this.children.push(item);
 
 		return item;
@@ -281,7 +266,8 @@ export class egwMenu
 	 * Applies the given onClick handler to all menu items which don't have a clicked
 	 * handler assigned yet.
 	 */
-	setGlobalOnClick(_onClick) {
+	setGlobalOnClick(_onClick)
+	{
 		_egwSetMenuOnClick(this.children, _onClick);
 	}
 }
@@ -294,6 +280,7 @@ export class egwMenu
 export class egwMenuItem
 {
 	id: string;
+	color: string;
 
 	set_id(_value)
 	{
@@ -346,13 +333,14 @@ export class egwMenuItem
 	//hint might get set somewhere
 	hint: string = "";
 
-	constructor(_parent, _id, _caption="", _iconUrl="", onClick=null)
+	constructor(_parent, _id, _caption="", _iconUrl="", onClick=null, _color=null)
 	{
 		this.parent = _parent;
 		this.id = _id;
 		this.caption = _caption;
 		this.iconUrl = _iconUrl;
 		this.onClick = onClick;
+		this.color = _color;
 	}
 
 	/**
@@ -392,47 +380,54 @@ export class egwMenuItem
 	 * @returns {egwMenuItem} the newly generated menu item, which had been appended to the
 	 * 	menu item list.
 	 */
-	addItem(_id: string, _caption: string, _iconUrl: string, _onClick: any)
+	addItem(_id: string, _caption: string, _iconUrl: string, _onClick: any, _color: string)
 	{
 		//Append the item to the list
-		const item = _egwGenMenuItem(this, _id, _caption, _iconUrl, _onClick);
+		const item = new egwMenuItem(this, _id, _caption, _iconUrl, _onClick, _color);
 		this.children.push(item);
 
 		return item;
 	}
 
-	set_groupIndex(_value) {
+	set_groupIndex(_value)
+	{
 		//If groupIndex is greater than 0 and the element is a checkbox, it is
 		//treated like a radio box
 		this.groupIndex = _value;
 	}
 
-	set_enabled (_value) {
+	set_enabled (_value)
+	{
 		this.enabled = _value;
 	}
 
-	set_onClick (_value) {
+	set_onClick (_value)
+	{
 		this.onClick = _value;
 	}
 
-	set_iconUrl (_value) {
+	set_iconUrl (_value)
+	{
 		this.iconUrl = _value;
 	}
 
-	set_default (_value) {
+	set_default (_value)
+	{
 		this["default"] = _value;
 	}
 
-	set_data (_value) {
+	set_data (_value)
+	{
 		this.data = _value;
 	}
 
-	set_hint (_value) {
+	set_hint (_value)
+	{
 		this.hint = _value;
 	}
 
-	set_shortcutCaption (_value) {
+	set_shortcutCaption (_value)
+	{
 		this.shortcutCaption = _value;
 	}
-
 }

api/src/Etemplate/Widget/Nextmatch.php

@@ -855,6 +855,7 @@ class Nextmatch extends Etemplate\Widget
 	 * - string 'confirm_multiple' confirmation message for multiple selected, defaults to 'confirm'
 	 * - boolean 'postSubmit' eg. downloads need a submit via POST request not our regular Ajax submit, only works with nm_action=submit!
 	 * - string 'hint' tooltip on menu item
+	 * - string 'color' color of the caption e.g. "red" or "#ff0000"
 	 *
 	 * @param array $actions id indexed array of actions / array with valus for keys: 'iconUrl', 'caption', 'onExecute', ...
 	 * @param string $template_name ='' name of the template, used as default for app name of images

mail/inc/class.mail_ui.inc.php

@@ -701,7 +701,8 @@ class mail_ui
 			),
 			'readall' => array(
 				'group' => $group,
-				'caption' => "<font color='#ff0000'>".lang('mark all as read')."</font>",
+				'caption' => lang('mark all as read'),
+				'color' => 'red',
 				'icon' => 'kmmsgread',
 				'onExecute' => 'javaScript:app.mail.mail_flag',
 				'hint' => 'mark all messages in folder as read',
@@ -1413,42 +1414,47 @@ class mail_ui
 						'children' => array(
 							'unlabel' => array(
 								'group' => ++$group,
-								'caption' => "<font color='#ff0000'>".lang('remove all')."</font>",
+								'caption' => lang('remove all'),
-								'icon' => 'mail_label',
+								'icon' => 'tag_message',
 								'onExecute' => 'javaScript:app.mail.mail_flag',
 								'shortcut' => KeyManager::shortcut(KeyManager::_0, true, true),
 							),
 							'label1' => array(
 								'group' => ++$group,
-								'caption' => "<font color='#ff0000'>".lang('important')."</font>",
+								'caption' => lang('important'),
+								'color' => '#ff0000',
 								'icon' => 'mail_label1',
 								'onExecute' => 'javaScript:app.mail.mail_flag',
 								'shortcut' => KeyManager::shortcut(KeyManager::_1, true, true),
 							),
 							'label2' => array(
 								'group' => $group,
-								'caption' => "<font color='#ff8000'>".lang('job')."</font>",
+								'caption' => lang('job'),
+								'color' => '#ff8000',
 								'icon' => 'mail_label2',
 								'onExecute' => 'javaScript:app.mail.mail_flag',
 								'shortcut' => KeyManager::shortcut(KeyManager::_2, true, true),
 							),
 							'label3' => array(
 								'group' => $group,
-								'caption' => "<font color='#008000'>".lang('personal')."</font>",
+								'caption' => lang('personal'),
+								'color' => '#008000',
 								'icon' => 'mail_label3',
 								'onExecute' => 'javaScript:app.mail.mail_flag',
 								'shortcut' => KeyManager::shortcut(KeyManager::_3, true, true),
 							),
 							'label4' => array(
 								'group' => $group,
-								'caption' => "<font color='#0000ff'>".lang('to do')."</font>",
+								'caption' => lang('to do'),
+								'color' => '#0000ff',
 								'icon' => 'mail_label4',
 								'onExecute' => 'javaScript:app.mail.mail_flag',
 								'shortcut' => KeyManager::shortcut(KeyManager::_4, true, true),
 							),
 							'label5' => array(
 								'group' => $group,
-								'caption' => "<font color='#8000ff'>".lang('later')."</font>",
+								'caption' => lang('later'),
+								'color' => '#8000ff',
 								'icon' => 'mail_label5',
 								'onExecute' => 'javaScript:app.mail.mail_flag',
 								'shortcut' => KeyManager::shortcut(KeyManager::_5, true, true),
@@ -1475,7 +1481,8 @@ class mail_ui
 					),
 					'readall' => array(
 						'group' => ++$group,
-						'caption' => "<font color='#ff0000'>".lang('mark all as read')."</font>",
+						'caption' => lang('mark all as read'),
+						'color' => 'red',
 						'icon' => 'kmmsgread',
 						'onExecute' => 'javaScript:app.mail.mail_flag',
 						'hint' => 'mark all messages in folder as read',