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 3de5fd4264
commit 5c8c9c841d
6 changed files with 86 additions and 65 deletions

View File

@ -21,8 +21,8 @@ export class EgwMenuShoelace extends LitElement
font-weight: var(--sl-font-weight-bold, bold);
}
sl-menu {
box-shadow: var(--sl-shadow-x-large);
.custom-color::part(label) {
--color: var(--color);
}
sl-menu-item::part(base) {
@ -117,9 +117,17 @@ export class EgwMenuShoelace extends LitElement
if(this.popup == null)
{
this.popup = Object.assign(document.createElement("sl-popup"), {
<<<<<<< HEAD
placement: "right-start",
autoSize: "vertical",
flip: true,
=======
placement: "bottom-start",
autoSize: "vertical",
flip: true,
flipFallbackPlacements: "top-start",
flipFallbackStrategy: "initial",
>>>>>>> b26c7815b1 (implement new action attribute color, to specify a color for the caption, instead of the default color)
shift: true
});
this.popup.append(this);
@ -132,8 +140,13 @@ export class EgwMenuShoelace extends LitElement
return {
x: _x,
y: _y,
<<<<<<< HEAD
width: 0, // placement="right-start" only works well with 0, not menu.clientWidth,
height: menu.clientHeight,
=======
width: 0, //menu.clientWidth,
height: 0, //menu.clientHeight,
>>>>>>> b26c7815b1 (implement new action attribute color, to specify a color for the caption, instead of the default color)
top: _y,
left: _x,
right: _x,
@ -282,4 +295,4 @@ export class EgwMenuShoelace extends LitElement
${repeat(this.structure, i => this.itemTemplate(i))}
</sl-menu>`;
}
}
}

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

View File

@ -442,7 +442,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,
@ -823,4 +823,4 @@ export function getPopupImplementation(): EgwPopupActionImplementation {
_popupActionImpl = new EgwPopupActionImplementation();
}
return _popupActionImpl;
}
}

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

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

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',