Record menu icons

This commit is contained in:
Yurii
2026-06-27 13:28:22 +03:00
parent 37c562663d
commit 8ec2776a5f
16 changed files with 75 additions and 22 deletions

View File

@@ -9,7 +9,8 @@
"label": "Close",
"handler": "crm:handlers/case/detail-actions",
"actionFunction": "close",
"checkVisibilityFunction": "isCloseAvailable"
"checkVisibilityFunction": "isCloseAvailable",
"iconClass": "fas fa-check"
},
{
"name": "reject",

View File

@@ -40,7 +40,8 @@
"acl": "edit",
"handler": "modules/crm/handlers/task/detail-actions",
"actionFunction": "complete",
"checkVisibilityFunction": "isCompleteAvailable"
"checkVisibilityFunction": "isCompleteAvailable",
"iconClass": "fas fa-check"
}
],
"filterList": [

View File

@@ -23,7 +23,8 @@
"handler": "handlers/record/lock-action",
"checkVisibilityFunction": "canBeLocked",
"actionFunction": "actionLock",
"groupIndex": 9
"groupIndex": 9,
"iconClass": "fas fa-lock"
},
{
"name": "unlock",
@@ -32,7 +33,8 @@
"handler": "handlers/record/lock-action",
"checkVisibilityFunction": "canBeUnlocked",
"actionFunction": "actionUnlock",
"groupIndex": 9
"groupIndex": 9,
"iconClass": "fas fa-unlock"
}
],
"massActionList": [

View File

@@ -52,6 +52,7 @@ export default class extends DetailRecordView {
'label': 'Set Held',
'name': 'setHeld',
onClick: () => this.actionSetHeld(),
iconClass: 'fas fa-check',
});
this.dropdownItemList.push({

View File

@@ -72,6 +72,7 @@ class MeetingModalDetailView extends DetailModalView {
name: 'setHeld',
text: this.translate('Set Held', 'labels', this.model.entityType),
hidden: true,
iconClass: 'fas fa-check',
});
this.addDropdownItem({
@@ -86,6 +87,8 @@ class MeetingModalDetailView extends DetailModalView {
text: this.translate('Send Invitations', 'labels', 'Meeting'),
hidden: !this.isSendInvitationsToBeDisplayed(),
onClick: () => this.actionSendInvitations(),
groupIndex: 10,
iconClass: 'far fa-paper-plane',
});
this.initAcceptanceStatus();

View File

@@ -59,6 +59,7 @@ class MeetingDetailRecordView extends DetailRecordView {
'label': 'Set Held',
'name': 'setHeld',
onClick: () => this.actionSetHeld(),
iconClass: 'fas fa-check',
});
this.dropdownItemList.push({

View File

@@ -38,6 +38,7 @@ export default class TaskDetailRecordView extends DetailRecordView {
label: 'Complete',
name: 'setCompleted',
onClick: () => this.actionSetCompleted(),
iconClass: 'fas fa-check',
});
const historyStatusList = [

View File

@@ -253,7 +253,7 @@ function prepareItemContent(
icon = div.firstElementChild ? toVNode(div.firstElementChild) : null;
} else if (options.iconClass) {
icon = h('span', {props: {className: options.iconClass}});
icon = h('span', {props: {className: options.iconClass + ' item-icon'}});
}
if (isDropdownItem) {

View File

@@ -82,6 +82,7 @@ export interface DialogButton {
className?: string;
title?: string;
groupIndex?: number;
iconClass?: string;
}
/**
@@ -797,6 +798,7 @@ class FooterComponent {
disabled: it.disabled,
text: it.text,
html: it.html,
iconClass: it.iconClass,
onClick: event => {
if (it.onClick) {
it.onClick(this.dialog, event);
@@ -831,6 +833,7 @@ class FooterComponent {
disabled: it.disabled,
text: it.text,
html: it.html,
iconClass: it.iconClass,
onClick: event => {
if (it.onClick) {
it.onClick(this.dialog, event);

View File

@@ -124,6 +124,7 @@ class EmailDetailRecordView extends DetailRecordView {
name: 'markAsImportant',
hidden: this.model.get('isImportant'),
groupIndex: 1,
iconClass: 'far fa-star',
});
this.addDropdownItem({
@@ -138,6 +139,7 @@ class EmailDetailRecordView extends DetailRecordView {
name: 'moveToTrash',
hidden: this.isInTrash(),
groupIndex: 2,
iconClass: 'far fa-trash-can',
});
this.addDropdownItem({
@@ -153,12 +155,14 @@ class EmailDetailRecordView extends DetailRecordView {
groupIndex: 2,
hidden: this.isInArchive(),
onClick: () => this.actionMoveToArchive(),
iconClass: 'far fa-caret-square-down',
});
this.addDropdownItem({
label: 'Move to Folder',
name: 'moveToFolder',
groupIndex: 2,
iconClass: 'far fa-folder',
});
} else if (this.model.attributes.groupFolderId) {
this.addDropdownItem({
@@ -166,6 +170,7 @@ class EmailDetailRecordView extends DetailRecordView {
name: 'moveToTrash',
hidden: this.isInTrash(),
groupIndex: 2,
iconClass: 'far fa-trash-can',
});
this.addDropdownItem({
@@ -181,6 +186,7 @@ class EmailDetailRecordView extends DetailRecordView {
groupIndex: 2,
hidden: this.isInArchive() || this.isInTrash(),
onClick: () => this.actionMoveToArchive(),
iconClass: 'far fa-caret-square-down',
});
this.addDropdownItem({
@@ -188,12 +194,14 @@ class EmailDetailRecordView extends DetailRecordView {
name: 'moveToFolder',
groupIndex: 2,
hidden: this.isInTrash(),
iconClass: 'far fa-folder',
});
} else {
this.addDropdownItem({
label: 'Move to Folder',
name: 'moveToFolder',
groupIndex: 2,
iconClass: 'far fa-folder',
});
}

View File

@@ -557,6 +557,8 @@ class ModalView<S extends ViewSchema = ViewSchema> extends View<S> {
}
}
o.iconCLass = item.iconClass;
o.onClick = o.onClick ?? ((_d, e: any) => {
// noinspection ES6ConvertLetToConst
let handler = o.handler || (o.data || {}).handler;

View File

@@ -255,6 +255,7 @@ class DetailModalView extends ModalView {
name: 'duplicate',
label: 'Duplicate',
groupIndex: 0,
iconClass: 'far fa-copy',
});
}
}

View File

@@ -169,6 +169,12 @@ export interface DropdownItem {
* A group index.
*/
groupIndex?: number;
/**
* An icon class.
*
* @since 10.0.0
*/
iconClass?: string;
}
/**
@@ -493,6 +499,7 @@ class DetailRecordView<S extends DetailRecordViewSchema = DetailRecordViewSchema
name: 'delete',
label: 'Remove',
groupIndex: 0,
iconClass: 'fas fa-times',
},
]
@@ -966,6 +973,7 @@ class DetailRecordView<S extends DetailRecordViewSchema = DetailRecordViewSchema
label: 'Duplicate',
name: 'duplicate',
groupIndex: 0,
iconClass: 'far fa-copy',
});
}
@@ -1007,6 +1015,7 @@ class DetailRecordView<S extends DetailRecordViewSchema = DetailRecordViewSchema
label: 'Print to PDF',
name: 'printPdf',
groupIndex: 6,
iconClass: 'far fa-file-pdf',
});
}
}

View File

@@ -123,6 +123,7 @@ export default class DetailRecordButtonsView extends View<{
hidden: it.hidden,
disabled: it.disabled || data.allDisabled,
html: it.html,
iconClass: it.iconClass,
}).node()
);
});

View File

@@ -243,9 +243,12 @@ td.cell[data-name="buttons"] > .btn-group {
left: -10px;
}
.dropdown-menu-with-icons li .item-text {
padding-left: 0;
padding-right: 8px;
ul {
&.dropdown-menu-with-icons,
&:has( > li > a > .icon-item) {
padding-left: 0;
padding-right: var(--8px);
}
}
.panel {

View File

@@ -148,22 +148,38 @@ ul.dropdown-menu {
}
}
ul.dropdown-menu-with-icons {
> li {
a {
padding-left: var(--10px);
}
ul {
&.dropdown-menu-with-icons,
&:has(> li > a > .item-icon) {
> li {
a {
padding-left: var(--10px);
}
.fas, .far, .glyphicon, .empty-icon {
width: var(--16px);
text-align: center;
display: inline-block;
color: var(--gray-soft);
}
.fas,
.far,
.glyphicon,
.empty-icon {
width: var(--16px);
text-align: center;
display: inline-block;
color: var(--gray-soft);
}
.item-text {
padding-left: var(--8px);
position: static;
.item-icon {
font-size: var(--12px);
}
.item-text {
padding-left: var(--8px);
position: static;
}
}
}
&:has(> li > a > .item-icon) {
> li > a:not(:has(> .item-icon)) {
padding-left: var(--26px);
}
}
}