activity description tooltip added (#3036)
* activity description tooltip added * removed commented css * rewritten with tailwind styled * added separate component for tooltip Co-authored-by: Ivan Hrynevytskyi <ivan.hrynevytskyi@IHRYNEVYTSKYIL.local>
This commit is contained in:
Ivan Hrynevytskyi (FE-underwriting)
GitHub
parent
8fa17e227f
commit
9d4267aa7f
|
|
@ -160,6 +160,10 @@ export namespace Components {
|
|||
"activityDescriptors": Array<ActivityDescriptor>;
|
||||
"graph": Graph;
|
||||
}
|
||||
interface ElsaTooltip {
|
||||
"tooltipContent": any;
|
||||
"tooltipPosition": string;
|
||||
}
|
||||
interface ElsaWorkflowDefinitionBrowser {
|
||||
"hide": () => Promise<void>;
|
||||
"show": () => Promise<void>;
|
||||
|
|
@ -342,6 +346,12 @@ declare global {
|
|||
prototype: HTMLElsaToolboxActivitiesElement;
|
||||
new (): HTMLElsaToolboxActivitiesElement;
|
||||
};
|
||||
interface HTMLElsaTooltipElement extends Components.ElsaTooltip, HTMLStencilElement {
|
||||
}
|
||||
var HTMLElsaTooltipElement: {
|
||||
prototype: HTMLElsaTooltipElement;
|
||||
new (): HTMLElsaTooltipElement;
|
||||
};
|
||||
interface HTMLElsaWorkflowDefinitionBrowserElement extends Components.ElsaWorkflowDefinitionBrowser, HTMLStencilElement {
|
||||
}
|
||||
var HTMLElsaWorkflowDefinitionBrowserElement: {
|
||||
|
|
@ -410,6 +420,7 @@ declare global {
|
|||
"elsa-switch-editor": HTMLElsaSwitchEditorElement;
|
||||
"elsa-toolbox": HTMLElsaToolboxElement;
|
||||
"elsa-toolbox-activities": HTMLElsaToolboxActivitiesElement;
|
||||
"elsa-tooltip": HTMLElsaTooltipElement;
|
||||
"elsa-workflow-definition-browser": HTMLElsaWorkflowDefinitionBrowserElement;
|
||||
"elsa-workflow-editor": HTMLElsaWorkflowEditorElement;
|
||||
"elsa-workflow-instance-browser": HTMLElsaWorkflowInstanceBrowserElement;
|
||||
|
|
@ -558,6 +569,10 @@ declare namespace LocalJSX {
|
|||
"activityDescriptors"?: Array<ActivityDescriptor>;
|
||||
"graph"?: Graph;
|
||||
}
|
||||
interface ElsaTooltip {
|
||||
"tooltipContent"?: any;
|
||||
"tooltipPosition"?: string;
|
||||
}
|
||||
interface ElsaWorkflowDefinitionBrowser {
|
||||
"onWorkflowDefinitionSelected"?: (event: CustomEvent<WorkflowDefinitionSummary>) => void;
|
||||
}
|
||||
|
|
@ -611,6 +626,7 @@ declare namespace LocalJSX {
|
|||
"elsa-switch-editor": ElsaSwitchEditor;
|
||||
"elsa-toolbox": ElsaToolbox;
|
||||
"elsa-toolbox-activities": ElsaToolboxActivities;
|
||||
"elsa-tooltip": ElsaTooltip;
|
||||
"elsa-workflow-definition-browser": ElsaWorkflowDefinitionBrowser;
|
||||
"elsa-workflow-editor": ElsaWorkflowEditor;
|
||||
"elsa-workflow-instance-browser": ElsaWorkflowInstanceBrowser;
|
||||
|
|
@ -649,6 +665,7 @@ declare module "@stencil/core" {
|
|||
"elsa-switch-editor": LocalJSX.ElsaSwitchEditor & JSXBase.HTMLAttributes<HTMLElsaSwitchEditorElement>;
|
||||
"elsa-toolbox": LocalJSX.ElsaToolbox & JSXBase.HTMLAttributes<HTMLElsaToolboxElement>;
|
||||
"elsa-toolbox-activities": LocalJSX.ElsaToolboxActivities & JSXBase.HTMLAttributes<HTMLElsaToolboxActivitiesElement>;
|
||||
"elsa-tooltip": LocalJSX.ElsaTooltip & JSXBase.HTMLAttributes<HTMLElsaTooltipElement>;
|
||||
"elsa-workflow-definition-browser": LocalJSX.ElsaWorkflowDefinitionBrowser & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionBrowserElement>;
|
||||
"elsa-workflow-editor": LocalJSX.ElsaWorkflowEditor & JSXBase.HTMLAttributes<HTMLElsaWorkflowEditorElement>;
|
||||
"elsa-workflow-instance-browser": LocalJSX.ElsaWorkflowInstanceBrowser & JSXBase.HTMLAttributes<HTMLElsaWorkflowInstanceBrowserElement>;
|
||||
|
|
|
|||
|
|
@ -111,8 +111,10 @@ export class ToolboxActivities {
|
|||
const activityHtml = renderedActivities.get(activityDescriptor.activityType);
|
||||
return (
|
||||
<div class="w-full flex items-center pl-10 pr-2 py-2">
|
||||
<div class="cursor-move" onDragStart={e => ToolboxActivities.onActivityStartDrag(e, activityDescriptor)}>
|
||||
<div innerHTML={activityHtml} draggable={true}/>
|
||||
<div class="relative cursor-move" onDragStart={e => ToolboxActivities.onActivityStartDrag(e, activityDescriptor)}>
|
||||
<elsa-tooltip tooltipPosition="right" tooltipContent={<p class="text-gray-600 text-sm">{activityDescriptor.description}</p>}>
|
||||
<div innerHTML={activityHtml} draggable={true} />
|
||||
</elsa-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
.tooltip-container {
|
||||
.tooltip {
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
.tooltip {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import { Component, h, Prop } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'elsa-tooltip',
|
||||
styleUrl: 'tooltip.scss',
|
||||
})
|
||||
export class Tooltip {
|
||||
@Prop() tooltipContent: any;
|
||||
@Prop() tooltipPosition?: string = 'right';
|
||||
|
||||
getTooltipPositionClasses(tooltipPosition: string) {
|
||||
const tooltipPositionClasses = {
|
||||
right: 'top-1/2 -translate-y-1/2 left-full ml-4',
|
||||
left: 'top-1/2 -translate-y-1/2 right-full mr-4',
|
||||
top: 'left-1/2 -translate-x-1/2 bottom-full mb-4',
|
||||
bottom: 'left-1/2 -translate-x-1/2 top-full mt-4',
|
||||
};
|
||||
|
||||
const triangleClasses = {
|
||||
right: 'left-0 -ml-2 bottom-0 top-0 h-full',
|
||||
left: 'right-0 -mr-2 bottom-0 top-0 h-full rotate-180',
|
||||
top: 'bottom-0 left-1/2 -mt-1 top-full -translate-x-1/2 -rotate-90',
|
||||
bottom: 'top-0 left-1/2 -mb-1 bottom-full -translate-x-1/2 h-full rotate-90',
|
||||
};
|
||||
|
||||
return {
|
||||
tooltipClass: tooltipPositionClasses[tooltipPosition],
|
||||
triangleClass: triangleClasses[tooltipPosition],
|
||||
};
|
||||
}
|
||||
render() {
|
||||
const { tooltipClass, triangleClass } = this.getTooltipPositionClasses(this.tooltipPosition);
|
||||
|
||||
return (
|
||||
<div class="relative tooltip-container w-full">
|
||||
<slot />
|
||||
{this.tooltipContent && (
|
||||
<div role="tooltip" class={`tooltip ${tooltipClass} z-20 w-48 absolute transition duration-150 ease-in-out shadow-lg bg-white p-4 rounded`}>
|
||||
<svg class={`absolute ${triangleClass}`} width="9px" height="16px" viewBox="0 0 9 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Tooltips-" transform="translate(-874.000000, -1029.000000)" fill="#FFFFFF">
|
||||
<g id="Group-3-Copy-16" transform="translate(850.000000, 975.000000)">
|
||||
<g id="Group-2" transform="translate(24.000000, 0.000000)">
|
||||
<polygon
|
||||
id="Triangle"
|
||||
transform="translate(4.500000, 62.000000) rotate(-90.000000) translate(-4.500000, -62.000000) "
|
||||
points="4.5 57.5 12.5 66.5 -3.5 66.5"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
{this.tooltipContent}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@ export interface ActivityDescriptor {
|
|||
activityType: string;
|
||||
displayName: string;
|
||||
category: string;
|
||||
description: string;
|
||||
inputProperties: Array<InputDescriptor>
|
||||
kind: ActivityKind;
|
||||
inPorts: Array<Port>;
|
||||
|
|
|
|||
Loading…
Reference in a new issue