extern
/
egroupware_official
mirror of https://github.com/EGroupware/egroupware.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
ralf 2024-07-16 20:37:30 +02:00
parent 0d8aba3e69
commit b26c7815b1
6 changed files with 80 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
api/js/egw_action/EgwMenuShoelace.ts
View File

@ -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`
<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}

5
api/js/egw_action/EgwPopupAction.ts
View File

@ -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;
}
}
/**

4
api/js/egw_action/EgwPopupActionImplementation.ts
View File

@ -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;
}
}

97
api/js/egw_action/egw_menu.ts
View File

@ -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;
}
}

1
api/src/Etemplate/Widget/Nextmatch.php
View File

@ -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

25
mail/inc/class.mail_ui.inc.php
View File

@ -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>",
'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' => "<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',