implement new action attribute color, to specify a color for the caption, instead of the default color
This commit is contained in:
parent
0d8aba3e69
commit
b26c7815b1
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue