From b26c7815b105cd84701148158548fba5b3ff7067 Mon Sep 17 00:00:00 2001 From: ralf Date: Tue, 16 Jul 2024 20:37:30 +0200 Subject: [PATCH] implement new action attribute color, to specify a color for the caption, instead of the default color --- api/js/egw_action/EgwMenuShoelace.ts | 16 +-- api/js/egw_action/EgwPopupAction.ts | 5 + .../EgwPopupActionImplementation.ts | 4 +- api/js/egw_action/egw_menu.ts | 97 +++++++++---------- api/src/Etemplate/Widget/Nextmatch.php | 1 + mail/inc/class.mail_ui.inc.php | 25 +++-- 6 files changed, 80 insertions(+), 68 deletions(-) diff --git a/api/js/egw_action/EgwMenuShoelace.ts b/api/js/egw_action/EgwMenuShoelace.ts index 48fedab560..f9ee158f7e 100644 --- a/api/js/egw_action/EgwMenuShoelace.ts +++ b/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, - height: menu.clientHeight, + width: 0, //menu.clientWidth, + height: 0, //menu.clientHeight, top: _y, left: _x, right: _x, @@ -193,7 +197,7 @@ export class EgwMenuShoelace extends LitElement > ${item.iconUrl ? html` ` : nothing} - ${item.caption} + ${item.caption} ${item.shortcutCaption ? html` ${item.shortcutCaption} diff --git a/api/js/egw_action/EgwPopupAction.ts b/api/js/egw_action/EgwPopupAction.ts index d72c4640d5..cfba45277c 100644 --- a/api/js/egw_action/EgwPopupAction.ts +++ b/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; + } } /** diff --git a/api/js/egw_action/EgwPopupActionImplementation.ts b/api/js/egw_action/EgwPopupActionImplementation.ts index 20246d8129..13f5098828 100644 --- a/api/js/egw_action/EgwPopupActionImplementation.ts +++ b/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, @@ -759,4 +759,4 @@ export function getPopupImplementation(): EgwPopupActionImplementation { _popupActionImpl = new EgwPopupActionImplementation(); } return _popupActionImpl; -} +} \ No newline at end of file diff --git a/api/js/egw_action/egw_menu.ts b/api/js/egw_action/egw_menu.ts index e490ba4035..910c58a2a1 100755 --- a/api/js/egw_action/egw_menu.ts +++ b/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,9 +266,10 @@ export class egwMenu * Applies the given onClick handler to all menu items which don't have a clicked * handler assigned yet. */ - setGlobalOnClick(_onClick) { - _egwSetMenuOnClick(this.children, _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) { - //If groupIndex is greater than 0 and the element is a checkbox, it is - //treated like a radio box - this.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) { - this.enabled = _value; -} + set_enabled (_value) + { + this.enabled = _value; + } - set_onClick (_value) { - this.onClick = _value; -} + set_onClick (_value) + { + this.onClick = _value; + } - set_iconUrl (_value) { - this.iconUrl = _value; -} + set_iconUrl (_value) + { + this.iconUrl = _value; + } - set_default (_value) { - this["default"] = _value; -} + set_default (_value) + { + this["default"] = _value; + } - set_data (_value) { - this.data = _value; -} + set_data (_value) + { + this.data = _value; + } - set_hint (_value) { - this.hint = _value; -} - - set_shortcutCaption (_value) { - this.shortcutCaption = _value; -} + set_hint (_value) + { + this.hint = _value; + } + set_shortcutCaption (_value) + { + this.shortcutCaption = _value; + } } \ No newline at end of file diff --git a/api/src/Etemplate/Widget/Nextmatch.php b/api/src/Etemplate/Widget/Nextmatch.php index fc4eec4494..c49a3d9b7b 100644 --- a/api/src/Etemplate/Widget/Nextmatch.php +++ b/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 diff --git a/mail/inc/class.mail_ui.inc.php b/mail/inc/class.mail_ui.inc.php index d779e63536..dc8982d3b2 100644 --- a/mail/inc/class.mail_ui.inc.php +++ b/mail/inc/class.mail_ui.inc.php @@ -701,7 +701,8 @@ class mail_ui ), 'readall' => array( 'group' => $group, - 'caption' => "".lang('mark all as read')."", + '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' => "".lang('remove all')."", - 'icon' => 'mail_label', + 'caption' => lang('remove all'), + 'icon' => 'tag_message', 'onExecute' => 'javaScript:app.mail.mail_flag', 'shortcut' => KeyManager::shortcut(KeyManager::_0, true, true), ), 'label1' => array( 'group' => ++$group, - 'caption' => "".lang('important')."", + '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' => "".lang('job')."", + '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' => "".lang('personal')."", + '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' => "".lang('to do')."", + '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' => "".lang('later')."", + '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' => "".lang('mark all as read')."", + 'caption' => lang('mark all as read'), + 'color' => 'red', 'icon' => 'kmmsgread', 'onExecute' => 'javaScript:app.mail.mail_flag', 'hint' => 'mark all messages in folder as read',