lelii
/
humainflow-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reposition task execution controls into graph action rail

This commit is contained in:
Lucio Lelii 2026-04-24 12:18:48 +02:00
parent 72720ef292
commit 52bb12edae
2 changed files with 138 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/app/shared/task-execution-viewer/task-execution-viewer.css
View File

@ -3,6 +3,100 @@
height: 100%;
}
.execution-header-main {
display: block;
}
.execution-header-details {
min-width: 0;
}
.execution-graph-body {
position: relative;
}
.execution-graph-actions {
position: absolute;
top: 12px;
left: 12px;
z-index: 4;
display: inline-flex;
flex-direction: row;
gap: 8px;
}
.execution-action-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
border: 1px solid transparent;
font-size: 12px;
font-weight: 700;
line-height: 1;
padding: 0;
transition: filter 120ms ease, opacity 120ms ease, transform 120ms ease;
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16);
}
.execution-graph-action-button:hover:not(:disabled) {
transform: translateY(-1px);
}
.execution-action-button mat-icon {
font-size: 20px;
width: 20px;
height: 20px;
line-height: 20px;
}
.execution-action-button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.execution-action-button-play {
background: #15803d;
border-color: #166534;
color: #ffffff;
}
.execution-action-button-play:hover:not(:disabled) {
filter: brightness(1.1);
}
.execution-action-button-stop {
background: #dc2626;
border-color: #b91c1c;
color: #ffffff;
}
.execution-action-button-stop:hover:not(:disabled) {
filter: brightness(1.08);
}
.execution-action-button-resume {
background: #4f46e5;
border-color: #4338ca;
color: #ffffff;
}
.execution-action-button-resume:hover:not(:disabled) {
filter: brightness(1.1);
}
.execution-action-button-simulate {
background: #0c4a6e;
border-color: #075985;
color: #e0f2fe;
}
.execution-action-button-simulate:hover:not(:disabled) {
filter: brightness(1.1);
}
.execution-rete-readonly {
pointer-events: auto;
}

88
src/app/shared/task-execution-viewer/task-execution-viewer.html
View File

@ -2,8 +2,8 @@
@if (execution()) {
<div class="h-full bg-white border border-slate-200 rounded-md flex flex-col overflow-hidden">
<div class="px-5 pt-2 border-b border-slate-200 bg-slate-50">
<div class="flex items-stretch justify-between gap-3">
<div>
<div class="execution-header-main">
<div class="execution-header-details">
<h2 class="text-base font-semibold text-slate-900">{{ execution()!.name }}</h2>
<p class="text-sm text-slate-500">Execution ID: {{ execution()!.id }}</p>
@if (isSimulatedExecution()) {
@ -13,46 +13,6 @@
}
}
</div>
<div class="flex items-stretch gap-2">
@if (execution()!.simulationAvailable === true) {
<button
type="button"
class="self-stretch h-full rounded-md border border-sky-300 bg-sky-50 px-3 text-sky-700 hover:bg-sky-100 disabled:opacity-40 disabled:cursor-not-allowed"
matTooltip="Simulate execution"
aria-label="Simulate execution"
[disabled]="!canSimulateExecution()"
(click)="simulateExecution()">
Simulate
</button>
}
<button
type="button"
class="self-stretch h-full rounded-md border border-violet-300 bg-violet-50 px-3 text-violet-700 hover:bg-violet-100 disabled:opacity-40 disabled:cursor-not-allowed"
matTooltip="Resume execution"
aria-label="Resume execution"
[disabled]="!canResumeExecution()"
(click)="resumeExecution()">
Resume
</button>
<button
type="button"
class="self-stretch h-full w-10 rounded-md border border-rose-300 bg-rose-50 text-rose-600 hover:bg-rose-100 disabled:opacity-40 disabled:cursor-not-allowed"
matTooltip="Cancel execution"
aria-label="Cancel execution"
[disabled]="!canCancelExecution()"
(click)="cancelExecution()">
<mat-icon fontIcon="stop"></mat-icon>
</button>
<button
type="button"
class="self-stretch h-full w-10 rounded-md border border-emerald-300 bg-emerald-50 text-emerald-600 hover:bg-emerald-100 disabled:opacity-40 disabled:cursor-not-allowed"
matTooltip="Start execution"
aria-label="Start execution"
[disabled]="!canStartExecution() || startInProgress()"
(click)="startExecution()">
<mat-icon fontIcon="play_arrow"></mat-icon>
</button>
</div>
</div>
</div>
@ -90,9 +50,49 @@
</div>
}
<div class="flex-1 min-h-0 flex gap-2 p-1">
<div class="flex-1 border border-slate-200 rounded-md bg-slate-50 min-h-0 overflow-hidden">
<div class="execution-graph-shell flex-1 border border-slate-200 rounded-md bg-slate-50 min-h-0 overflow-hidden">
<div class="px-3 py-2 text-xs font-semibold text-slate-600 border-b border-slate-200 bg-white">Execution Graph (read-only)</div>
<div class="h-[calc(100%-33px)] execution-rete-readonly">
<div class="execution-graph-body h-[calc(100%-33px)] execution-rete-readonly">
<div class="execution-graph-actions">
<button
type="button"
class="execution-action-button execution-graph-action-button execution-action-button-play"
matTooltip="Start execution"
aria-label="Start execution"
[disabled]="!canStartExecution() || startInProgress()"
(click)="startExecution()">
<mat-icon fontIcon="play_arrow"></mat-icon>
</button>
<button
type="button"
class="execution-action-button execution-graph-action-button execution-action-button-stop"
matTooltip="Cancel execution"
aria-label="Cancel execution"
[disabled]="!canCancelExecution()"
(click)="cancelExecution()">
<mat-icon fontIcon="stop"></mat-icon>
</button>
<button
type="button"
class="execution-action-button execution-graph-action-button execution-action-button-resume"
matTooltip="Resume execution"
aria-label="Resume execution"
[disabled]="!canResumeExecution()"
(click)="resumeExecution()">
<mat-icon fontIcon="restart_alt"></mat-icon>
</button>
@if (execution()!.simulationAvailable === true) {
<button
type="button"
class="execution-action-button execution-graph-action-button execution-action-button-simulate"
matTooltip="Simulate execution"
aria-label="Simulate execution"
[disabled]="!canSimulateExecution()"
(click)="simulateExecution()">
<mat-icon fontIcon="science"></mat-icon>
</button>
}
</div>
<app-rete-editor
[flowId]="execution()!.id"
[flowData]="executionFlowData()"