Merge branch 'v3-context-menu-fixes' into v3
This commit is contained in:
commit
0220b8c891
|
|
@ -193,6 +193,8 @@ export namespace Components {
|
|||
interface ElsaMultiTextInput {
|
||||
"inputContext": ActivityInputContext;
|
||||
}
|
||||
interface ElsaNewButton {
|
||||
}
|
||||
interface ElsaNotificationsManager {
|
||||
"modalState": boolean;
|
||||
}
|
||||
|
|
@ -380,6 +382,10 @@ export interface ElsaMonacoEditorCustomEvent<T> extends CustomEvent<T> {
|
|||
detail: T;
|
||||
target: HTMLElsaMonacoEditorElement;
|
||||
}
|
||||
export interface ElsaNewButtonCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLElsaNewButtonElement;
|
||||
}
|
||||
export interface ElsaPagerCustomEvent<T> extends CustomEvent<T> {
|
||||
detail: T;
|
||||
target: HTMLElsaPagerElement;
|
||||
|
|
@ -613,6 +619,12 @@ declare global {
|
|||
prototype: HTMLElsaMultiTextInputElement;
|
||||
new (): HTMLElsaMultiTextInputElement;
|
||||
};
|
||||
interface HTMLElsaNewButtonElement extends Components.ElsaNewButton, HTMLStencilElement {
|
||||
}
|
||||
var HTMLElsaNewButtonElement: {
|
||||
prototype: HTMLElsaNewButtonElement;
|
||||
new (): HTMLElsaNewButtonElement;
|
||||
};
|
||||
interface HTMLElsaNotificationsManagerElement extends Components.ElsaNotificationsManager, HTMLStencilElement {
|
||||
}
|
||||
var HTMLElsaNotificationsManagerElement: {
|
||||
|
|
@ -818,6 +830,7 @@ declare global {
|
|||
"elsa-monaco-editor": HTMLElsaMonacoEditorElement;
|
||||
"elsa-multi-line-input": HTMLElsaMultiLineInputElement;
|
||||
"elsa-multi-text-input": HTMLElsaMultiTextInputElement;
|
||||
"elsa-new-button": HTMLElsaNewButtonElement;
|
||||
"elsa-notifications-manager": HTMLElsaNotificationsManagerElement;
|
||||
"elsa-pager": HTMLElsaPagerElement;
|
||||
"elsa-panel": HTMLElsaPanelElement;
|
||||
|
|
@ -1016,6 +1029,9 @@ declare namespace LocalJSX {
|
|||
interface ElsaMultiTextInput {
|
||||
"inputContext"?: ActivityInputContext;
|
||||
}
|
||||
interface ElsaNewButton {
|
||||
"onNewClicked"?: (event: ElsaNewButtonCustomEvent<any>) => void;
|
||||
}
|
||||
interface ElsaNotificationsManager {
|
||||
"modalState"?: boolean;
|
||||
}
|
||||
|
|
@ -1173,6 +1189,7 @@ declare namespace LocalJSX {
|
|||
"elsa-monaco-editor": ElsaMonacoEditor;
|
||||
"elsa-multi-line-input": ElsaMultiLineInput;
|
||||
"elsa-multi-text-input": ElsaMultiTextInput;
|
||||
"elsa-new-button": ElsaNewButton;
|
||||
"elsa-notifications-manager": ElsaNotificationsManager;
|
||||
"elsa-pager": ElsaPager;
|
||||
"elsa-panel": ElsaPanel;
|
||||
|
|
@ -1238,6 +1255,7 @@ declare module "@stencil/core" {
|
|||
"elsa-monaco-editor": LocalJSX.ElsaMonacoEditor & JSXBase.HTMLAttributes<HTMLElsaMonacoEditorElement>;
|
||||
"elsa-multi-line-input": LocalJSX.ElsaMultiLineInput & JSXBase.HTMLAttributes<HTMLElsaMultiLineInputElement>;
|
||||
"elsa-multi-text-input": LocalJSX.ElsaMultiTextInput & JSXBase.HTMLAttributes<HTMLElsaMultiTextInputElement>;
|
||||
"elsa-new-button": LocalJSX.ElsaNewButton & JSXBase.HTMLAttributes<HTMLElsaNewButtonElement>;
|
||||
"elsa-notifications-manager": LocalJSX.ElsaNotificationsManager & JSXBase.HTMLAttributes<HTMLElsaNotificationsManagerElement>;
|
||||
"elsa-pager": LocalJSX.ElsaPager & JSXBase.HTMLAttributes<HTMLElsaPagerElement>;
|
||||
"elsa-panel": LocalJSX.ElsaPanel & JSXBase.HTMLAttributes<HTMLElsaPanelElement>;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {Component, h, Listen, Method, Prop, Element} from '@stencil/core';
|
||||
import {leave, toggle, enter} from 'el-transition';
|
||||
import {groupBy} from 'lodash';
|
||||
import {groupBy, map} from 'lodash';
|
||||
import {ContextMenuAnchorPoint, ContextMenuItem} from "./models";
|
||||
import {TickIcon} from "../../icons/tooling/tick";
|
||||
|
||||
|
|
@ -79,8 +79,7 @@ export class ContextMenu {
|
|||
render() {
|
||||
const anchorPointClass = this.getAnchorPointClass();
|
||||
const menuItems = this.menuItems;
|
||||
const menuItemGroups = groupBy(menuItems, x => x.group);
|
||||
debugger;
|
||||
const menuItemGroups = groupBy(menuItems, x => x.group ?? 0);
|
||||
|
||||
return (
|
||||
<div class="relative flex justify-end items-center">
|
||||
|
|
@ -101,14 +100,13 @@ export class ContextMenu {
|
|||
}
|
||||
|
||||
renderMenuItemGroups = (menuItemGroups: Array<any>) => {
|
||||
if (menuItemGroups.length == 0)
|
||||
if (Object.keys(menuItemGroups).length == 0)
|
||||
return;
|
||||
|
||||
return menuItemGroups.map(group => this.renderMenuItems(group.menuItems));
|
||||
return map(menuItemGroups, group => this.renderMenuItems(group));
|
||||
}
|
||||
|
||||
renderMenuItems = (menuItems: Array<ContextMenuItem>) => {
|
||||
|
||||
if (menuItems.length == 0)
|
||||
return;
|
||||
|
||||
|
|
@ -129,7 +127,6 @@ export class ContextMenu {
|
|||
<span class="flex-grow">{menuItem.text}</span>
|
||||
{isToggle && checked ? <span class="float-right"><TickIcon/></span> : undefined}
|
||||
</a>
|
||||
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import {Component, Event, EventEmitter, Host, h, Listen, Prop} from '@stencil/core';
|
||||
import {leave, toggle} from 'el-transition'
|
||||
import {Component, Event, EventEmitter, h, Prop} from '@stencil/core';
|
||||
import newButtonItemStore from "../../../data/new-button-item-store";
|
||||
import {DropdownButtonItem} from "../../../components/shared/dropdown-button/models";
|
||||
|
||||
|
|
@ -24,29 +23,11 @@ export class PublishButton {
|
|||
menu: HTMLElement;
|
||||
element: HTMLElement;
|
||||
|
||||
@Listen('click', {target: 'window'})
|
||||
private onWindowClicked(event: Event) {
|
||||
const target = event.target as HTMLElement;
|
||||
|
||||
if (!this.element.contains(target))
|
||||
this.closeMenu();
|
||||
}
|
||||
|
||||
private closeMenu() {
|
||||
leave(this.menu);
|
||||
}
|
||||
|
||||
private toggleMenu() {
|
||||
toggle(this.menu);
|
||||
}
|
||||
|
||||
private onPublishClick() {
|
||||
this.publishClicked.emit({
|
||||
begin: () => this.publishing = true,
|
||||
complete: () => this.publishing = false
|
||||
});
|
||||
|
||||
leave(this.menu);
|
||||
}
|
||||
|
||||
private onUnPublishClick() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import {Component, Event, EventEmitter, Host, h, Listen, Prop} from '@stencil/core';
|
||||
import {leave, toggle} from 'el-transition'
|
||||
import newButtonItemStore from "../../../data/new-button-item-store";
|
||||
import {Component, Event, EventEmitter, h, Prop} from '@stencil/core';
|
||||
import {DropdownButtonItem} from "../../../components/shared/dropdown-button/models";
|
||||
|
||||
export interface PublishClickedArgs {
|
||||
|
|
@ -24,29 +22,11 @@ export class PublishButton {
|
|||
menu: HTMLElement;
|
||||
element: HTMLElement;
|
||||
|
||||
@Listen('click', {target: 'window'})
|
||||
private onWindowClicked(event: Event) {
|
||||
const target = event.target as HTMLElement;
|
||||
|
||||
if (!this.element.contains(target))
|
||||
this.closeMenu();
|
||||
}
|
||||
|
||||
private closeMenu() {
|
||||
leave(this.menu);
|
||||
}
|
||||
|
||||
private toggleMenu() {
|
||||
toggle(this.menu);
|
||||
}
|
||||
|
||||
private onPublishClick() {
|
||||
this.publishClicked.emit({
|
||||
begin: () => this.publishing = true,
|
||||
complete: () => this.publishing = false
|
||||
});
|
||||
|
||||
leave(this.menu);
|
||||
}
|
||||
|
||||
private onUnPublishClick() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue