Remove unneeded activity component and styles
This commit is contained in:
Sipke Schoorstra
parent
1405b4abf6
commit
0dd94bb07d
|
|
@ -5,7 +5,7 @@
|
|||
* It contains typing information for all components that exist in this project.
|
||||
*/
|
||||
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
|
||||
import { ActivityDefinitionProperty, ActivityDescriptor, ActivityDesignDisplayContext, ActivityModel, ActivityPropertyDescriptor, VersionOptions, WorkflowBlueprint, WorkflowDefinition, WorkflowExecutionLogRecord, WorkflowModel } from "./models";
|
||||
import { ActivityDefinitionProperty, ActivityDescriptor, ActivityPropertyDescriptor, VersionOptions, WorkflowBlueprint, WorkflowDefinition, WorkflowExecutionLogRecord, WorkflowModel } from "./models";
|
||||
import { LocationSegments, MatchResults, RouterHistory } from "@stencil/router";
|
||||
import { MenuItem } from "./components/controls/elsa-context-menu/models";
|
||||
import { DropdownButtonItem, DropdownButtonOrigin } from "./components/controls/elsa-dropdown-button/models";
|
||||
|
|
@ -36,11 +36,6 @@ export namespace Components {
|
|||
interface ElsaDesignerTree {
|
||||
"model": WorkflowModel;
|
||||
}
|
||||
interface ElsaDesignerTreeActivity {
|
||||
"displayContext": ActivityDesignDisplayContext;
|
||||
"icon": string;
|
||||
"isSelected": boolean;
|
||||
}
|
||||
interface ElsaDropdownButton {
|
||||
"icon"?: any;
|
||||
"items": Array<DropdownButtonItem>;
|
||||
|
|
@ -251,12 +246,6 @@ declare global {
|
|||
prototype: HTMLElsaDesignerTreeElement;
|
||||
new (): HTMLElsaDesignerTreeElement;
|
||||
};
|
||||
interface HTMLElsaDesignerTreeActivityElement extends Components.ElsaDesignerTreeActivity, HTMLStencilElement {
|
||||
}
|
||||
var HTMLElsaDesignerTreeActivityElement: {
|
||||
prototype: HTMLElsaDesignerTreeActivityElement;
|
||||
new (): HTMLElsaDesignerTreeActivityElement;
|
||||
};
|
||||
interface HTMLElsaDropdownButtonElement extends Components.ElsaDropdownButton, HTMLStencilElement {
|
||||
}
|
||||
var HTMLElsaDropdownButtonElement: {
|
||||
|
|
@ -445,7 +434,6 @@ declare global {
|
|||
"elsa-confirm-dialog": HTMLElsaConfirmDialogElement;
|
||||
"elsa-context-menu": HTMLElsaContextMenuElement;
|
||||
"elsa-designer-tree": HTMLElsaDesignerTreeElement;
|
||||
"elsa-designer-tree-activity": HTMLElsaDesignerTreeActivityElement;
|
||||
"elsa-dropdown-button": HTMLElsaDropdownButtonElement;
|
||||
"elsa-dropdown-property": HTMLElsaDropdownPropertyElement;
|
||||
"elsa-expression-editor": HTMLElsaExpressionEditorElement;
|
||||
|
|
@ -501,15 +489,6 @@ declare namespace LocalJSX {
|
|||
"model"?: WorkflowModel;
|
||||
"onWorkflow-changed"?: (event: CustomEvent<WorkflowModel>) => void;
|
||||
}
|
||||
interface ElsaDesignerTreeActivity {
|
||||
"displayContext"?: ActivityDesignDisplayContext;
|
||||
"icon"?: string;
|
||||
"isSelected"?: boolean;
|
||||
"onDeselected"?: (event: CustomEvent<ActivityModel>) => void;
|
||||
"onEdit-activity"?: (event: CustomEvent<ActivityModel>) => void;
|
||||
"onRemove-activity"?: (event: CustomEvent<ActivityModel>) => void;
|
||||
"onSelected"?: (event: CustomEvent<ActivityModel>) => void;
|
||||
}
|
||||
interface ElsaDropdownButton {
|
||||
"icon"?: any;
|
||||
"items"?: Array<DropdownButtonItem>;
|
||||
|
|
@ -682,7 +661,6 @@ declare namespace LocalJSX {
|
|||
"elsa-confirm-dialog": ElsaConfirmDialog;
|
||||
"elsa-context-menu": ElsaContextMenu;
|
||||
"elsa-designer-tree": ElsaDesignerTree;
|
||||
"elsa-designer-tree-activity": ElsaDesignerTreeActivity;
|
||||
"elsa-dropdown-button": ElsaDropdownButton;
|
||||
"elsa-dropdown-property": ElsaDropdownProperty;
|
||||
"elsa-expression-editor": ElsaExpressionEditor;
|
||||
|
|
@ -726,7 +704,6 @@ declare module "@stencil/core" {
|
|||
"elsa-confirm-dialog": LocalJSX.ElsaConfirmDialog & JSXBase.HTMLAttributes<HTMLElsaConfirmDialogElement>;
|
||||
"elsa-context-menu": LocalJSX.ElsaContextMenu & JSXBase.HTMLAttributes<HTMLElsaContextMenuElement>;
|
||||
"elsa-designer-tree": LocalJSX.ElsaDesignerTree & JSXBase.HTMLAttributes<HTMLElsaDesignerTreeElement>;
|
||||
"elsa-designer-tree-activity": LocalJSX.ElsaDesignerTreeActivity & JSXBase.HTMLAttributes<HTMLElsaDesignerTreeActivityElement>;
|
||||
"elsa-dropdown-button": LocalJSX.ElsaDropdownButton & JSXBase.HTMLAttributes<HTMLElsaDropdownButtonElement>;
|
||||
"elsa-dropdown-property": LocalJSX.ElsaDropdownProperty & JSXBase.HTMLAttributes<HTMLElsaDropdownPropertyElement>;
|
||||
"elsa-expression-editor": LocalJSX.ElsaExpressionEditor & JSXBase.HTMLAttributes<HTMLElsaExpressionEditorElement>;
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';
|
||||
import {leave, toggle} from 'el-transition'
|
||||
import {registerClickOutside} from "stencil-click-outside";
|
||||
import {ActivityModel, ActivityDesignDisplayContext, EventTypes} from "../../../../models";
|
||||
|
||||
@Component({
|
||||
tag: 'elsa-designer-tree-activity',
|
||||
styleUrl: 'elsa-designer-tree-activity.css',
|
||||
shadow: false,
|
||||
})
|
||||
export class ElsaDesignerTreeActivity {
|
||||
|
||||
defaultIconClass = "h-10 w-10 text-blue-500";
|
||||
|
||||
@Prop() displayContext: ActivityDesignDisplayContext
|
||||
@Prop() icon: string
|
||||
@Prop({attribute:"selected"}) isSelected: boolean;
|
||||
@Event({eventName: 'remove-activity', bubbles: true}) removeActivityEmitter: EventEmitter<ActivityModel>;
|
||||
@Event({eventName: 'edit-activity', bubbles: true}) editActivityEmitter: EventEmitter<ActivityModel>;
|
||||
@Event() selected: EventEmitter<ActivityModel>;
|
||||
@Event() deselected: EventEmitter<ActivityModel>;
|
||||
@State() showMenu: boolean
|
||||
contextMenu: HTMLElement;
|
||||
el: HTMLElement;
|
||||
|
||||
closeContextMenu() {
|
||||
leave(this.contextMenu);
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
toggle(this.contextMenu);
|
||||
}
|
||||
|
||||
onEditActivityClick(e: Event) {
|
||||
e.preventDefault();
|
||||
this.closeContextMenu();
|
||||
this.editActivityEmitter.emit(this.displayContext.activityModel);
|
||||
}
|
||||
|
||||
onDeleteActivityClick(e: Event) {
|
||||
e.preventDefault();
|
||||
this.closeContextMenu();
|
||||
this.removeActivityEmitter.emit(this.displayContext.activityModel);
|
||||
}
|
||||
|
||||
onSelectActivity(e: Event) {
|
||||
this.isSelected = !this.isSelected;
|
||||
|
||||
if(this.selected)
|
||||
this.selected.emit(this.displayContext.activityModel);
|
||||
else
|
||||
this.deselected.emit(this.displayContext.activityModel);
|
||||
}
|
||||
|
||||
render() {
|
||||
const displayContext = this.displayContext;
|
||||
const activity = displayContext.activityModel;
|
||||
const activityId = activity.activityId;
|
||||
const displayName = activity.displayName && activity.displayName.length > 0 ? activity.displayName : activity.name && activity.name.length > 0 ? activity.name : activity.type
|
||||
const activityClass = this.isSelected ? 'border-blue-600' : 'border-white hover:border-blue-600';
|
||||
|
||||
return (
|
||||
<Host id={`activity-${activityId}`}
|
||||
onDblClick={e => this.onEditActivityClick(e)}
|
||||
onClick={e => this.onSelectActivity(e)}
|
||||
class={`${activityClass} activity border-2 border-solid rounded bg-white text-left text-black text-lg select-none max-w-md shadow-sm relative`}>
|
||||
<div class="p-5">
|
||||
<div class="flex justify-between space-x-8">
|
||||
<div class="flex-shrink-0">
|
||||
{displayContext.activityIcon}
|
||||
</div>
|
||||
<div class="flex-1 font-medium leading-8">
|
||||
<p>{displayName}</p>
|
||||
</div>
|
||||
<div class="context-menu-wrapper flex-shrink-0" ref={el => registerClickOutside(this, el, this.closeContextMenu)}>
|
||||
<button onClick={() => this.toggleMenu()} aria-haspopup="true"
|
||||
class="w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100 transition ease-in-out duration-150">
|
||||
<svg class="h-6 w-6 text-gray-400" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
|
||||
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z"/>
|
||||
<circle cx="5" cy="12" r="1"/>
|
||||
<circle cx="12" cy="12" r="1"/>
|
||||
<circle cx="19" cy="12" r="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div data-transition-enter="transition ease-out duration-100"
|
||||
data-transition-enter-start="transform opacity-0 scale-95"
|
||||
data-transition-enter-end="transform opacity-100 scale-100"
|
||||
data-transition-leave="transition ease-in duration-75"
|
||||
data-transition-leave-start="transform opacity-100 scale-100"
|
||||
data-transition-leave-end="transform opacity-0 scale-95"
|
||||
class="hidden z-10 mx-3 origin-top-left absolute -right-48 top-3 w-48 mt-1 rounded-md shadow-lg"
|
||||
ref={el => this.contextMenu = el}
|
||||
>
|
||||
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical"
|
||||
aria-labelledby="pinned-project-options-menu-0">
|
||||
<div class="py-1">
|
||||
<a href="#"
|
||||
onClick={e => this.onEditActivityClick(e)}
|
||||
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
|
||||
role="menuitem">Edit</a>
|
||||
</div>
|
||||
<div class="border-t border-gray-100"/>
|
||||
<div class="py-1">
|
||||
<a href="#"
|
||||
onClick={e => this.onDeleteActivityClick(e)}
|
||||
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
|
||||
role="menuitem">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{this.renderBody()}
|
||||
</Host>
|
||||
);
|
||||
}
|
||||
|
||||
renderBody() {
|
||||
if (!this.displayContext.bodyDisplay)
|
||||
return undefined;
|
||||
|
||||
return (
|
||||
<div class="p-6 text-gray-400 text-sm border-t border-t-solid">
|
||||
{this.displayContext.bodyDisplay}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
# elsa-designer-tree-activity
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------------- | ---------- | ----------- | ------------------------------ | ----------- |
|
||||
| `displayContext` | -- | | `ActivityDesignDisplayContext` | `undefined` |
|
||||
| `icon` | `icon` | | `string` | `undefined` |
|
||||
| `isSelected` | `selected` | | `boolean` | `undefined` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| ----------------- | ----------- | ---------------------------- |
|
||||
| `deselected` | | `CustomEvent<ActivityModel>` |
|
||||
| `edit-activity` | | `CustomEvent<ActivityModel>` |
|
||||
| `remove-activity` | | `CustomEvent<ActivityModel>` |
|
||||
| `selected` | | `CustomEvent<ActivityModel>` |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Used by
|
||||
|
||||
- [elsa-designer-tree](../elsa-designer-tree)
|
||||
|
||||
### Graph
|
||||
```mermaid
|
||||
graph TD;
|
||||
elsa-designer-tree --> elsa-designer-tree-activity
|
||||
style elsa-designer-tree-activity fill:#f9f,stroke:#333,stroke-width:4px
|
||||
```
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
|
@ -9,84 +9,6 @@
|
|||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
div.canvas {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div.tree {
|
||||
white-space: nowrap;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.tree ul {
|
||||
@apply pt-6;
|
||||
position: relative;
|
||||
transition: all 0.5s;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
}
|
||||
|
||||
.tree ul.root {
|
||||
@apply pt-0;
|
||||
}
|
||||
|
||||
.tree li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
padding: 20px 5px 0 5px;
|
||||
}
|
||||
|
||||
.tree li::before,
|
||||
.tree li::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
width: 50%;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.tree li::after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.tree li:only-child::after,
|
||||
.tree li:only-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tree li:only-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.tree li:first-child::before,
|
||||
.tree li:last-child::after {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.tree ul ul::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 20px;
|
||||
}
|
||||
/*
|
||||
.activity {
|
||||
min-width: 316px;
|
||||
box-sizing: border-box;
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
display: inline-block;
|
||||
}
|
||||
*/
|
||||
|
||||
.node.activity, .node.start{
|
||||
fill: transparent;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue